How do I install the React Dsfr skill?

Run npx skillmds@latest add etalab-ia/react-dsfr in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

What does the React Dsfr skill do?

Créer des interfaces React conformes au Design System de l'État français (DSFR) avec @codegouvfr/react-dsfr. Utiliser cette skill quand l'utilisateur demande de créer des pages, composants ou interfaces en React utilisant le DSFR, quand il mentionne react-dsfr, le design system de l'État, ou quand le projet utilise @codegouvfr/react-dsfr. Couvre les composants natifs react-dsfr (pas MUI), le routing, les icônes, les couleurs et les patterns de mise en page. It is listed under Design & Media on SkillMD.

Is React Dsfr safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with React Dsfr?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is React Dsfr free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published React Dsfr?

etalab-ia (@etalab-ia) published this skill. Their other Agent Skills are listed on their SkillMD profile.

React Dsfr by etalab-ia — Agent Skill

Name: React Dsfr
Author: etalab-ia

react-dsfr

Bibliothèque React pour le Design System de l'État français. Package : @codegouvfr/react-dsfr.

Import pattern

Chaque composant a son propre chemin d'import :

import { Button } from "@codegouvfr/react-dsfr/Button";
import { Alert } from "@codegouvfr/react-dsfr/Alert";
import { Card } from "@codegouvfr/react-dsfr/Card";
// etc.

Setup Next.js App Router

⚠️ Pattern obligatoire : sans getScriptToRunAsap() dans <head>, le mode sombre cause un flash blanc visible au chargement (régression la plus courante). Le code ci-dessous est le minimum incompressible — ne pas écrire un layout.tsx plus simple.

Pattern minimal en 3 fichiers (Next.js 14+ App Router, react-dsfr v1.30+), aligné sur le starter officiel react-dsfr (dsfr-bootstrap) :

1. src/dsfr-bootstrap/defaultColorScheme.ts — constante partagée par le layout (serveur) et le provider (client) :

export const defaultColorScheme = "system" as const;

2. src/dsfr-bootstrap/index.tsx — wrapper "use client" qui importe Link :

"use client";

import {
    DsfrProviderBase,
    StartDsfrOnHydration,
    type DsfrProviderProps
} from "@codegouvfr/react-dsfr/next-app-router";
import { defaultColorScheme } from "./defaultColorScheme";
import Link from "next/link";

declare module "@codegouvfr/react-dsfr/next-app-router" {
    interface RegisterLink {
        Link: typeof Link;
    }
}

export function DsfrProvider(props: DsfrProviderProps) {
    return (
        <DsfrProviderBase
            defaultColorScheme={defaultColorScheme}
            Link={Link}
            {...props}
        />
    );
}

export { StartDsfrOnHydration };

3. src/app/layout.tsx — composant serveur, ne passe au provider que des props sérialisables :

import { createGetHtmlAttributes } from "@codegouvfr/react-dsfr/next-app-router/getHtmlAttributes";
import { getScriptToRunAsap } from "@codegouvfr/react-dsfr/useIsDark/scriptToRunAsap";
import "@codegouvfr/react-dsfr/dsfr/dsfr.min.css";
import "@codegouvfr/react-dsfr/dsfr/utility/icons/icons.main.min.css";
import { DsfrProvider, StartDsfrOnHydration } from "../dsfr-bootstrap";
import { defaultColorScheme } from "../dsfr-bootstrap/defaultColorScheme";

const { getHtmlAttributes } = createGetHtmlAttributes({ defaultColorScheme });

export default function RootLayout({ children }: { children: React.ReactNode }) {
    return (
        <html {...getHtmlAttributes({ lang: "fr" })}>
            <head>
                <script
                    dangerouslySetInnerHTML={{
                        __html: getScriptToRunAsap({
                            defaultColorScheme,
                            nonce: undefined,
                            trustedTypesPolicyName: "react-dsfr",
                        }),
                    }}
                />
            </head>
            <body>
                <DsfrProvider lang="fr">
                    {children}
                    <StartDsfrOnHydration />
                </DsfrProvider>
            </body>
        </html>
    );
}

Pourquoi le wrapper "use client" ? layout.tsx est un composant serveur ; DsfrProviderBase est un composant client (module "use client" dans le package). Le pattern officiel react-dsfr garde l'import de Link et la déclaration RegisterLink dans un module client dédié, le layout serveur ne passant que des props sérialisables (lang, children). defaultColorScheme vit dans son propre module (hors "use client") car il est lu des deux côtés de la frontière serveur/client.

Trois éléments critiques (ne pas omettre) :

createGetHtmlAttributes() : pose data-fr-scheme / data-fr-theme / suppressHydrationWarning sur <html> côté SSR
getScriptToRunAsap() dans <head> : script inline qui détecte le thème (localStorage ou prefers-color-scheme) avant le premier paint CSS — c'est lui qui élimine le flash. nonce: undefined ne vaut qu'en dev ; sous CSP, passer un nonce par requête (cf. references/setup.md)
StartDsfrOnHydration : re-scan du DOM après hydratation React pour bind les Display, modales, accordéons (sans ça, les boutons aria-controls sont muets au clic)

Noms react-dsfr v1.30+ : DsfrProviderBase, StartDsfrOnHydration, createGetHtmlAttributes, DsfrHeadBase. Les anciens noms (DsfrProvider, StartDsfr, getHtmlAttributes, DsfrHead) n'existent plus dans le package — ne pas les écrire. (Le wrapper local DsfrProvider créé ci-dessus est le nôtre, calqué sur le starter officiel — ce n'est pas un export du package.)

Cette approche n'a pas besoin de transpilePackages dans next.config.mjs (les imports directs depuis .../getHtmlAttributes et .../scriptToRunAsap évitent le tree-shake de DsfrHead.js qui tire les .woff2). Pour les variantes (avec DsfrHeadBase + transpilePackages, icônes dynamiques via iconId, re-init manuelle DSFR), voir references/setup.md.

Routing et liens

Enregistrer le composant Link du framework une seule fois au démarrage. Tous les composants react-dsfr utilisant linkProps s'en serviront automatiquement.

Liens internes : utilisent le routeur (client-side navigation)
URLs externes (https://...) : rendus comme <a> classiques
href="#" + onClick : convertis automatiquement en <button> accessible

Voir references/setup.md pour le setup par framework (Next.js, Vite, CRA).

Utilitaire CSS : `fr.cx()`

import { fr } from "@codegouvfr/react-dsfr";

// Appliquer des classes utilitaires DSFR
<div className={fr.cx("fr-grid-row", "fr-grid-row--gutters")}>
    <div className={fr.cx("fr-col-12", "fr-col-md-6")}>...</div>
</div>

// Spacing
<div className={fr.cx("fr-mt-4w", "fr-mb-2w", "fr-p-3w")}>...</div>

Grille

Le DSFR utilise une grille 12 colonnes :

<div className={fr.cx("fr-grid-row", "fr-grid-row--gutters")}>
    <div className={fr.cx("fr-col-12", "fr-col-md-6", "fr-col-lg-4")}>Col 1</div>
    <div className={fr.cx("fr-col-12", "fr-col-md-6", "fr-col-lg-4")}>Col 2</div>
    <div className={fr.cx("fr-col-12", "fr-col-lg-4")}>Col 3</div>
</div>

Breakpoints : sm (576px), md (768px), lg (992px), xl (1248px).

Icônes

Deux familles d'icônes disponibles :

DSFR : fr-icon-* (ex: "fr-icon-add-line", "fr-icon-delete-fill", "fr-icon-arrow-right-line")
Remix Icon : ri-* (ex: "ri-account-box-line", "ri-information-line")

Les icônes sont typées : TypeScript offre l'autocomplétion.

Couleurs et thème

import { useColors } from "@codegouvfr/react-dsfr/useColors";

function MyComponent() {
    const theme = useColors();
    // theme.decisions.background.default.grey.default
    // theme.decisions.text.title.grey.default
    // theme.decisions.border.default.grey.default
}

Le thème respecte automatiquement le mode clair/sombre, à condition que le setup du layout soit complet (cf. section "Setup Next.js App Router" plus haut). Le mode sombre est résolu côté SSR + script anti-flash dans <head> ; le useColors() lit ensuite la palette résolue.

Pattern : page complète

import { Header } from "@codegouvfr/react-dsfr/Header";
import { Footer } from "@codegouvfr/react-dsfr/Footer";
import { Breadcrumb } from "@codegouvfr/react-dsfr/Breadcrumb";
import { fr } from "@codegouvfr/react-dsfr";

export function Page() {
    return (
        <>
            <Header
                brandTop={<>RÉPUBLIQUE<br />FRANÇAISE</>}
                homeLinkProps={{ href: "/", title: "Accueil" }}
                serviceTitle="Mon service"
            />
            <div className={fr.cx("fr-container", "fr-my-4w")}>
                <Breadcrumb
                    homeLinkProps={{ href: "/" }}
                    segments={[{ label: "Section", linkProps: { href: "/section" } }]}
                    currentPageLabel="Page courante"
                />
                <h1>Titre de la page</h1>
                {/* Contenu */}
            </div>
            <Footer
                accessibility="partially compliant"
                brandTop={<>RÉPUBLIQUE<br />FRANÇAISE</>}
                homeLinkProps={{ href: "/", title: "Accueil" }}
            />
        </>
    );
}

Pattern : page avec menu latéral

<div className={fr.cx("fr-container", "fr-my-4w")}>
    <div className={fr.cx("fr-grid-row", "fr-grid-row--gutters")}>
        <div className={fr.cx("fr-col-12", "fr-col-md-4")}>
            <SideMenu
                title="Rubrique"
                burgerMenuButtonText="Menu"
                items={[
                    { text: "Page 1", linkProps: { href: "/p1" }, isActive: true },
                    { text: "Page 2", linkProps: { href: "/p2" } },
                ]}
            />
        </div>
        <div className={fr.cx("fr-col-12", "fr-col-md-8")}>
            {/* Contenu principal */}
        </div>
    </div>
</div>

Pattern : formulaire

import { Input } from "@codegouvfr/react-dsfr/Input";
import { Select } from "@codegouvfr/react-dsfr/Select";
import { Checkbox } from "@codegouvfr/react-dsfr/Checkbox";
import { ButtonsGroup } from "@codegouvfr/react-dsfr/ButtonsGroup";
import { Alert } from "@codegouvfr/react-dsfr/Alert";

export function MyForm() {
    return (
        <form>
            <Input label="Nom" nativeInputProps={{ required: true }} />
            <Input label="Email" nativeInputProps={{ type: "email" }} />
            <Select label="Département" nativeSelectProps={{ name: "dept" }}>
                <option value="" disabled hidden>Sélectionnez</option>
                <option value="75">Paris</option>
            </Select>
            <Checkbox
                legend="Préférences"
                options={[{ label: "Newsletter", nativeInputProps: { name: "newsletter" } }]}
            />
            <ButtonsGroup
                inlineLayoutWhen="always"
                buttons={[
                    { children: "Envoyer", type: "submit" },
                    { children: "Annuler", priority: "secondary", type: "reset" },
                ]}
            />
        </form>
    );
}

Pattern : liste de cartes

<div className={fr.cx("fr-grid-row", "fr-grid-row--gutters")}>
    {items.map(item => (
        <div key={item.id} className={fr.cx("fr-col-12", "fr-col-md-6", "fr-col-lg-4")}>
            <Card
                enlargeLink
                title={item.title}
                desc={item.description}
                linkProps={{ href: `/items/${item.id}` }}
                imageUrl={item.imageUrl}
                imageAlt={item.imageAlt}
                badge={<Badge severity="info">{item.category}</Badge>}
            />
        </div>
    ))}
</div>

Référence des composants

Consulter references/components.md pour l'API complète de chaque composant :

Layout : Header, Footer, SideMenu, Breadcrumb, Pagination, Stepper
Contenu : Card, Tile, Table, Accordion, Tabs, Badge, Tag, Quote, Highlight, CallOut
Formulaires : Input, Select, Checkbox, RadioButtons, ToggleSwitch, Upload, Button, ButtonsGroup
Feedback : Alert, Notice, Modal

Setup par framework

Le setup Next.js App Router est documenté en tête de ce fichier (section "Setup Next.js App Router"). Pour les autres frameworks (Next.js Pages Router, Vite, Create React App) et les pièges avancés (transpilePackages, icônes dynamiques via iconId, re-init DSFR manuelle, config ESLint), voir references/setup.md.

React Dsfr

File contents

react-dsfr

Import pattern

Setup Next.js App Router

Routing et liens

Utilitaire CSS : `fr.cx()`

Grille

Icônes

Couleurs et thème

Pattern : page complète

Pattern : page avec menu latéral

Pattern : formulaire

Pattern : liste de cartes

Référence des composants

Setup par framework

Frequently asked questions

React Dsfr

File contents

react-dsfr

Import pattern

Setup Next.js App Router

Routing et liens

Utilitaire CSS : fr.cx()

Grille

Icônes

Couleurs et thème

Pattern : page complète

Pattern : page avec menu latéral

Pattern : formulaire

Pattern : liste de cartes

Référence des composants

Setup par framework

Related skills

Frequently asked questions

How do I install the React Dsfr skill?

What does the React Dsfr skill do?

Is React Dsfr safe to use?

Which AI agents work with React Dsfr?

Is React Dsfr free to use?

Who published React Dsfr?

Utilitaire CSS : `fr.cx()`