dsfr-skill

🥈Silver

Automates documentation and synchronization of 23 components from the French Design System (DSFR). Provides accessibility compliance (RGAA) and code examples. Integrates with Claude for operations teams.

1200Updated 1mo ago

Intermediate30min to implementautomation

Saves ~30 min per use

Quick InstallView Source

git clone https://github.com/numerique-gouv/dsfr-skill.git

Works with:

Claude

Overview

About This Skill

DSFR Skill is a Claude Code skill that delivers comprehensive documentation for 15 components from the French Design System, including technical specifications, RGAA 4.1 accessibility guidelines, and complete HTML/CSS/JavaScript code examples. The skill enables AI-assisted development by giving Claude Code direct access to DSFR component details, design variants, state specifications, and editorial guidelines. It includes automated synchronization scripts to keep documentation current and supports both global installation and project-specific setup. Operations teams and French government digital projects benefit from integrated accessibility compliance and design consistency documentation.

How to Use

Install via Claude Code plugin marketplace with `/plugin install dsfr-skill@dsfr-skill` or manually clone to `~/.claude/skills`. Once installed, ask Claude Code questions about DSFR components like 'Show me how to create an accessible button with DSFR' or 'What are the accessibility rules for modals?' Claude Code will access complete technical documentation, design specifications, and code examples.

Use Cases

Generate accessible French Design System components with RGAA compliance

Reference DSFR component specifications and code examples during development

Get accessibility requirements and keyboard interaction guidelines for DSFR components

Maintain design consistency across French government digital projects

Setup & Installation

Quick Install

No install command available. Check the GitHub repository for manual installation instructions.

Alternative Install (Git Clone)

git clone https://github.com/numerique-gouv/dsfr-skill

Requirements

Claude Code or compatible AI agent
Works with: Claude

Quick Start Guide

Install the Skill

Copy the install command above and run it in your terminal.

Open Your AI Agent

Launch Claude Code, Cursor, or your preferred AI coding agent.

Try It Out

Use the prompt template or examples below to test the skill.

Customize

Adapt the skill to your specific use case and workflow.

Usage Examples

Prompt Template

Document and synchronize the following DSFR components for [COMPANY] in the [INDUSTRY] sector: [LIST OF COMPONENTS]. Provide RGAA accessibility compliance details and code examples for each. Integrate with our operations team's workflow.

Example Output

# DSFR Component Documentation for [COMPANY]

## Button Component

### Accessibility Compliance (RGAA)
- WCAG 2.1 AA compliant
- Keyboard navigable
- Sufficient color contrast (4.5:1)
- ARIA attributes included

### Code Example
```html
<button class="dsfr-btn" type="button">Click Me</button>
```

## Input Field Component

### Accessibility Compliance (RGAA)
- Associated label present
- Proper focus management
- Error messages accessible
- Sufficient input field sizing

### Code Example
```html
<label for="name">Name:</label>
<input type="text" id="name" class="dsfr-input">
```