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.
-
viewway Bundle Frontend Development 2MiniHES 前端开发规范。当用户进行 Vue 3 前端开发、组件设计、 页面布局、样式调整时自动激活。 涵盖技术栈、组件设计原则、设计规范、Ant Design Vue 用法。
-
bkywksj Skill Error Handler 2Tauri 异常处理技能,覆盖 Rust 错误处理和 React 错误边界。 触发场景: - 需要设计错误处理策略 - 需要处理 Rust Command 中的错误 - 需要处理前端 invoke 调用失败 - 需要实现全局错误处理 触发词:异常、错误处理、Error、Result、try-catch、panic、崩溃、错误边界
-
bkywksj Skill Store Management 2Tauri 状态管理技能,覆盖 React 前端状态和 Rust 后端状态管理。 触发场景: - 需要管理前端组件间共享状态 - 需要在 Rust 后端管理应用状态 - 需要持久化存储(tauri-plugin-store) - 需要设计全局状态架构 触发词: 状态管理、state、store、全局状态、共享状态、Zustand、Context、持久化
-
bkywksj Skill Test Development 2Tauri 项目测试开发技能,覆盖 Rust 单元测试和 React 组件测试。 触发场景: - 需要为 Rust Command 编写测试 - 需要为 React 组件编写测试 - 需要设计测试策略 - 需要运行和调试测试 触发词:测试、test、单元测试、集成测试、TDD、测试用例
-
bkywksj Skill Project Navigator 2Tauri 项目导航技能,快速定位代码、理解项目结构、找到关键文件。 触发场景: - 需要了解项目整体结构 - 需要快速找到某个功能的代码位置 - 需要理解 Rust 和 React 代码的关系 - 新加入项目需要熟悉代码 触发词:项目结构、在哪里、怎么找、代码位置、目录、文件、导航、定位
-
bkywksj Skill Architecture Design 2Tauri 架构设计技能,指导双进程架构下的模块拆分和代码组织。 触发场景: - 需要设计新模块的架构 - 需要重构现有代码结构 - 需要决定功能放在 Rust 还是 React 侧 - 需要设计插件集成方案 触发词:架构、设计、模块、拆分、重构、组织、结构
-
bkywksj Bundle Collaborating With Gemini 2当用户明确点名要用 Google Gemini CLI 协同时使用此 Skill,把指定任务委托给 Gemini 执行并整合结果。 触发场景: - 用户明确说"用 Gemini / 让 gemini 看看 / gemini 协同" - 用户要求把某个具体任务委托给 Gemini CLI 执行 - 用户要求多模型交叉验证,并点名 Gemini 作为其中一方 - 用户要求接续之前的 Gemini 会话(SESSION_ID / latest) 触发词:Gemini、gemini协同、gemini CLI、委托给 Gemini、gemini_bridge 前置要求: - 已安装 Gemini CLI (npm install -g @google/gemini-cli) - 已配置 Google API Key (GEMINI_API_KEY 环境变量或 gemini auth login) 🔴 不适用场景(未点名 Gemini 一律不激活本技能): - UI / UX / 前端原型 / CSS / 样式设计 → 走 ui-frontend、theme-system, 或用户指定的工具(如 AI 工作站);不要因为出现"UI 设计""原型"就调 Gemini - 代码审查 / Bug 分析 → 走 bug-detective、code-patterns - 后端逻辑任务 → Gemini 理解有缺陷,优先使用 Codex
-
bkywksj Skill Collaborating With Antigravity 2当用户明确点名要用 Google Antigravity CLI(agy)协同时使用此 Skill,把指定任务委托给 agy 执行并整合结果。 触发场景: - 用户明确说"用 Antigravity / 用反重力 / 用 agy / agy 协同" - 用户要求把某个具体任务委托给 Antigravity CLI 执行 - 用户要求多模型交叉验证,并点名 Antigravity 作为其中一方 - 用户要求让外部模型返回严格 JSON 结构(--json-schema 强制结构化输出) - 用户要求接续之前的 agy 会话(--continue / --conversation ID) 触发词:Antigravity、antigravity、反重力、agy、agy协同、agy CLI、委托给 Antigravity 前置要求: - 已安装 Antigravity CLI(实测 v1.1.19,Windows 路径 %LOCALAPPDATA%\agy\bin\agy.exe) - 已完成登录认证(`agy models` 能列出模型即为已认证) 🔴 不适用场景(未点名 Antigravity 一律不激活本技能): - UI / UX / 前端原型 / 样式设计 → 走 ui-frontend、theme-system, 或用户指定的工具(如 AI 工作站) - 代码审查 / 规范检查 → 走 code-patterns;Bug 排查 → 走 bug-detective - 方案探索 / 技术选型 → 走 brainstorm、tech-decision、architecture-design - 泛泛的"多模型""交叉验证"字样但没点名用哪个 CLI → 不要自作主张拉起本技能
-
borkweb Bundle Review 2Pre-landing PR review. Analyzes diff against the base branch for SQL safety, migration safety, auth/permission gaps, error handling anti-patterns, API contract breaks, LLM trust boundary violations, conditional side effects, and other structural issues. Includes adversarial subagent review, design review for frontend changes, and a landing verdict (SAFE TO LAND / LAND WITH CAUTION / DO NOT LAND). Use when asked to "review this PR", "code review", "pre-landing review", or "check my diff". Proactively suggest when the user is about to merge or land code changes.
-
borkweb Bundle Review Security 2Deep security review of a diff or a specific file, grounded in 20 evidence-based pattern libraries extracted from 400+ real-world bugs in major open-source projects (Linux kernel, OpenSSL, Chromium, Firefox, curl, Go, Rust, Kubernetes, Next.js, etc.). Use when the user says "security review", "security audit", "audit this for vulnerabilities", "threat model this", "check for CVEs", "check for injection/auth/crypto issues", or when a diff touches buffer handling, parsers, authentication, authorization, cryptography, state machines, CI/CD, dependencies, or trust boundaries. Also usable as a reference library — `/review` links here when a diff touches a security-sensitive area.
-
decocms Skill Vtex Cart V2 2Cart v2 for VTEX storefronts — modular, granular, framework-agnostic. Explains the thesis (reduce cart API traffic, lazy cart creation, projection/sections fragmentation), the available hooks and loaders, and how to wire them in a Next.js or TanStack Start site.
-
decocms Skill Deco Migrate Script 2Automated migration script that converts Deco storefronts from Fresh/Preact/Deno to TanStack Start/React/Cloudflare Workers. Runs 8 phases (analyze, scaffold, transform, cleanup, report, verify, bootstrap, compile). Use when running the migration script, debugging its output, extending it with new transforms, or understanding what it does. Located at packages/blocks-cli/scripts/migrate.ts in @decocms/blocks-cli.
-
decocms Bundle Deco Apps Vtex Porting 2Port the VTEX commerce app from deco-cx/apps (Fresh/Deno) to @decocms/apps-start (TanStack Start/Node). The goal is to mirror the original production code that runs on thousands of stores, adapting only what is necessary for TanStack/Node. Covers full structural mapping (141 files → apps-start equivalent), adaptation patterns (Deno→Node, signals→react-query, manifest→exports, ctx.bag→configureVtex), schema.org compliance, and a file-by-file gap analysis. Use when porting VTEX code, fixing bugs in apps-start, or ensuring parity with the original.
-
decocms Bundle Decocms V6 To V7 Upgrade 2Upgrades an already-TanStack site from the monolithic @decocms/start@6.x + @decocms/apps@5.x to the split 7.x packages (@decocms/blocks, @decocms/tanstack, @decocms/blocks-admin, @decocms/blocks-cli, @decocms/apps-*). Use when a TanStack Start site's package.json pins @decocms/start to 6.x and/or @decocms/apps to 5.x. Not for Fresh/Deno sites (use the Fresh→TanStack migrator) and not for Next.js sites (use deco-next-package-migration).
-
decocms Bundle Deco To Tanstack Migration 2Consolidated migration skill for Deco storefronts. Phase-based playbook for Fresh/Preact/Deno to TanStack Start/React/Cloudflare Workers. Covers all phases from scaffold to async rendering, plus post-migration patterns, hydration fixes, navigation, search, matchers, and islands elimination. Single entry point — all deep-dive content in references/.
-
decocms Bundle Deco Next Package Migration 2Migrates a Next.js App Router site off the abandoned @decocms/start@5.x /next, /core, /node export tiers onto the current @decocms/blocks, @decocms/blocks-admin, and @decocms/nextjs packages. Use when a site's package.json pins @decocms/start to a 5.x-next prerelease, or imports from @decocms/start/next, @decocms/start/core, or @decocms/start/node.
-
a-v-ershov Skill Audit Product 2Drive the whole running product through the spec's user flows end to end and, since it is already in the real UI, check the accessibility target on the same journeys. Use in the release phase (run by release-product) or standalone once features are built. It proves the cross-feature integration a per-task verifier could not see — state carried across steps, the seams between features, success and error states — then re-walks the core journeys with an automated axe pass plus what automation misses (keyboard operability, focus order, screen-reader semantics, contrast, reduced motion, form errors).
-
whyzsm Skill Auth Web Cloudbase 2CloudBase Web Authentication Quick Guide for frontend integration after auth-tool has already been checked. Provides concise and practical Web authentication solutions with multiple login methods and complete user management.
-
whyzsm Skill AI Model Web 2Use this skill when a browser/Web app (React, Vue, Angular, Next, Nuxt, static sites, SPAs, dashboards, AI chat UI) needs AI models via @cloudbase/js-sdk. Default routing for page/页面/Web/前端/frontend/网页/H5 AI — call directly from browser, do NOT propose a Node.js proxy. Covers generateText and streamText. Models via ai.createModel with groups cloudbase, hunyuan-exp, or custom-*. Model IDs (deepseek-v4-flash, deepseek-v3.2, hunyuan-2.0-instruct-20251111, glm-5, kimi-k2.6) go in the model field. MUST run two-step preflight before code — see body. Keywords: 页面, Web, 前端, React, Vue, Next, Nuxt, SPA, AI chat UI, generateText, streamText, createModel, hunyuan-exp, Token Credits, TokenHub, Hunyuan, DeepSeek, GLM, Kimi, MiniMax. NOT for Node.js backend (use ai-model-nodejs), Mini Program (use ai-model-wechat), or image generation (Node SDK only).
-
ramboz Bundle Memory Sync 3Persist new context, terms, learnings, and settled lightweight decisions. Use when the user says remember this, save this for later, add to glossary, note this down, or at session end to consolidate what was learned — that goes to the memory layer (CLAUDE.md hot cache, docs/memory/, docs/inbox.md). Also use to record a decision or remember this decision when the call is a lightweight one shipped outside a spec slice: UI strings, visual and CSS choices, copy, or translation fixes. Those go to docs/decisions/lightweight-decisions.md via decisions.py. Also use when revising, updating, or re-pricing an already-recorded decision: judge whether it now warrants an ADR and promote it if so, rather than editing it in place. Also auto-fires at session end. Do not use for updating specs or code comments. For a NEW load-bearing decision, one with rejected alternatives, or any the user wants written up as an ADR, use `/jig:adr-workflow`; an already-recorded entry that outgrew this home is promoted from here.
-
stacksjs Bundle Stacks Technical Diagrams 2Create polished, dependency-free architecture, workflow, sequence, data-flow, and lifecycle diagrams for Stacks applications as standalone HTML with inline SVG, dark/light themes, and PNG, JPEG, WebP, and SVG export. Use for system or cloud architecture, security boundaries, network topology, technical workflows, CI/CD, runbooks, API call sequences, request lifecycles, data pipelines, lineage, PII boundaries, state machines, status transitions, or converting Mermaid into a purpose-built diagram.
-
agentscope-ai Bundle XLSX 3Use this skill any time a spreadsheet file is the primary input or output. This means any task where the user wants to: open, read, edit, or fix an existing .xlsx, .xlsm, .csv, or .tsv file (e.g., adding columns, computing formulas, formatting, charting, cleaning messy data); create a new spreadsheet from scratch or from other data sources; or convert between tabular file formats. Trigger especially when the user references a spreadsheet file by name or path — even casually (like "the xlsx in my downloads") — and wants something done to it or produced from it. Also trigger for cleaning or restructuring messy tabular data files (malformed rows, misplaced headers, junk data) into proper spreadsheets. The deliverable must be a spreadsheet file. Do NOT trigger when the primary deliverable is a Word document, HTML report, standalone Python script, database pipeline, or Google Sheets API integration, even if tabular data is involved.
-
agentscope-ai Bundle XLSX 4当电子表格文件是主要输入或输出时使用此技能。这意味着用户想要:打开、读取、编辑或修复现有的 .xlsx、.xlsm、.csv 或 .tsv 文件(例如添加列、计算公式、格式化、制图、清理混乱数据);从头创建新的电子表格或从其他数据源创建;或在表格文件格式之间进行转换。当用户通过名称或路径引用电子表格文件时特别触发——即使是随意提及(如"我下载目录里的 xlsx")——并且想对其进行操作或从中生成内容。也适用于将混乱的表格数据文件(格式错误的行、错位的表头、垃圾数据)清理或重构为规范的电子表格。交付物必须是电子表格文件。当主要交付物是 Word 文档、HTML 报告、独立 Python 脚本、数据库管道或 Google Sheets API 集成时不触发,即使涉及表格数据也不触发。
-
djalmajr Bundle Htm UI 2Build, inspect, migrate, and validate zero-build interfaces made with HTM UI, Preact, htm tagged templates, Tailwind CSS v4 in the browser, semantic theme tokens, and per-file ES module imports. Use for HTM UI component work, htm-ui importmaps, buildless Preact UI, component composition, theming, interaction fixes, documentation examples, and migrations away from copied shadcn-style component catalogs.
-
eugenezhangco-spec Skill Backend Patterns 2Backend architecture patterns, API design, database optimization, and server-side best practices for Node.js, Express, and Next.js API routes.
-
eugenezhangco-spec Skill Frontend Patterns 2Frontend development patterns for React, Next.js, state management, performance optimization, and UI best practices.
-
krutikjain Bundle Android Testing UI 2Validate Android UI behavior with Compose UI tests, Espresso-style checks, screenshot assertions, and accessibility verification.
-
whyzsm Skill Relational Database Web Cloudbase 2Use when building frontend Web apps that talk to CloudBase Relational Database via @cloudbase/js-sdk – provides the canonical init pattern so you can then use Supabase-style queries from the browser.
-
klebersoncollab Bundle Flutter Fvm 2Skill for professional Flutter development with FVM. Includes Dart 3+ patterns, optimized performance, mandatory accessibility, OWASP security, and resilience management (Error Handling).
-
archibate Bundle Remotion 2Documentation for Remotion - Video creation in React. TRIGGER when working with Remotion code, video composition, React-based video generation, or user mentions "remotion", "video composition", "create animation", "create video".
-
archibate Skill Frontend Design 2Design and implement distinctive, production-ready frontend interfaces with strong aesthetic direction. Use when asked to create or restyle web pages, components, or applications (HTML/CSS/JS, React, Vue, etc.).
-
arogyareddy Skill Frontend Patterns 6Frontend development patterns for React, Next.js, state management, performance optimization, and UI best practices.
-
arogyareddy Skill Frontend Patterns 7React, Next.js, state yönetimi, performans optimizasyonu ve UI en iyi uygulamaları için frontend geliştirme kalıpları.
-
arogyareddy Skill Frontend Patterns 8React、Next.js、状態管理、パフォーマンス最適化、UIベストプラクティスのためのフロントエンド開発パターン。
-
arogyareddy Skill Frontend Patterns 9React、Next.js、状态管理、性能优化和UI最佳实践的前端开发模式。
-
arogyareddy Skill Frontend Patterns 10Frontend development patterns for React, Next.js, state management, performance optimization, and UI best practices.
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 frontend-development, error-handler, store-management. 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.