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.
-
wukongnotnull Bundle Product Design Image To CodeImplement a selected image, screenshot, mockup, or Image Gen reference as a faithful, responsive frontend.
-
dcl-regenesislabs Skill Game DesignPlan and design Decentraland games and interactive experiences. Scene limit formulas, performance budgets, texture requirements, asset preloading, state management patterns (module-level, component-based, state machines), object pooling, UX/UI guidelines, input design, and MVP planning. Use when the user wants game design advice, scene architecture, performance planning, or help structuring a game. Do NOT use for specific implementation (see add-interactivity, build-ui, multiplayer-sync).
-
dcl-regenesislabs Skill Audio AnalysisRead real-time amplitude and 8-band frequency data from any AudioSource, AudioStream, or VideoPlayer entity in a Decentraland SDK7 scene with the AudioAnalysis component. Renderer fills the component each frame; scenes copy values into a plain JS view via readIntoView/tryReadIntoView and drive entity scale, color, lights, materials, particles, or UI from amplitude (overall loudness) and bands[0..7] (low→high frequency bins). Use when the user asks for music visualizers, beat reactivity, audio-reactive scenes, equalizers, dancing lights, scaling cubes that pulse to music, audio-driven materials, or anything that should react to sound. Do NOT use to play sound (see audio-video) or to detect player-emitted audio (this reads only entity-attached AudioSource/AudioStream/VideoPlayer audio).
-
dcl-regenesislabs Skill Particle SystemEmit particles (fire, smoke, sparks, snow, magic, fireworks) from an entity in a Decentraland SDK7 scene with the ParticleSystem component. Covers emitter shapes (Point, Sphere, Cone, Box), continuous rate vs Burst emission, lifetime/size/color/velocity ranges, gravity and additionalForce, blend modes (ALPHA/ADD/MULTIPLY), billboard and faceTravelDirection, sprite-sheet texture animation, simulation space (local vs world), playback state, and per-scene particle budget. Use when the user asks for particles, sparks, fire, smoke, dust, fog, fireworks, magic effects, snowfall, rain, embers, trails, or atmospheric effects. Do NOT use for procedural entity motion (see animations-tweens), GLTF model effects (see add-3d-models), or 2D UI effects (see build-ui).
-
efeumutaslan Bundle Sap Fiori TestingSAP Fiori/UI5 testing, accessibility, and modern UI skill. Use when writing wdi5 E2E tests, OPA5 integration tests, implementing WCAG 2.1 accessibility, using UI5 Web Components, or migrating UI5 to TypeScript. If the user mentions wdi5, OPA5, Fiori test, UI5 accessibility, WCAG, or UI5 TypeScript migration, use this skill.
Audited -
gongyijie85 Skill Improve Codebase Architecture扫描代码库寻找 deepening(加深)机会,将其呈现为可视化 HTML 报告,然后对你选中的那一项进行 grilling(拷问)式深入探讨。
-
m1nga Bundle GrillingInterview the user relentlessly about a plan or build, then produce a locked, scoped plan before any execution. Trigger when the user explicitly asks to be questioned or stress-tested — "grill me on this plan", "poke holes in this before I build it", "interview me until this is fully scoped", "ask me everything you need before writing code", "don't let me start until the plan is tight"; Chinese triggers — 拷问我 / 盘问这个方案 / 开工前把我问透 / 先问清楚再动手. Also trigger for an explicit build the user wants scoped through questioning before execution — only when they show willingness to answer questions. Do NOT trigger on delegation or authorization phrases ("just do it", "you decide", "你看着办") — those grant execution, not an interview. For lightweight feedback on a plan, or open-ended thinking with no concrete build to scope, yield to the thinking-partner skill. NOT for mock interviews or quiz practice ('grill me on React questions').
-
matis-dev Bundle Design ArchitectLoad before creating, redesigning, auditing, polishing, or studying any user-facing surface — a screen, page, component, form, empty state, or visual system — and before shipping a UI-visible change. Produces a direction brief before code (structure, palette, type pairing, signature moment), then holds the built result to the craft floor and the refuse list.
-
matis-dev Bundle Testing ArchitectLoad when writing or reviewing unit, integration, end-to-end, visual, or accessibility tests. Owns layer selection, placement, naming, mocking discipline, coverage targets, security-regression TDD cases, the green-but-lying traps, and theme-matrix visual and a11y patterns. Frameworks and commands come from the Project Profile.
-
matis-dev Bundle Planning ArchitectUse to turn a refined idea or Deep-Dive Execution Prompt into an implementation plan before any non-trivial change. Produces the fixed-shape plan — files, reused utilities, direction brief and design notes, [VISUAL]/[SEC]/[A11Y] tags, tests from testing-architect, per-step model routing, real verification commands, a confirmation gate. Writes no code.
-
matis-dev Bundle Accessibility ArchitectLoad before building a modal, menu, combobox, tab set, drag interaction, async status, or route change, when an accessibility scan needs interpreting, or when a conformance read is asked for. Produces the accessible contract — name, role, keyboard map, focus on open and on close, announcement — and a banded verdict. WCAG 2.2 AA by default.
-
nextstage-brasil Bundle Ns Best Practices(NS) Security/compat/a11y + Vercel Web Interface Guidelines. Use when hardening security, fixing CSP/CORS/headers, reviewing UI / checking a11y / auditing UX, or Web Interface Guidelines — even without saying "best practices"; also ns-proto-creator close-out. Do NOT use for MR/SOLID (ns-reviewer), visual redesign (ns-frontend-design), or features (ns-coder / ns-spec-driven).
-
nextstage-brasil Bundle Ns Gitlab CI Generator(NS) Generate and adapt .gitlab-ci.yml for SaaS products with backend and frontend — test, build, E2E gate, deploy by branch. Use when the user asks for GitLab CI, pipeline setup, or CI/CD bootstrap for a monorepo product. Uses references/templates/gitlab-ci.template.yml as baseline. Out of scope for pure agent-runtime repos without backend+frontend layout.
-
nijanthan-dev Bundle Taxmate Australia TaxpackUse when the user needs TaxMate Australia accountant handoff packs, source bundles, manual-copy guidance, or print-first HTML handoff setup.
-
nijanthan-dev Bundle Taxmate Australia Individual ReturnUse when the user wants a TaxMate Australia individual return prep pack, broad individual tax checklist, or full-runtime HTML handoff setup.
-
pyramidheadshark Bundle Htmx FrontendHTMX Frontend
-
zrozoom Skill Frontend SystemUI/UX expert. Use for creating components, styling (Tailwind), accessibility, and translations (I18n). Trigger when: create a component, change appearance, add a chart, translate, stwórz komponent, zmień wygląd, dodaj wykres, przetłumacz.
-
acquia Skill Canvas RegionsUse for any task touching site chrome — header, footer, sidebar, or global navigation that repeats across pages — and for any region-spec work (create, modify, review, validate region JSON, or the project-level layout component). Also load when a task creates or edits multiple pages that share chrome, or asks for a "site" or "navigation between pages"; shared chrome belongs in regions, never inlined into page JSON.
-
acquia Bundle Canvas WorkbenchUse when work must be verified in local Canvas Workbench, or when the user asks to run, open, check, or author component mocks or page previews in Workbench. Verifies that Canvas Workbench is available through the project's package runner, starts the local Workbench dev server, and keeps Workbench verification as part of the implementation workflow.
-
acquia Skill Canvas Component PushPush validated Canvas component changes to Drupal Canvas and recover from common push failures. Use only when the user explicitly requests a push/publish/sync action. Handles dependency-related push failures that require retry.
-
acquia Skill Canvas Component UtilsUse utility components to render formatted text and media correctly. Use when (1) Rendering HTML text content from props, (2) Displaying images, (3) Working with formatted text or media. Covers FormattedText and Image utilities.
-
acquia Skill Canvas Content TemplatesCreate and modify content templates that map Drupal content entities to Canvas component layouts. Use when asked to (1) Create a new content template, (2) Modify an existing content template, (3) Add or change entity field mappings in a template, (4) Compose components in a content template via slots. Content templates live in the configured `contentTemplatesDir` (default `content-templates/`) and define how Drupal entity types, bundles, and view modes render as Canvas component trees.
-
acquia Skill Canvas Component MetadataDefine valid component.yml metadata for Canvas components, including props, slots, and enums. Use when (1) Creating a new component, (2) Adding or modifying props, (3) Troubleshooting "not a valid choice" or prop type errors, (4) Mapping enums to CVA variants.
-
acquia Skill Nebula Component CreationCreate React components by copying and modifying examples from `examples/components/`. Use when asked to (1) Create, add, or build a new component, (2) Copy an example component to `src/components/`, (3) Add a component with dependencies. Handles dependency resolution and ensures each component has `index.jsx` and `component.yml`.
-
acquia Skill Nebula Node Page ScaffoldScaffolds Canvas UI for individual Drupal node pages (single-entity detail views) via components, component.yml, and one example pages/ spec—not list or index views. Does not wire those detail pages through remote APIs, Source MCP, or per-node page creation. Use for article/product/event detail templates, one-node screens, and “skip API/MCP page assembly for each node”; do not use this skill for blog grids, search results, or other list UIs.
Audited -
acquia Skill Canvas Styling ConventionsStyle Canvas components with Tailwind CSS 4 theme tokens and approved utility patterns. Use when (1) Creating a new component, (2) Adding colors or styling to components, (3) Working with Tailwind theme tokens, (4) Adding or updating design tokens in global.css, (5) Creating color/style props, (6) Any change where component props are added/removed/renamed/retyped and can affect rendered styles. Covers @theme variables, CVA variants, and cn() utility.
-
acquia Bundle Nebula Visual VerificationFocused visual QA for changed Canvas components and pages in local Canvas Workbench. Use only when the user explicitly asks for visual verification, visual QA, or Workbench rendering review of a changed component or page.
Audited -
acquia Bundle Canvas Component DefinitionStart here for any React component task to enforce the canonical Canvas component contract. Use for create, modify, refactor, review, migrate, or validate work. Establishes the canonical Canvas component contract, assuming repository components are Canvas targets, and guides either (1) transforming existing components to meet Canvas requirements or (2) creating new Canvas-ready components.
-
acquia Skill Nebula Component ValidationValidate components after creating or modifying components, and after page work that changes rendered output, before considering work complete. Runs `npm run code:fix` for static validation.
-
acquia Skill Acquia Source Navigation MenusAcquia Source only. Create and edit Drupal menus in the CMS via Source MCP. Do not use for non-Source sites; production nav should still be authored in Drupal, not only in component code.
-
acquia Bundle Canvas Component ComposabilityDesign Canvas-ready React components with slots and decomposition-first patterns. Use when (1) Designing a component's prop/slot structure, (2) A component is growing too large, (3) Deciding between props vs slots, (4) Refactoring monolithic components, (5) Modeling repeatable list/grid content, (6) Reusing, composing, or wrapping existing workspace components. Ensures Canvas compatibility.
-
agent0ai Skill DevelopmentBuild new browser modules in the layered Space Agent runtime and use the extension, component, and Alpine store patterns correctly.
Audited -
agent0ai Bundle PDF ReportCreate and download browser-generated PDFs from structured data or HTML
-
agent0ai Skill Frontend RuntimeEditable frontend runtime rules for framework pages, stores, shared runtime namespaces, and reusable visual patterns.
-
agent0ai Skill Layers And OwnershipUnderstand L0 or L1 or L2 placement, group and user structure, permissions, and layered override order before storing or overriding frontend assets.
-
agent0ai Skill Backend ReferenceRead-only reference for the backend contracts that the frontend depends on, including routing, APIs, auth, layers, and module resolution.
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 sap-fiori-testing, planning-architect, taxmate-australia-individual-return. 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.