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.
-
commercengine Bundle Ce AIWebMCP agent tools for Commerce Engine storefronts using @commercengine/ai. Exposes catalog search, product/variant lookup, real cart mutations, navigation, and session state to browser AI agents via document.modelContext, across React SPA, Next.js, Astro, SvelteKit, and TanStack Start. Covers registration lifecycle and cancellation, capability gating, and resolving CMS slugs in both directions.
-
commercengine Bundle Ce Ssr PatternsSSR/meta-framework patterns for Commerce Engine using @commercengine/storefront. Covers Next.js, TanStack Start, Astro, and SvelteKit with publicStorefront(), clientStorefront(), serverStorefront(), bootstrap, server functions/actions, pre-rendering, and cookie-based token management.
-
connect0459 Skill TS Solidjs ReviewPerforms SolidJS code review covering both SolidJS-specific reactivity and general design concerns. Always trigger when asked to review SolidJS code or when `.tsx`/`.jsx` files with SolidJS patterns are presented for review. Trigger on phrases like "review this component", "check my Solid code", "any issues here?", or "SolidJSのコードを見て". Distinguish from React: trigger when `createSignal` / `createEffect` / `createStore` / `<For>` or other SolidJS-specific APIs are visible. Do NOT trigger for React-only code (useState, useEffect without SolidJS APIs).
-
conorluddy Skill Swift Accessibility AgentSwift Accessibility Agent
-
cylixlee Bundle Vuetify 4Build Vue 3 applications with Vuetify 4 component library. Use when creating new Vuetify 4 projects, adding UI components, layouts, forms, or theming. Assumes environment is already configured with Vuetify 4.
-
iotron Bundle Gsap TextProduction recipes for GSAP text animations using SplitText and ScrambleTextPlugin. Companion to official gsap-plugins skill (API reference). Triggers: SplitText, split text, text animation, word animation, scramble text, ScrambleTextPlugin, text reveal, masked text, clip reveal, word stagger, text stagger, character animation, char split, kinetic text, elastic type, text decode, terminal text, cyber text, glitch text, chainTextReveal, useReveal text, GSAP text, Vue text animation, Nuxt text animation. Non-triggers: Not for scroll-driven animation without text (use gsap-scroll), mouse interactions (use gsap-interact), SVG animation (use gsap-svg), or general visual effects (use gsap-vfx). Outcome: Produces text animations — masked word reveals, scramble decodes, kinetic splits, and the useReveal composable API.
-
iotron Bundle Gsap SetupProduction recipes for GSAP setup and configuration for any framework — Vue 3, Nuxt 3, React, or Next.js. Detects framework from project files and provides the correct setup pattern. Companion to official gsap-core and gsap-frameworks skills (API reference). Triggers: GSAP setup, GSAP install, gsap plugin, GSAP Nuxt, GSAP Vue setup, GSAP React setup, GSAP Next.js setup, gsap config, GSAP accessibility setup, reduced motion setup, animation project setup, useGSAP, gsap registerPlugin. Non-triggers: Not for animation patterns (use gsap-animate), ScrollTrigger (use gsap-scroll), text effects (use gsap-text), or performance tuning (use gsap-optimise). Outcome: Produces a working GSAP plugin/provider with registered plugins, effects, global defaults, and accessibility setup.
-
iotron Bundle Gsap ScrollProduction recipes for scroll-based GSAP animations. Companion to official gsap-scrolltrigger skill (API reference). Triggers: ScrollTrigger, scroll animation, scroll reveal, parallax, sticky cards, stacking cards, scrub, pin section, batch reveal, masonry reveal, scroll progress, timeline scrub, elastic type, section switching, ScrollTrigger.batch, ScrollTrigger.create, scroll refresh, scroll cleanup, GSAP scroll, Vue scroll animation, Nuxt scroll animation. Non-triggers: Not for mouse-driven interactions (use gsap-interact), text effects (use gsap-text), SVG path drawing (use gsap-svg), or visual effects (use gsap-vfx). Outcome: Produces scroll-triggered animations — reveals, batch staggers, parallax layers, pinned sections, and scrubbed timelines.
-
iotron Bundle Gsap AnimateProduction recipes for core GSAP animation orchestration. Provides foundational patterns and dispatches to specialised sub-skills based on animation type. Companion to official gsap-frameworks and gsap-timeline skills (API reference). Triggers: GSAP animation, gsap.to, gsap.from, gsap.context, ctx.add, Vue GSAP, Nuxt GSAP, animation pattern, component animation, section animation, layout animation. Non-triggers: Not for initial GSAP installation/setup (use gsap-setup). Not for specific pattern implementation — dispatches to sub-skills instead. Outcome: Provides foundational animation patterns (context, cleanup, composables, autoAlpha, matchMedia) and dispatches to the correct sub-skill based on animation type.
-
iotron Skill Gsap OptimiseProduction recipes for GSAP performance optimisation. Apply after building animations (gsap-animate) to audit and improve performance. Companion to official gsap-performance skill (API reference). Triggers: GSAP performance, animation optimise, animation slow, jank, 60fps, memory leak, tween cleanup, force3D, will-change, quickTo, quickSetter, overwrite, layout thrashing, GPU compositing, animation audit, gsap optimise, animation performance review. Non-triggers: Not for building new animations (use gsap-animate and sub-skills). Not for testing (use gsap-test). Apply this skill AFTER animations are built. Outcome: Audits and improves existing GSAP animations for 60fps — GPU acceleration, high-frequency tools, anti-patterns, and a component-level performance checklist.
-
jiaiyan Skill Shaka Player UI CustomizationCustomizes Shaka Player UI including controls, localization, and accessibility. Invoke when user needs to customize player appearance or add custom controls.
8 -
joshsymonds Skill Working On WebSvelteKit frontend development conventions for Savecraft. Use when working on files in web/, including Svelte components, pages, stores, Storybook stories, or frontend tests. Triggers on SvelteKit code, Svelte components, Storybook, web UI, dashboard, onboarding, or frontend screenshots.
-
joshsymonds Skill Working On ViewsMCP Apps view development for Savecraft. Use when creating or modifying interactive views rendered in MCP host iframes (Claude, ChatGPT). Triggers on Svelte view components, Storybook stories, the view build pipeline, bridge code, or MCP Apps resource handling. Use when working on files in views/, worker/src/mcp/views/, plugins/*/reference/views/, or when adding viewResult() responses to tools.
-
jovd83 Bundle Junit5 SkillUse when Codex needs to create, run, evaluate, debug, correct, modernize, document, or route JUnit 5 tests and related workflows across component, integration, slice, repository, service, regression, smoke, and migration scenarios.
-
jovd83 Bundle Junit5 CoreUse when Codex needs to create, run, debug, evaluate, refactor, or correct JUnit 5 tests across component, integration, slice, repository, service, smoke, or regression scenarios.
-
jovd83 Bundle Junit5 ArchitectureUse when Codex needs to shape or refactor JUnit 5 suite architecture, test package structure, naming, fixture ownership, reuse patterns, or boundaries between component, integration, and service tests.
-
joyco-studio Skill Joyco LabUse this skill whenever the user wants to isolate a piece of code, animation, or 3D experiment into a standalone JOYCO Lab experiment and publish it. Triggers include: "isolate this", "publish this to the lab", "create a lab experiment", "extract this animation/effect/scene", "submit to JOYCO lab", "make this an experiment". Also trigger when the user shows you a self-contained visual effect, animation, 3D scene, canvas sketch, or interactive component and wants to share or showcase it. Even if they don't say "lab" explicitly — if there's isolatable creative/technical code and a desire to share it, use this skill.
-
joyco-studio Bundle Three Best PracticesBuild, review, debug, and optimize production Three.js experiences. Use for Three.js scenes, React Three Fiber, WebGL or WebGPU renderers, GLSL shaders, reusable TSL node graphs and typed node contracts, glTF assets, post-processing, DOM-to-canvas coordination, render-loop performance, first-use GPU hitches, material or texture invalidation, GPU resource cleanup, and visual regressions in 3D web work. Do not use for generic CSS 3D transforms or static 2D canvas work that does not use a Three.js scene graph.
-
jsirish Bundle Visual Regression UpgradeVerify visual parity between two web environments (production vs upgraded/UAT) by capturing full-page screenshots of matching URLs and producing a pixel-diff HTML report. USE THIS SKILL whenever an agent needs to answer "does it look the same", "check the upgrade visually", "compare prod and UAT", "did the layout change", "screenshot diff", "visual regression", or verify a CMS major-version upgrade (SilverStripe 4→5, Drupal 9→10, WordPress major bumps) hasn't broken the front-end. Self-contained — bundles a Playwright capture script, URL crawler, and pixel-diff report generator.
-
autobyteus Bundle Product PrototypingDefine, build, and evolve runnable browser-based product prototypes with Vue 3, Vite, TypeScript, Tailwind CSS, mocked service scenarios, real UI state and interaction logic, precise requirements artifacts, and browser validation. Use when a product needs to be explored before implementation, when non-technical or technical reviewers need an executable product definition, or when an existing prototype needs new features, behavior changes, or requirement updates.
-
bbssppllvv Bundle Vercel AIComplete Vercel AI ecosystem guide: AI SDK v6 (generateText, streamText, useChat, tools, agents, MCP), AI Gateway (routing, fallbacks, caching), AI Elements (48+ React UI components), Chat SDK (Slack/Discord/Teams bots), Workflow DevKit, Data Stream Protocol, and Security (Vercel Firewall/WAF, BotID bot detection, rate limiting, DDoS, Attack Challenge Mode, prompt injection prevention, cost controls). Use when building AI chat UIs, agents, streaming, tool calling, or working with ai/@ai-sdk packages. Also use when securing AI apps: Firewall rules, BotID, @vercel/firewall rate limiting, bot blocking, geo-blocking, IP blocking, AI endpoint protection, Spend Management, or any Vercel security for AI products.
-
bbssppllvv Bundle Agent EngineeringBuild production-grade AI agents and agentic workflows: agent loops, tool calling, Agent-Computer Interface (ACI) design, harness/scaffolding, context engineering, error recovery, permissions, security threat modeling, multi-agent orchestration, cost controls, eval harnesses, production runbooks, and API/version watchlists. Use when designing or implementing LLM agents, coding assistants, Claude Code/Codex/Cursor/Devin-style systems, ReAct loops, tool-use workflows, Claude Agent SDK, Vercel AI SDK ToolLoopAgent, OpenAI Agents SDK, or any system where an LLM reasons and acts through tools.
-
bilibili Skill Carocut Builder CompositorRemotion Shot 组件实现。将 storyboard 转化为 React 组件。包含关键的帧计算规则(Math.round 强制)、interpolate 安全规则(最小 1 帧)、1080p 视觉标准、动画编排模式、音视频同步架构、组件复用模式。这是技术密度最高的 skill。
-
blockchainhb Skill Tailwind IllustrationsCreate polished, interactive landing page illustrations with Tailwind CSS and React. Use when building dashboard previews, hero sections with tab-based screenshots, or interactive UI mockups that showcase SaaS products on landing pages.
-
bookwormsuf Skill Explore UIGenerate multiple interactive UI options for a feature so you can compare and pick the best approach before implementing. Use when the user says '/explore-ui', 'explore options for', 'show me different ways to', 'prototype options', 'compare UI approaches', 'what are the options for this UI', or wants to see multiple interaction patterns side-by-side before committing to one. Also use when the user is unsure which UI pattern fits best and wants to see alternatives. Do NOT use for building a single known component (use /prototype instead) or for non-UI work.
-
robzilla1738 Bundle ScaffoldGreenfield or extend a Next.js app with Tailwind v4, tRPC, TanStack Query, optional Clerk, Neon/Drizzle, Vercel, and intake-selected add-ons (AI SDK, Resend, Stripe, Sentry, PostHog) fully installed and build-green. Use for /scaffold or new project setup.
-
robzilla1738 Bundle BughuntAdversarial, hotspot-driven bug-hunting workflow for bugs, pain points, and inefficiencies across project types (iOS, macOS, web, services, terminal tools). A zero-dependency toolkit ranks hotspots, agents inspect risk areas through 13 analysis lenses, a mandatory skeptic pass refutes false positives, and strict merge gates can enforce verification and coverage in CI. Findings are fingerprinted, deduped, baseline-diffed, and rendered to markdown/HTML/SARIF with CI exit codes. Report-only by default. Use when the user invokes /bughunt, asks to find hidden bugs, audit code for defects, hunt pain points or inefficiencies, do a deep code review, gate CI on findings, or hunt for what tests miss.
-
robzilla1738 Bundle Macos DesignDesign, critique, or scaffold native macOS applications using current HIG, Liquid Glass, menu/toolbar conventions, safe areas, accessibility, and SwiftUI/AppKit patterns. Use when the user invokes /macos-design or names this skill for macOS app design, UI review, native UI generation, or notch-style / Dynamic Island macOS apps.
-
rommapp Skill Frontend I18NInternationalization for the RomM frontend (both v1 and v2). Use whenever adding, renaming, or removing any user-visible string / translation key under frontend/src/locales/. Covers the en_US-is-source rule, the requirement to add every new key to ALL locale directories in the same change, namespace layout, and the check_i18n_locales.py validator enforced in CI. Trigger on any change to frontend/src/locales/**.
-
rommapp Skill Review PolishThe before-review and before-handoff pass for RomM, covering both stacks. First shapes the code the checks can't see — comment and docstring discipline (the single most-corrected thing in this repo), duplicated constants/types/getters, imprecise names, loose typing in tests. Then runs the verification gate that keeps CI green — frontend (typecheck/lint/test/build/i18n/tokens), backend (pytest/alembic/trunk), the OpenAPI regen step, and (for UI) manual browser/theme/input/Storybook checks. Use after the code works, right before committing, opening a PR, or telling the user a change is done.
-
rommapp Skill Frontend V2 InputUniversal input (mouse, touch, keyboard, gamepad) and responsive/universal-viewport layout in the RomM v2 frontend. Use when adding interactive v2 components, focus management, spatial navigation, gamepad/keyboard handling, modality-gated focus rings, breakpoints, or responsive layout. Covers useInput, focus geometry primitives, the overlay scope stack, useBreakpoint, and the data-bp/data-input attributes. Trigger on interactive or responsive work under frontend/src/v2/.
-
rommapp Skill Backend DevelopmentWorking on the RomM Python backend (backend/) — a FastAPI app with SQLAlchemy 2.0, Alembic, RQ/Redis, and Socket.IO. Use when adding or changing API endpoints, handlers, ORM models, response schemas, metadata-provider adapters, background tasks, database migrations, or backend tests. Covers the layered architecture, conventions, auth/scopes, the OpenAPI→frontend type pipeline, and the uv/pytest/alembic/trunk workflow. Trigger on any work under backend/.
-
rommapp Skill Frontend V2 ThemingTheming, design tokens, colors, and visual language in the RomM v2 frontend. Use when styling v2 components, picking colors, adding/using CSS variables, working with light/dark themes, or whenever you'd reach for a hex/rgba literal. Covers the token pipeline (src/v2/tokens/index.ts → build:tokens → tokens.css), the .r-v2 scope classes, the zero-hex-literal policy, and shared state semantics. Trigger on any color/theme/token work under frontend/src/v2/.
-
rommapp Skill Frontend V2 PatternsCross-cutting feature patterns for the RomM v2 frontend — error/snackbar handling, loading & skeleton states, real-time Socket.IO updates, UI state persistence (URL vs localStorage vs ephemeral), pagination/infinite scroll, forms & validation, permissions (useCan), and destructive confirmations. Use when wiring up a v2 feature's behavior (not just its markup). Trigger when implementing data flows, dialogs, forms, toggles, or permission gating under frontend/src/v2/.
-
rommapp Skill Frontend V2 ComponentsBuilding or modifying components in the RomM v2 frontend (frontend/src/v2/). Use when creating/editing v2 primitives (R* components in src/v2/lib/), shared composites, or feature composites — covers the three-tier model, file/folder conventions, SFC structure, import order, barrels, Storybook requirements, and v2 anti-patterns. Trigger on any work under frontend/src/v2/.
-
rubber-ducks-syndicate Skill Obsidian FeatureSpecialist skill for documenting features (backend + frontend) in an Obsidian vault. Normally invoked by the obsidian-documentation orchestrator, but also use it directly when the user asks to document a feature, a new capability, an endpoint, a UI flow, or "what I just built" — including from a git diff or PR. Produces feature notes under Features/ with backend/frontend sub-notes, ready for the tagging and linking pass.
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 ce-ai, ce-ssr-patterns, ts-solidjs-review. 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.