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.
-
iberi22 Bundle Tailwind CSSWrite Tailwind utility classes with proper responsive design, dark mode, and configuration.
-
kirchberg Bundle Swift Uikit ComponentsUse when designing, implementing, refactoring, reviewing, or diagnosing reusable UIKit views, controls, and view-controller components in Swift. Apply to UIView and UIViewController lifecycle, system controls and configurations, actions, menus, input and focus, Auto Layout, intrinsic sizing, traits, Dynamic Type, adaptivity, containment, navigation, sheets and popovers, table and collection components, UIKit-SwiftUI interoperability, accessibility and localization baselines, testing, and API availability. Trigger for UIKit component requests, programmatic UIKit screens, custom controls, reusable view architecture, layout bugs, stale configuration state, presentation defects, or incremental SwiftUI adoption. Do not use as the lead for a pure SwiftUI screen, an app-wide unknown performance symptom, motion-specific work, or deep concurrency, playback, RTL, accessibility, or Liquid Glass work.
-
kirchberg Bundle Voice Over AccessibilityUse when planning, auditing, implementing, fixing, or reviewing VoiceOver accessibility in iOS or iPadOS apps built with SwiftUI, UIKit, or mixed UI. Applies to accessibility trees, labels, values, hints, traits, actions, reading and rotor order, grouping, focus, announcements, text entry, custom controls and gestures, manual device testing, Accessibility Inspector, and UI-test audits. Trigger for requests such as "make this screen work with VoiceOver", "audit this SwiftUI flow for screen-reader users", "fix the accessibility order", or "add accessible actions to this custom control". This first version is VoiceOver-only; do not use for Dynamic Type, contrast, color, motion, captions, Voice Control, Switch Control, macOS VoiceOver, Android TalkBack, or web screen readers unless the request also contains an iOS or iPadOS VoiceOver task.
-
polypoint Skill ImproveUse when the user wants to reflect on how the skills used in this session performed and file improvement plans — typically invoked as /improve right after a skill-driven task (e.g. /playwright-e2e … then /improve), or as /improve <skill-name> to focus on one skill. Uploads concrete, actionable plans as self-contained HTML pages to Whetstone for asynchronous human review.
-
polypoint Skill Review GuidelinesReview a pull request against POLYPOINT's own documented Coding Guidelines — clean-code judgment rules and team-specific conventions (naming, structure, documentation) that generic linters and CodeRabbit don't know. Java/Spring backend and Angular/TS frontend. Produces a structured, non-interactive findings report for the orchestrator to triage.
-
shaharsha Bundle Tavily ExtractUse when a web page won't come through a normal fetch — WebFetch (or curl) returns an empty shell, a "Loading…" skeleton, or a 403/Forbidden. That happens on JavaScript-rendered single-page apps (React/Next.js/Vue dashboards, leaderboards and docs such as Artificial Analysis, LMArena, developers.openai.com, platform.claude.com) and on bot-protected hosts (Cloudflare/WAF). This skill calls the Tavily Extract API to run the page's JavaScript and return clean markdown, and can batch up to 20 URLs in one call; it also does Tavily web search. Reach for it when WebFetch comes back empty, truncated, a skeleton, or blocked, or when a task says "the SPA/client-rendered page won't fetch", "I got a 403", "scrape the data behind the JS", "the charts/tables won't come through", or "extract these N URLs". Try WebFetch first — it's free and handles server-rendered sites; use this when it can't.
-
yansircc Bundle Effect EcosystemUse when a task directly changes or reviews Effect v4 code, Effect configuration, Layers, runtimes, Schema, or Effect ecosystem APIs, or explicitly requests an Effect compliance scan. Do not trigger merely because a repository depends on Effect or for unrelated UI, prose, CSS, or ordinary TypeScript changes.
-
zhaji2333 Skill Xss Frontend Security当目标存在评论/昵称/富文本/私信/工单/搜索反射/Markdown解析/AI输出渲染/前端DOM操作/postMessage/跨域配置等功能时调用。负责反射型/存储型/DOM XSS、AI/Markdown 渲染型存储 XSS、CSRF、CORS错误配置、Clickjacking 的深度挖掘与绕过。命中跳转页/开放重定向/target 参数驱动 location 跳转时优先测试跳转型 XSS(伪协议升级同源 XSS;仅 http(s) 放行时按 3.2 L3 与 3.4 评估开放重定向单独成洞);命中 AI 对话/分享页 marked 渲染无净化时测 AI 输出型存储 XSS。
-
itspecialist111 Skill Design Frontenddesign/frontend — skill payload
-
kryptobaseddev Bundle Better AuthImplement Better Auth (better-auth.com) — the framework-agnostic TypeScript authentication library — across ANY stack: Next.js, SvelteKit, Nuxt, SolidStart, Remix/React Router, Astro, TanStack Start, Express, Hono, Elysia, Fastify, or raw Node. Covers the betterAuth() server instance, database adapters (Drizzle, Prisma, Kysely/raw pg·mysql·sqlite, MongoDB), the CLI (generate/migrate), the client SDK (React, Vue, Svelte, Solid, vanilla), email/password + social/OAuth login (Google, GitHub, Apple…), account linking, sessions, and plugins (2FA, magic link, email OTP, passkey, username, organization multi-tenancy, admin, API keys, JWT/bearer, RBAC via access control). Use whenever the user adds, configures, scaffolds, or debugs Better Auth, sign-in/sign-up, sessions, OAuth, 2FA, multi-tenant orgs, or role-based permissions in a TS/JS app — even if they only say 'better auth', 'add login', or 'auth'. Ships a preflight, a scaffolder, and a setup doctor.
-
kryptobaseddev Bundle Plugin CreatorScaffold, validate, test, and ship a production-grade Claude Code plugin + marketplace — especially the pattern where the plugin's ONLY component is an MCP server that surfaces a registry of skills and agents on demand (so they never clog the / menu or the always-on context). Use this WHENEVER the user wants to create, build, scaffold, package, or distribute a Claude Code plugin, plugin marketplace, or MCP-server plugin; expose project-specific skills/agents/tools to a coding agent; turn skills or agents into an installable package; or "make a plugin for this project" — even if they don't say "MCP" or "marketplace" explicitly. Ships a scaffolder, a smoke-tester, a validator, reference docs, and Node + Python server templates so any agent can do this repeatably and correctly.
-
kryptobaseddev Bundle Moonpay PaymentsBuild, scaffold, and integrate MoonPay crypto on-ramp (buy) and off-ramp (sell) payments into a website or app — the embeddable Widget (@moonpay/moonpay-js / -react / -node) and the headless Platform + Frames product (@moonpay/platform-sdk-web). Ships a generator (scripts/scaffold-moonpay.mjs) that emits a complete, runnable integration — server-side URL signing, the frontend widget, a verified webhook handler, env, and README — so you stand up a working on-ramp/off-ramp in one command, then customize. Use whenever the user wants to add, build, generate, or scaffold fiat↔crypto buy/sell, a crypto checkout or 'shopping-style' payment processor, embed a buy/sell widget, integrate MoonPay, do crypto onboarding/KYC, sign a MoonPay widget URL, verify MoonPay webhooks, or build headless/co-branded Apple Pay / Google Pay / card crypto payments — even if they only say 'MoonPay', 'on-ramp', 'off-ramp', or 'buy crypto in my app'. Also bundles tested signing + webhook scripts and source-cited references.
-
kryptobaseddev Bundle Svelte5 SveltekitComprehensive guide for building modern web applications with Svelte 5 and SvelteKit. Use when creating Svelte components, implementing Svelte 5 runes ($state, $derived, $effect, $props), building SvelteKit applications with filesystem routing, loading data, handling forms, styling components, or deploying Svelte/SvelteKit apps. Essential for questions about Svelte reactivity, SvelteKit project structure, SSR/CSR configuration, form actions, adapters, or migration from Svelte 4.
-
adesolaodubiyi Skill Frontend Pre Merge ReviewerStaff-level frontend pre-merge review for production-sensitive user-facing apps. Pair with ux-product to verify product decisions are reflected in code; use web search for current framework best practices and failure modes (TypeScript/React typical). Activate when user says: frontend review, pre-merge check UI, review my React change, check this frontend PR, UX implementation review.
-
igrlebed Skill Cursor Designer DevUse when writing, refactoring, or architecting code components, composables, hooks, stores, reviewing code quality, extracting business logic, or working on component-level architecture (Vue/Nuxt or React/Next).
-
igrlebed Skill Cursor Designer ArchUse when initializing a project, choosing Vue/React, setting up Nuxt + Nuxt UI or Next.js, looking up latest stable versions, defining directory structure, making architectural decisions, or scaffolding docs templates.
-
igrlebed Skill Cursor Designer CoreFundamental rules for designer-developer workflow on Vue/Nuxt or React/Next projects. Defines project structure, naming, scope boundaries, and review checklist. Stack comes from ARCHITECTURE or detection — not hardcoded.
-
igrlebed Skill Cursor Designer DataUse when working with data, API calls, mock data, JSON files, useAsyncData, useFetch, React data fetching, state management, or defining data contracts and endpoints for sections.
-
igrlebed Skill Cursor Designer HandoverUse when preparing code for transfer to the frontend team, finalizing tasks, cleaning up code, running pre-handover checks, or verifying code quality before delivery to developers.
-
igrlebed Bundle Cursor Designer StorybookBuilds and maintains Storybook as the central design-system component vitrine for Vue/Nuxt or React/Next projects. Discovers the project's components, tokens, and naming first, then applies a fixed Storybook Docs anatomy (Preview ground muted|card|float, token-first Usage, docs chrome, MDX mirrors, framework stubs). Use for Storybook setup, DS catalog, migration from /design-system, Foundations, Preview canvas rules, or /storybook — not Soft*-specific.
-
igrlebed Bundle Lazyweb Deep Design ResearchDeep design research combining Lazyweb's screenshot database with web research. Produces a prototype-first HTML report with side-by-side prototypes and a clustered inspo map. Use when the user needs competitive analysis, best practices research, or wants to understand how the best apps handle a specific design problem. Trigger on: "best practices for", "how should I design", "what do top apps do", "competitive analysis for", "design research on", "what works well for", "research how others do".
-
parvez3019 Bundle Test StrategyChoose the right test level for each behaviour and write tests that fail only for real reasons. Covers the microservice test portfolio — unit, component (service in isolation with real infrastructure and stubbed collaborators), integration, and narrow end-to-end — plus what each level must not own, test doubles discipline, determinism and flakiness, arrange-act-assert structure, assertion quality, coverage versus value, mutation testing, and test data management. Use when writing or reviewing any test, deciding what level to test at, diagnosing a flaky or slow suite, or when the user says 'tests', 'unit test', 'component test', 'test pyramid', 'mocking', 'flaky', or 'coverage'. This skill governs test design inside a service — cross-service contract verification belongs to contract-testing.
-
parvez3019 Skill Implement ServiceTurn an approved design into working code and tests, built inside-out one layer at a time, with every principle's checklist run before anything is presented. Covers implementation ordering, per-component validation against architecture, data, resilience, security and configuration rules, writing tests alongside the code at the right level, and pacing the work so review happens while it is still cheap. Use after design-service has produced an approved blueprint, or when the user says 'implement', 'build it', 'code this up', or 'write the service'. This workflow writes code — for changing existing code safely see refactor-safely, for auditing it see review-service.
-
involvex Bundle Web Design Reviewer 3This skill enables visual inspection of websites running locally or remotely to identify and fix design issues. Triggers on requests like "review website design", "check the UI", "fix the layout", "find design problems". Detects issues with responsive design, accessibility, visual consistency, and layout breakage, then performs fixes at the source code level.
-
involvex Bundle Frontend Dev Guidelines 3Opinionated frontend development standards for modern React + TypeScript applications. Covers Suspense-first data fetching, lazy loading, feature-based architecture, MUI v7 styling, TanStack Router...
-
involvex Bundle React Native Architecture 3Build production React Native apps with Expo, navigation, native modules, offline sync, and cross-platform patterns. Use when developing mobile apps, implementing native integrations, or architecti...
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 Tailwind CSS, swift-uikit-components, voice-over-accessibility. 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.