# 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.

- **Type:** Skill
- **Install:** `agentstack add skill-glamgarondiscord-claude-saas-blueprint-variations`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [GlamgarOnDiscord](https://agentstack.voostack.com/s/glamgarondiscord)
- **Installs:** 0
- **Category:** [Databases](https://agentstack.voostack.com/c/databases)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [GlamgarOnDiscord](https://github.com/GlamgarOnDiscord)
- **Source:** https://github.com/GlamgarOnDiscord/claude-saas-blueprint/tree/main/.claude/skills/variations

## Install

```sh
agentstack add skill-glamgarondiscord-claude-saas-blueprint-variations
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

## 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` :
```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
1. Copier la variation choisie vers l'emplacement final
2. Adapter les imports et le naming
3. Supprimer tout le dossier `_variations/`
4. Connecter au vrai data fetching (remplacer les mocks)

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [GlamgarOnDiscord](https://github.com/GlamgarOnDiscord)
- **Source:** [GlamgarOnDiscord/claude-saas-blueprint](https://github.com/GlamgarOnDiscord/claude-saas-blueprint)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-glamgarondiscord-claude-saas-blueprint-variations
- Seller: https://agentstack.voostack.com/s/glamgarondiscord
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.