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.
-
thibautbaissac Bundle React RouterAdd or extend client-side routing with React Router v7 in Data Mode (createBrowserRouter + RouterProvider), wired to vertical slices, TanStack Query, and zod-parsed URL state.
-
thibautbaissac Bundle Scaffold AuthAdd authentication and server-side authorization to the Express API and React SPA: a users slice with password hashing, auth middleware that derives the principal server-side, ownership checks without existence leakage, and public DTOs that never leak secrets.
-
thibautbaissac Bundle Scaffold FormScaffold a React Hook Form wired to the feature's zod request contract via zodResolver, submitting through a TanStack Query mutation hook, with accessible fields and surfaced errors.
-
thibautbaissac Skill Scaffold AuthzAdd CASL authorization to a feature: an isomorphic <feature>.ability.ts rule set the server and React share, server-side enforcement via attachAbility/authorize and per-record subject() checks, and <Can>/useAbility UI gating — built on the domain-free base in src/shared/authz/.
-
thibautbaissac Bundle Style ComponentStyle React UI with Tailwind CSS v4 utilities and Headless UI accessible primitives, wired into presentational components without breaking one-way layering.
-
thibautbaissac Bundle Add API ContractCreate or extend the owning zod schema as the single source of truth for a FE/BE API shape, then wire backend parsing and a typed frontend call.
-
thibautbaissac Bundle Scaffold FeatureScaffold a vertical-slice React + Express + TypeScript feature with a FE/BE zod contract, backend route → service → repository, frontend Query hooks and optional UI state, and colocated tests.
-
thibautbaissac Bundle API Error HandlingExtend the kit's central Express error handler and typed error contract end to end: domain errors carrying a statusCode, ZodError→400 at the boundary, 500s that never leak internals, and frontend mapping of ApiError into user-facing states.
-
timi-ty Skill Redeploy FrontendTrigger a Vercel redeploy of the frontend by pushing a harmless comment change. Use when the user says "redeploy", "redeploy frontend", "trigger vercel deploy", or "trigger redeploy".
-
agamm Skill CaptionsAdd subtitles/captions to a video — burn them into the picture, or export an .srt/.vtt file (for YouTube etc.). Use whenever the user wants captions, subtitles, on-screen text of what's being said, an SRT/VTT file, or accessibility text. Covers auto-transcription, editing for accuracy, styling, and the verbatim-vs-clean gotcha.
-
agamm Skill Remotion GraphicsCreate ANIMATED motion graphics — kinetic word-by-word captions, animated lower-thirds/name tags, branded intro/outro title cards, data-driven graphics (count-ups, growing bars) — as React/Remotion components, rendered to a transparent layer and composited over the footage with ffmpeg. OPTIONAL/heavy (needs Node + a headless-Chromium download, and a Remotion license for company use). Use only when an edit needs genuine motion design that PIL/ffmpeg overlays can't do; for a static label, watermark, or simple fade, use the video-overlay skill instead.
-
aksheyw Skill AuditComprehensive codebase audit skill covering 10 systemic bug categories plus CI automation. Use this skill proactively during code review, E2E testing, pre-deployment checks, or whenever you spot any of these patterns — raw database values in UI (snake_case, camelCase enums, numeric codes), API contract mismatches between client and server, Firestore/database rules gaps, CORS missing production domains, analytics/consent gating features, dynamic Tailwind/CSS classes purged in prod, window.open without noopener, orphaned data on deletion, hardcoded secrets, Android/iOS security misconfigs, performance regressions (bundle size, re-renders, lazy loading), or accessibility gaps (missing aria labels, keyboard nav, screen reader). Also triggers on "audit this", "did you check everything", "is this production ready", "what did we miss", "are you sure", or any thoroughness question. One bug instance always means many more exist — this skill enforces the ripple search.
-
aksheyw Skill Prompting Opus 4 8How to prompt and scaffold Claude Opus 4.8 — effort/thinking defaults, verbosity, literal instruction-following, tool-use and subagent triggering, code-review recall, and the cream/serif frontend house-style that's wrong for dashboards. Use when starting Opus 4.8 work, migrating prompts from Opus 4.7, tuning verbosity or effort, wondering why the model isn't "thinking", seeing a code-review recall drop, or getting a cream+serif design you didn't ask for.
-
andreworia Skill Color Encoding For DataApplies color to a chart so it encodes meaning and directs attention, using preattentive contrast, sequential and categorical palettes, and accessibility checks.
Audited -
ant-design Bundle X MarkdownUse when building or reviewing Markdown rendering with @ant-design/x-markdown, including streaming Markdown, custom component mapping, plugins, themes, and chat-oriented rich content.
-
apache Skill File To MarkdownTurn almost any file into Markdown plus metadata — PDF, Office, HTML, email, archives, images, audio/video, 1000+ formats — powered by Apache Tika, either via the tika-app CLI (zero setup, one file) or a running tika-server (curl, warm process, many calls). Leads with rmeta (structured, embedded-item-aware output) as the default operation rather than flat concatenated text, since you can't tell whether a file has embedded content from its extension. Covers metadata-only triage, type and language detection, OCR, and output-size discipline for agent context. Use whenever a task involves reading the content of a file whose format you don't want to hand-parse.
-
apnatvar Bundle McpifyTake an existing application through the full MCP lifecycle: analyze capabilities, generate and test a secure server, package or deploy it, connect clients, publish registry metadata, and operate releases. Use for production-oriented MCP work, especially TypeScript and Next.js repositories; do not use to bulk-expose arbitrary functions or bypass release authorization.
-
infinite-labs-ai Bundle Unknowns Mock Before WireBuild a throwaway mock or prototype before wiring production code. Use when UI layout, interaction, scope, placement, or flow is ambiguous and the user wants to react to fake data, a clickable HTML artifact, or a prototype before implementation.
-
jwcodewrote Skill Impeccable Design UIImpeccable 设计工具导览,根据用户选择调用对应的设计子 skill(frontend-design、critique、audit、colorize、animate、polish 等)
-
jwcodewrote Skill Frontend Imagegen DirectorUse when the user wants the agent to inspect the current project's style and product nature, clarify requirements in a Superpowers-style workflow, generate front-end visuals with gpt-image2 or the environment's imagegen path, and then build the actual front-end page from the approved image.
-
mark-life Skill New ProjectUse when starting a brand-new project or repository from scratch. Triggers on "create a new project", "spin up a new app", "scaffold a new repo", "start a new Next.js project". Scaffolds from the personal Next.js monorepo template (Mark-Life/netxjs-monorepo) and runs the standard bootstrap.
-
mark-life Bundle Memory ViewA viewer for Claude Code's per-project auto-memory. A zero-dep TypeScript script scans ~/.claude/projects/<project>/memory/, renders a self-contained, secret-redacted HTML explorer, and opens it in the browser. No model curation, no edits, no findings — the model only runs the script and opens the report. Local, human-facing, never auto-fired.
-
mark-life Bundle Session ReportGenerate a self-contained HTML report that debugs what is in a Claude Code or Codex session's context window and how every token is spent — context budget, the hidden cost of retained thinking, the dumb-zone cutoff, loaded CLAUDE.md/skills, and the full history.
-
melsaeed276 Bundle Flutter UIFlutter UI skill hub for responsive/adaptive layouts (phones/tablets/desktop/web), Material 3/Cupertino, foldables, accessibility, animations, and design systems.
-
myaifreedomsystems Bundle Brief MeSlash-invoked as `/brief-me`. The user's single trigger to receive a converged multi-model team advisory report on a decision or research topic the conversation already established. The agent assembles the brief from six required team voices (Researcher, Advisor, Kaizen 1, Kaizen 2, Linter, Builder), renders it into a single self-contained local HTML file from the shipped template, opens it on the user's screen, and the user clicks "Copy my answers" and pastes their picks back into chat. The assembling agent is never a voice in the brief.
-
nordic-ai Skill Accessibility AuditReviews web and application accessibility against WCAG 2.2 AA and the European Accessibility Act (EAA, enforceable June 2025). Covers semantic HTML, ARIA usage, keyboard navigation, focus management, color contrast, screen-reader compatibility, form labels and errors, alternative text, motion and animation preferences, internationalization and localization quality, and testing tool integration (axe, pa11y, Lighthouse, Playwright a11y). Use when the user asks about "accessibility", "a11y", "WCAG", "screen reader", "EAA", "keyboard nav", invokes /accessibility-audit, or when the orchestrator delegates on user-facing applications. Stack-agnostic on the approach; framework-specific heuristics for React / Vue / Angular / Svelte / plain HTML.
Audited -
tsubakimoto Bundle Marp DeckUse this skill whenever the user wants to create, outline, rewrite, or organize a presentation in Marp or Marpit Markdown. Trigger on requests to turn notes, docs, READMEs, specs, or outlines into slide Markdown; set up `marp: true` frontmatter; choose slide structure, directives, backgrounds, speaker flow, asset folders, or export commands; or build a new Markdown slide deck from scratch. Use it even when the user says 'presentation', 'deck', or 'slides' without naming Marp explicitly but the desired output is a Marp Markdown deck. If the task is mainly theme CSS or visual restyling, also consult `marp-css`.
-
tumf Skill Cflx HitlHandle every human-intervention boundary in a Conflux automated loop. Use whenever a Conflux user must decide, approve, provide credentials or external evidence, resolve policy or schema ambiguity, choose rejection disposition, authorize merge, push, deployment, publication, or process control, handle a stalled acceptance hold, or resume automation afterward. This is the general operator-facing HITL skill for Conflux, not a troubleshooting-only procedure. Preserve the active frontend and orchestration mode unless the user explicitly chooses otherwise.
-
wemwi Bundle Tailwind 4 DocsComprehensive Tailwind CSS v4 (through v4.3) documentation snapshot, version-delta knowledge, and engineering workflow. Use this skill whenever the user writes, reviews, refactors, configures, or migrates Tailwind CSS — including selecting utilities/variants, CSS-first theme/token setup, v3-to-v4 migration, or any task touching scrollbar/mask/text-shadow/logical-property/@variant features. Works from a local docs snapshot when available and degrades to bundled summaries (version deltas, gotchas, engineering playbook) when not.
-
d-kimuson Bundle ReactMust always be enabled when writing/reviewing React code.
-
hassanhabib Bundle The Standard TestingEnforces Standard TDD discipline, validation testing, exception mapping, controller acceptance tests, and UI component testing.
-
pingcap Bundle Tidbx NextjsBuild and deploy Next.js (App Router) apps that connect to TiDB. Covers Route Handlers (app/api/*/route.ts), Node vs Edge runtime selection for database access, environment variable handling, and production-safe DB patterns on Vercel/serverless. Prefer Prisma/Kysely integration, with optional mysql2 for minimal examples. Includes guides and TypeScript templates.
-
daochild Skill Senior Frontend DevProvides senior-level frontend development guidance including architecture decisions, performance optimization, accessibility, testing strategies, and modern best practices for React, Next.js, TypeScript, and CSS.
-
daochild Skill Senior UX UI DesignerProvides senior-level UX/UI design guidance including design systems, accessibility, user research, interaction design, visual hierarchy, and design-to-development handoff best practices.
-
liueggy Bundle Generative UI Minis在 Minis 当前环境里,把文本说明自动转换成更像 Claude Artifact 的单文件 HTML 生成器,统一支持卡片、表格、记录、时间线、代码块、图表等输出;当用户提到这些组件或可视化页面时应优先调用。
-
liueggy Bundle Production Agent Public生产级 ReAct Agent 技能。当用户说"生产级方案"、"可部署代码"、"Production Agent"、 "ReAct格式"、"帮我写一个能跑的"、"长期稳定运行"、"生产环境"、"直接部署"、 "加上错误处理"、"加上重试机制"、"做成生产级"、"工业级代码"、"企业级"、 "加监控"、"加日志"、"加健康检查"、"Docker部署"、"NAS部署"、"群晖部署"、 "帮我上线"、"别挂掉"、"跑起来"、"开启生产"时触发。 激活后以「Claude Production Agent」身份运行,强制使用 ReAct 格式, 每3步插入自我反思,优先考虑错误处理、持久化、性能和部署落地。 完整示例输出见 references/示例输出.md。
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 memory-view, react-router, scaffold-auth. 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.