Web & Frontend
Web development agent skills handle frontend and full-stack work: component patterns, CSS and accessibility fixes, performance budgets, and framework conventions. Install a skill once and your AI agent follows the same playbook in every project, from quick prototypes to production apps.
-
angular-sanctuary Bundle Angular MaterialAngular Material UI component library based on Material Design 3
-
anthonypalicea Bundle De DivAuthor semantic, accessible HTML and keep "div soup" (meaningless <div>/<span>) out of the DOM — in two modes. EDIT mode de-divs existing markup (a codebase, page, component, or template), turning divs/spans into real semantic elements while preserving the visual appearance. CREATE mode rides along while you write new markup, steering it toward semantic elements from the start. Works on anything that produces DOM — HTML, JSX/TSX, Vue, Svelte, Astro, Angular templates, PHP, Express, etc. In both modes the skill does the work, acts as a thinking partner on ambiguous cases, accounts for default element styling, and ends with an educational report teaching the user to be a good HTML author. Use whenever the user wants to remove or reduce divs/spans, "de-div" or "clean up div soup" their markup, make HTML more semantic or accessible, replace div/span with real elements, audit markup for semantics, OR wants to create/scaffold/build a new page, component, or template and have the markup come out semantic and accessi
-
anthonypalicea Skill Do I Understand The UXExamines whether a developer or designer understands the user experience consequences of a merge request or commit before it ships, especially when an AI agent wrote the change. It interviews the author rather than critiquing the design: tracing each user-facing change to the problem it solves, the people it lands on, and the effects it has on their experience. Use whenever someone is about to open, submit, review, or merge a PR, branch, commit, or diff that touches anything users see, read, click, or navigate (components, flows, routes, copy, forms, defaults, error handling, accessibility semantics), or wants to be accountable for the UX implications of a change before shipping it.
-
apache Bundle Maka Architecture DocsDraft, restructure, translate, or review bilingual Chinese-English architecture documentation for the Maka Agent backend. Use when Codex works on Maka technical narratives, component or mechanism explanations, architecture decisions, system flows, engineering guides, or documentation quality checks and needs blog-like clarity without losing architectural precision. Do not use it to impose a fixed topic list or information architecture unless the user asks for one.
-
apache Bundle Osgi Scr MigratorMigrate OSGi-based Java projects from deprecated Felix SCR annotations to official OSGi R6/R7 Component annotations. Use when migrating legacy OSGi bundles that use @Component, @Service, @Reference, @Property from org.apache.felix.scr.annotations to org.osgi.service.component.annotations. Handles both Java source code transformation and Maven POM updates (removing maven-scr-plugin, updating dependencies). Also supports Sling-specific annotations like @SlingServlet and @SlingFilter. Features full automation of property migration, metatype configuration generation, constructor injection optimization, validation, and comprehensive reporting. After basic migration, offers optional Step 7 to optimize code with constructor injection for immutable dependencies.
-
apostl-dev Bundle Agent Traffic AnalyticsRoute, install, and verify Apostl Pulse server-side analytics for public AI-agent traffic using the Cloudflare Worker or server SDK. Use when someone asks how many AI agents visit a website, docs, API, llms.txt, Markdown, or other public pages; wants per-page agent analytics; wants Pulse on Cloudflare, Express, Next.js, or another server; or wants an agent to self-register through Auth.md, finish setup, and hand the owner one account claim.
-
arcocodes Bundle Investment Research AgentRuns long-form multi-agent investment research in Codex or Claude/Cowork through staged intermediate artifacts instead of one-shot output. Use for deep company, industry, theme, or thesis reports that separate sell-side logic extraction from primary validation and produce professional Markdown and HTML deliverables.
-
arcocodes Bundle Investment VisualizationDesigns and reviews editorial-grade evidence-led visual specifications rendered by controlled React report components. Use when an investment report needs financial data journalism, valuation or scenario graphics, supply-demand charts, company comparisons, mechanism diagrams, or a visual-quality review.
-
aresbit Bundle Browser Playback Align NodeBrowser-first web playback alignment skill. Use when reproducing or debugging `tv.cctv.com` playback, worker decrypt, transmux, `moduleDecData`, `vmptag`, or local Node playback, including when the user provides a page URL such as `https://tv.cctv.com/...shtml`. This skill requires opening the real page with Chrome DevTools MCP first, tracing the exact browser playback and decrypt path, saving the flow locally, getting user confirmation on that flow, then reproducing it in Node only with `jsdom` for environment shims and `ffmpeg`/`ffprobe` for validation. Do not use HTML players. Do not invent browser environment fields or request flows without browser evidence.
-
azmym Bundle SlackInteract with Slack via the Web API. Read, summarize, search, post messages, react, pin, and manage channels. Use when the user (1) shares a Slack URL, (2) asks to read or summarize a channel, (3) searches Slack messages, (4) asks to send/post a message, (5) asks to react to or pin a message, (6) looks up a user, or (7) mentions a Slack channel by name (e.g., "#channel-name"). Also triggers for Slack threads, daily standups, conversation digests, or any Slack interaction.
-
modem-dev Skill Sideshow TermDraw live terminal visualizations to the user's sideshow-term surface — bordered diagrams, dashboards, big ASCII headings, styled text, lists — using STML (a small HTML-like markup that renders via opentui). Use when the user asks you to illustrate, visualize, sketch, or show something in the terminal, mentions sideshow-term, or when a richer visual would explain your work better than plain output.
-
moeru-ai Bundle Use Docker Buildx For BuildingUse when building or validating Docker images for repository components with Docker Buildx, especially when the Dockerfile, build context, target platforms, image namespace, component name, or runtime smoke check must be determined from the current repository.
-
mohebifar Bundle Test Surgical Dom UpdatesAdd or review Vidact end-to-end browser-corpus coverage using React-shaped TSX mini apps compiled by the Vidact Vite plugin, with MutationObserver envelopes and DOM node identity proving surgical updates. Use when changing compiled bindings, component prop bridges, conditional ranges, keyed arrays, refs, direct DOM rendering, or when a test must distinguish an in-place update from remounting or unrelated DOM churn.
-
mohebifar Bundle Manage Patched Oxc SubmoduleMaintain Vidact's pinned Oxc submodule and owned git-go-patch series. Use when adding or editing Oxc React Compiler patches, preparing the checkout, reviewing the effective fork, or syncing vendor/oxc to a newer upstream revision.
-
molefrog Bundle ShadcnManages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI. Provides project context, component docs, and usage examples. Applies when working with shadcn/ui, component registries, presets, --preset codes, or any project with a components.json file. Also triggers for "shadcn init", "create an app with --preset", or "switch to --preset".
-
mozilla-ai Bundle Frontend StandardsGuidelines for the otari admin dashboard (`web/`), React 19 + TypeScript (strict) + HeroUI v3 + Tailwind v4 + TanStack Query. Use when writing or reviewing dashboard components, styling, data fetching, or tests.
-
mukiwu Skill Tauri Security ReviewExpert workflow for reviewing Tauri 2 desktop app security. Covers capabilities/permissions least-privilege, IPC trust boundary, command input validation, CSP, scope restriction, isolation pattern, and frontend-side hygiene.
-
mukiwu Skill Tauri Performance ReviewExpert workflow for reviewing Tauri 2 desktop app performance. Covers IPC payload optimization, async command efficiency, state lock contention, large-data streaming via Channel/Response, frontend bundle size, and startup time.
-
nanocodana Bundle Scaffold ComponentScaffold a new React component (tsx + test + index) from a name
-
nativephp Skill Pest TestingUse this skill for Pest PHP testing in Laravel projects only. Trigger whenever any test is being written, edited, fixed, or refactored — including fixing tests that broke after a code change, adding assertions, converting PHPUnit to Pest, adding datasets, and TDD workflows. Always activate when the user asks how to write something in Pest, mentions test files or directories (tests/Feature, tests/Unit, tests/Browser), or needs browser testing, smoke testing multiple pages for JS errors, or architecture tests. Covers: test()/it()/expect() syntax, datasets, mocking, browser testing (visit/click/fill), smoke testing, arch(), Livewire component tests, RefreshDatabase, and all Pest 4 features. Do not use for factories, seeders, migrations, controllers, models, or non-test PHP code.
-
nativephp Bundle Nativephp MobileBuilds fully native iOS and Android apps with PHP & Laravel. Activate when working with SuperNative screens (NativeComponent, Route::native, native:make), EDGE components (native:column, native:button, native:list, bottom-nav, top-bar, and 40+ more), NativeLayout chrome, native:model data binding, #[Computed]/#[Poll]/#[On] attributes, Native::test() component tests, native device APIs (camera, dialog, biometrics, scanner, geolocation, push notifications), NativePHP Artisan commands (native:run, native:install, native:watch, native:jump), deep links, secure storage, or mobile app deployment.
-
nestix6 Bundle Web DesignDesign and build websites and web interfaces with a deliberate visual point of view. Use when creating or redesigning a landing page, dashboard, form, web app screen, component, or artifact, or when asked to style, polish, or improve existing web UI. Produces working code whose design choices trace to the project rather than to generic AI defaults, then verifies breakpoints, interaction states, and accessibility before handing off.
-
newrelic Bundle Version Bump AnalysisAnalyzes OpenTelemetry Collector component version bumps and compiles a markdown summary of relevant changes (breaking changes, deprecations, bug fixes) from the upstream CHANGELOG files. Only includes changes for components used in the nrdot releases repo. Outputs a formatted comment ready to paste into a GitHub PR.
-
ngvoicu Skill Specmint Tdd HTMLTDD-first spec management for AI coding workflows, producing canonical SPEC.html files with red-green-refactor state. Use this companion when the user explicitly mentions specs, forging, structured planning, resume/status, implementing a spec, red-green-refactor, or running tests. Do NOT trigger on ordinary coding tasks that do not ask for spec management.
-
ngvoicu Skill Specmint Core HTMLPersistent spec management for AI coding workflows, producing canonical SPEC.html files. Use this companion when the user explicitly mentions specs, forging, structured planning, resume/status/pause/switch, implementing a spec, or generating OpenAPI docs. Do NOT trigger on ordinary coding tasks that do not ask for spec management.
-
nobodywho-ooo Skill ReleasePrepare a release of one or more nobodywho language bindings — draft per-binding changelogs from git history, propose semver bumps with rationale for approval, bump all version files and lockfiles, snapshot Docusaurus docs, and stage everything for the user to tag and push. Use when the user asks to release, publish, cut a release, or bump versions for any binding (Python, Godot, Flutter, Kotlin, Swift, React Native).
-
nobodywho-ooo Skill NobodywhoUse when someone wants to run LLMs locally, keep AI inference private or offline, add local AI to an application, or use the NobodyWho Library. NobodyWho allows you to run inference for GGUF models (and non GGUF as well!). This includes chat, streaming, tool calling, structured output, embeddings, reranking, speech to text, text to speech, and vision across Kotlin, Python, Swift, React Native, Flutter, and Godot.
-
nobodywho-ooo Skill Build IntegrationsWire up a finished core Rust feature across all nobodywho language bindings, regenerate all generated files, and verify everything passes CI checks. Use when the user asks to build, propagate, or integrate a feature (e.g. TextToSpeech, SpeechToText, Encoder) across Python, Godot, Flutter, Swift, Kotlin, or React Native.
-
nogataka Bundle Slidekit TemplConvert PDF presentations to HTML slide templates using a visual reproduction approach. Pipeline: PDF → slide screenshots → Claude writes HTML matching each screenshot. Use when the user wants to convert a PDF to HTML slide templates, reproduce a presentation as HTML, or create reusable templates from existing decks. Triggers: 'pdf to html', 'convert pdf to template', 'reproduce this deck as html', 'create template from pdf'.
-
carlosvin Skill Reference Tech StackCompanion to tanstack-promptable-fullstack-app-template. Documents this template's opinionated vendor choices — Zod, Mantine, lucide-react, MongoDB + seed, jose JWT auth, OpenAI adapter, pino + Sentry, react-markdown, Biome, Vitest, Playwright, Netlify — so agents implement against the reference app without baking those choices into the architecture skill. Companion skills: tanstack-promptable-fullstack-app-template (parent), observability-and-env (companion). Install missing companions with npx skills add carlosvin/tanstack-fullstack-ai-template --skill <id>. Project: TanStack AI-Promptable Full-Stack Template. Triggers on "reference tech stack", "opinionated stack", "which UI library", "use Mantine", "use Zod", "MongoDB repository", "lucide icons", "Biome lint", "Netlify deploy", "template defaults", "stack choices", "AppShell", "Mantine navbar".
-
charlesroper Bundle Maintainable CSSApply the MaintainableCSS methodology to plan, refactor, and review CSS and markup. Use when a user asks for scalable CSS architecture, semantic class naming, module/component/state/modifier conventions, lower-regression refactors, or migration away from utility/visual class patterns.
-
chenyuxiaojin Skill Cyxj Remotion OverlayRemotion 出片的私有规则叠加层。用户用 Remotion、React 视频、口播叠加图形、Sequence、spring、interpolate 做视频时使用。必须叠加官方 Remotion skill,不替代官方 skill。
-
chongdashu Bundle Playwright TestingPlan, implement, and debug frontend tests: unit/integration/E2E/visual/a11y. Use for Playwright MCP browser automation, Vitest/Jest/RTL, flaky test triage, CI stabilization, and canvas/WebGL games (Phaser) needing deterministic input plus screenshot/state assertions. Trigger: "test", "E2E", "flaky", "visual regression", "Playwright", "game testing".
-
choral-io Bundle Markitdown CLIUse when converting local document files such as PDFs, Office documents, HTML, text, or other MarkItDown-supported inputs into Markdown.
-
cmu-sei Skill Storybook Guidelines**PRIMARY SKILL FOR CREATING AND UPDATING STORYBOOK STORIES** — Guidelines and best practices for writing Storybook story files for Vue 3 components. USE FOR: - Creating new .stories.js files for components - Modifying existing story files - Understanding story structure, argTypes, and templates - Adding variants, actions, and controls to stories DO NOT USE FOR: - Writing or modifying component .vue files (use components-guidelines) - Writing or improving unit tests (use unit-testing-guidelines) WHEN TO COMBINE: Load components-guidelines if you need to understand a component's props, emits, and slots to write its stories.
-
cmu-sei Skill Components Guidelines**PRIMARY SKILL FOR CREATING AND UPDATING COMPONENTS** — Guidelines and best practices for writing and modifying Vue 3 components. USE FOR: - Creating new .vue component files - Modifying existing component implementation - Understanding component structure, props, emits, defineModel - Questions about how components should be architected DO NOT USE FOR: - Writing or improving unit tests (use unit-testing-guidelines) - Understanding testing patterns or assertions WHEN TO COMBINE: Load unit-testing-guidelines if you're adding a new component and need to write tests for it.
Frequently asked questions
What are Web & Frontend agent skills?
Web development agent skills handle frontend and full-stack work: component patterns, CSS and accessibility fixes, performance budgets, and framework conventions. Install a skill once and your AI agent follows the same playbook in every project, from quick prototypes to production apps.
Which Web & Frontend skills are most installed?
Popular Web & Frontend skills on SkillMD right now include angular-material, de-div, do-i-understand-the-ux. Rankings shift as installs change; sort this page by "Most installs" for the live list.
Do Web & Frontend skills work with Claude Code and Cursor?
Yes. Every skill here ships as a SKILL.md file, an open format that works in Claude Code, Claude.ai, Cursor, Codex, Windsurf, and 60+ other agents. Install one with npx skillmds@latest add <owner>/<name>, or copy the file into your agent's skills directory.