Stats
Actions
Available In
Tags
Help us improve
Share bugs, ideas, or general feedback.
Plugin
frontend-craft
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-craftPopularity
Stars
Med: 1·Avg: 290
Installs
Med: 0·Avg: 1
What's Inside
Slash Commands4
fec-init
/fec-init
按当前 AI runtime 初始化 frontend-craft 项目模板、rules 或降级说明。
fec-review
/fec-review
对指定文件或最近变更的前端代码进行规范化评审，输出分级评审报告并保存为 Markdown 文件。
fec-scaffold
/fec-scaffold
按项目规范创建 page、feature 或 component 的标准目录结构和样板文件。用法：/fec-scaffold <type> <Name>，如 /fec-scaffold page UserDetail
fec-test-plan
/fec-test-plan
为前端功能、PR 或里程碑制定测试分层计划，输出风险到测试层的覆盖矩阵。
Agents10
design-token-mapper
/design-token-mapper
使用该子代理将 Figma、Sketch、MasterGo、Pixso、墨刀或摹客中的样式与变量映射到项目已有的设计 Token、主题变量和样式约定，并将映射报告保存为 Markdown 文件。
figma-implementer
/figma-implementer
专注于按设计稿精确实现 UI 组件的代理，并将实现报告保存为 Markdown 文件。支持 Figma、Sketch、MasterGo、Pixso、墨刀、摹客六种设计工具。提供设计稿链接、选区截图或标注数据，自动获取设计数据并生成高保真前端代码。当需要基于设计上下文实现 UI，尤其是通过 MCP 完成设计稿转代码任务时，使用该子代理。
frontend-architect
/frontend-architect
当任务涉及页面拆分、组件架构、状态流设计、目录规划、数据流设计、模块边界划分或大型前端重构时，使用该子代理。将架构方案报告保存为 Markdown 文件。
frontend-code-reviewer
/frontend-code-reviewer
专注于前端代码（React/Vue/Next/Nuxt、TypeScript、样式、客户端安全）的资深评审。在编写或修改前端后委托；默认只输出并落盘评审报告，不直接修改业务代码。按 CRITICAL→LOW 检查、控制噪声并合并同类问题，报告写入 reports。适合结合 git diff 的独立 Code Review。
frontend-e2e-runner
/frontend-e2e-runner
前端端到端测试专精子代理：编写与维护关键用户旅程、执行 Playwright/Cypress、治理不稳定用例、管理截图/Trace/视频与 CI 产物。在需要生成、运行或修复 E2E、或保障核心流程可测时委托。若环境已安装 Vercel Agent Browser 等语义化浏览器工具可优先使用，否则以 Playwright 为主。
Skills28
fec-accessibility-check
/fec-accessibility-check
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.
fec-browser-storage
/fec-browser-storage
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 浏览器存储, 客户端持久化.
fec-canvas-threejs
/fec-canvas-threejs
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, 数据可视化, 游戏.
fec-component-testing
/fec-component-testing
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 组件测试, 组件单测, 单元测试, 轻量集成测试.
fec-data-fetching
/fec-data-fetching
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 数据获取, 缓存, 乐观更新.
Stats
Version2.1.2
Released
LanguageTypeScript
Stars13
Forks2
MaintenanceExcellent
LicenseMIT
Last Commit
Added
Safety Signals
Caution
Executes bash commands
Hook triggers when Bash tool is used
Modifies files
Hook triggers on file write and edit operations
Tags
Categories
Help us improve
Share bugs, ideas, or general feedback.
