# Skills Claude Code — installation et réutilisation

Ce document liste les skills tiers utilisés pour la refonte UI de ce projet et explique comment les réinstaller sur une autre machine ou un autre projet.

## Comment fonctionnent les skills Claude Code

Les skills sont stockés dans un dossier au format `{name}/SKILL.md`, à l'un de ces deux emplacements :

| Scope | Chemin Windows | Disponibilité |
|---|---|---|
| **User-level** | `C:\Users\<NomUtilisateur>\.claude\skills\` | Tous les projets de cette machine |
| **Project-level** | `<projet>\.claude\skills\` | Ce projet uniquement |

**Les skills installés pour Novelia sont user-level**, donc ils sont **déjà disponibles automatiquement sur tous tes autres projets sur cette même machine**. Tu n'as rien à faire pour les réutiliser sur un autre projet ici.

Tu as besoin de ce document uniquement dans deux cas :
1. Tu changes de machine et veux retrouver les mêmes skills
2. Tu veux verrouiller certains skills au niveau d'un projet précis (par exemple pour les partager avec un collègue qui clone le repo)

## Skills installés sur ta machine (session de refonte Novelia)

### Skill autonome
| Skill | Source | Description |
|---|---|---|
| `emil-design-eng` | [emilkowalski/skill](https://github.com/emilkowalski/skill) | Philosophie d'Emil Kowalski sur le UI polish, design des composants, décisions d'animation, détails invisibles |

### Repo `taste-skill` (12 skills design)
Source : [Leonxlnx/taste-skill](https://github.com/Leonxlnx/taste-skill)

| Skill | Description |
|---|---|
| `taste-skill` | Senior UI/UX Engineer, rules métriques, architecture composant, CSS hardware acceleration |
| `gpt-tasteskill` | UX/UI + GSAP Motion Engineer, structure AIDA, typo éditoriale large, GSAP ScrollTriggers |
| `image-to-code-skill` | Elite website image-to-code, génère images de design puis code à la même qualité |
| `imagegen-frontend-web` | Image generation pour références websites premium conversion-aware |
| `imagegen-frontend-mobile` | Image generation pour mobile apps premium |
| `brandkit` | Premium brand-kit image generation, logos, identity decks, world presentations |
| `redesign-skill` | Upgrade sites/apps existants en premium quality, audit + identification AI patterns, fix sans casser fonctionnalité |
| `soft-skill` | Design comme high-end agency, fonts/spacing/shadows/cards/animations qui font "expensive" |
| `output-skill` | Override truncation LLM, force génération complète, bans placeholders |
| `minimalist-skill` | Clean editorial, warm monochrome, typographic contrast, flat bento, muted pastels |
| `brutalist-skill` | Raw mechanical, Swiss + military terminal, rigid grids, extreme contrast |
| `stitch-skill` | Semantic Design System pour Google Stitch, DESIGN.md anti-generic |

### Plugin `ui-ux-pro-max-skill` (7 sous-skills, installé 2026-05-23)
Source : [nextlevelbuilder/ui-ux-pro-max-skill](https://github.com/nextlevelbuilder/ui-ux-pro-max-skill)

Plugin Claude Code qui embarque 7 skills dans son dossier `.claude/skills/`. Installé manuellement (copie de chaque sous-dossier) plutôt que via `/plugin install` qui n'est pas dispo en VSCode extension.

| Skill | Description |
|---|---|
| `ui-ux-pro-max` | Skill principal : 50+ styles, 161 palettes, 57 font pairings, 99 UX guidelines, 25 chart types, 10 stacks (React/Next/Vue/Svelte/SwiftUI/RN/Flutter/Tailwind/shadcn/HTML). Intègre shadcn/ui MCP |
| `design` | Skill design comprehensive : logos (55 styles via Gemini), CIP (50 deliverables), HTML slides Chart.js, banners (22 styles), icons (15 styles), social photos multi-plateforme |
| `design-system` | Token architecture 3 couches (primitive→semantic→component), CSS variables, component specs, slides stratégiques |
| `banner-design` | Banners social/ads/web/print, multiples directions art via AI-generated visuals. 13 styles |
| `brand` | Brand voice, identity, messaging frameworks, asset management, brand consistency |
| `slides` | Présentations HTML stratégiques avec Chart.js, design tokens, copywriting formulas |
| `ui-styling` | UI avec shadcn/ui + Radix + Tailwind. Forms, dialogs, dropdowns accessibles, dark mode, themes |

### Autres skills design tiers installés

| Skill | Source | Description |
|---|---|---|
| `impeccable` | [pbakaus/impeccable](https://github.com/pbakaus/impeccable) | Design/redesign/critique/polish d'interfaces frontend, UX review, hiérarchie visuelle, a11y, performance. Installé manuellement (skill seul, les 23 slash commands `/impeccable polish` etc. nécessitent install plugin officielle non dispo en VSCode extension) |
| `huashu-design` | [alchaincyf/huashu-design](https://github.com/alchaincyf/huashu-design) | 花叔Design : prototypes HTML haute fidélité, démos interactives, slides, animations, exports MP4/GIF, conseil direction artistique (5 courants × 20 philosophies) |
| `playwright-skill` | [lackeyjb/playwright-skill](https://github.com/lackeyjb/playwright-skill) | Automation browser Playwright : auto-détection dev servers, scripts dans /tmp, screenshots, fill forms, test login flows, responsive checks |
| `haniakrim21-everything-claude-code-react-bits` | (autre source) | UIs animées avec react-bits, 110+ text animations / UI / backgrounds free et customisables |

## Installation rapide sur une autre machine

### Option A : script bash one-liner (recommandée)

À copier-coller dans un terminal sur la nouvelle machine (Git Bash sur Windows, terminal sur Mac/Linux). Le script :
1. Crée le dossier des skills user-level si absent
2. Installe `emil-design-eng` (1 skill autonome)
3. Clone `taste-skill` dans un dossier temporaire et copie ses 12 sous-skills
4. Nettoie

```bash
mkdir -p ~/.claude/skills && \
mkdir -p ~/.claude/skills/emil-design-eng && \
curl -sSL "https://raw.githubusercontent.com/emilkowalski/skill/main/skills/emil-design-eng/SKILL.md" \
  -o ~/.claude/skills/emil-design-eng/SKILL.md && \
TMP=$(mktemp -d) && git clone --depth 1 https://github.com/Leonxlnx/taste-skill.git "$TMP/taste-skill" && \
for d in "$TMP/taste-skill/skills/"*/; do
  name=$(basename "$d")
  [ -d ~/.claude/skills/"$name" ] || cp -r "$d" ~/.claude/skills/"$name"
done && \
rm -rf "$TMP" && \
echo "Done. Skills installed in ~/.claude/skills/"
```

### Option B : installation manuelle skill par skill

Si tu veux cherry-pick seulement certains skills (par exemple uniquement `redesign-skill` et `taste-skill`) :

```bash
mkdir -p ~/.claude/skills
TMP=$(mktemp -d) && git clone --depth 1 https://github.com/Leonxlnx/taste-skill.git "$TMP/taste-skill"
# Choisis ici les skills que tu veux
for skill in redesign-skill taste-skill soft-skill; do
  cp -r "$TMP/taste-skill/skills/$skill" ~/.claude/skills/
done
rm -rf "$TMP"
```

### Sur Windows sans Git Bash

Si tu n'as pas Git Bash, équivalent PowerShell :

```powershell
$skills = "$env:USERPROFILE\.claude\skills"
New-Item -ItemType Directory -Force $skills | Out-Null
New-Item -ItemType Directory -Force "$skills\emil-design-eng" | Out-Null
Invoke-WebRequest "https://raw.githubusercontent.com/emilkowalski/skill/main/skills/emil-design-eng/SKILL.md" `
  -OutFile "$skills\emil-design-eng\SKILL.md"
$tmp = New-Item -ItemType Directory -Path ([System.IO.Path]::Combine($env:TEMP, "taste-skill-clone")) -Force
git clone --depth 1 https://github.com/Leonxlnx/taste-skill.git "$tmp\taste-skill"
Get-ChildItem "$tmp\taste-skill\skills" -Directory | ForEach-Object {
  $dest = Join-Path $skills $_.Name
  if (-not (Test-Path $dest)) { Copy-Item -Recurse $_.FullName $dest }
}
Remove-Item -Recurse -Force $tmp
Write-Host "Done."
```

## Installer un skill au niveau projet (optionnel)

Si tu veux qu'un projet embarque ses propres skills (pour qu'ils soient versionnés dans Git et partagés avec ton équipe), copie le dossier dans `<projet>\.claude\skills\` :

```bash
cd <ton-projet>
mkdir -p .claude/skills
cp -r ~/.claude/skills/redesign-skill .claude/skills/
# Puis commit
git add .claude/skills/
git commit -m "Add redesign-skill at project level"
```

Les skills project-level s'ajoutent à ceux du user-level, ils ne les remplacent pas.

## Installation d'un nouveau plugin Claude Code (skills seuls, sans slash commands)

Si un repo GitHub est packagé comme **plugin Claude Code** (présence d'un dossier `.claude/skills/` à la racine + souvent un `.claude-plugin/plugin.json`), et que tu es en extension VSCode (où `/plugin install` n'est pas dispo), copie manuellement ses skills.

Exemple générique en PowerShell :

```powershell
$tmp = New-Item -ItemType Directory -Path "$env:TEMP\skill-install-$(Get-Random)" -Force
git clone --depth 1 https://github.com/<owner>/<repo>.git "$tmp\repo"
$src = "$tmp\repo\.claude\skills"
$dest = "$env:USERPROFILE\.claude\skills"
Get-ChildItem $src -Directory | ForEach-Object {
    $target = Join-Path $dest $_.Name
    if (-not (Test-Path $target)) { Copy-Item -Recurse $_.FullName $target }
}
Remove-Item -Recurse -Force $tmp
```

C'est la procédure utilisée pour `pbakaus/impeccable` et `nextlevelbuilder/ui-ux-pro-max-skill`.

**Limite :** les slash commands éventuelles du plugin (`/impeccable polish`, `/impeccable audit`, etc. pour impeccable) ne fonctionneront PAS avec cette méthode manuelle, seuls les skills (auto-déclenchés via le Skill tool) sont actifs. Pour les slash commands, il faut le CLI Claude Code (terminal) avec `/plugin install <plugin>@<marketplace>`.

## Désinstaller un skill

Supprime simplement son dossier :

```bash
rm -rf ~/.claude/skills/<nom-du-skill>
```

Aucune base de données à nettoyer. Claude Code détecte automatiquement les ajouts/suppressions au prochain démarrage de session.

## Trouver d'autres skills

Liens utiles pour découvrir d'autres skills à installer :
- [github.com/topics/claude-code-skills](https://github.com/topics/claude-code-skills) (skills taggés sur GitHub)
- [github.com/emilkowalski/skill](https://github.com/emilkowalski/skill) (skill design ref)
- [github.com/Leonxlnx/taste-skill](https://github.com/Leonxlnx/taste-skill) (12 skills design)
- [github.com/pbakaus/impeccable](https://github.com/pbakaus/impeccable) (plugin avec 23 commandes)

Le format minimum d'un skill est un dossier `mon-skill/` contenant un fichier `SKILL.md` avec un frontmatter YAML (au moins `name:` et `description:`). Tu peux donc créer tes propres skills custom et les déposer directement dans `~/.claude/skills/`.