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.
-
zerob13 Bundle Test DoctorAudit and improve an existing software project's automated tests as regression protection. Use when Codex needs to assess test quality, map tests to user-visible capabilities or documented contracts, find implementation-coupled, over-mocked, dead, duplicate, fragile, or low-value tests, reduce CI cost, design a test migration plan, or refactor tests while preserving meaningful coverage. Applies to unit, integration, contract, component, and end-to-end suites across languages and frameworks.
-
zerob13 Bundle Electron Vue Renderer EngineerUse for every Electron renderer development task that touches Vue, TypeScript, components, styles, routes, composables, Pinia, preload APIs, IPC, UI behavior, or renderer performance. Enforces context-first frontend engineering before code changes.
-
zettersten Bundle HttpieMake HTTP requests using the HTTPie CLI (`http` and `https` commands). Use this skill whenever the user wants to send HTTP requests from the terminal, test or debug APIs, scrape HTML or web content, upload files, use bearer/basic/digest authentication, download files, manage sessions, watch/poll an endpoint, or convert curl commands to HTTPie syntax. Also triggers for tasks like "call this API from the terminal", "make a POST request with JSON", "send a request with an auth token", "fetch the HTML from this page", "check if this endpoint is up", or "test this endpoint".
-
zettersten Bundle Liquid GlassImplement Apple's Liquid Glass UI effect (iOS 26 / macOS 26) using CSS and SVG displacement filters. Use this skill when asked to create liquid glass effects, frosted glass components, iOS 26 glass UI, glassmorphism with refraction, glass buttons/cards/navbars, feDisplacementMap refraction effects, or any UI that needs realistic glass-like distortion of background content. Teaches the full technique from physics (Snell's law, SDF) to ready-to-use HTML/React/CSS templates.
-
zhd4n Bundle Shadcn Vue LaravelUse when adapting shadcn-vue components or examples to a Laravel + Inertia + Vue application, especially when examples assume Nuxt, Rails, src-based paths, or vee-validate-first forms.
-
zhnt Bundle Component Interfaces`skill`
-
zjy365 Bundle UI RouterChoose and use the right UI skills for frontend design, implementation, redesign, animation, accessibility, responsive layout, and visual quality work. Use whenever a UI request could benefit from specialized design skills, especially when the user is unsure which skill to use or gives a broad request such as build, redesign, improve, polish, animate, audit, or recreate an interface.
-
2389-research Skill CSS Development RefactorThis skill should be used when refactoring existing CSS from inline styles or utility classes to semantic patterns. Triggers on "refactor CSS", "extract styles", "consolidate CSS", "convert inline", "clean up styles", "migrate to semantic". Transforms to semantic classes with dark mode and tests.
-
2389-research Skill CSS Development ValidateThis skill should be used when reviewing or auditing existing CSS code for consistency with established patterns. Triggers on "review CSS", "audit styles", "check CSS", "validate stylesheet", "CSS review". Checks semantic naming, dark mode coverage, Tailwind usage, and test coverage.
-
2389-research Skill CSS Development Create ComponentThis skill should be used when creating new styled components or adding new CSS classes. Triggers on "create component", "new button", "new card", "add styles", "style component", "build UI element". Guides semantic naming, Tailwind composition, dark mode support, and test coverage.
-
mounirdhahri Skill PlanPlan any technical or product task and render the result as a Lavish HTML artifact for visual review and annotation. Use when the user types /plan or wants an implementation plan presented visually.
-
mounirdhahri Bundle Pr TourTurn a GitHub pull request into a shareable, self-contained HTML "tour" — hunks grouped into narrative snapshots (optionally grouped further into themed chapters) with descriptions, difit-style diff highlighting, and Prev/Next navigation. Use when the user wants to make a large or non-obvious PR easier to review, asks for a "PR tour", "guided walkthrough as HTML", "snapshot-by-snapshot review", or references a GitHub PR URL and wants it turned into a walkthrough document.
-
mustbesimo Bundle Cinematic ScrollBuild or improve cinematic websites with scroll-driven storytelling, pinned reveals, parallax, kinetic type, and optional 3D. Deliver standalone HTML or integrate into an existing app, with mobile and reduced-motion fallbacks and browser evidence. Also supports scroll audits and motion storyboards. Use for cinematic web work, not ordinary forms, dashboards, or unrelated animation.
-
victory-7291 Bundle Python Fastapi SetupFastAPI service setup: app/main.py, API routers, pydantic-settings, lifespan/app.state services, middleware, health checks, pytest/TestClient, Uvicorn, Gunicorn/uvicorn-worker, Docker/Compose. Use for scaffolding or modernizing Python API services; skip for Flask/Django-only, frontend-only, non-Python APIs, or Supabase-specific work.
-
spacezephyr Bundle Better Your Harness给本地项目做一次 AI Harness 体检,产出可视化 HTML 报告。按五层扫描:安全与卫生(.gitignore、明文密钥、Agent 权限)、上下文质量(AI 可读性、冷启动成本、噪音比、目录结构)、工具装备(Skill/MCP/子Agent,含僵尸 Skill 统计)、记忆(索引健康度)、学习(迭代与复盘)。报告底部列出按严重度排序的待办,每条带一个可一键复制的修复口令,粘给 Claude Code 或 Codex 就能修。当用户说「体检」「harness 分析」「检查我的项目配置」「扫一下这个仓库」「看看我的 Agent 环境有什么问题」「audit」时触发,也适用于用户直接甩来一个本地项目路径要求分析的场景。
-
specterops Bundle Janus Insight InterpreterUse this skill for Janus requests that ask for insights from any Janus artifact, including report HTML, bundles, analyzer outputs, events.ndjson, raw exports, or standalone JSON snippets.
-
specterops Skill Addressing DependabotAddresses GitHub Dependabot security alerts by listing open alerts, identifying affected Python/uv, frontend npm, and Titus Go projects, upgrading vulnerable dependencies, running verification, and committing fixes. Use when the user wants to fix Dependabot alerts, upgrade vulnerable packages, or address security vulnerabilities found by Dependabot.
-
spencerbraun Skill Backdraft ArtifactRead and check a backdraft artifact (*.backdraft.json or *.backdraft.html), verifying receipts and summarizing claim statuses. Use when handed such a file or asked to audit its citations.
-
ssheleg Bundle Project AuditUse when someone asks what is actually true of a whole project right now — what is finished, what is half-built, what is broken, and what nobody has looked at. Walks a cold start: discover what the project is, run a registry of probes chosen from that, read production evidence (published artefact against source, CI history, telemetry present or absent), then leave a JSON sidecar so the next audit can say what moved, and a self-contained HTML report on request. Read-only: it proposes board rows and commits nothing. Triggers - 'project audit', 'audit the project', 'codebase audit', 'state of the project', 'what is unfinished', 'project health check', 'аудит проекта', 'проаудируй проект', 'состояние проекта', 'что не доделано', 'аудит кодовой базы'. Not for: auditing one deliverable inside a run (that is the pipeline's own ladder), reviewing a diff, or checking a skill's construction — say 'без диагностики' to opt out.
-
staksoft Bundle Magento HyvaHyvä theme development for Magento 2 / Mage-OS / Adobe Commerce: building and customizing Hyvä storefronts with Alpine.js and Tailwind CSS, Magewire reactive server-driven components, child-theme setup and the Tailwind build, overriding Hyvä/Luma templates and layout XML, and Luma-to-Hyvä compatibility. Use this skill whenever the user mentions Hyvä (hyva), or is doing Magento frontend work with Alpine.js, Tailwind, or Magewire — creating or styling a Hyvä theme, writing Alpine components in .phtml, configuring tailwind.config.js, building a Magewire component, fixing a Luma module that breaks on Hyvä, or converting a storefront from Luma to Hyvä. Strong triggers: "hyva theme", "alpine.js in magento", "tailwind in magento", "magewire", "my hyva component isn't reactive", "convert luma to hyva". For backend/module work (plugins, observers, db schema, DI, REST/GraphQL, CLI) use the magento-module skill; for storefront performance audits use the magento-audit skill.
-
staksoft Bundle Magento ModuleCorrect Magento 2 / Mage-OS / Adobe Commerce module development: scaffolding new modules, extending or customizing core behavior (plugin vs observer vs preference decisions), declarative schema and custom tables, product/EAV attributes, dependency injection, checkout/cart/totals and custom order or shipping fee logic, admin configuration (system.xml/ACL), admin grids and ui_components, layout XML and view models, upgrading or migrating custom modules (incl. to Mage-OS) and their composer.json constraints, and debugging playbooks for setup:di:compile failures, layout not applying, and observers/plugins that don't fire. Use this skill whenever the user is writing, modifying, or debugging custom Magento, Mage-OS, or Adobe Commerce code — creating or extending a module/extension, intercepting core behavior, adding database tables or attributes, building admin settings or grids, frontend blocks or templates, or fixing errors from bin/magento commands — even if they don't say "module" explicitly. Strong triggers: "
-
svar-widgets Bundle Svar VueUse when building, configuring, styling, or modifying any SVAR Vue UI component from the @svar-ui/vue-* packages - widgets, layouts, menus, toolbars, calendars, popups, themes, and locales
-
svar-widgets Bundle Svar ReactUse when building, configuring, styling, or modifying any SVAR React UI component from the @svar-ui/react-* packages - widgets, layouts, menus, toolbars, calendars, popups, themes, and locales
-
svar-widgets Bundle Svar SvelteUse when building, configuring, styling, or modifying any SVAR Svelte UI component from the @svar-ui/svelte-* packages - widgets, layouts, menus, toolbars, calendars, popups, themes, and locales
-
terseai Bundle Terse Self HostSelf-host the Terse control plane. Use when the user wants to run Terse on their own infrastructure instead of Terse Cloud, or mentions self-hosting Terse, running the backend themselves, on-prem, or npx create-terse. Boots the full platform (backend, frontend, Postgres) in Docker.
-
power-components Bundle Create Powergrid PluginCreate a complete PowerGrid plugin from scratch, including PHP class, Column macro, Blade view, Alpine.js component, and registration.
-
prisma-labs-dev Bundle React Best PracticesReact and frontend performance optimization guidelines. Use when writing, reviewing, or refactoring React code to improve rendering behavior, bundle cost, async concurrency, and browser performance. Triggers on tasks involving React components, data fetching, bundle optimization, hydration, or performance improvements.
-
prisma-labs-dev Bundle Web Design GuidelinesReview UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".
-
promptmechanic Bundle Week In ReviewEnd-of-week reflection report. Mines your Claude Code transcripts from the last 7 days to produce a self-contained HTML file with (1) the topics/areas you explored, (2) distilled key learnings with live-searched further-reading links, and (3) a token/command/skill/ctx-stack usage summary. Use when the user says "week in review", "weekly review", "what did I learn this week", "my week", or runs /week-in-review.
-
quantskills Bundle Skill B6 Limitup Pool涨停池动态管理:每日盘后维护 A 股涨停池,标记首板、连板数、炸板次数与回封时间,做题材分组、特殊形态识别与情绪面量化(分层晋级率、炸板率、赚钱效应),输出多维表格与 HTML 看板。Use when monitoring limit-up candidates, pool changes, streak and blow-up statistics, or related sentiment signals. Research and education only, not investment advice.
-
radiustechsystems Bundle Radius DevEnd-to-end Radius Network development playbook. Stablecoin-native EVM with sub-second finality. Uses plain viem (defineChain, createPublicClient, createWalletClient) for all TypeScript integration. wagmi for React wallet integration. Foundry for smart contract development and testing. Also covers Hardhat/ethers.js compatibility and EIP-7966 synchronous transactions. Micropayment patterns (pay-per-visit content, real-time API metering, streaming payments), x402 protocol integration, Radius x402 facilitators (Permit2 + EIP-2612), stablecoin-native fees via Turnstile, ERC-20 operations, event watching, production gotchas, and EVM compatibility differences from Ethereum.
-
rafeblandford Bundle Product Idea PackExplore and develop early digital-product ideas as proposition sketches, mechanism boards, product storyboards, interactive HTML prototypes, or coherent multi-format packs, with optional presentation and vector-design handoffs. Use for rapid product ideation, concept visuals, shareable prototypes, packaging accepted artefacts, or advancing an existing concept between formats; do not use for production UI implementation.
-
rafeblandford Skill Using Rafeblandford ComFind out what Rafe Blandford has done, written or can evidence, using rafeblandford.com's three agent interfaces — an MCP endpoint for reasoning about his career, a public Content API for bulk retrieval, and llms.txt/Markdown for crawling. Use when asked to assess him for a role, brief someone before a meeting, find his position on a topic, check whether he has experience of something, read his writing, or ingest the site — and instead of scraping the HTML.
-
railcode-hq Bundle Create Railcode AppBuild, modify, debug, test, and deploy Railcode apps end-to-end. Use when creating a Railcode app from an idea, scaffolding with the Railcode CLI, writing a backend worker with @railcode/sdk, wiring a frontend to worker routes, declaring app authority, testing with railcode dev, migrating a legacy v1 app to apps v2, maintaining an existing v1 browser-SDK app, adding to a v1 app something it cannot do (a secret, a backend, a cron, authorization that must hold), or deploying. Do not use for managed-agent authoring or general organization administration.
-
revylai Bundle App Store Preflight CompliancePre-submission compliance scanner workflow for Apple App Store apps. Use when reviewing iOS, macOS, tvOS, watchOS, or visionOS projects (Swift, Objective-C, React Native, Expo) for App Store rejection risks, submission readiness, privacy compliance, or guideline violations.
-
rindig Skill Component RegistryComponent architecture patterns for Remotion video production — reusable text, containers, effects, backgrounds, and visual patterns. Build once, compose forever.
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 test-doctor, electron-vue-renderer-engineer, httpie. 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.