dsfr-skill
为Claude Code提供法国政府设计系统DSFR的完整组件文档与开发辅助。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：dsfr-skill。 它的用途是：为Claude Code提供法国政府设计系统DSFR的完整组件文档与开发辅助。 完整的 Skill 内容见：https://321skill.com/skills/dsfr-skill/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“如何用DSFR创建一个可访问的模态框（modal）？”，它会提供包含完整HTML结构、必要的CSS类、JavaScript交互说明以及关键的RGAA可访问性属性（如ARIA标签、焦点管理）的详细实现方案。或者问：“DSFR的按钮有哪些变体？”，它会列出主按钮、次按钮等所有类型，并给出相应的样式类和用法示例。
介绍
该Skill旨在解决开发者在构建符合法国政府数字服务标准（RGAA）的网站时，查阅DSFR组件文档和实现细节的难题。它通过为Claude Code注入23个DSFR组件的完整技术文档、可访问性指南和代码示例，使开发者能在编码环境中直接、高效地获取权威指导。
Skill安装后，开发者可以在Claude Code中直接用法语或中文提问，例如询问如何创建特定组件、查询可访问性要求或获取代码片段。AI将基于Skill内嵌的详细文档进行回答，无需开发者离开IDE或手动搜索外部文档。
它主要适合需要遵循法国政府设计规范的前端开发者、UI设计师以及负责公共数字服务项目的全栈开发人员。对于在法国或为法国政府机构开发项目的团队而言，这是一个能显著提升合规性和开发效率的工具。
使用建议是，在开始涉及DSFR组件的开发任务前安装此Skill。需要注意的是，Skill目前覆盖了23个核心组件，但DSFR系统仍在更新，部分较新的或边缘组件可能尚未包含在内，对于未覆盖的组件仍需参考官方文档。
核心特点
与通用前端文档Skill不同，它专注于法国政府设计系统（DSFR），提供官方、权威且符合RGAA 4.1可访问性标准的组件实现指南。其内容通过自动化脚本与DSFR官方文档同步，确保信息的准确性和时效性。
注意事项
该Skill主要服务于需要遵循法国政府设计规范的项目，对于不涉及DSFR或法国市场的前端开发项目帮助有限。
常见问题
这个Skill能帮我生成DSFR组件的代码吗？
可以。安装后，您可以直接向Claude Code描述需求（如“创建一个DSFR主按钮”），它会基于Skill内的文档和示例提供完整的HTML/CSS代码。
Skill包含的DSFR组件是最新的吗？
Skill通过自动化脚本同步官方DSFR文档，旨在保持更新。但建议与官方发布日志核对，以获取最前沿的变更信息。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/dsfr-skill/raw/index.md 读取 dsfr-skill 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/dsfr-skill/raw/index.md（查看排版版本）