skills.rest
Alexmacapple
AlexmacappleCOMMUNITY
Explore all skills by this author →
GitHub

dsfr-components

Generate DSFR-compliant HTML components and page templates via CLI scripts.

Updated Nov 9, 2025
Search Tags:#accessibility#web development#UI/UX#HTML#compliance#government#DSFR
One-click install
npx skills add https://github.com/Alexmacapple/tester-a11y --skill dsfr-components
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: dsfr-components
Source: https://github.com/Alexmacapple/tester-a11y/tree/main/.claude/skills/dsfr-components
Command: npx skills add https://github.com/Alexmacapple/tester-a11y --skill dsfr-components

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill automates the creation of web interfaces that adhere to the strict Design System of the French State (DSFR), saving developers time and ensuring compliance with government standards and accessibility requirements (RGAA). It eliminates the need for manual, time-consuming development and validation against complex guidelines.

Core Features & Use Cases

  • DSFR Component Generation: Quickly generate HTML for official French government components like buttons, alerts, forms, and cards, ensuring visual and functional consistency.
  • Full Page Templates: Create complete web pages (landing, form, dashboard, standard) with pre-built DSFR structures, accelerating project kick-off.
  • Accessibility & Compliance: Ensures all generated outputs meet WCAG 2.1 AA, RGAA, and W3C standards, significantly reducing legal and accessibility risks for public services.
  • Use Case: A government agency needs to rapidly deploy a new public service website. This Skill allows them to generate compliant, accessible pages and components in minutes, without requiring deep DSFR expertise or extensive manual coding.

Quick Start

Use the dsfr-components skill to generate a landing page titled "Mon Service Public" and save it to page.html.

Frequently Asked Questions about dsfr-components

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate DSFR-compliant web components for French government projects?▼

DSFR-compliant components are generated using CLI scripts like generate_component.py, which produces HTML templates for buttons, alerts, forms, cards, and navigation that conform to the Design System of the French State, WCAG 2.1 AA, and RGAA accessibility standards.

Does DSFR support accessibility requirements like WCAG and RGAA?▼

Yes, DSFR generation ensures all outputs meet WCAG 2.1 AA, RGAA, and W3C standards out of the box, eliminating manual validation and reducing legal and accessibility risks for public service websites.

Can I quickly create complete landing pages and forms that meet French government standards?▼

Yes, the Skill generates full-page templates including landing, form, dashboard, and standard layouts with pre-built DSFR structures, responsive grid utilities, and ready-to-integrate HTML, accelerating deployment without deep DSFR expertise.

What's the fastest way to build government web interfaces with DSFR compliance?▼

Use CLI-driven generation scripts to produce DSFR components and complete pages in minutes; templates include proper class usage, responsive utilities, and accessibility conformance, eliminating manual coding against complex guidelines.

Do I need to manually validate HTML against DSFR and accessibility standards?▼

No, generated templates are pre-validated for DSFR compliance, WCAG 2.1 AA, and RGAA standards, removing the need for extensive manual validation and reducing time-to-compliance for public service projects.

Can I use DSFR components with custom HTML projects?▼

Yes, generated DSFR HTML templates are ready-to-integrate and include all necessary classes, responsive utilities, and accessibility attributes, allowing seamless insertion into existing HTML projects without additional validation.

Related Skills

Explore More Software Engineering Skills→
moughamirmoughamir

web-design-methodology

Standardize web UI with token-first CSS and BEM naming.

Community
Intermediate
ClubMediterraneeClubMediterranee
4

a11y-web

Identify RGAA 4.1.2 accessibility violations in HTML across frameworks via static analysis.

Official
Advanced
AreteDriverAreteDriver
4

web-frontend-builder

Scaffold React, Next.js, or static HTML projects with TypeScript and Tailwind CSS.

Community
Intermediate
mjunaidcamjunaidca
10

frontend-design

Generate frontend interfaces with HTML/CSS/JS or React and Vue.

Community
Basic