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.
-
neeraj-verma-bs Bundle New Nextjs AppScaffold a new Next.js project with create-next-app in the current or a specified directory, after checking every prerequisite (Node version, package manager, git, registry reachability, target directory) and offering to install anything missing. Also seeds the new project's .claude/ folder with this plugin's skills and commands. Use when the user says "create a nextjs app", "new next project", "scaffold next.js", or "/new-nextjs-app".
-
kentico Bundle Migrate Content EvalEvaluates migration results across 12 categories by gathering data from logs, databases, and migration plan. Generates a self-contained HTML report with per-category pass/fail/warn status, prioritized remediation guidance, and next-step routing to close the migration loop.
-
kentico Bundle Page Builder WidgetsKnowledge and conventions for building and modifying Page Builder widgets in Xperience by Kentico — view component, properties with admin UI form components, view model, Razor view, registration, localization, and content retrieval. Proactively read this before creating, building, or modifying a Page Builder widget.
-
kentico Skill Migrate Code ComponentMigrates a reusable shared component (header, footer, navigation, breadcrumbs, etc.) from a Kentico Xperience 13 project to Xperience by Kentico. Locates the component in the source project and migrates it together with all dependencies. Use when migrating shared layout elements like headers, footers, or navigation.
-
kentico Bundle Migrate Content FieldsGenerates C# IFieldMigration extension code for custom field value and definition transformations (form controls, data types, HTML cleanup, path updates) for page types, module classes, system objects, and forms during KX13→XbyK migration. Use when the user needs to handle custom form controls with no XbyK equivalent, cross-class field transforms, HTML sanitization, URL path rewriting, or data type conversions that apply globally across multiple classes.
-
motherduckdb Bundle Motherduck Create Dive 2Create, edit, publish, share, or embed MotherDuck Dives using their React and SQL runtime.
-
motherduckdb Bundle Motherduck Design Dive 2Design or improve a MotherDuck Dive’s layout, responsive behavior, themes, filters, and visual accessibility.
-
curiositech Bundle Component Template Generator 2Generates starter component code using design tokens. Creates React/Vue/Svelte components with proper token usage, variants, and accessibility built in.
10 -
curiositech Bundle Fullstack Debugger 2Expert debugger for Next.js + Cloudflare Workers + Supabase stacks. Systematic troubleshooting for auth, caching, workers, RLS, CORS, and build issues. Activate on: 'debug', 'not working', 'error', 'broken', '500', '401', '403', 'cache issue', 'RLS', 'CORS'. NOT for: feature development (use language skills), architecture design (use system-architect).
10 -
curiositech Bundle Web Cloud Designer 2Creates realistic cloud effects for web using SVG filters (feTurbulence, feDisplacementMap), CSS animations, and layering techniques. Use for atmospheric backgrounds, weather effects, skyboxes, parallax scenes, and decorative cloud elements. Activate on "cloud effect", "SVG clouds", "realistic clouds", "atmospheric background", "sky animation", "feTurbulence", "weather effects", "parallax clouds". NOT for 3D rendering (use WebGL/Three.js skills), photo manipulation (use image editing tools), weather data APIs (use data integration skills), or simple CSS gradients without volumetric effects.
10 -
curiositech Bundle Mobile UX Optimizer 2Mobile-first UX optimization for touch interfaces, responsive layouts, and performance. Use for viewport handling, touch targets, gestures, mobile navigation. Activate on mobile, touch, responsive, dvh, viewport, safe area, hamburger menu. NOT for native app development (use React Native skills), desktop-only features, or general CSS (use Tailwind docs).
10 -
curiositech Bundle Native App Designer 2Creates breathtaking iOS/Mac and web apps with organic, non-AI aesthetic. Expert in SwiftUI, React animations, physics-based motion, and human-crafted design. Use for iOS/Mac app UI, React/Vue animations, native-feel web apps, physics-based motion design. Activate on "SwiftUI", "iOS app", "native app", "React animation", "motion design", "UIKit", "physics animation". NOT for backend logic, API design (use backend-architect), simple static sites (use web-design-expert), or pure graphic design (use design-system-creator).
10 -
curiositech Bundle Reactive Dashboard Performance 2Expert in building blazing-fast reactive dashboards with comprehensive testing. Masters React performance patterns, testing strategies for async components, and real-world patterns from Linear, Vercel, Notion.
10 -
curiositech Bundle Vaporwave Glassomorphic UI Designer 2Vaporwave + glassomorphic UI designer for photo/memory apps. Masters SwiftUI Material effects, neon pastels, frosted glass blur, retro-futuristic design. Expert in 2025 UI trends (glassmorphism, neubrutalism, Y2K), iOS HIG, dark mode, accessibility, Metal shaders. Activate on 'vaporwave', 'glassmorphism', 'SwiftUI design', 'frosted glass', 'neon aesthetic', 'retro-futuristic', 'Y2K design'. NOT for backend/API (use backend-architect), Windows 3.1 retro (use windows-3-1-web-designer), generic web (use web-design-expert), non-photo apps (use native-app-designer).
10 -
glukicov Bundle Slideops 2Use when the user asks for slides, a slide deck, or a presentation about a code repository, one of its subsystems, a feature, an architecture area, or its recent changes. Triggers include "make slides", "build a slide deck", "create a presentation", "HTML slides for this repo", "overview deck", "team update slides", "slides for our latest changes", or naming a topic and asking for a deck about it. Also use when the user asks whether an existing deck still matches the code, or wants one rechecked, refreshed, or kept in sync automatically: "is this deck still accurate", "check the slides against the code", "did anything we documented change", "refresh the architecture deck", "these docs are stale", "fail the build when the deck stops matching the code", or asks to wire that check into CI, a pull request, or an agent hook. Also use for Markdown documentation instead of slides ("write markdown docs", "a design doc with citations", "docs that know when they go stale"), including PDF export of a doc.
-
curiositech Bundle UX Friction Analyzer 2Comprehensive UX analysis using cognitive psychology, ADHD-friendly design, Gestalt principles, and flow state engineering. Specializes in friction audits, user journey simulation, cognitive load optimization, and Fitts' Law application. Activate on "analyze UX", "friction audit", "user journey", "ADHD-friendly", "optimize flow", "reduce cognitive load", "UX audit", "conversion optimization". NOT for visual design execution (use web-design-expert), A/B testing implementation (use frontend-developer), or accessibility compliance auditing (use accessibility-auditor).
10 -
curiositech Bundle Color Contrast Auditor 2Detects and fixes color contrast violations using WCAG 2.1 guidelines and perceptual analysis. Expert in contrast ratio calculation, color blindness simulation, and providing accessible alternatives. Activate on "check contrast", "color accessibility", "WCAG audit", "readability check", "contrast ratio", "hard to read", "can't see text". NOT for general color theory (use color-theory-palette-harmony-expert), brand color selection (use web-design-expert), or non-visual accessibility (use ux-friction-analyzer).
10 -
curiositech Bundle Vitest Testing Patterns 2Write tests using Vitest and React Testing Library. Use when creating unit tests, component tests, integration tests, or mocking dependencies. Activates for test file creation, mock patterns, coverage, and testing best practices.
10 -
rsmdt Bundle Code Quality Review 2Unified code review skill for correctness, design, readability, security, performance, testability, accessibility, and error-handling conventions. Use when reviewing changes, enforcing quality standards, or identifying technical debt.
-
rsmdt Bundle Specify Factory 2Decompose a multi-feature or multi-component specification into factory-consumable artifacts. Use this for high-complexity work — multiple features, three or more components, or parallel-eligible workstreams.
-
curiositech Bundle Design System Documenter 2Creates comprehensive documentation for design systems - token tables, usage guidelines, component examples, and accessibility notes. Use after generating tokens to create developer-friendly docs.
10 -
tibsfox Bundle Vision To Mission 2Transform a user's builder vision into a complete, executable GSD mission package. Use this skill whenever a user has described what they want to BUILD (a product, tool, feature, system, educational pack, or ecosystem component) and wants it structured for GSD execution. Triggers include: 'structure this for GSD', 'make this into a milestone', 'turn this vision into a mission', 'package this up for Claude Code', 'create the mission files', 'I want to hand this to GSD', 'make me a mission package', or any request to decompose a described system into wave-based executable tasks. Also trigger when the user has a vision doc already written and needs mission decomposition. Prefer this skill over generic document creation whenever the GSD ecosystem is mentioned alongside building something.
-
danilo-enesi Skill Template To BladeSkill: Migrazione template HTML → Blade
-
hxx2001 Bundle Screenshot To Code AgentRecreate supplied webpage or mobile H5 screenshots as editable local frontend code using the current agent. Use for screenshot-to-code, screenshot cloning, high-fidelity H5 recreation, or extending the same recreation to demonstrated interactions and motion from screen recordings.
-
rewse Skill CSS StandardsOrder CSS properties outside-in following Concentric-CSS. Use this skill whenever writing, editing, or reviewing CSS, SCSS, Less, styled-components, or Tailwind @apply blocks, including when adding a single property to an existing rule, and even when the user says nothing about property order. Also use when reviewing a diff that touches stylesheets.
-
rewse Bundle Reddit AccessAccess Reddit content via old.reddit.com HTML parsing without authentication. Use when you need to fetch Reddit posts, search subreddits, get post details with comments, or retrieve user posts. Triggers include "get Reddit posts", "search Reddit", "fetch from r/", "Reddit comments", "user posts on Reddit", when the user provides a Reddit URL starting with "https://www.reddit.com/r/" or "https://old.reddit.com/r/", or any task involving reading public Reddit content.
-
tsaru23 Bundle Design AdoptオープンソースのフロントエンドデザインをMCP・CLI・スキル経由で探索し、対象プロジェクトに最適なものを 選定して適用する。「UIをオシャレにして」「デザインを良くして」「このサイトみたいなデザインにして」 「コンポーネントを持ってきて」「shadcnで作って」「LPのデザインを作って」といった依頼で使用する。 ただし、配色・トンマナの相談だけで実装を伴わない場合は `frontend-design` スキルを使う。
-
cnsaily Bundle Job Application Workflow一个通用的「建经历库 → 收 JD → 生成匹配矩阵 → 定向改简历 → 产出投递件 → 登记投递记录」求职工作流 skill。 触发场景:用户发来简历要求「梳理经历 / 建经历库」,或发来某岗位 JD(截图/文字/链接)说「改简历 / 定制简历」, 或单独要「自我评价 / 个人特长」,或「登记这条投递」。 核心能力: ① 首次使用先和用户沟通盘点经历,沉淀成「经历库.md」事实证据库(事实层真实留档); ② 收 JD(支持截图 / 复制粘贴文字)后拆解,生成 JD 匹配矩阵(JD 拆解 → 匹配度 → 定制策略 → 风险提醒,每次必做); ③ 用「事实层留档、表述层美化」双层策略改简历——从经历库挑贴合岗位的点做措辞包装,事实层绝不造假; ④ 基于母版 HTML 复制成「<姓名>-<公司岗位>.html」,只改文字不碰结构;板块内部时间倒序、靠措辞强化突出; ⑤ 技能与工具区只留「软件使用 + 语言能力」,求职意向只写「方向 + 接受出差(仅 JD 要求时)」; ⑥ 产出同名 .docx 投递件,与 HTML 一起交付; ⑦ 按当次 JD 现生成「自我评价 + 个人特长」,只交付可复制文本、不写进简历; ⑧ 登记投递记录:用户提供自己的飞书云文档(多维表格)链接则按她的表头自动登记;没有表则用内置标准表头建议建表。 质量保障:事实层真实不造假;改背调硬信息(政治面貌/证书/日期)前停下问用户;项目标题只写名称本身、不加说明性标签。
-
unsafe9 Bundle VizRender a long structured answer — or any data worth visualizing — as a self-contained single-file scroll web page, by writing only thin YAML data (an ordered list of typed blocks) that a build script turns into DOM, big numbers, charts, SVG diagrams, trees, diffs, and layout. You never hand-write HTML or compute coordinates. Strongly prefer this whenever your reply would otherwise be a long expository read the user goes through start-to-finish (explaining how something works, an analysis or investigation writeup, comparing options or tradeoffs, a research/report summary, a codebase or architecture exploration, a multi-step plan, a status/metrics snapshot, a post-mortem) OR whenever the answer carries data with shape — metrics/big numbers, comparison tables, rankings, flow/architecture/sequence diagrams, file trees, code diffs, timelines — or a decision with options to put in front of the user and collect their pick. Also trigger on explicit asks — "visualize this", "diagram this", "show this as a page". Skip
-
vediteur Skill MentorMentor skill that teaches the user — a career PHP developer who is new to modern stacks — about the project they are working in, at their level. Whenever the user asks understanding/learning questions about the project's code, architecture, development approach, past changes, or stack concepts (Next.js/React/Spring/JPA/Flyway/JWT/build tools, etc.) — e.g. "왜 이렇게 했어", "이게 뭐야", "설명해줘", "이해가 안 돼", "무슨 차이야", "QA 어떻게 해", "운영에 영향 없어?", "주의할 건 뭐야" — you MUST use this skill, even if the user never mentions it by name. Also use it when the user asks for an explanation of work just performed ("방금 뭘 고친 거야?"). Do NOT use it for pure work requests such as implementing features, fixing bugs, or refactoring.
-
ramus-dev Skill Android UseRuns an Android APK, demo app or GitHub pull request build on a disposable emulator the agent can see, tap, type on, screenshot and read logs from, with a browser link for a person to watch or take over. Use when asked to test, verify, reproduce or demo an Android app, APK or pull request, when a task needs a real Android device or emulator, or when iterating on an Expo, React Native, Flutter or Gradle app with hot reload.
-
talk2moon Bundle Moto Travel Western Sichuan规划风景公路优先的川西(阿坝州、甘孜州)摩托车路书,包括高德真实道路轨迹、用户可控的节假日避堵、历史落雪风险、逐日路线详情、油耗补给和 HTML/Excel 导出。Use when 用户提到川西摩旅、G317/G318 四川段骑行、色达、稻城亚丁、新都桥、四姑娘山、格聂或高原摩托路书。Do NOT use for 汽车自驾、川西以外摩旅、实时应急指挥,或把本 skill 当作医疗、交通执法及道路开放状态的权威结论。
-
librefang Skill CSS ExpertCSS expert for flexbox, grid, animations, responsive design, and modern layout techniques
-
c1trusovo831 Bundle SlidesCreate strategic HTML slide decks with Chart.js, design tokens, responsive layouts, and presentation copywriting. Use for HTML presentations and pitch decks.
-
c1trusovo831 Bundle UI StylingImplement accessible UI with shadcn/ui and Tailwind, including components, responsive layouts, themes, and dark mode. Also supports canvas-based posters and visual compositions.
-
c1trusovo831 Bundle Design SystemCreate or update design tokens, component specifications, and Tailwind theme mappings. Use also for HTML slides that integrate brand tokens and the contextual slide system.
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 new-nextjs-app, migrate-content-eval, page-builder-widgets. 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.