Aller au contenu
Design system @paulperigault

Composants

Mise en page

Utiliser le design system

Information

Les paquets ne sont pas encore publiés sur npmjs. Le README.md du dépôt les déclare « en construction » en version 0.x. Les commandes ci-dessous fonctionneront après la première publication.

Créer un site

La commande create génère un site Astro qui consomme le design system, avec les gardes, un hook de commit et un workflow CI.

npm create @paulperigault mon-site
cd mon-site
git init
npm install
npm run dev

Ajouter, éjecter, comparer un composant

add déclare @paulperigault/astro et affiche l'import à écrire.eject copie les sources dans le projet et les inscrit danspp-ds.lock.json. diff compare la copie au paquet installé.

npx @paulperigault/create add stack
npx @paulperigault/create eject stack
npx @paulperigault/create diff stack

Chaque commande accepte --dry-run pour lister les écritures sans les faire.

Importer les jetons

Dans une feuille de style, les jetons --pp-* viennent d'un seul fichier.

@import '@paulperigault/tokens/tokens.css';

Importer les composants

Les composants sont publiés en source. Chaque export correspond à un fichier.

import Stack from '@paulperigault/astro/Stack.astro';

Contrôler avec les gardes

@paulperigault/guards vérifie la taille des fichiers, les couleurs, les couches CSS, les jetons et les images. La commande all les lance tous. Elle sort avec le code 1 si elle trouve un problème.

npx pp-guards all

Brancher le serveur MCP

Le serveur donne à un assistant les fiches des composants, les jetons et un calcul de contraste. Il est en lecture seule et ne se connecte à aucun réseau. Il demande Node 24.

Claude Code : fichier .mcp.json à la racine du projet.

{
  "mcpServers": {
    "paulperigault-ds": {
      "command": "npx",
      "args": ["-y", "@paulperigault/mcp"]
    }
  }
}

Kiro lit .kiro/settings/mcp.json et Cursor lit .cursor/mcp.json, avec le même bloc. Kiro accepte aussi "disabled": false. Pour vérifier le paquet :

npx -y @paulperigault/mcp --self-test

Registre et llms.txt

Le registre des composants est servi sur /r/registry.json. Le fichier /llms.txt résume le site pour un modèle de langage.

Application installable

Le site se laisse installer et garde en cache les pages déjà visitées. Le fonctionnement et les limites sont sur la page PWA installable.