frontend-craft

frontend-craft

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

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

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

Runtime compatibility and upgrade notes

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?

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/.

Review scope

/fec-review, the code/TypeScript/security review agents, and their review skills use three modes:

• Change review: explicitly request recent/current/staged changes, a PR or a commit, or use an established change context. With no changes, report that there is nothing to review; do not automatically review recent commits.
• Targeted review: specify a file or directory to review existing code, including unchanged code, without requiring a Git diff.
• Project review (default): with no scope or change context, or when the entire project is requested, inventory project-owned frontend code, related tests, configuration and dependency declarations, then review by module.