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.
-
thomaspraun Bundle CodegraphUse when adding a function, component or helper, when hunting duplicated code, or when documenting a codebase. Extracts every exported symbol with its comment and its callers into a queryable index, and flags twins that do the same thing under different names.
-
thomaspraun Bundle Learn And SkillLearn any technology and generate a complete documentation skill from official sources. Use when the user wants to create a skill for any technology, library, framework, or language (e.g., 'create a skill for Redis', 'I want a skill for Riverpod', 'make a Tailwind CSS skill', 'build a skill for Express.js'). Researches via Context7 MCP and web search, then generates a skill with SKILL.md and reference files following skill-creator conventions.
-
vectordotdev Skill Vector Components Maturity EvalEvaluates all Vector component maturity levels and writes a monthly markdown report to agents/reports/maturity-YYYY-MM.md. Use when asked to evaluate component maturity or generate the monthly maturity report.
-
thomasrohde Bundle Cairn StackBuild beautiful, self-contained Cairn stacks — single `.cairn.html` files that carry their own reader, editor, pictures, and reader progress, work offline from a folder, and stay readable for years. Use this skill whenever the user mentions Cairn, a `.cairn.html` file, or a `cairn/stack` document, AND whenever they ask for anything shaped like one even without naming it: an interactive card deck, a portable explainer or handbook, a field guide, a one-file course or onboarding walkthrough, an offline presentation, a self-contained interactive document, or "something I can email that just opens and works with no server". Also use it to edit, restyle, extend, or audit an existing `.cairn.html`. Prefer this over hand-rolling an HTML page whenever the deliverable should stay useful after its tooling is gone.
-
tianxingyang Bundle Travel Planner生成详细的多日旅行计划,输出为精美的中文 HTML 页面。涵盖天气预报、每日行程(景点+交通)、 餐饮推荐(含人均价格)、酒店住宿对比、详细预算。通过多源网络搜索(含小红书真实用户反馈) 采集信息。支持目的地未知时的推荐与对比决策。 适用于个人自由行、家庭出游(含婴幼儿/老人)、多人旅行等场景。 当用户提到以下内容时使用此 skill:旅行计划、旅游攻略、出行规划、行程安排、去哪里玩、 假期安排、旅行推荐、目的地推荐、holiday plan、travel itinerary、trip planning, 即使用户没有说"旅行计划"但描述了目的地+时间+想玩的意图,也应触发。 即使用户只说了时间和人员但不确定去哪里,也应触发(进入目的地推荐流程)。
-
vercel-labs Bundle PhaseUse when optimizing, auditing, or preparing to ship web animations or rendering performance work: frame loops, scroll/viewport reveals, mount/unmount transitions, canvas/WebGL lifecycles, reduced motion, lazy rendering, and deferred off-screen work. Use for jank, per-frame allocations, forced reflows, render loops, animations that do not pause off-screen, content-visibility, requestIdleCallback, analyzing Chrome DevTools performance traces for animation or rendering issues, or choosing between browser-driven CSS/WAAPI, minimal JS, phase, and Motion/GSAP. Use when the user explicitly asks about phase APIs or behavior. Do not use during exploratory animation ideation, prototyping, visual iteration, or trying variants, even when the code already imports phase; wait until the user asks for performance guidance, an audit, production implementation, ship-readiness review, or about phase itself.
28.7k -
vercel-labs Bundle Tw BlocksSemantic spacing system for Tailwind CSS v4 using block (32px) and tab (4px) units. Use when building UIs with consistent spacing, dashboards, admin panels, design tools, or any interface requiring a harmonious spacing system. Provides patterns for buttons, inputs, cards, toolbars, panels, and layouts.
28.7k -
verl-project Skill Manage Wheelhouse ComponentsUpgrade a pinned component version or add a brand-new CUDA wheel component to the verl-wheelhouse build pipeline. Covers editing versions.yaml, writing ci/build_scripts/<builder>.sh, and creating/copying a .github/workflows/build-<component>.yml trigger workflow. Use when asked to bump/update/pin a submodule version, add a new wheel/component to the wheelhouse, or edit versions.yaml in this repo.
-
timeplus-io Skill VistralUse when building React streaming data visualizations with @timeplus/vistral — creating charts, writing VistralSpec, using VistralChart, configuring streaming data sources, or wiring up live data via ChartHandle.
-
timseriakov Bundle Likec4 ArchitectureBuild and maintain software architecture as code with LikeC4 DSL. Use when tasks mention architecture diagrams, C4/context/container/component views, system landscape, dependency/integration maps, or when the user wants architecture generated/evolved from code. Apply for creating new `.c4`/`.likec4` models, updating existing models, validating with LikeC4 CLI, and preparing preview/build/export outputs.
-
vfarcic Bundle SlidesCreate a Reveal.js talk in this repo following the established pattern: copy the HTML loader template, build slides ONE AT A TIME with confirmation, prefer image-only slides with everything in speaker notes, render diagrams as image sequences via the `diagram` skill, link the talk in talks.md, and finish with an abstract.
-
vibe-motion Bundle Remotion Code Motion ExplainerCreate polished, code-driven Remotion motion explainers from scripts, narration, subtitles, product specifications, reference videos, UI recordings, diagrams, or abstract concepts. Use for product launches, AI demonstrations, UI interactions, algorithms, scientific principles, electrical systems, data flows, architecture, charts, equations, and concepts best expressed with React, SVG, Canvas, WebGL, or Three.js. Prioritize continuous spatial logic, visible cause and effect, precise interaction states, editable parameters, deterministic rendering, and evidence-backed visual QA.
-
vibeforge1111 Bundle Codex Visual Builder GuildUse when Codex should improve visual UI/UX through a screenshot-driven design loop with imagegen assets, vision review, responsive checks, interaction states, accessibility, A/B variants, design tokens, art bible extraction, and specialist-style delegation. Trigger when the user asks for the Codex Visual Builder Guild, visual builder loop, imagegen plus vision workflow, designer guild, UI polish, README/X launch visuals, game UI polish, SaaS dashboard polish, or to make an app look production-ready through screenshots.
-
vichhka-git Bundle Kilo Security ReviewFull-stack security review skill for Kilo CLI and OpenCode that produces pentest-grade reports with CVSS scores, HackerOne bug-bounty references, working exploit PoCs, and concrete code fixes. Use this skill whenever the user asks to: audit code, security review a repo or file, find vulnerabilities, run a pentest or security scan, check OWASP Top 10 / API Top 10 / Mobile Top 10, do a bug bounty recon, conduct a threat model, review code before a release, look for SQLi / XSS / SSRF / IDOR / RCE / auth bypass, investigate a CVE, or ask "is this code secure?". Works on web, API, mobile (Android + iOS + React Native), cloud/IaC, and full-stack projects. Always use this skill — it prevents false positives, enforces PoC-backed findings, and produces reports that match professional pentest quality.
-
victor36max Bundle Use Effect KillerScan React codebase for useEffect anti-patterns (derived state, event logic in effects, effect chains, prop-driven resets, missing cleanup, parent notifications, etc.) and propose idiomatic fixes. Based on React's "You Might Not Need an Effect" guide. Use when asked to audit, review, or clean up useEffect usage.
-
tjxj Bundle Wanghong Handwritten Ppt将文章、讲稿或技术主题制作成王虹学术报告气质的 16:9 Notability 手写风 HTML 幻灯片,并逐页导出 PNG。触发词:王虹PPT风格、王虹手写PPT、Notability学术手写幻灯片、手写网页PPT、手写PPT、数学家手写报告风。
-
tom-james-watson Skill Vanilla ExtractComprehensive guide for styling React components with Vanilla Extract (Vite integration, typed styles, theming, composition, global APIs, recipes, dynamic runtime theming, and optional sprinkles). Use this skill when user tasks involve implementing or refactoring React component styling with Vanilla Extract, especially when emphasizing zero-runtime CSS generation, strong TypeScript ergonomics, scalable variants, and safe theming patterns.
-
tommy0103 Bundle PrismRender structured HTML documents with visual hierarchy — decisions, architecture flows, collapsible references, metrics, and charts.
-
tonbistudio Bundle Nuke ShelterMonitors bags.fm token launch fees and runs autonomous supply distribution analysis. Claims fees, pays $50 per run to treasury, analyzes holder distribution, generates risk signals, and publishes HTML dashboards.
-
tponscr-debug Bundle AwwwardsApply Awwwards-winning design principles. Use when designing UIs, creating frontends, or improving visual design. Triggers on frontend design, UI/UX work, styling, CSS, component design.
-
trev0rr Bundle Executive SlideUse when the user asks for an executive slide, strategy slide, consulting slide, McKinsey/MBB-style slide, executive or strategy deck, board deck, or wants data/analysis made "boardroom-ready" or presented to leadership. Produces single slides or multi-slide React (.jsx) artifact decks to management-consulting standards.
-
trsoliu Bundle React Best PracticesReact 项目开发全流程指南(中文)。涵盖技术栈选型、Monorepo 架构(pnpm + Turborepo)、开发规范、Git 提交约定、Changelog 管理、测试策略、代码审查、开发工作流与文档管理。适用于 React + TypeScript + Zustand + TanStack Query + Vitest + Playwright 技术栈。当用户创建 React 项目、编写/审查/重构 React 代码、配置测试或 CI/CD、创建需求/设计文档时自动激活。
-
tt-a1i Bundle Repo LearningTurn a Git repository URL or local path into one elegant, self-contained HTML learning page that teaches the project's value, architecture, and operating principles top-down with diagrams. Use when the user wants to understand, learn, onboard, explain, map, or study a repository.
-
tyrchen Bundle Build High Quality SlidesDesign, build, revise, and validate high-quality slide decks and modern HTML slide sites. Use when Codex needs to turn an outline into a presentation, improve an existing deck, remove AI-like or translated prose, design diagrams and D3 visualizations, add transitions and keyboard/fullscreen behavior, separate slide content from styles, audit title wrapping and overflow, or publish a static presentation to GitHub Pages. Especially useful for long Chinese technical talks with multiple topics, demos, charts, and a narrative ending.
-
tzf1003 Bundle Vue Style GuideVue.js 官方代码规范编码指导技能。当用户在编写 Vue 组件、开发 Vue 项目、进行代码审查、设计组件结构、处理 Props/Emits/Computed 时,必须使用此技能来确保代码符合 Vue.js 官方风格指南。触发词:Vue 规范、Vue 代码风格、Vue 组件命名、Vue 最佳实践、SFC 规范、组件设计、Vue 开发规范、props 规范、Vue 模板规范、组合式 API 规范、Composition API 规范、Vue 文件结构。适用于所有 Vue 2/3 项目开发,帮助大模型生成符合 Vue 官方风格指南的代码。
-
tanfust Bundle Supabase Auth EmailsUse when customizing Supabase Auth emails with React Email components. Covers all Supabase Auth email types — 5 auth action templates (confirmation, invite, magic link, recovery, email change) and 7 notification templates (password changed, email changed, phone changed, identity linked/unlinked, MFA enrolled/unenrolled), the shared layout wrapper, Tailwind styling for email, the build-to-HTML pipeline with Go template variables, and Supabase config.toml integration. Use this skill whenever the user mentions Supabase auth emails, custom email templates for Supabase, password reset emails, magic link emails, sign-up confirmation emails, MFA notification emails, or any work involving rendering React Email to static HTML for Supabase's template system. Also applies when adding new Supabase auth email types or connecting React Email output to Supabase local dev.
-
tanis90 Bundle Coc 480buy Card生成《克苏鲁的呼唤》7 版中文调查员角色卡,使用 480 购点制,并输出合法 JSON 或可打印 HTML;HTML 可按需求渲染为彩色模式、纯黑白打印模式,或留空幸运方便现场掷点。用户提到 COC/CoC/克苏鲁的呼唤/跑团/调查员/车卡/角色卡/480buy/480购点/7版/可打印 HTML/黑白打印/彩色角色卡/现场摇幸运,或想要有弧光、有背景、有性格的调查员时应使用本 skill。角色卡模板、职业名、技能名和校验信息都以中文为主,因此不要自行翻译成英文职业或英文技能名;必须通过 GitHub 上的 coc-cardwright Python CLI 校验。不要只生成数值合法的空壳卡,角色卡里可写的部分都要完整、有质量,并且人物弧光要能从属性、技能、信用评级、物品和背景条目中互相印证。
-
tanstack Bundle Design Motion PrinciplesMotion and interaction design expert based on Emil Kowalski, Jakub Krehel, and Jhey Tompkins' techniques. Two modes — build interactive components with purposeful motion, or audit existing animations to catch AI-slop motion patterns (audit emits a branded HTML report with looping demos). Use when creating, adding, animating, or reviewing UI motion: transitions, hover states, micro-interactions, enter/exit animations, or any motion design work in React, Framer Motion, CSS, or HTML. Provides per-designer perspectives with context-aware weighting.
-
taohuayuan21bc Bundle Xiaohongshu Cover生成小红书封面 HTML 预览页面。提供 31 种设计风格、6 套排版模板、8 类字体系统和 60+ 视觉装饰元素,支持智能匹配 3 套差异化方案点选输出。当用户提到小红书封面设计、笔记封面制作、封面排版、封面图生成、小红书配图排版时使用。注意:本技能仅用于小红书封面设计,不与普通配图、海报设计混淆触发。
-
tbdavid2019 Bundle Spartacus DocsProvides a source-traceable reference for SAP Spartacus and Composable Storefront development using a daily prepared snapshot of the official SAP documentation. Use when Codex needs to install, configure, customize, migrate, integrate, or troubleshoot Spartacus, including SAP Commerce/Hybris, OCC, authentication, CORS, CMS, routing, SSR, performance, accessibility, FSA, or TUA tasks.
32 -
tchivs Bundle Browser QAUse whenever the user asks to QA, test, verify, click through, dogfood, smoke-test, or regression-test a website/web app; check login, admin/authenticated flows, responsive UI, browser console/network errors; or validate a local dev server, Docker Compose stack, staging/production deployment, frontend URL, or API-backed UI. Mandatory orchestrator: discover and persist the project QA profile, deployment method, URLs, health checks, and credential sources before opening the browser. Never guess startup commands, URLs, accounts, or passwords.
-
tecnomanu Bundle Video Docs BuilderRecords and assembles documentation videos for web apps using Playwright browser automation, TTS narration, and FFmpeg. Generates a React docs site with embedded videos. Use when asked to document an app, record user flows, create tutorial videos, walkthroughs, onboarding videos, step-by-step guides, how-to videos, "make docs", "document my app", "show how to use", or "create a video guide".
-
temich Bundle SvasAsync Svelte stores (svas): fetching, caching, revalidation, persistence. Use when UI presents data from the API.
-
temich Skill Svintlsvintl CLI for i18n — translations, locales, pluralization, mounts, building typed dictionaries. Triggers on `npx intl`, YAML locale files, intl directories, or any translation/i18n work in Svelte projects.
-
tencentblueking Bundle Bk Weweb腾讯蓝鲸 BK-WeWeb(@blueking/bk-weweb)微前端框架使用指南。当用户在自己的项目中安装或使用 @blueking/bk-weweb、需要加载微应用/微模块、配置 JS 沙箱或 CSS 隔离、做主子应用通信、预加载、KeepAlive、Vite 集成,或询问 bk-weweb / <bk-weweb> 标签相关问题时使用。
-
tencentcloudbase Skill Cloudbase Sites RuntimeUse when the user wants to develop, run, preview, save, deploy, or roll back a CloudBase Web app in this conversation as a Lovable/Codex-Sites-like vibe- coding session — i.e. any request that maps to "spin up a React+Vite project, see it live in the browser, iterate, save versions, deploy". Activate ONLY for browser-rendered Web projects based on the CloudBase official React (or Vue) + Vite template. Do NOT activate for: WeChat/Alipay mini-program, React Native / Flutter / Electron, pure cloud functions / CloudRun backends, or Next.js / Nuxt / Astro / Remix / SvelteKit (those frameworks are explicitly out of scope).
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 codegraph, learn-and-skill, vector-components-maturity-eval. 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.