fable-frontend-skills
面向React/Next.js/Vite/Astro等现代前端框架的Claude Code企业级配置集
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：fable-frontend-skills。 它的用途是：面向React/Next.js/Vite/Astro等现代前端框架的Claude Code企业级配置集 完整的 Skill 内容见：https://321skill.com/skills/fable-frontend-skills/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“为这个Next.js页面组件添加一个用户表单，包含邮箱和密码字段。”，AI会基于加载的nextjs和react-patterns技能，自动采用安全的Server Action处理提交、使用Zod进行输入验证、并遵循既定的CSS Modules或Tailwind样式规约来构建组件。如果你说：“给这个按钮添加点击动画”，AI会调用motion技能，优先考虑CSS Transitions并确保支持`prefers-reduced-motion`无障碍设置。
介绍
这是一个专为Claude Code设计的、针对现代前端技术栈（React/Next.js/Vite/Astro + CSS Modules + Vitest/Playwright/Storybook）的完整配置集合。它并非一个简单的代码片段库，而是一套经过独立审计、以企业应用水准为目标设计的“AI开发规范体系”，核心目标是提升AI辅助编码时的令牌效率、代码安全性和减少错误。
这套配置采用“渐进式披露”设计，将核心规则（CLAUDE.md）、详细技能（.claude/skills/）、路径触发规则（.claude/rules/）、子代理（.claude/agents/）和钩子（hooks）分层组织。AI在开发时，会根据当前工作内容（如修改Next.js文件）自动加载对应的详细技能，确保指令精准且节省上下文。它还引入了“机械强制”理念，将许多规则关联到具体的ESLint/Stylelint配置，减少对AI“记忆”的依赖。
它非常适合使用上述技术栈、并希望将Claude Code深度集成到企业级前端开发流程中的团队或个人开发者。它能确保AI生成的代码符合既定的安全规范（OWASP/ASVS）、可访问性要求和代码风格，减少人工审查和修正的成本。
与许多零散的、只提供代码片段的AI技能不同，fable-frontend-skills是一个高度结构化、经过审计的“全栈式”配置方案。它特别强调在代码边界（如外部输入、HTML输出、API调用）进行安全防护，并明确划分了单元测试（Vitest）、组件测试（Storybook play函数）、E2E测试（Playwright）和视觉回归测试（VRT）的层次，为AI提供了清晰的测试编写指南。
核心特点
核心区别在于其“企业级审计”背景和“多层触发防护”机制：它经过了技术正确性、安全合规性和一致性三个维度的独立审计；并通过规则（常驻）、技能（内容匹配）、路径规则（文件匹配）、子代理（独立审查）和钩子（敏感操作拦截）五层设计，极大降低了AI“遗漏规则”导致安全或质量事故的风险。
注意事项
不适合使用MUI、styled-components、Jest、Cypress、Vue或Svelte作为主要技术栈且不愿调整配置的项目。
常见问题
这个技能包支持Tailwind CSS吗？
支持。v3.0起提供CSS Modules（默认）、Tailwind v4和Minimal三种样式规约配置，在安装时可选择。
它如何保证代码安全性？
通过将OWASP/ASVS安全要求固化到技能规则中，并在边界操作（如数据验证、净化、HMAC签名验证）上设置默认强约束，同时通过钩子机制对敏感文件修改进行人工确认拦截。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/fable-frontend-skills/raw/index.md 读取 fable-frontend-skills 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/fable-frontend-skills/raw/index.md（查看排版版本）