Help us improve
Share bugs, ideas, or general feedback.
Share bugs, ideas, or general feedback.
Share bugs, ideas, or general feedback.
By bovinphang
Integrates design tool APIs (Figma, Sketch, MasterGo, Pixso, 墨刀, 摹客) to convert designs into React/Vue code, perform accessibility audits, security reviews, code quality checks, and test planning, all automated via skills, agents, and hooks with Markdown reports.
npx claudepluginhub bovinphang/frontend-craft按当前 AI runtime 初始化 frontend-craft 项目模板、rules 或降级说明。
对指定文件或最近变更的前端代码进行规范化评审,输出分级评审报告并保存为 Markdown 文件。
按项目规范创建 page、feature 或 component 的标准目录结构和样板文件。用法:/fec-scaffold <type> <Name>,如 /fec-scaffold page UserDetail
为前端功能、PR 或里程碑制定测试分层计划,输出风险到测试层的覆盖矩阵。
使用该子代理将 Figma、Sketch、MasterGo、Pixso、墨刀或摹客中的样式与变量映射到项目已有的设计 Token、主题变量和样式约定,并将映射报告保存为 Markdown 文件。
专注于按设计稿精确实现 UI 组件的代理,并将实现报告保存为 Markdown 文件。支持 Figma、Sketch、MasterGo、Pixso、墨刀、摹客六种设计工具。提供设计稿链接、选区截图或标注数据,自动获取设计数据并生成高保真前端代码。当需要基于设计上下文实现 UI,尤其是通过 MCP 完成设计稿转代码任务时,使用该子代理。
当任务涉及页面拆分、组件架构、状态流设计、目录规划、数据流设计、模块边界划分或大型前端重构时,使用该子代理。将架构方案报告保存为 Markdown 文件。
专注于前端代码(React/Vue/Next/Nuxt、TypeScript、样式、客户端安全)的资深评审。在编写或修改前端后委托;默认只输出并落盘评审报告,不直接修改业务代码。按 CRITICAL→LOW 检查、控制噪声并合并同类问题,报告写入 reports。适合结合 git diff 的独立 Code Review。
前端端到端测试专精子代理:编写与维护关键用户旅程、执行 Playwright/Cypress、治理不稳定用例、管理截图/Trace/视频与 CI 产物。在需要生成、运行或修复 E2E、或保障核心流程可测时委托。若环境已安装 Vercel Agent Browser 等语义化浏览器工具可优先使用,否则以 Playwright 为主。
Use when reviewing or improving frontend accessibility, semantic structure, keyboard support, focus management, ARIA labels, or WCAG-related UI issues; Chinese triggers include 无障碍, accessibility, a11y, WCAG.
Use when choosing, implementing, or reviewing browser storage such as localStorage, sessionStorage, IndexedDB, cookies, client persistence, offline data, secure storage, or cleanup strategy; Chinese triggers include 浏览器存储, 客户端持久化.
Use when building or reviewing Canvas 2D, Three.js/WebGL, React Three Fiber, 2D/3D visualization, game rendering, animation loops, GPU resource cleanup, or rendering performance. Do not use for standard DOM UI, charts already covered by a chart library, or non-graphical performance work; Chinese triggers include Canvas, Three.js, WebGL, 3D, 数据可视化, 游戏.
Use when authoring or reviewing frontend unit, component, or light integration tests close to UI code, including React Testing Library, Vue Test Utils, hooks/composables, props/emits, callbacks, accessible queries, user-event interactions, mocks, loading/error/empty states, and regression coverage. Use testing-strategy for layer planning, E2E for real-browser cross-page journeys, and validation-fix for running/fixing existing checks; Chinese triggers include 组件测试, 组件单测, 单元测试, 轻量集成测试.
Use when implementing or reviewing TanStack Query/React Query server-state flows: typed queries, query keys, caching, invalidation, mutations, optimistic updates, infinite queries, prefetch, SSR hydration, or API-layer integration. Do not use for local UI state or Service Worker caching; Chinese triggers include 数据获取, 缓存, 乐观更新.
Executes bash commands
Hook triggers when Bash tool is used
Modifies files
Hook triggers on file write and edit operations
Share bugs, ideas, or general feedback.
Own this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge.
Sign in to claimOwn this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge.
Sign in to claimBased on adoption, maintenance, documentation, and repository signals. Not a security audit or endorsement.
Advanced frontend design plugin with interactive wizard, trend research, moodboard creation, color/typography selection, and browser-based inspiration analysis
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
Frontend component development with accessibility and responsive design
Frontend design skills from Anthropic and OpenAI for building visually strong landing pages, websites, and apps.
Frontend development skill with design and implementation checklists
Claude Code skill pack for Anima (18 skills)
External network access
Connects to servers outside your machine
External network access
Connects to servers outside your machine
Requires secrets
Needs API keys or credentials to function
Requires secrets
Needs API keys or credentials to function
Uses power tools
Uses Bash, Write, or Edit tools
Uses power tools
Uses Bash, Write, or Edit tools
Share bugs, ideas, or general feedback.
A universal frontend plugin for Claude Code, Codex, Cursor, OpenCode, Gemini CLI, Qoder, Kilo, Windsurf, Copilot, Antigravity, Augment, Trae, CodeBuddy, Cline, OpenClaw, and more.
frontend-craft packages frontend review agents, workflow skills, slash commands, hooks, MCP templates, and project rules into one repo. Use the CLI to install the same frontend standards into 15 supported AI coding runtimes. If you install only through Claude Code Marketplace (native plugin flow), see docs/runtimes/claude.md · 简体中文.
Requires Node.js 22+. The CLI writes files under each tool’s expected layout (see src/install/runtime-homes.ts).
Interactive (terminal): run npx frontend-craft@latest or npx frontend-craft@latest install with no runtime to pick runtimes and Global vs Local. If you pass install <runtime> but omit --global / --local, the CLI asks where to install (TTY only).
Scripts / CI: always pass --global / -g or --local / -l. When stdin is not a TTY and both are omitted, the CLI defaults to global claude and prints a short notice.
npx frontend-craft@latest list
npx frontend-craft@latest install --local claude
npx frontend-craft@latest install --global codex
npx frontend-craft@latest install cursor --local
npx frontend-craft@latest install --all --dry-run --global
Supported runtimes: claude, codex, cursor, windsurf, opencode, kilo, gemini, copilot, antigravity, augment, trae, codebuddy, cline, openclaw, qoder.
Per-runtime notes live in docs/runtimes/. The OpenClaw npm package can be packed from this repo with npm run pack:openclaw, which builds and verifies, then writes frontend-craft-<version>.tgz to npm-packages/openclaw/ (for example frontend-craft-2.1.2.tgz).
npx frontend-craft@latest (wizard) or npx frontend-craft@latest install --local <runtime> / install --global <runtime> for scripted installs.docs/runtimes/ for your tool (paths, caveats)./fec-init, and update steps are in docs/runtimes/claude.md · 简体中文.This plugin fully supports Windows, macOS, and Linux. All hooks and scripts are implemented in Node.js for cross-platform compatibility.
The recommended multi-runtime path is now npx frontend-craft@latest (interactive wizard) or npx frontend-craft@latest install [--local|--global] <runtime> for scripted installs. If your team already uses the standalone Skills CLI, it can still install only the workflow skill packages from skills/.
npx frontend-craft — Installs skills plus the runtime-specific agents, commands, hooks, rules, and templates supported by this repository. Prefer the interactive flow from Universal Install above, or pass --local / --global when stdin is not a TTY.npx skills — Installs only the skill packages, useful for existing Skills CLI workflows.