# Claude Skills - by Xavier Guiter

19 skills prêts à l'emploi pour Claude Code : 3 skills de design system et
16 skills de style visuel. Gratuits, sous licence MIT.

## Installation

### Option 1 - Skill par skill

1. Télécharge le `SKILL.md` du skill choisi depuis
   `https://xavierguiter.com/claude-skills/<slug>/SKILL.md`
2. Place-le dans `~/.claude/skills/<slug>/SKILL.md` (crée le dossier si besoin).
3. Relance Claude Code. Le skill s'invoque automatiquement quand tu poses
   une question qui déclenche sa `description`.

### Option 2 - Tous les skills d'un coup

```bash
cd ~/.claude/skills
curl -O https://xavierguiter.com/claude-skills/all-skills.zip
unzip all-skills.zip
```

### Option 3 - Scope projet uniquement

Place le skill dans `.claude/skills/<slug>/SKILL.md` à la racine de ton repo.
Seule cette codebase verra le skill.

## Catalogue

### Design System (3)

| Slug | Trigger | Rôle |
|---|---|---|
| `design-system-architect` | "design system", "primitives", "tokens" | Bootstrap complet d'un design system : tokens, primitives, patterns, gouvernance. |
| `design-tokens-generator` | "tokens", "color scale", "contrast" | Génère color/typo/spacing/motion + valide WCAG AA. Sort en CSS vars + Tailwind config. |
| `component-library-builder` | "component", "button", "modal", "input" | Construit des composants React accessibles avec tous les états et tests. |

### Styles (16)

| Slug | Style |
|---|---|
| `style-editorial` | Magazine, éditorial, long-form |
| `style-retrofuturist` | Synthwave, 80s, néons, VHS |
| `style-luxueux` | Luxe, noir + or, whitespace |
| `style-maximaliste` | Dense, expressif, superposé |
| `style-organique` | Blob shapes, warm earthy, wellness |
| `style-business` | Corporate, B2B, SaaS |
| `style-portfolio` | Showcase, typo XL, image-first |
| `style-tech` | Terminal, mono, devtool |
| `style-brutaliste` | Raw, système, contraste violent |
| `style-impact` | Statement, activisme, rouge |
| `style-energie` | Sport, gaming, saturé, motion |
| `style-marketing` | Landing pages, conversion |
| `style-growth` | Dashboards, KPI, data viz |
| `style-social` | Feed, community, réactions |
| `style-ecologie` | Verts, écoresponsable, sobre |
| `style-bank-assurance` | Fintech régulée, trust, formal |

## Comment ça marche

Chaque `SKILL.md` a deux parties :

1. **Frontmatter YAML** avec `name` et `description`. La description est le
   déclencheur : dès que ton prompt matche sémantiquement, Claude Code
   invoque le skill automatiquement.
2. **Corps du skill** : les instructions que Claude Code lit et suit —
   palette, typographie, layout, motion, règles. Actionnable directement.

Tu peux aussi invoquer un skill à la main avec `/skill <slug>` dans le
prompt Claude Code.

## Licence

MIT. Utilise, remixe, ship. Si tu améliores un skill, un PR est le bienvenu :
[github.com/presidentxerak/xg](https://github.com/presidentxerak/xg)

Contact : [xavierguiter.com/contact](https://xavierguiter.com/contact)