Frontend Craft
Frontend-craft is a universal frontend plugin that brings the same opinionated engineering standards to all 15 AI coding assistants.
Install
npx skills add bovinphang/frontend-craftclaude mcp add frontend-craft -- npx skills add bovinphang/frontend-craft{
"mcpServers": {
"frontend-craft": {
"command": "npx",
"args": [
"skills",
"add",
"bovinphang/frontend-craft"
]
}
}
}Install command taken from the project's README or registry entry. Always review code before running it.
README excerpt
Read full README on GitHub →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?
| 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
Similar plugs
Documented system prompts from Anthropic - Claude Fable 5.1, Opus 5.5, Claude Design, Claude Code. OpenAI - ChatGPT GPT-6-Astra, Codex. Google - Gemini 3.8 Flash, 3.1 Pro,…
Multi-harness agentic plugin marketplace for Claude Code, Codex, Cursor, OpenCode, GitHub Copilot, Google Antigravity, and Pi
The Developer Tool for Visual Engineers • An Open-Source AI-First Design tool • Visually build, style, and edit your code with AI • World's best, top-most agent recommended #1…