A Codex plugin for enterprise frontend teams.
Integrates code review, security review, design-to-code (Figma/Sketch/MasterGo/Pixso/墨刀/摹客), accessibility checks, automated quality assurance, and project templates. All review, analysis, and evaluation reports are automatically saved as Markdown files to the project reports/ directory for archiving, traceability, and team sharing.
Option A: Project-level (recommended)
# Add as submodule in project root
git submodule add https://github.com/bovinphang/frontend-craft-codex.git .frontend-craft
# Copy skills and agents to project
cp -r .frontend-craft/.agents .frontend-craft/.codex .Option B: User-level
git clone https://github.com/bovinphang/frontend-craft-codex.git .frontend-craft
# Copy to Codex user directory
cp -r .frontend-craft/.agents/skills/* ~/.agents/skills/
cp -r .frontend-craft/.codex/agents/* ~/.codex/agents/Invoke the $frontend-craft-init skill or ask Codex:
Please use the frontend-craft-init skill to initialize project templates to .codex/
After initialization, customize for your project:
AGENTS.md— Update project info, package manager, common commands.codex/rules/— Remove inapplicable rules (e.g. deletevue.mdfor React-only projects).codex/config.toml— Configure MCP design tools as needed
# Code review (outputs to reports/code-review-*.md)
Use frontend-craft-review or frontend-code-review skill
# Create page/feature/component
Use frontend-craft-scaffold skill - create UserDetail page, create DataTable component
# Invoke subagents explicitly
Use frontend-architect to analyze component architecture
Use performance-optimizer for performance analysis
✨ Done! You now have access to 9 custom agents, 16 skills.
If your team uses Claude Code, OpenAI Codex, Cursor, OpenCode, Gemini CLI, OpenClaw, Continue, CodeBuddy, Trae, Kimi Code CLI, or other AI coding agents, you can install the workflow skills from the canonical bovinphang/frontend-craft repository into each tool’s skills directory using the Skills CLI (npx skills). The CLI supports dozens of agents; the exact list appears in interactive prompts or in the upstream documentation.
Skills CLI vs. this Codex repo
- Skills CLI — Installs skill packages from
bovinphang/frontend-craftinto the paths your chosen agents expect. Use this when you want the same review and frontend standards across multiple tools. - This repository — Provides the Codex layout (
.agents/skills/,.codex/agents/, Codex-specific init/review/scaffold skills, etc.) via the Quick Start steps above (submodule or copy).
Requirements: Node.js ≥ 18.
Install skills
npx skills add bovinphang/frontend-craftFollow the prompts for project vs. global install (-g), symlink vs. copy (--copy), and which agents to enable. To list skills in the repo without installing, run npx skills add bovinphang/frontend-craft -l. For specific skills or agents, use --skill / --agent (see npx skills --help).
Update skills
From the project where skills were installed (or after a global install, use the matching scope):
npx skills updateThis updates all installed skills to their latest versions. You can run npx skills check first to see what would change.
Telemetry: The CLI may collect anonymous telemetry by default. To disable it, set DISABLE_TELEMETRY=1. Details: skills.sh CLI docs.
frontend-craft-codex/
├── .agents/skills/ # Codex Skills (16 total)
│ ├── frontend-code-review/ # Architecture, types, rendering, styles, a11y
│ ├── frontend-craft-init/ # Initialize project templates
│ ├── frontend-craft-review/ # Review with Git scope
│ ├── frontend-craft-scaffold/ # Create page/feature/component
│ ├── security-review/ # XSS, CSRF, sensitive data, input validation
│ ├── accessibility-check/ # WCAG 2.1 AA accessibility
│ ├── implement-from-design/ # Implement UI from design files
│ ├── test-and-fix/ # lint, type-check, test, build and fix
│ ├── react-project-standard/ # React + TypeScript standards
│ ├── vue3-project-standard/ # Vue 3 + TypeScript standards
│ ├── legacy-web-standard/ # JS + jQuery + HTML legacy projects
│ ├── legacy-to-modern-migration/
│ ├── e2e-testing/ # Playwright/Cypress E2E
│ ├── nextjs-project-standard/ # Next.js 14+ App Router
│ ├── nuxt-project-standard/ # Nuxt 3 SSR/SSG
│ └── monorepo-project-standard/
│
├── .codex/agents/ # Custom subagents (9 total)
│ ├── frontend-architect.toml # Page splitting, component architecture
│ ├── performance-optimizer.toml # Performance bottleneck analysis
│ ├── ui-checker.toml # UI visual issues, design fidelity
│ ├── figma-implementer.toml # Precise UI implementation from design
│ ├── design-token-mapper.toml # Map design variables to Tokens
│ ├── frontend-code-reviewer.toml # Frontend code review (CRITICAL→LOW)
│ ├── frontend-security-reviewer.toml # Browser-side security review
│ ├── frontend-e2e-runner.toml # Playwright / E2E journeys
│ └── typescript-reviewer.toml # TS/JS language & type review
│
└── scripts/ # Optional: manual integration
├── security-check.mjs # Block dangerous commands
├── format-changed-file.mjs
├── run-tests.mjs
├── session-start.mjs
└── notify.mjs
| Skill | Purpose | Report output |
|---|---|---|
frontend-code-review |
Review code on architecture, types, rendering, styles, a11y | code-review-*.md |
frontend-craft-review |
Review specified files or recent Git changes | code-review-*.md |
frontend-craft-init |
Initialize project templates to .codex/ |
— |
frontend-craft-scaffold |
Create page / feature / component by convention | — |
security-review |
XSS, CSRF, sensitive data, input validation | security-review-*.md |
accessibility-check |
WCAG 2.1 AA accessibility | accessibility-review-*.md |
implement-from-design |
Implement UI from Figma/Sketch/MasterGo/Pixso/墨刀/摹客 | design-plan-*.md |
test-and-fix |
Run lint, type-check, test, build and fix | test-fix-*.md |
react-project-standard |
React + TypeScript project standards | — |
vue3-project-standard |
Vue 3 + TypeScript project standards | — |
legacy-web-standard |
JS + jQuery + HTML legacy projects | — |
legacy-to-modern-migration |
jQuery/MPA → React/Vue 3 migration strategy | migration-plan-*.md |
e2e-testing |
Playwright/Cypress E2E standards | — |
nextjs-project-standard |
Next.js 14+ App Router standards | — |
nuxt-project-standard |
Nuxt 3 SSR/SSG standards | — |
monorepo-project-standard |
pnpm workspace, Turborepo, Nx | — |
| Agent | Purpose | Report output |
|---|---|---|
frontend-architect |
Page splitting, component architecture, state flow, directory planning | architecture-proposal-*.md |
performance-optimizer |
Analyze performance bottlenecks, output optimization plan | performance-review-*.md |
ui-checker |
UI visual issues, design fidelity evaluation | ui-fidelity-review-*.md |
figma-implementer |
Precise UI implementation from design files | design-implementation-*.md |
design-token-mapper |
Map design variables to project Design Tokens | token-mapping-*.md |
frontend-code-reviewer |
Frontend code review (React/Vue/Next/Nuxt, a11y, client security) | code-review-*.md |
frontend-security-reviewer |
XSS, secrets in bundle, dangerous DOM/API, dependency risks | security-review-*.md |
frontend-e2e-runner |
E2E journeys, Playwright/Cypress, flaky governance | e2e-summary-*.md (optional) |
typescript-reviewer |
TypeScript/JavaScript: types, async, security; typecheck-first | typescript-review-*.md |
Invoke subagents explicitly in your prompt, e.g.:
Use frontend-architect to analyze the component architecture for this page
| File | Purpose |
|---|---|
AGENTS.md |
Project description, common commands, working principles |
.codex/config.toml |
MCP server config for design tools |
.codex/rules/vue.md |
Vue 3 component standards |
.codex/rules/react.md |
React component standards |
.codex/rules/design-system.md |
Design system, Token, accessibility |
.codex/rules/testing.md |
Testing and validation |
.codex/rules/git-conventions.md |
Conventional Commits |
.codex/rules/i18n.md |
Internationalization |
.codex/rules/performance.md |
Performance optimization |
.codex/rules/api-layer.md |
API layer, error handling |
.codex/rules/state-management.md |
State management |
.codex/rules/error-handling.md |
Error handling |
.codex/rules/naming-conventions.md |
Naming conventions |
.codex/rules/code-comments.md |
Frontend code comment guidelines |
.codex/rules/ci-cd.md |
CI/CD pipeline |
.codex/rules/refactoring.md |
Refactoring constraints |
.codex/rules/typescript.md |
TypeScript/JavaScript standards; pairs with typescript-reviewer |
- Codex (CLI, IDE extension, or App)
- Node.js >= 18
- npm, pnpm, or yarn
Configure in .codex/config.toml or ~/.codex/config.toml. Set environment variables:
| Variable | Tool | How to get |
|---|---|---|
FIGMA_API_KEY |
Figma / Figma Desktop | Figma account settings > Personal Access Tokens |
SKETCH_API_KEY |
Sketch | Sketch developer settings |
MG_MCP_TOKEN |
MasterGo | MasterGo account settings > Security > Generate Token |
MODAO_TOKEN |
墨刀 | 墨刀 AI feature page for access token |
Pixso uses local MCP; enable in Pixso client. No extra env vars. 摹客 has no MCP; works via user screenshots/annotations.
macOS / Linux:
export FIGMA_API_KEY="your-figma-api-key"
export SKETCH_API_KEY="your-sketch-api-key"
export MG_MCP_TOKEN="your-mastergo-token"
export MODAO_TOKEN="your-modao-token"Windows (PowerShell):
$env:FIGMA_API_KEY = "your-figma-api-key"
$env:SKETCH_API_KEY = "your-sketch-api-key"
$env:MG_MCP_TOKEN = "your-mastergo-token"
$env:MODAO_TOKEN = "your-modao-token"All reports are saved to the project reports/ directory:
| Report type | Filename pattern | Source |
|---|---|---|
| Code review | code-review-YYYY-MM-DD-HHmmss.md |
frontend-craft-review, frontend-code-review |
| Security review | security-review-YYYY-MM-DD-HHmmss.md |
security-review |
| Accessibility | accessibility-review-YYYY-MM-DD-HHmmss.md |
accessibility-check |
| Performance | performance-review-YYYY-MM-DD-HHmmss.md |
performance-optimizer |
| Architecture | architecture-proposal-YYYY-MM-DD-HHmmss.md |
frontend-architect |
| Design fidelity | ui-fidelity-review-YYYY-MM-DD-HHmmss.md |
ui-checker |
| Design implementation | design-implementation-YYYY-MM-DD-HHmmss.md |
figma-implementer |
| Token mapping | token-mapping-YYYY-MM-DD-HHmmss.md |
design-token-mapper |
| Design plan | design-plan-YYYY-MM-DD-HHmmss.md |
implement-from-design |
| Test fix | test-fix-YYYY-MM-DD-HHmmss.md |
test-and-fix |
| Migration plan | migration-plan-YYYY-MM-DD-HHmmss.md |
legacy-to-modern-migration |
Tip: Add
reports/to.gitignoreto avoid committing auto-generated reports.
For Git submodule installs:
git submodule update --remote .frontend-craft
cp -r .frontend-craft/.agents .frontend-craft/.codex .For user-level installs, re-copy the updated skills and agents.
Codex skills are workflow definitions with name and description in SKILL.md. Codex can invoke them implicitly when your task matches the description, or explicitly via $skill-name or by mentioning the skill in your prompt.
Custom agents are defined in .codex/agents/*.toml. Each file specifies name, description, and developer_instructions. Invoke them explicitly in your prompt when you need specialized analysis (e.g. architecture, performance, design fidelity).
Codex does not support hooks. The scripts/ directory contains utilities you can integrate manually into pre-commit hooks, CI pipelines, or reference in AGENTS.md for Codex to run when appropriate.
MIT — Use freely, modify as needed, contribute back if you can.
If this repo helps you, give it a Star. Build something great.