{"_id":"@bovinphang/frontend-craft","_rev":"5-41f86334d6c3d9ade4727710e14e2a78","name":"@bovinphang/frontend-craft","dist-tags":{"latest":"2.9.0"},"versions":{"2.5.0":{"name":"@bovinphang/frontend-craft","version":"2.5.0","keywords":["frontend","claude-code","codex","cursor","opencode","gemini-cli","qoder","windsurf","copilot","openclaw","mcp","design-to-code","i18n","playwright","eslint"],"author":{"name":"Bovin Phang","email":"pengbaowen@msn.com"},"license":"MIT","_id":"@bovinphang/frontend-craft@2.5.0","maintainers":[{"name":"bovin","email":"bovin.phang@gmail.com"}],"homepage":"https://github.com/bovinphang/frontend-craft","bugs":{"url":"https://github.com/bovinphang/frontend-craft/issues"},"bin":{"fec":"dist/bin/frontend-craft.js","frontend-craft":"dist/bin/frontend-craft.js"},"dist":{"shasum":"563b2bbee9259e61fdfc8dc549730f0d000ad4a3","tarball":"https://registry.npmjs.org/@bovinphang/frontend-craft/-/frontend-craft-2.5.0.tgz","fileCount":180,"integrity":"sha512-5/gO7rNKKypX84MMvIblDkdiwyc9/7r27lniw6ydDJTZtOP3sppagGWm7cWsYDccnU7WHdztRiO+acjrGH3I5w==","signatures":[{"sig":"MEYCIQDKjE1qo+pHtlts1eDIrabzCkP8oyeNkwfgennp48pFoQIhAKrmIlhNCNryWb7Tq4M3gKwAD3Yi+pjUiVYgHwYuq0sI","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":1027903},"type":"module","engines":{"node":">=22.0.0"},"gitHead":"990c556fde0dff4bbc506fdacd341e88ae1c18c0","scripts":{"test":"npm run build && npm run test:only","build":"npm run clean && npm run typecheck && tsx scripts/build-dist.ts","clean":"node scripts/clean-dist.mjs","prepack":"npm run build","version":"npm run sync:version && git add package.json package-lock.json .claude-plugin/plugin.json .claude-plugin/marketplace.json openclaw.plugin.json skills/metadata.json","pack:all":"npm run build && npm run test:only && npm run build:openclaw:bundle && npm run check:openclaw-dist && tsx scripts/openclaw/pack-openclaw.ts && tsx scripts/pack-skills.ts && tsx scripts/check-skills-publish.ts","test:only":"node --import tsx --test --test-concurrency=1 tests/converters/codex-agents.test.ts tests/install/cli.test.ts tests/install/end-to-end.test.ts tests/install/update.test.ts tests/install/all-runtimes-dry.test.ts tests/install/metadata-consistency.test.ts tests/install/npm-pack.test.ts tests/install/skill-package.test.ts tests/install/ui-design-intelligence.test.ts tests/install/sync-version.test.ts tests/install/claude-cache.test.ts","typecheck":"npm run typecheck:ts && npm run typecheck:skill-scripts","pack:skills":"npm run build && tsx scripts/pack-skills.ts","audit:skills":"npm run build && tsx scripts/audit-skills.ts","sync:version":"tsx scripts/sync-version.ts","typecheck:ts":"tsc --noEmit -p tsconfig.json","pack:openclaw":"npm run build:openclaw && npm run check:openclaw-dist && tsx scripts/openclaw/pack-openclaw.ts","build:openclaw":"npm run build && npm run build:openclaw:bundle","prepublishOnly":"npm run sync:version && npm test","typecheck:openclaw":"tsc --noEmit -p tsconfig.openclaw.json","check:openclaw-dist":"tsx scripts/openclaw/verify-openclaw-dist.ts","check:skills-publish":"npm run build && tsx scripts/check-skills-publish.ts","build:openclaw:bundle":"tsx scripts/openclaw/build.ts","typecheck:skill-scripts":"tsc --allowJs --checkJs --noEmit --strict --module NodeNext --moduleResolution NodeNext --target ES2022 skills/fec-ui-design/scripts/design-system.mjs"},"_npmUser":{"name":"bovin","email":"bovin.phang@gmail.com"},"repository":{"url":"git+https://github.com/bovinphang/frontend-craft.git","type":"git"},"_npmVersion":"10.9.3","description":"Universal frontend plugin for Claude Code, Codex, Cursor, OpenCode, Gemini CLI, Qoder, Windsurf, Copilot, OpenClaw, and more — skills, agents, commands, hooks, and MCP templates.","directories":{},"_nodeVersion":"22.19.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsx":"^4.22.3","esbuild":"^0.28.0","openclaw":"^2026.4.20","prettier":"^3.5.0","typescript":"^5.7.3","@types/node":"^22.19.15","@sinclair/typebox":"^0.34.49"},"_npmOperationalInternal":{"tmp":"tmp/frontend-craft_2.5.0_1780314656823_0.38132507686612094","host":"s3://npm-registry-packages-npm-production"}},"2.6.0":{"name":"@bovinphang/frontend-craft","version":"2.6.0","keywords":["frontend","claude-code","codex","cursor","opencode","gemini-cli","qoder","windsurf","copilot","openclaw","mcp","design-to-code","i18n","playwright","eslint"],"author":{"name":"Bovin Phang","email":"pengbaowen@msn.com"},"license":"MIT","_id":"@bovinphang/frontend-craft@2.6.0","maintainers":[{"name":"bovin","email":"bovin.phang@gmail.com"}],"homepage":"https://github.com/bovinphang/frontend-craft","bugs":{"url":"https://github.com/bovinphang/frontend-craft/issues"},"bin":{"fec":"dist/bin/frontend-craft.js","frontend-craft":"dist/bin/frontend-craft.js"},"dist":{"shasum":"abd09ab8820b5120021e95eab6939e19cf1abb0b","tarball":"https://registry.npmjs.org/@bovinphang/frontend-craft/-/frontend-craft-2.6.0.tgz","fileCount":188,"integrity":"sha512-XDnVqYB5P7e0C2Bz0LfdhjKav7soiR8oyYgnROYLuvcGFvBQ2xVLohm4AwYypA33ZQe+5uW3vEHu98Iwo4dhIw==","signatures":[{"sig":"MEUCIQDgCqeJRFQR1+nDFsg3ovAU0Lqru2G2IRyM64YPFbfxJwIgPqEI6aD9jbz+gT/J6vHOBe5fygiq7mnyewU0r7gW4yM=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":1052118},"type":"module","engines":{"node":">=22.0.0"},"gitHead":"5e55862dfd19973a05447b7cfb29afc0aad788ed","scripts":{"test":"npm run build && npm run test:only","build":"npm run clean && npm run typecheck && tsx scripts/build-dist.ts","clean":"node scripts/clean-dist.mjs","prepack":"npm run build","version":"npm run sync:version && git add package.json package-lock.json .claude-plugin/plugin.json .claude-plugin/marketplace.json openclaw.plugin.json skills/metadata.json","pack:all":"npm run build && npm run test:only && npm run build:openclaw:bundle && npm run check:openclaw-dist && tsx scripts/openclaw/pack-openclaw.ts && tsx scripts/pack-skills.ts && tsx scripts/check-skills-publish.ts","test:only":"node --import tsx --test --test-concurrency=1 tests/converters/codex-agents.test.ts tests/install/cli.test.ts tests/install/end-to-end.test.ts tests/install/update.test.ts tests/install/all-runtimes-dry.test.ts tests/install/metadata-consistency.test.ts tests/install/npm-pack.test.ts tests/install/skill-package.test.ts tests/install/ui-design-intelligence.test.ts tests/install/sync-version.test.ts tests/install/claude-cache.test.ts","typecheck":"npm run typecheck:ts && npm run typecheck:skill-scripts","pack:skills":"npm run build && tsx scripts/pack-skills.ts","audit:skills":"npm run build && tsx scripts/audit-skills.ts","sync:version":"tsx scripts/sync-version.ts","typecheck:ts":"tsc --noEmit -p tsconfig.json","pack:openclaw":"npm run build:openclaw && npm run check:openclaw-dist && tsx scripts/openclaw/pack-openclaw.ts","build:openclaw":"npm run build && npm run build:openclaw:bundle","prepublishOnly":"npm run sync:version && npm test","typecheck:openclaw":"tsc --noEmit -p tsconfig.openclaw.json","check:openclaw-dist":"tsx scripts/openclaw/verify-openclaw-dist.ts","check:skills-publish":"npm run build && tsx scripts/check-skills-publish.ts","build:openclaw:bundle":"tsx scripts/openclaw/build.ts","typecheck:skill-scripts":"tsc --allowJs --checkJs --noEmit --strict --module NodeNext --moduleResolution NodeNext --target ES2022 skills/fec-ui-design/scripts/design-system.mjs"},"_npmUser":{"name":"bovin","email":"bovin.phang@gmail.com"},"repository":{"url":"git+https://github.com/bovinphang/frontend-craft.git","type":"git"},"_npmVersion":"11.11.0","description":"Universal frontend plugin for Claude Code, Codex, Cursor, OpenCode, Gemini CLI, Qoder, Windsurf, Copilot, OpenClaw, and more — skills, agents, commands, hooks, and MCP templates.","directories":{},"_nodeVersion":"24.14.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsx":"^4.22.3","esbuild":"^0.28.0","openclaw":"^2026.4.20","prettier":"^3.5.0","typescript":"^5.7.3","@types/node":"^22.19.15","@sinclair/typebox":"^0.34.49"},"_npmOperationalInternal":{"tmp":"tmp/frontend-craft_2.6.0_1780837921017_0.2144536092228655","host":"s3://npm-registry-packages-npm-production"}},"2.7.0":{"name":"@bovinphang/frontend-craft","version":"2.7.0","keywords":["frontend","claude-code","codex","cursor","opencode","gemini-cli","qoder","windsurf","copilot","openclaw","mcp","design-to-code","i18n","playwright","eslint"],"author":{"name":"Bovin Phang","email":"pengbaowen@msn.com"},"license":"MIT","_id":"@bovinphang/frontend-craft@2.7.0","maintainers":[{"name":"bovin","email":"bovin.phang@gmail.com"}],"homepage":"https://github.com/bovinphang/frontend-craft","bugs":{"url":"https://github.com/bovinphang/frontend-craft/issues"},"bin":{"fec":"dist/bin/frontend-craft.js","frontend-craft":"dist/bin/frontend-craft.js"},"dist":{"shasum":"e8796f13ed37203348f0497d8ded053f2fc4d14e","tarball":"https://registry.npmjs.org/@bovinphang/frontend-craft/-/frontend-craft-2.7.0.tgz","fileCount":241,"integrity":"sha512-EsfwBuPiHYvqI1XbJ1G4Xw2DyHQoqb/NdIIr3MXIbY1mXKA1H+/fgO3nivX/kA6EcWvZ+MUn8eCGZfoBAK//Hw==","signatures":[{"sig":"MEQCIAq4oGlqGIIrOMoSLjb/0Tn+7G5GPVbcMIYK10yqz+9BAiBceGwMM2a0Swi/j98IMe8CP1vsYsY3pCFCbKNiZ8tY6Q==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":1701517},"type":"module","engines":{"node":">=22.0.0"},"gitHead":"aa9f3e2af90d8cf89154d9751ff12bf96f0bddb6","scripts":{"test":"npm run build && npm run test:only","build":"npm run clean && npm run typecheck && tsx scripts/build-dist.ts","clean":"node scripts/clean-dist.mjs","prepack":"npm run build","version":"npm run sync:version && git add package.json package-lock.json .claude-plugin/plugin.json .claude-plugin/marketplace.json openclaw.plugin.json skills/metadata.json","pack:all":"npm run build && npm run test:only && npm run build:openclaw:bundle && npm run check:openclaw-dist && tsx scripts/openclaw/pack-openclaw.ts && tsx scripts/pack-skills.ts && tsx scripts/check-skills-publish.ts","test:only":"node --import tsx --test --test-concurrency=1 tests/converters/codex-agents.test.ts tests/install/cli.test.ts tests/install/end-to-end.test.ts tests/install/update.test.ts tests/install/all-runtimes-dry.test.ts tests/install/metadata-consistency.test.ts tests/install/npm-pack.test.ts tests/install/skill-package.test.ts tests/install/ui-design-intelligence.test.ts tests/install/image-generation-skill.test.ts tests/install/drawio-studio-skill.test.ts tests/install/sync-version.test.ts tests/install/claude-cache.test.ts","typecheck":"npm run typecheck:ts && npm run typecheck:skill-scripts","pack:skills":"npm run build && tsx scripts/pack-skills.ts","audit:skills":"npm run build && tsx scripts/audit-skills.ts","sync:version":"tsx scripts/sync-version.ts","typecheck:ts":"tsc --noEmit -p tsconfig.json","pack:openclaw":"npm run build:openclaw && npm run check:openclaw-dist && tsx scripts/openclaw/pack-openclaw.ts","build:openclaw":"npm run build && npm run build:openclaw:bundle","prepublishOnly":"npm run sync:version && npm test","typecheck:openclaw":"tsc --noEmit -p tsconfig.openclaw.json","check:openclaw-dist":"tsx scripts/openclaw/verify-openclaw-dist.ts","check:skills-publish":"npm run build && tsx scripts/check-skills-publish.ts","build:openclaw:bundle":"tsx scripts/openclaw/build.ts","typecheck:skill-scripts":"tsc --allowJs --checkJs --noEmit --strict --module NodeNext --moduleResolution NodeNext --target ES2022 skills/fec-ui-design/scripts/design-system.mjs skills/fec-image-generation/scripts/png-qa.mjs"},"_npmUser":{"name":"bovin","email":"bovin.phang@gmail.com"},"repository":{"url":"git+https://github.com/bovinphang/frontend-craft.git","type":"git"},"_npmVersion":"10.9.3","description":"Universal frontend plugin for Claude Code, Codex, Cursor, OpenCode, Gemini CLI, Qoder, Windsurf, Copilot, OpenClaw, and more — skills, agents, commands, hooks, and MCP templates.","directories":{},"_nodeVersion":"22.19.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsx":"^4.22.3","esbuild":"^0.28.0","openclaw":"^2026.4.20","prettier":"^3.5.0","typescript":"^5.7.3","@types/node":"^22.19.15","@sinclair/typebox":"^0.34.49"},"_npmOperationalInternal":{"tmp":"tmp/frontend-craft_2.7.0_1781095699381_0.523998637141571","host":"s3://npm-registry-packages-npm-production"}},"2.8.0":{"name":"@bovinphang/frontend-craft","version":"2.8.0","keywords":["frontend","claude-code","codex","cursor","opencode","gemini-cli","qoder","windsurf","copilot","openclaw","mcp","design-to-code","i18n","playwright","eslint"],"author":{"name":"Bovin Phang","email":"pengbaowen@msn.com"},"license":"MIT","_id":"@bovinphang/frontend-craft@2.8.0","maintainers":[{"name":"bovin","email":"bovin.phang@gmail.com"}],"homepage":"https://github.com/bovinphang/frontend-craft","bugs":{"url":"https://github.com/bovinphang/frontend-craft/issues"},"bin":{"fec":"dist/bin/frontend-craft.js","frontend-craft":"dist/bin/frontend-craft.js"},"dist":{"shasum":"6bc7babe21a6a93ab3dfd969a654aa1b3f5797d8","tarball":"https://registry.npmjs.org/@bovinphang/frontend-craft/-/frontend-craft-2.8.0.tgz","fileCount":445,"integrity":"sha512-r7UIIX1SkJQ3d4x2zYQZiegySoXvW75ImaDe9arMKcXVu1ezb9/Q7OQJzinEnJqEn5XtYtjwohcLeDscsYKpEw==","signatures":[{"sig":"MEUCIQDP1Q5hhcVQF3jUw+WHFNTUhpW+cQ5NDr9/bFwKmFuwZwIgIFAKzJrjEGtKtN0NLn/Bm2efBSk7Npk2o79oRJLN3wA=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":11961278},"type":"module","engines":{"node":">=22.0.0"},"gitHead":"1cc82c36f050208f4dbd88e99aec5be68deb6334","scripts":{"test":"npm run build && npm run test:only","build":"npm run clean && npm run typecheck && tsx scripts/build-dist.ts","clean":"node scripts/clean-dist.mjs","prepack":"npm run build","version":"npm run sync:version && git add package.json package-lock.json .claude-plugin/plugin.json .claude-plugin/marketplace.json openclaw.plugin.json skills/metadata.json","pack:all":"npm run build && npm run test:only && npm run build:openclaw:bundle && npm run check:openclaw-dist && tsx scripts/openclaw/pack-openclaw.ts && tsx scripts/pack-skills.ts && tsx scripts/check-skills-publish.ts","test:only":"node --import tsx --test --test-concurrency=1 tests/converters/codex-agents.test.ts tests/install/cli.test.ts tests/install/end-to-end.test.ts tests/install/update.test.ts tests/install/all-runtimes-dry.test.ts tests/install/metadata-consistency.test.ts tests/install/npm-pack.test.ts tests/install/skill-package.test.ts tests/install/ui-design-intelligence.test.ts tests/install/image-generation-skill.test.ts tests/install/drawio-studio-skill.test.ts tests/install/sync-version.test.ts tests/install/claude-cache.test.ts","typecheck":"npm run typecheck:ts && npm run typecheck:skill-scripts","pack:skills":"npm run build && tsx scripts/pack-skills.ts","audit:skills":"npm run build && tsx scripts/audit-skills.ts","sync:version":"tsx scripts/sync-version.ts","typecheck:ts":"tsc --noEmit -p tsconfig.json","pack:openclaw":"npm run build:openclaw && npm run check:openclaw-dist && tsx scripts/openclaw/pack-openclaw.ts","build:openclaw":"npm run build && npm run build:openclaw:bundle","prepublishOnly":"npm run sync:version && npm test","typecheck:openclaw":"tsc --noEmit -p tsconfig.openclaw.json","check:openclaw-dist":"tsx scripts/openclaw/verify-openclaw-dist.ts","check:skills-publish":"npm run build && tsx scripts/check-skills-publish.ts","build:openclaw:bundle":"tsx scripts/openclaw/build.ts","typecheck:skill-scripts":"tsc --allowJs --checkJs --noEmit --strict --module NodeNext --moduleResolution NodeNext --target ES2022 skills/fec-ui-design/scripts/design-system.mjs skills/fec-image-generation/scripts/png-qa.mjs skills/fec-image-generation/scripts/tech-diagram-render.mjs skills/fec-image-generation/scripts/interactive-diagram-server.mjs skills/fec-image-generation/scripts/export-diagram.mjs"},"_npmUser":{"name":"bovin","email":"bovin.phang@gmail.com"},"repository":{"url":"git+https://github.com/bovinphang/frontend-craft.git","type":"git"},"_npmVersion":"11.16.0","description":"Universal frontend plugin for Claude Code, Codex, Cursor, OpenCode, Gemini CLI, Qoder, Windsurf, Copilot, OpenClaw, and more — skills, agents, commands, hooks, and MCP templates.","directories":{},"_nodeVersion":"22.19.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsx":"^4.22.3","esbuild":"^0.28.0","openclaw":"^2026.4.20","prettier":"^3.5.0","typescript":"^5.7.3","@types/node":"^22.19.15","@sinclair/typebox":"^0.34.49"},"_npmOperationalInternal":{"tmp":"tmp/frontend-craft_2.8.0_1782387850598_0.10017453916409935","host":"s3://npm-registry-packages-npm-production"}},"2.9.0":{"_id":"@bovinphang/frontend-craft@2.9.0","bin":{"fec":"dist/bin/frontend-craft.js","frontend-craft":"dist/bin/frontend-craft.js"},"bugs":{"url":"https://github.com/bovinphang/frontend-craft/issues"},"dist":{"shasum":"2231ff4c4c1b4d93a6bd74e4214dafa64cf6c98c","tarball":"https://registry.npmjs.org/@bovinphang/frontend-craft/-/frontend-craft-2.9.0.tgz","fileCount":541,"integrity":"sha512-47BB+uj454Oro7HoeuxLdZHa0EBQEZhm2EB7L8z5p3IZZfIcy30T0qAr+rRutBIrGH2QbCGCdU2HzQ0N29x2cw==","signatures":[{"sig":"MEYCIQDMb9pF7Ilyz77YcVi0ypi9Fun9JU/f5LPYUz02U8xUKQIhAK2QM16zQVQjh2o4WmxDGCd+9tRszfWZs6EuHP20OSPn","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"},{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCP9Wczlt2bh4GvTlak0ZF0eZ7Orq19RlXeuQxFPNT4oAIhAJgUxMH8/G0jK/BAVMg4gT1nXr37tNx8pS58T+3C2pPA"}],"unpackedSize":12906588},"name":"@bovinphang/frontend-craft","type":"module","_from":"file:reports/diagram-quality-2026-09-26/bovinphang-frontend-craft-2.9.0.tgz","author":{"name":"Bovin Phang","email":"pengbaowen@msn.com"},"engines":{"node":">=22.0.0"},"license":"MIT","scripts":{"lint":"pnpm run lint:code && pnpm run check:content","test":"pnpm run build && pnpm run test:only","build":"pnpm run clean && pnpm run typecheck && tsx scripts/build-dist.ts","clean":"node scripts/clean-dist.mjs","prepack":"pnpm run build","version":"pnpm run sync:version","pack:all":"pnpm run build && pnpm run test:only && pnpm run build:openclaw:bundle && pnpm run check:openclaw-dist && tsx scripts/openclaw/pack-openclaw.ts && tsx scripts/pack-skills.ts && tsx scripts/check-skills-publish.ts","lint:code":"eslint bin src scripts tests eslint.config.mjs --max-warnings=0","test:only":"tsx scripts/run-tests.ts","typecheck":"pnpm run typecheck:ts && pnpm run typecheck:skill-scripts","pack:skills":"pnpm run build && tsx scripts/pack-skills.ts","audit:skills":"pnpm run build && tsx scripts/audit-skills.ts","format:check":"tsx scripts/check-format.ts","sync:version":"tsx scripts/sync-version.ts","typecheck:ts":"tsc --noEmit -p tsconfig.json","check:content":"tsx scripts/check-content.ts","pack:openclaw":"pnpm run build:openclaw && pnpm run check:openclaw-dist && tsx scripts/openclaw/pack-openclaw.ts","build:openclaw":"pnpm run build && pnpm run build:openclaw:bundle","prepublishOnly":"pnpm run sync:version && pnpm test","typecheck:openclaw":"tsc --noEmit -p tsconfig.openclaw.json","check:openclaw-dist":"tsx scripts/openclaw/verify-openclaw-dist.ts","check:skills-publish":"pnpm run build && tsx scripts/check-skills-publish.ts","build:openclaw:bundle":"tsx scripts/openclaw/build.ts","typecheck:skill-scripts":"tsc --allowJs --checkJs --noEmit --strict --module NodeNext --moduleResolution NodeNext --target ES2022 skills/fec-ui-design/scripts/design-system.mjs skills/fec-image-generation/scripts/png-qa.mjs skills/fec-image-generation/scripts/tech-diagram-render.mjs skills/fec-image-generation/scripts/interactive-diagram-server.mjs skills/fec-image-generation/scripts/export-diagram.mjs skills/fec-image-generation/scripts/diagram-layout.mjs skills/fec-image-generation/scripts/diagram-browser.mjs skills/fec-image-generation/scripts/mermaid-render.mjs"},"version":"2.9.0","_npmUser":{"name":"bovin","email":"bovin.phang@gmail.com"},"homepage":"https://github.com/bovinphang/frontend-craft","keywords":["frontend","claude-code","codex","cursor","opencode","gemini-cli","qoder","windsurf","copilot","openclaw","mcp","design-to-code","i18n","playwright","eslint"],"_resolved":"D:\\code\\github\\frontend\\frontend-craft\\reports\\diagram-quality-2026-09-26\\bovinphang-frontend-craft-2.9.0.tgz","_integrity":"sha512-47BB+uj454Oro7HoeuxLdZHa0EBQEZhm2EB7L8z5p3IZZfIcy30T0qAr+rRutBIrGH2QbCGCdU2HzQ0N29x2cw==","repository":{"url":"git+https://github.com/bovinphang/frontend-craft.git","type":"git"},"_npmVersion":"11.11.0","description":"Universal frontend plugin for Claude Code, Codex, Cursor, OpenCode, Gemini CLI, Qoder, Windsurf, Copilot, OpenClaw, and more — skills, agents, commands, hooks, and MCP templates.","directories":{},"maintainers":[{"name":"bovin","email":"bovin.phang@gmail.com"}],"_nodeVersion":"24.14.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"packageManager":"pnpm@12.4.1","devDependencies":{"tsx":"^4.22.3","yaml":"2.9.0","eslint":"9.39.4","esbuild":"^0.28.0","globals":"17.12.0","openclaw":"^2026.4.20","prettier":"^3.5.0","@eslint/js":"9.39.5","typescript":"^5.7.3","@types/node":"^22.19.15","@sinclair/typebox":"^0.34.49","typescript-eslint":"8.70.1"},"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/frontend-craft_2.9.0_1790418697690_0.2984082182715362"}}},"time":{"created":"2026-06-01T11:50:56.604Z","modified":"2026-09-26T10:31:38.006Z","2.5.0":"2026-06-01T11:50:56.979Z","2.6.0":"2026-06-07T13:12:01.197Z","2.7.0":"2026-06-10T12:48:19.602Z","2.8.0":"2026-06-25T11:44:10.930Z","2.9.0":"2026-09-26T10:31:37.823Z"},"bugs":{"url":"https://github.com/bovinphang/frontend-craft/issues"},"author":{"name":"Bovin Phang","email":"pengbaowen@msn.com"},"license":"MIT","homepage":"https://github.com/bovinphang/frontend-craft","keywords":["frontend","claude-code","codex","cursor","opencode","gemini-cli","qoder","windsurf","copilot","openclaw","mcp","design-to-code","i18n","playwright","eslint"],"repository":{"url":"git+https://github.com/bovinphang/frontend-craft.git","type":"git"},"description":"Universal frontend plugin for Claude Code, Codex, Cursor, OpenCode, Gemini CLI, Qoder, Windsurf, Copilot, OpenClaw, and more — skills, agents, commands, hooks, and MCP templates.","maintainers":[{"name":"bovin","email":"bovin.phang@gmail.com"}],"readme":"<div align=\"center\">\r\n\r\n<img src=\"assets/brand/frontend-craft.png\" alt=\"frontend-craft logo\" width=\"200\" />\r\n\r\n# frontend-craft\r\n\r\n### 一套工具，适配所有 AI 编程助手，落地生产级前端规范。\r\n\r\n[![Stars](https://img.shields.io/github/stars/bovinphang/frontend-craft?style=flat)](https://github.com/bovinphang/frontend-craft/stargazers)\r\n[![CI](https://github.com/bovinphang/frontend-craft/actions/workflows/ci.yml/badge.svg)](https://github.com/bovinphang/frontend-craft/actions/workflows/ci.yml)\r\n[![npm version](https://img.shields.io/npm/v/@bovinphang/frontend-craft)](https://www.npmjs.com/package/@bovinphang/frontend-craft)\r\n[![License](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)\r\n![Node](https://img.shields.io/badge/Node.js-22+-5FA04E?logo=node.js&logoColor=white)\r\n![TypeScript](https://img.shields.io/badge/-TypeScript-3178C6?logo=typescript&logoColor=white)\r\n![React](https://img.shields.io/badge/-React-61DAFB?logo=react&logoColor=black)\r\n![Vue](https://img.shields.io/badge/-Vue-4FC08D?logo=vue.js&logoColor=white)\r\n![Figma](https://img.shields.io/badge/-Figma-F24E1E?logo=figma&logoColor=white)\r\n\r\n**🌐 Language / 语言 / 語言 / 言語 / 언어**\r\n\r\n[English](README.md) · [**简体中文**](README.zh-CN.md) · [繁體中文](docs/zh-TW/README.md) · [日本語](docs/ja-JP/README.md) · [한국어](docs/ko-KR/README.md)\r\n\r\n</div>\r\n\r\n\r\n[运行时兼容性与升级说明](docs/runtimes/compatibility.md)\r\n\r\n---\r\n\r\n`frontend-craft` 是一个**通用前端插件**，为以下 **15 款 AI 编程助手**注入统一的前端工程规范：\r\n\r\n`claude` `codex` `cursor` `windsurf` `opencode`\r\n`kilo` `gemini` `copilot` `antigravity` `augment`\r\n`trae` `codebuddy` `cline` `openclaw` `qoder`\r\n\r\n各运行时的路径与注意事项详见 [`docs/runtimes/`](docs/runtimes/)。\r\n\r\n它将 **14 个专业 agent**、**56 个自动激活 skill**、**11 个斜杠命令**、**5 个事件驱动 hook**、面向 6 个设计工具端点的 **MCP 集成**以及一整套**规则库**打包为一个可安装单元。运行一条命令，团队里的每一次 AI 会话都将以相同的方式编写 React、Vue、Next.js 或 Nuxt——类型安全、可访问、安全、一致。\r\n\r\n---\r\n\r\n## 为什么选择 frontend-craft？\r\n\r\n| 痛点                                          | frontend-craft 的解法                                                 |\r\n| --------------------------------------------- | --------------------------------------------------------------------- |\r\n| AI 助手写出的前端代码风格不一、缺类型、不安全 | **56 个 skill** 将团队规范编码为可自动激活的工作流                    |\r\n| 每款 AI 工具都有自己的插件格式                | **一条 CLI 命令** 把相同的规则、agent 和 hook 安装到 15 个运行时      |\r\n| 设计稿到代码的交接总有信息损失                | **MCP 集成** 从 Figma、Figma Desktop、Sketch、MasterGo、Pixso、墨刀引入更完整设计上下文 |\r\n| 代码评审随意、浅层                            | **14 个 agent** 输出分级报告：代码、安全、无障碍、性能、TS、UI 还原度 |\r\n| 没人记得跑 lint 和测试                        | **事件驱动 hook** 在保存和会话结束时自动校验                          |\r\n| 新项目每次都从零开始                          | **`/fec-init`** 几秒内脚手架化 CLAUDE.md、规则和 settings             |\r\n\r\n---\r\n\r\n## 安装\r\n\r\n需要 **Node.js 22+**。完整支持 **Windows、macOS 和 Linux**（所有钩子和脚本均使用 Node.js 实现）。\r\n\r\n### 方式一：全局安装 fec CLI（推荐）\r\n\r\n```bash\r\n# 1. 全局安装 fec 命令\r\nnpm install -g @bovinphang/frontend-craft@latest\r\n\r\n# 2. 进入你的前端项目\r\ncd your-project\r\n\r\n# 3. 交互选择要接入的 AI 运行时\r\nfec setup\r\n\r\n# 4. 接入当前项目\r\nfec setup codex\r\nfec setup claude\r\nfec setup all\r\n\r\n# 5. 全局接入，适用于所有项目\r\nfec setup codex --global\r\nfec setup claude --global\r\nfec setup all --global\r\n\r\n# 6. 预览 / 查询\r\nfec install --all --dry-run --global\r\nfec list\r\n```\r\n\r\n`npm install -g` 只是安装 `fec` 终端命令。`fec setup` 是终端里的 CLI 项目接入命令，不是 AI 助手内的 `/fec-init` 斜杠命令。在交互式终端中，不带参数的 `fec setup` 会先让你选择 runtime；`fec setup <runtime>` 和 `fec setup all` 会默认接入当前项目。只有传入 `--global` 时，才会接入对应 AI 工具的全局配置目录，适用于所有项目。\r\n\r\n### 方式二：用 npx 临时运行（免全局安装 fec）\r\n\r\n```bash\r\n# 1. 交互向导\r\nnpx @bovinphang/frontend-craft@latest\r\n\r\n# 2. 接入当前项目\r\nnpx @bovinphang/frontend-craft@latest install --local codex\r\nnpx @bovinphang/frontend-craft@latest install --local claude\r\nnpx @bovinphang/frontend-craft@latest install --all --local\r\n\r\n# 3. 全局接入，适用于所有项目\r\nnpx @bovinphang/frontend-craft@latest install --global codex\r\nnpx @bovinphang/frontend-craft@latest install --global claude\r\nnpx @bovinphang/frontend-craft@latest install --all --global\r\n\r\n# 4. 预览 / 查询\r\nnpx @bovinphang/frontend-craft@latest install --all --dry-run --global\r\nnpx @bovinphang/frontend-craft@latest list\r\n```\r\n\r\n不想全局安装 `fec` 命令时使用 `npx`。不带参数会进入交互向导：先选择一个或多个运行时，再决定接入全局还是当前项目。脚本化安装全部 runtime 时使用 `install --all --local` 或 `install --all --global`，不要写成 `install all`。CI / 脚本场景请始终带上 `--global` / `-g` 或 `--local` / `-l`；非 TTY 且未指定时，CLI 默认安装到 `claude --global`。\r\n\r\n### 方式三：Claude Code Marketplace\r\n\r\n对 Claude Code 用户，**Claude Code Marketplace** 是推荐的单一来源安装方式。只有在需要跨运行时安装、脚本化/离线复制文件，或非 Marketplace 环境时，才建议对 Claude 使用 CLI。\r\n\r\n如果已经通过 Marketplace 安装，CLI 不会再安装或更新第二份 Claude 副本，即使传入 `--force` 也不会覆盖；请通过 Claude Code Marketplace 更新。如果已存在另一个作用域的 CLI 管理安装，交互式终端会询问是保持已安装来源并更新，还是卸载后切换到当前来源；非交互终端会停止并打印明确的 `update`、`uninstall`、`install` 命令。\r\n\r\n完整步骤见 [docs/runtimes/claude.zh-CN.md](docs/runtimes/claude.zh-CN.md) · [English](docs/runtimes/claude.md)。\r\n\r\n---\r\n\r\n## 快速开始\r\n\r\n安装完成后，你在每一次 AI 会话中都拥有一套完整的前端工程工具箱：\r\n\r\n```text\r\n你：\"Review my recent changes\"\r\n→ fec-code-reviewer agent 被调度，输出 reports/code-review-*.md\r\n\r\n你：\"/fec-review\"\r\n→ 按架构、类型、渲染、样式、可访问性等维度执行结构化评审\r\n\r\n你：\"根据这个 Figma 链接实现结算页\"\r\n→ fec-figma-implementer agent 通过 MCP 读取设计稿，输出组件和报告\r\n\r\n你：\"/fec-scaffold dashboard feature\"\r\n→ 按项目约定创建 page / feature / component 标准目录结构\r\n\r\n你：\"/fec-refactor-clean\"\r\n→ 分类并安全清理死代码、未使用导出、样式和依赖\r\n\r\n你：\"/fec-refactor src/features/compose\"\r\n→ 诊断结构坏味道、生成小步计划，并以保持行为的方式一次执行一个重构且逐步验证\r\n```\r\n\r\n下文斜杠命令以 **Claude Code** 为例；其他运行时通过各自的命令系统提供同等能力（详见 [`docs/runtimes/`](docs/runtimes/)）。\r\n\r\n---\r\n\r\n## 示例提示词\r\n\r\n完整的按场景组织的提示词库见 [docs/zh-CN/example-prompts.md](docs/zh-CN/example-prompts.md)。\r\n\r\n```text\r\n你：「合并前请评审我最近的改动。重点看架构、类型安全、渲染行为、样式、无障碍和缺失测试。」\r\n你：「先不要写代码，请规划账号账单功能：路由结构、组件边界、数据流、状态归属、校验流程和上线风险。」\r\n你：「请构建多步注册表单：根据项目框架选择表单与 schema 校验方案，包含文件上传、条件字段、异步校验和可访问错误提示。」\r\n你：「请按 Figma 节点 123:456 实现 UI。复用现有 design token 和组件，匹配间距与响应式状态，并说明假设。」\r\n你：「`/fec-refactor-clean` 请清理这个模块里的死代码。」\r\n你：「`/fec-smell` 请诊断这个模块的结构坏味道，先不要改代码。」\r\n你：「`/fec-refactor-plan` 请生成保持行为的小步重构计划。」\r\n你：「`/fec-refactor` 请保持可观察行为不变地重构这个模块。」\r\n```\r\n\r\n---\r\n\r\n## 里面有什么\r\n\r\n### 命令（Commands）\r\n\r\n斜杠命令是结构化工作流的主入口，多数会输出带时间戳的 Markdown 报告到 `reports/`。\r\n\r\n| 命令                  | 用途                                                        | 报告                                             |\r\n| --------------------- | ----------------------------------------------------------- | ------------------------------------------------ |\r\n| `/fec-init`           | 初始化项目模板（CLAUDE.md、规则、settings）                 | —                                                |\r\n| `/fec-review`         | 默认审核全项目；支持指定文件、目录或明确改动范围 | `code-review-*.md`                               |\r\n| `/fec-scaffold`       | 按规范创建 page / feature / component 样板                  | —                                                |\r\n| `/fec-plan`           | 统一规划入口：实现架构或测试策略                            | `architecture-proposal-*.md` 或 `test-plan-*.md` |\r\n| `/fec-tdd`            | 红 → 绿 → 重构的前端 TDD 循环                               | —                                                |\r\n| `/fec-debug`          | 前端问题诊断与修复：构建失败、运行时错误、UI 异常、接口问题 | `debug-*.md`                                     |\r\n| `/fec-refactor-clean` | 分类并安全清理死代码、未使用导出、样式和依赖                | `refactor-clean-*.md`                            |\r\n| `/fec-smell`          | 基于证据诊断代码坏味道，不修改业务代码                            | `refactoring/smell-*.md`                       |\r\n| `/fec-refactor-plan`  | 生成有序、保持行为的小步重构计划                                  | `refactoring/plan-*.md`                        |\r\n| `/fec-refactor`       | 一次执行一个经过验证的保持行为重构步骤                            | `refactoring/refactoring-*.md`                 |\r\n| `/fec-doc-sync`       | 同步 README、docs、环境变量、脚本、API/路由说明和部署文档 | —                                                |\r\n\r\n### 审核范围\r\n\r\n`/fec-review`、代码 / TypeScript / 安全审核 agent 及其审核 skill 采用三种模式：\r\n\r\n- **改动审核**：明确要求最近改动、本次修改、暂存区、PR 或提交，或当前任务已明确这些改动上下文。无改动时说明没有可审核的改动，不自动审核最近提交。\r\n- **指定范围审核**：指定文件或目录，审核其中现有代码，包括未改动代码，不要求 Git 差异。\r\n- **全项目审核（默认）**：未指定范围或改动上下文，或明确要求审核整个项目时，先建立项目自有前端代码、相关测试、配置和依赖声明清单，再按模块审核。\r\n\r\n指定文件或目录默认审核其全部代码；加上“本次改动”才仅审核差异。裸调用 `/fec-review` 即使有改动也默认全项目；开始时说明模式和范围，修改后自动委托审核须显式传入本次改动范围。\r\n\r\n示例：`/fec-review`、`/fec-review 审核最近改动`、`/fec-review 审核 src/components/Button.tsx`、`/fec-review 审核 src/features/`、`/fec-review 审核整个项目`。这些是自然语言指令，不是 CLI 参数；明确指定的范围优先于默认模式。\r\n\r\n默认排除依赖目录、构建产物、缓存、生成文件和第三方代码。报告记录模式、目标范围、已审核及未覆盖文件或模块、排除项、完成状态和验证结果；覆盖不足时标记部分完成。读取调用方或执行全项目 lint/类型检查不等于完成人工审核。改动审核保留合并建议，指定范围和全项目审核评估已审核范围的风险。前端审核不替代后端专项审核；未要求修复时不修改业务代码。\r\n\r\n### 技能（Skills，自动激活）\r\n\r\n技能是根据文件模式、框架或任务上下文**自动激活**的工作流定义，编码了评审维度、输出约定和报告格式。\r\n\r\n下方按使用场景分组列出全部自动激活的技能，便于快速找到项目规范、实现、测试、评审、设计、迁移、项目演进和文档维护能力。\r\n\r\n**项目规范** — 检测到对应框架时自动生效：\r\n\r\n| 技能                            | 范围                                                  |\r\n| ------------------------------- | ----------------------------------------------------- |\r\n| `fec-react-project-standard`    | React + TypeScript（结构、组件、路由、状态、API 层）  |\r\n| `fec-vue3-project-standard`     | Vue 3 + TypeScript（结构、组件、路由、Pinia、API 层） |\r\n| `fec-nextjs-project-standard`   | Next.js 14+ App Router、SSR/SSG、流式渲染、元数据     |\r\n| `fec-nuxt-project-standard`     | Nuxt 3 SSR/SSG、组合式 API、数据获取、中间件          |\r\n| `fec-vite-project-standard`     | Vite 配置、环境变量安全、HMR、开发代理、构建优化      |\r\n| `fec-monorepo-project-standard` | pnpm workspace、Turborepo、Nx 结构与任务编排          |\r\n| `fec-typescript-project-standard`   | TypeScript 配置、公开类型、声明文件、DTO 和泛型       |\r\n\r\n**实现能力** — 构建特定前端能力时激活：\r\n\r\n| 技能                      | 范围                                                       |\r\n| ------------------------- | ---------------------------------------------------------- |\r\n| `fec-data-fetching`       | 服务端状态获取、缓存、失效、SSR、无限加载                  |\r\n| `fec-api-integration`     | 类型化 API client、鉴权刷新、上传、实时集成                |\r\n| `fec-state-management`    | 状态归属、store 选型、URL 状态、服务端/表单/本地状态边界   |\r\n| `fec-form-handling`       | 跨框架表单选型、schema 校验、动态字段、上传                 |\r\n| `fec-browser-storage`     | localStorage / sessionStorage / IndexedDB / Cookies 选型   |\r\n| `fec-route-protection`    | React Router、Next.js、Vue Router、Nuxt 的登录态与权限路由 |\r\n| `fec-pwa-implementation`  | manifest、Service Worker、离线缓存、安装提示               |\r\n| `fec-web-workers`         | Web Worker、Transferable、Comlink、Worker 池               |\r\n| `fec-canvas-threejs`      | Canvas 2D、Three.js、React Three Fiber、WebGL              |\r\n| `fec-svg-animation`       | CSS / Framer Motion / GSAP SVG 动画与 reduced-motion       |\r\n| `fec-list-virtualization` | 按框架选型的大列表虚拟滚动、测量、网格和无限滚动            |\r\n\r\n**测试** — 规划或编写前端测试覆盖时激活：\r\n\r\n| 技能                    | 范围                                                      |\r\n| ----------------------- | --------------------------------------------------------- |\r\n| `fec-testing-strategy`  | 静态检查、单元、组件、集成、E2E、视觉测试分层             |\r\n| `fec-component-testing` | React Testing Library / Vue Test Utils 组件测试与回归用例 |\r\n| `fec-e2e-testing`       | Playwright / Cypress E2E 与 Page Object 和 CI 集成        |\r\n| `fec-tdd-workflow`      | 测试先行的前端实现，红绿重构循环                          |\r\n\r\n**评审与质量** — 代码评审、验证或清理时激活：\r\n\r\n| 技能                           | 范围                                                  |\r\n| ------------------------------ | ----------------------------------------------------- |\r\n| `fec-code-review`              | 架构、类型、渲染、样式、可访问性评审                  |\r\n| `fec-debug-framework`          | 系统化诊断构建、运行时、UI 和 API/数据问题            |\r\n| `fec-security-review`          | XSS、CSRF、敏感数据泄露、输入校验                     |\r\n| `fec-accessibility-check`      | WCAG 2.2、键盘、焦点、触控和屏幕阅读器行为            |\r\n| `fec-dependency-upgrade`       | 依赖升级、lockfile 评审、CVE 修复和迁移验证           |\r\n| `fec-validation-fix`           | 一次性运行并修复 lint、type-check、test、build        |\r\n| `fec-performance-optimization` | Core Web Vitals、包体、渲染、内存、网络与性能预算审查 |\r\n| `fec-refactor-clean`           | 安全清理死代码、未使用导出、样式、路由和依赖          |\r\n\r\n**重构** — 在基于证据、保持既有行为的结构改进任务中激活：\r\n\r\n| Skill | 用途 |\r\n| --- | --- |\r\n| `fec-refactoring` | 编排请求分类、基线、安全网、小步执行、回滚和最终证明 |\r\n| `fec-code-smells` | 基于证据诊断 24 种标准代码坏味道并检查误判 |\r\n| `fec-refactoring-catalog` | 从完整 61 项目录中选择并组合合适手法 |\r\n| `fec-refactoring-functions` | 函数拆分、命名、变量、参数对象和阶段拆分 |\r\n| `fec-refactoring-encapsulation` | 记录、集合、基本类型、类、委托和算法封装 |\r\n| `fec-refactoring-move-features` | 搬移函数/字段/语句、拆分循环、管道与死代码路由 |\r\n| `fec-refactoring-data` | 变量/字段以及引用对象/值对象数据重构 |\r\n| `fec-refactoring-control` | 条件拆分、卫语句、多态分派、特例和断言 |\r\n| `fec-refactoring-api` | 查询/修改、参数、标记参数、工厂、命令和 API 形态重构 |\r\n| `fec-refactoring-inheritance` | 继承/委托重构及组合优先的前端适配 |\r\n| `fec-refactoring-validation` | 行为契约、覆盖等级、验证阶梯与证明结论 |\r\n\r\n**设计 UI** — 设计实现、设计系统或视觉打磨时激活：\r\n\r\n| 技能                          | 范围                                                     |\r\n| ----------------------------- | -------------------------------------------------------- |\r\n| `fec-ui-design`               | 产品语境 UI 方向、反模板设计拨盘、媒体策略、状态、视觉 QA |\r\n| `fec-image-generation`        | 系统蓝图、流程工作流、交互式实时图、HTML/SVG/PNG 导出、图片生成/编辑、视觉资产和 PNG 自检 |\r\n| `fec-drawio-studio`         | 可编辑 draw.io / diagrams.net 技术图、XML/Mermaid/CSV URL 交付、形状检索、自动布局和代码结构图 |\r\n| `fec-web-video-presentation` | 将文章、口播稿、课程和 demo 转成可录屏的 16:9 步进网页演示 |\r\n| `fec-tailwind-design-system`  | Tailwind token、主题扩展、组件变体、class 治理和暗色模式 |\r\n| `fec-responsive-layout`       | 移动优先布局、容器查询、数据密集型响应式界面             |\r\n| `fec-motion-interaction`      | 场景化动效强度、页面转场、滚动动画、reduced-motion       |\r\n| `fec-implement-from-design`   | 基于设计工具、截图或分区级视觉参考实现 UI                |\r\n| `fec-storybook-component-doc` | Storybook 组件文档、设计系统呈现、隔离状态预览           |\r\n\r\n技术图质量工作流：`fec-image-generation` 的标准时序/流程图优先本地 Mermaid，架构图复用 draw.io 工作流，工具缺失时使用 JSON/HTML。导出 PNG 时生成实际测量且与缩放一致的 manifest，再运行 QA 并检查最终 PNG；保留完整文字、显式布局与关系，最多自动修复两轮，未解决问题需明确报告。可复现样例位于 `skills/fec-image-generation/assets/quality-examples/`。\r\n\r\n[审核范围与技术图交付指南](docs/zh-CN/review-and-diagram-workflows.md).\r\n\r\n**遗留迁移** — 现代化迁移时激活：\r\n\r\n| 技能                             | 范围                                           |\r\n| -------------------------------- | ---------------------------------------------- |\r\n| `fec-legacy-web-standard`        | JS + jQuery + HTML 遗留项目的开发与维护规范    |\r\n| `fec-legacy-to-modern-migration` | 遗留前端现代化、目标栈识别与分阶段迁移流程 |\r\n\r\n**项目演进** — 吸收参考系统并原创化落到当前项目时激活：\r\n\r\n| 技能          | 范围                                       |\r\n| ------------- | ------------------------------------------ |\r\n| `fec-alchemy` | 将参考系统能力原创化吸收到当前项目原生体系 |\r\n\r\n**文档维护** — 文档维护时激活：\r\n\r\n| 技能                            | 范围                                       |\r\n| ------------------------------- | ------------------------------------------ |\r\n| `fec-backend-requirements-handoff` | 前端向后端交接 UI 数据需求、用户动作、状态、业务规则与待确认问题 |\r\n| `fec-doc-sync`                  | 让前端文档与代码、配置、脚本、路由、API、环境变量和部署事实保持同步 |\r\n| `fec-source-driven-development` | 以项目事实和官方来源验证版本敏感的前端决策 |\r\n\r\n### 代理（Agents）\r\n\r\n代理是由主助手调度的专业子代理，专注处理单一任务并返回结构化报告。\r\n\r\n| 代理                        | 聚焦领域                                                  | 报告                         |\r\n| --------------------------- | --------------------------------------------------------- | ---------------------------- |\r\n| `fec-code-reviewer`         | React/Vue/Next/Nuxt、TS、样式、客户端安全（按置信度降噪） | `code-review-*.md`           |\r\n| `fec-typescript-reviewer`   | 类型安全、异步正确性、惯用模式（只报告不修改）            | `typescript-review-*.md`     |\r\n| `fec-security-reviewer`     | XSS、客户端密钥、危险 DOM/API、CSP、依赖审计              | `security-review-*.md`       |\r\n| `fec-performance-optimizer` | 打包体积、渲染性能、网络瓶颈                              | `performance-review-*.md`    |\r\n| `fec-architect`             | 页面拆分、组件架构、状态流、目录规划                      | `architecture-proposal-*.md` |\r\n| `fec-test-planner`          | 风险-层级映射：静态、单元、组件、E2E、视觉、无障碍、安全  | `test-plan-*.md`             |\r\n| `fec-debugger`              | 复杂前端诊断：构建、运行时、UI 和接口问题                 | `debug-*.md`                 |\r\n| `fec-refactor-cleaner`      | 分类并安全清理未使用代码、导出、样式、路由和依赖          | `refactor-clean-*.md`        |\r\n| `fec-refactoring-expert`   | 基于证据编排保持行为的结构重构                              | `refactoring/refactoring-*.md` |\r\n| `fec-e2e-runner`            | E2E 编写与运行（Playwright/Cypress）、flaky 隔离、Trace   | `e2e-summary-*.md`           |\r\n| `fec-doc-updater`           | 同步 README、runtime 文档、结构、能力表和 metadata        | —                            |\r\n| `fec-ui-checker`            | 视觉问题排查与设计还原度评估                              | `ui-fidelity-review-*.md`    |\r\n| `fec-figma-implementer`     | 按 Figma/Sketch/MasterGo/Pixso/墨刀设计稿精确实现 UI      | `design-implementation-*.md` |\r\n| `fec-design-token-mapper`   | 将设计变量映射到项目 Design Token                         | `token-mapping-*.md`         |\r\n\r\n### 钩子（Hooks，事件驱动）\r\n\r\n钩子在 AI 助手事件触发时**自动执行**，无需手动调用。\r\n\r\n| 事件                      | 行为                                         |\r\n| ------------------------- | -------------------------------------------- |\r\n| `SessionStart`            | 清理 Claude 缓存，然后自动检测项目框架和包管理器 |\r\n| `PreToolUse(Bash)`        | 拦截危险命令（`rm -rf`、force push 等）      |\r\n| `PostToolUse(Write/Edit)` | 对修改的文件自动执行 Prettier                |\r\n| `Stop`                    | 会话结束时去重运行可用的校验脚本并报告失败；仅在配置阻断模式时阻断 |\r\n| `Notification`            | 跨平台桌面通知（macOS / Linux / Windows）    |\r\n\r\nStop 校验默认只报告失败，不阻断会话。设置 `FRONTEND_CRAFT_VALIDATION_MODE=blocking` 后，失败将返回非零状态。包管理器优先采用 `package.json` 的 `packageManager`；若未声明，则采用唯一的锁文件；多个锁文件冲突时默认使用 npm。\r\n\r\n### MCP 集成\r\n\r\n将 AI 助手接入设计工具，构建带有更完整设计上下文的设计转代码工作流。\r\n\r\n| 服务              | 能力                                 |\r\n| ----------------- | ------------------------------------ |\r\n| **Figma**         | 读取设计上下文与变量定义             |\r\n| **Figma Desktop** | Figma 桌面端集成                     |\r\n| **Sketch**        | 读取设计选区截图                     |\r\n| **MasterGo**      | 读取 DSL 结构、组件层级和样式        |\r\n| **Pixso**         | 本地 MCP：帧数据、代码片段、图片资源 |\r\n| **墨刀**          | 原型数据、设计描述、HTML 导入        |\r\n| **摹客**          | 截图/标注/导出 CSS 工作流（无 MCP）  |\r\n\r\n### 项目模板（`/fec-init`）\r\n\r\n运行 `/fec-init` 即可将一套开箱即用的规则库和项目配置脚手架化到 `.claude/`：\r\n\r\n<details>\r\n<summary>查看全部 20 个模板文件</summary>\r\n\r\n| 文件                                     | 用途                                                                  |\r\n| ---------------------------------------- | --------------------------------------------------------------------- |\r\n| `CLAUDE.md`                              | 项目说明、常用命令、工作原则、安全要求                                |\r\n| `settings.json`                          | 权限白名单/黑名单、环境变量                                           |\r\n| `rules/fec-vue.md`                       | Vue 3 组件规范与反模式                                                |\r\n| `rules/fec-react.md`                     | React 组件规范与反模式                                                |\r\n| `rules/fec-design-system.md`             | 设计系统、Token、可访问性规则                                         |\r\n| `rules/fec-testing.md`                   | 测试与校验规则                                                        |\r\n| `rules/fec-git-conventions.md`           | Conventional Commits 提交规范                                         |\r\n| `rules/fec-i18n.md`                      | 国际化文案规范                                                        |\r\n| `rules/fec-performance.md`               | 前端性能优化规则                                                      |\r\n| `rules/fec-rendering-patterns.md`        | 渲染生命周期、hydration、SSR/CSR 与更新模式                           |\r\n| `rules/fec-responsive-design.md`         | 响应式布局、断点、触摸目标与视口行为                                  |\r\n| `rules/fec-source-driven-development.md` | Source-driven decisions, official docs, version-sensitive assumptions |\r\n| `rules/fec-api-layer.md`                 | API 层类型化与错误处理规范                                            |\r\n| `rules/fec-state-management.md`          | 状态分类、管理策略与反模式                                            |\r\n| `rules/fec-error-handling.md`            | 错误分层、Error Boundary、降级 UI、上报规范                           |\r\n| `rules/fec-naming-conventions.md`        | 文件、组件、变量、路由、API、CSS 统一命名                             |\r\n| `rules/fec-code-comments.md`             | 何时以及如何写前端注释                                                |\r\n| `rules/fec-ci-cd.md`                     | CI/CD 流水线阶段、GitHub Actions / GitLab CI、密钥管理                |\r\n| `rules/fec-refactoring.md`               | 重构约束与功能等价要求                                                |\r\n| `rules/fec-agent-workflow.md`            | 子代理协作边界与委托规则                                              |\r\n| `rules/fec-working-modes.md`             | 调研、计划、开发、评审、收尾模式指导                                  |\r\n\r\n</details>\r\n\r\n---\r\n\r\n## 配置\r\n\r\n### 前置条件\r\n\r\n- **Node.js 22+**\r\n- **npm、pnpm 或 yarn**\r\n- **Git Bash 或兼容 shell**（仅 Windows，当 AI 运行时需要调用 shell 命令时）\r\n\r\n### MCP 设计工具令牌\r\n\r\n根据团队使用的设计工具设置对应环境变量：\r\n\r\n| 环境变量         | 工具                  | 获取方式                                  |\r\n| ---------------- | --------------------- | ----------------------------------------- |\r\n| `FIGMA_API_KEY`  | Figma / Figma Desktop | Figma 账户设置 → Personal Access Tokens   |\r\n| `SKETCH_API_KEY` | Sketch                | Sketch 开发者设置                         |\r\n| `MG_MCP_TOKEN`   | MasterGo              | MasterGo 账户设置 → 安全设置 → 生成 Token |\r\n| `MODAO_TOKEN`    | 墨刀                  | 墨刀 AI 功能页面 → 访问令牌               |\r\n\r\n> **Pixso** 使用本地 MCP 服务 — 在 Pixso 客户端启用即可，无需额外环境变量。\r\n> **摹客** 暂无 MCP 集成 — 通过截图和导出 CSS 方式工作。\r\n\r\n添加到 shell 配置文件以持久化：\r\n\r\n```bash\r\n# macOS / Linux — 追加到 ~/.bashrc 或 ~/.zshrc\r\nexport FIGMA_API_KEY=\"your-figma-api-key\"\r\nexport SKETCH_API_KEY=\"your-sketch-api-key\"\r\nexport MG_MCP_TOKEN=\"your-mastergo-token\"\r\nexport MODAO_TOKEN=\"your-modao-token\"\r\n```\r\n\r\n```powershell\r\n# Windows — 设为系统环境变量，或在 PowerShell 中临时设置：\r\n$env:FIGMA_API_KEY = \"your-figma-api-key\"\r\n$env:SKETCH_API_KEY = \"your-sketch-api-key\"\r\n$env:MG_MCP_TOKEN = \"your-mastergo-token\"\r\n$env:MODAO_TOKEN = \"your-modao-token\"\r\n```\r\n\r\n---\r\n\r\n## 报告输出\r\n\r\n每一次评审、分析和评估都会输出带时间戳的 Markdown 报告到 `reports/`，可作为审计记录和 PR 交付物。\r\n\r\n<details>\r\n<summary>查看全部 16 种报告类型</summary>\r\n\r\n| 报告类型       | 文件名模式                                   | 来源                                                                |\r\n| -------------- | -------------------------------------------- | ------------------------------------------------------------------- |\r\n| 代码审查       | `code-review-YYYY-MM-DD-HHmmss.md`           | `/fec-review`、`fec-code-review`、`fec-code-reviewer`               |\r\n| 调试诊断       | `debug-YYYY-MM-DD-HHmmss.md`                 | `/fec-debug`、`fec-debug-framework`、`fec-debugger`                 |\r\n| TS/JS 专项评审 | `typescript-review-YYYY-MM-DD-HHmmss.md`     | `fec-typescript-reviewer`                                           |\r\n| 安全审查       | `security-review-YYYY-MM-DD-HHmmss.md`       | `fec-security-review`、`fec-security-reviewer`                      |\r\n| 无障碍检查     | `accessibility-review-YYYY-MM-DD-HHmmss.md`  | `fec-accessibility-check`                                           |\r\n| 性能分析       | `performance-review-YYYY-MM-DD-HHmmss.md`    | `fec-performance-optimizer`                                         |\r\n| 架构方案       | `architecture-proposal-YYYY-MM-DD-HHmmss.md` | `fec-architect`                                                     |\r\n| 设计还原度     | `ui-fidelity-review-YYYY-MM-DD-HHmmss.md`    | `fec-ui-checker`                                                    |\r\n| 设计实现       | `design-implementation-YYYY-MM-DD-HHmmss.md` | `fec-figma-implementer`                                             |\r\n| Token 映射     | `token-mapping-YYYY-MM-DD-HHmmss.md`         | `fec-design-token-mapper`                                           |\r\n| 设计计划       | `design-plan-YYYY-MM-DD-HHmmss.md`           | `fec-implement-from-design`                                         |\r\n| 测试计划       | `test-plan-YYYY-MM-DD-HHmmss.md`             | `/fec-plan`、`fec-testing-strategy`、`fec-test-planner`             |\r\n| 验证修复       | `validation-fix-YYYY-MM-DD-HHmmss.md`        | `fec-validation-fix`                                                |\r\n| 重构清理       | `refactor-clean-YYYY-MM-DD-HHmmss.md`        | `/fec-refactor-clean`、`fec-refactor-clean`、`fec-refactor-cleaner` |\r\n| 坏味道诊断     | `refactoring/smell-YYYY-MM-DD-HHmmss.md`     | `/fec-smell`、`fec-code-smells` |\r\n| 重构计划       | `refactoring/plan-YYYY-MM-DD-HHmmss.md`      | `/fec-refactor-plan`、`fec-refactoring` |\r\n| 重构执行       | `refactoring/refactoring-YYYY-MM-DD-HHmmss.md` | `/fec-refactor`、`fec-refactoring`、`fec-refactoring-expert` |\r\n| E2E 运行摘要   | `e2e-summary-YYYY-MM-DD-HHmmss.md`           | `fec-e2e-runner`（可选）                                            |\r\n| 迁移计划       | `migration-plan-YYYY-MM-DD-HHmmss.md`        | `fec-legacy-to-modern-migration`                                    |\r\n\r\n</details>\r\n\r\n> **建议：** 在 `.gitignore` 中添加 `reports/` 以避免将自动生成的报告提交到代码仓库，或保留提交以便团队查看历史审查记录。\r\n\r\n---\r\n\r\n## 更新与移除\r\n\r\n`fec` 是 `frontend-craft` 的短命令。如果没有全局安装 `fec`，可以把同样参数接在 `npx @bovinphang/frontend-craft@latest` 后使用，例如 `npx @bovinphang/frontend-craft@latest update`。\r\n\r\n### 更新\r\n\r\n```bash\r\nfec update                         # 更新自动发现到的所有 CLI 管理安装\r\nfec update <runtime> --local        # 更新一个本地 CLI 管理安装\r\nfec update <runtime> --global       # 更新一个全局 CLI 管理安装\r\nfec upgrade <runtime> --global      # `upgrade` 是 `update` 的别名\r\n```\r\n\r\n### 移除\r\n\r\n```bash\r\nfec uninstall                       # 移除自动发现到的所有 CLI 管理安装\r\nfec remove                          # `remove` 是 `uninstall` 的别名\r\nfec uninstall <runtime>             # 移除指定 runtime 安装\r\nfec remove <runtime>                # 使用别名移除指定 runtime\r\nfec uninstall --global              # 只移除发现到的全局安装\r\nfec remove --local                  # 只移除发现到的本地安装\r\nfec uninstall <runtime> --dry-run   # 预览将移除的文件\r\nfec uninstall <runtime> --force     # 连同已修改的托管文件一起移除\r\n```\r\n\r\nCLI 会在 runtime 目录写入 `frontend-craft.manifest.json`。不传 runtime 时，`update` 会自动发现这些 manifest，并**跳过你本地修改过的文件**——自定义内容在更新后依然保留。\r\n\r\n`uninstall`/`remove` 只删除 manifest 记录的文件，默认跳过已修改文件；只有确认要移除修改过的托管文件时才加 `--force`。`--force` 不会覆盖 Claude Code Marketplace 安装。\r\n\r\n**Claude Code Marketplace** 或 **submodule** 安装的更新方式见 [docs/runtimes/claude.zh-CN.md](docs/runtimes/claude.zh-CN.md) · [English](docs/runtimes/claude.md)。`/fec-init` 只初始化项目配置，不是第二次安装插件本体。\r\n\r\n---\r\n\r\n## 旧版 Skills CLI\r\n\r\n如果团队已在使用独立的 [Skills CLI](https://skills.sh/docs/cli)，它仍然可以只安装 [`skills/`](skills/) 下的工作流技能包：\r\n\r\n```bash\r\nnpx skills add bovinphang/frontend-craft   # 按提示操作，加 -g 可全局安装\r\nnpx skills update                          # 更新到最新版本\r\nnpx skills check                           # 预览可用更新\r\n```\r\n\r\n| CLI                  | 安装内容                                      |\r\n| -------------------- | --------------------------------------------- |\r\n| `npx @bovinphang/frontend-craft` | 技能 + 运行时专属代理、命令、钩子、规则、模板 |\r\n| `npx skills`         | 仅技能（适用于已有 Skills CLI 工作流）        |\r\n\r\n关闭遥测：`DISABLE_TELEMETRY=1`。详见 [skills.sh CLI 文档](https://skills.sh/docs/cli)。\r\n\r\n---\r\n\r\n## 社区\r\n\r\n- [贡献指南](CONTRIBUTING.zh-CN.md) — 开发环境、PR 自检清单与多语言同步规则（[English](CONTRIBUTING.md)）\r\n- [安全策略](SECURITY.zh-CN.md) — 私密漏洞报告方式与支持范围（[English](SECURITY.md)）\r\n- [行为准则](CODE_OF_CONDUCT.zh-CN.md) — 社区参与规范（[English](CODE_OF_CONDUCT.md)）\r\n- [变更日志](CHANGELOG.zh-CN.md) — 版本说明（[English](CHANGELOG.md)）\r\n- [项目结构](docs/zh-CN/project-structure.md) — 完整目录布局与文件职责（[English](docs/project-structure.md)）\r\n\r\n---\r\n\r\n## 许可证\r\n\r\n[MIT](LICENSE) — 自由使用，按需修改，如果可以请回馈社区。\r\n\r\n---\r\n\r\n<div align=\"center\">\r\n\r\n**如果 frontend-craft 帮助了你的团队，[请给它一个 Star](https://github.com/bovinphang/frontend-craft)。**\r\n\r\n</div>\r\n","readmeFilename":"README.zh-CN.md"}