Variations

Skill GlamgarOnDiscord/claude-saas-blueprint/.claude/skills/variations

Génère N variations UI/UX d'un composant dans des fichiers séparés pour explorer visuellement les concepts. L'utilisateur ouvre son navigateur, compare, choisit, et supprime le reste.From its SKILL.md

Install

npx -y skills add GlamgarOnDiscord/claude-saas-blueprint --skill variations

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

1 stars1 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

SKILL.md

2.7 KB, 672 tokens by cl100k_base, as published. Nobody here has run it

Arguments

component : Quel composant ou quelle page à explorer
count : Nombre de variations (défaut: 5, max: 10)

Instructions

1. Comprendre le Composant

Lire le composant existant (si il existe)
Identifier les props, le data model, les contraintes
Lire le design system en place (shadcn, tailwind config, etc.)

2. Planifier les Variations

Avant de coder, lister les approches UX différentes. Exemples :

Layout : Cards grid vs Table vs List vs Kanban vs Timeline
Navigation : Tabs vs Accordion vs Wizard vs Split view vs Sidebar
Interaction : Modal vs Inline edit vs Drawer vs Full page vs Popover
Densité : Compact vs Comfortable vs Spacious
Style : Minimal vs Rich vs Glassmorphism vs Brutalist

Chaque variation doit être fondamentalement différente en approche UX, pas juste une variation de couleur.

3. Générer les Fichiers

Créer un dossier temporaire :

src/components/_variations/
├── [component]-v1-cards-grid.tsx
├── [component]-v2-table-view.tsx
├── [component]-v3-kanban.tsx
├── [component]-v4-timeline.tsx
├── [component]-v5-split-view.tsx
└── _preview.tsx  ← Page qui affiche toutes les variations

Le fichier _preview.tsx :

// Page de preview — accéder via /variations ou route temporaire
// Affiche toutes les variations côte à côte ou en tabs
// Avec des données mock réalistes

4. Chaque Variation Doit

Être un composant standalone fonctionnel
Utiliser les mêmes props/données
Avoir un titre visible indiquant le concept (ex: "V3 — Kanban Board")
Être responsive
Utiliser shadcn/ui et Tailwind

5. Présentation

Informer l'utilisateur :

5 variations générées dans src/components/_variations/
Ouvre [URL preview] pour les comparer visuellement.

V1 — Cards Grid : Layout classique en grille de cartes
V2 — Table View : Vue tabulaire dense avec tri et filtres
V3 — Kanban : Vue en colonnes draggable
V4 — Timeline : Vue chronologique verticale
V5 — Split View : Master-detail avec panneau latéral

Dis-moi laquelle tu préfères (ou un mix), et je supprime le reste.

6. Après le Choix

Copier la variation choisie vers l'emplacement final
Adapter les imports et le naming
Supprimer tout le dossier _variations/
Connecter au vrai data fetching (remplacer les mocks)

What ships with it

Read from the repository

Just SKILL.md. No reference files, no scripts.

Gives 0 of the 12 instructions most design frontend skills give in 672 tokens

Counted across 1,169 of the 1,878 authors here whose files we hold, read 2026-08-07

Use CSS variables for color consistencyin 72 of 1169, across 23 files
Commit to one bold aesthetic direction before codingin 72 of 1169, across 27 files
Match implementation complexity to the aesthetic visionin 70 of 1169, across 20 files
Add atmospheric background effects and texturesin 57 of 1169, across 9 files
Use unexpected spatial compositions and layoutsin 56 of 1169, across 8 files
Implement real working codein 55 of 1169, across 7 files
Vary themes and aesthetics across different designsin 48 of 1169, across 7 files
Launch chromium in headless modein 47 of 1169, across 4 files
Close the browser when donein 47 of 1169, across 4 files
Run provided scripts with help flag firstin 47 of 1169, across 4 files
Wait for network idle statein 47 of 1169, across 4 files
Use descriptive selectors for elementsin 47 of 1169, across 4 files

Said here and by no other author read

Plan fundamentally different UX approaches before coding
Create a temporary folder for variations
Make each variation a standalone functional component
Use the same props and data across variations
Give each variation a visible title indicating the concept
Make each variation responsive

Grouped from the skills themselves: near-identical wordings counted once, and counted by distinct author, so one author publishing three of these counts once. Length counted with cl100k_base; the agent that loads this file may tokenize it differently.