frontend-craft

frontend-craft

One toolkit. Every AI coding assistant. Production-grade frontend standards.

🌐 Language / 语言 / 語言 / 言語 / 언어

English · 简体中文 · 繁體中文 · 日本語 · 한국어

---

frontend-craft is a universal frontend plugin that brings the same opinionated engineering standards to all 15 AI coding assistants listed below:

claude codex cursor windsurf opencode kilo gemini copilot antigravity augment trae codebuddy cline openclaw qoder

Per-runtime paths and caveats live in docs/runtimes/.

It bundles 14 specialized agents, 56 auto-activated skills, 11 slash commands, 5 event-driven hooks, MCP integrations for 6 design-tool endpoints, and a complete rules library into a single installable package. Run one command, and every AI session on your team writes React, Vue, Next.js, or Nuxt the same way — typed, accessible, secure, and consistent.

---

Why frontend-craft?

Problem	What frontend-craft does
AI assistants write inconsistent, untyped, or insecure frontend code	56 skills encode team standards — auto-activated when the assistant touches matching files
Each AI tool has its own plugin format	One CLI installs the same rules, agents, and hooks into 15 runtimes
Design-to-code handoff is lossy	MCP integrations bring in richer context from Figma, Figma Desktop, Sketch, MasterGo, Pixso, and 墨刀
Reviews are ad-hoc and shallow	14 agents produce graded reports: code, security, a11y, performance, TS, UI fidelity
No one remembers to run lint/tests	Event-driven hooks validate on save and session end — automatically
New projects start from scratch every time	/fec-init scaffolds CLAUDE.md, rules, and settings in seconds

---

Install

Requires Node.js 22+. Works on Windows, macOS, and Linux.

Option 1 - Install the fec CLI globally (recommended)

# 1. Install the fec command globally
npm install -g @bovinphang/frontend-craft@latest

# 2. Go to your frontend project
cd your-project

# 3. Choose the AI runtime(s) interactively
fec setup

# 4. Connect the current project
fec setup codex
fec setup claude
fec setup all

# 5. Connect globally, available across all projects
fec setup codex --global
fec setup claude --global
fec setup all --global

# 6. Preview / query
fec install --all --dry-run --global
fec list

npm install -g only installs the fec terminal command. fec setup is the terminal CLI command for connecting frontend-craft to a project; it is not the in-assistant /fec-init slash command. In an interactive terminal, running only fec setup asks you to choose runtimes. fec setup <runtime> and fec setup all connect frontend-craft to the current project by default. Only pass --global when you want to connect frontend-craft to the selected AI tool's global config directory so it is available across projects.

Option 2 — Temporary npx run (no global fec command)

# 1. Interactive wizard
npx @bovinphang/frontend-craft@latest

# 2. Connect the current project
npx @bovinphang/frontend-craft@latest install --local codex
npx @bovinphang/frontend-craft@latest install --local claude
npx @bovinphang/frontend-craft@latest install --all --local

# 3. Connect globally, available across all projects
npx @bovinphang/frontend-craft@latest install --global codex
npx @bovinphang/frontend-craft@latest install --global claude
npx @bovinphang/frontend-craft@latest install --all --global

# 4. Preview / query
npx @bovinphang/frontend-craft@latest install --all --dry-run --global
npx @bovinphang/frontend-craft@latest list

Use npx when you do not want to install a global fec command. Without arguments, it opens the interactive wizard: choose one or more runtimes, then choose whether to connect globally or into the current project. For scripted all-runtime installs, use install --all --local or install --all --global; do not write install all. For CI / scripts, always pass --global / -g or --local / -l; in non-TTY environments without an explicit location, the CLI defaults to claude --global.

Option 3 — Claude Code Marketplace

For Claude Code users, Claude Code Marketplace is the preferred single-source install. Use the CLI for Claude only when you need cross-runtime installs, scripted/offline file copies, or non-Marketplace environments.

If Marketplace is already installed, the CLI will not install or update a second Claude copy, even with --force; update through Claude Code Marketplace instead. If a CLI-managed Claude install already exists in the other scope, interactive terminals ask whether to keep that source updated or uninstall it before switching. Non-interactive terminals stop and print the exact update, uninstall, and install commands to run.

Full Claude-specific steps are in docs/runtimes/claude.md · 简体中文.

---

Quick start

Once installed, you have a full frontend engineering toolkit available in every AI session:

You: "Review my recent changes"
→ The fec-code-reviewer agent is dispatched, produces reports/code-review-*.md

You: "/fec-review"
→ Runs a structured review across architecture, types, rendering, styles, a11y

You: "Implement the checkout page from this Figma link"
→ The fec-figma-implementer agent reads the design via MCP, emits components and a report

You: "/fec-scaffold dashboard feature"
→ Creates a page / feature / component directory tree following project conventions

You: "/fec-refactor-clean"
→ Classifies and safely removes dead code, unused exports, styles, and deps

You: "/fec-refactor src/features/compose"
→ Diagnoses structural smells, builds a small-step plan, refactors one behavior-preserving step at a time, and validates every step

All slash commands below are shown for Claude Code; other runtimes expose the same capabilities through their own command systems (see docs/runtimes/).

---

Example prompts

For a complete scenario-based prompt library, see docs/example-prompts.md.

You: "Review my recent changes before merge. Focus on architecture, type safety, rendering behavior, styles, accessibility, and missing tests."
You: "Before coding, plan the account billing feature: route structure, component boundaries, data flow, state ownership, validation flow, and rollout risks."
You: "Build a multi-step registration form; choose the right form and schema validation approach for this project, with file upload, conditional fields, async validation, and accessible errors."
You: "Implement the UI from Figma node 123:456. Use existing design tokens and components, match spacing and responsive states, and document assumptions."
You: "`/fec-refactor-clean` Clean up dead code in this module."
You: "`/fec-smell` Diagnose structural smells in this module without editing."
You: "`/fec-refactor-plan` Build a behavior-preserving small-step refactoring plan."
You: "`/fec-refactor` Refactor this module without changing observable behavior."

---

What’s inside

Commands

Slash commands are the primary entry points for structured workflows. Most produce a timestamped Markdown report under reports/.

Command	Purpose	Report
/fec-init	Initialize project templates (CLAUDE.md, rules, settings)	—
/fec-review	Structured review of specified or recently changed files	code-review-*.md
/fec-scaffold	Create page / feature / component boilerplate by convention	—
/fec-plan	Unified planning: implementation architecture or test strategy	architecture-proposal-*.md or test-plan-*.md
/fec-tdd	Red → green → refactor loop for frontend TDD	—
/fec-debug	Diagnose and fix frontend issues: build, runtime, UI, and API failures	debug-*.md
/fec-refactor-clean	Classify and safely remove dead code, unused exports, styles, and deps	refactor-clean-*.md
/fec-smell	Diagnose code smells with evidence; do not edit business code	refactoring/smell-*.md
/fec-refactor-plan	Build an ordered behavior-preserving refactoring plan	refactoring/plan-*.md
/fec-refactor	Execute one validated behavior-preserving refactoring step at a time	refactoring/refactoring-*.md
/fec-doc-sync	Sync READMEs, docs, env notes, scripts, API/route notes, and deploy docs	—

Skills (auto-activated)

Skills are workflow definitions that activate automatically based on file patterns, frameworks, or task context. They encode review dimensions, output conventions, and report formats.

The skills below are grouped by use case so you can quickly find project standards, implementation, testing, review, design, migration, project evolution, and documentation workflows.

Project standards — conventions enforced whenever matching frameworks are detected:

Skill	Scope
fec-react-project-standard	React + TypeScript (structure, components, routing, state, API layer)
fec-vue3-project-standard	Vue 3 + TypeScript (structure, components, routing, Pinia, API layer)
fec-nextjs-project-standard	Next.js 14+ App Router, SSR/SSG, streaming, metadata