Design — Refonte site ulk (Swiss + Use Cases)

Date : 2026-04-09
Statut : Approuvé
Scope : site/index.html + site/data/commands.json

---

Contexte

Le site actuel est une SPA HTML self-contained (1636 lignes), Tailwind CDN + vanilla JS, déployée sur GitHub Pages. Correct fonctionnellement mais visuellement générique. La refonte vise un look “haut de gamme Swiss International Style” avec beaucoup de use cases concrets.

Stack cible

• HTML — single file site/index.html, self-contained
• Tailwind CSS — CDN v3, config inline
• Alpine.js — CDN, pour interactivité légère (modals, copy, toggle)
• IBM Plex Mono — police principale (déjà présente)
• Iconify — icônes (déjà présent)
• Déploiement — GitHub Pages inchangé, workflow GitHub Actions existant

Palette

Rôle	Valeur
Background principal	#02065D (navy CBC)
Accent primaire	#FF9A04 (orange Swiss)
Fond sections contenu	#01043d (navy foncé)
Fond dark neutre	#0a0a0a
Texte principal	#ffffff
Texte secondaire	rgba(255,255,255,0.5)
Bordures	rgba(255,255,255,0.08)
Tags/badges	rgba(255,154,4,0.15) + #FF9A04

Style Swiss International

• Grille mathématique : colonnes définies en % ou fr, pas de marges arbitraires
• Typographie massive : titres font-black 5xl-9xl, font-mono
• Numérotation éditoriale : 01, 02, 03 en grand format
• Cercles géométriques animés : comme le CBC reference, animation keyframe 4s cubic-bezier
• Lignes de séparation : border-orange-400 pour les séparations structurantes
• Layout split asymétrique : colonne gauche fixe navy (identité), colonne droite contenu

Structure de la page (6 sections)

1. Nav

• Sticky, z-50, fond #02065D avec border-bottom orange
• Gauche : logo ulk + version badge
• Droite : liens About · Agents · Use Cases + bouton Install (CTA orange)
• Keyboard shortcuts T (theme) conservés

2. Hero — Split Swiss

• Colonne gauche (40%) : fond navy, fixe visuellement
  • Badge version v3.5.0
  • Titre massif AI\nDev\nToolkit font-black 7xl, line-height tight
  • Accent ulk en orange sur la dernière ligne
  • Cercle orange animé (pulse + rotation lente, référence CBC)
  • Tagline en bas : 71 agents · zero config · ships today
• Colonne droite (60%) : fond navy légèrement plus foncé
  • Sur-titre for Claude Code en orange, uppercase, mono
  • Description 2 lignes max
  • CTA principal : code block curl avec bouton copy
  • CTA secondaire : View on GitHub →
  • Petite animation : 3 lignes de terminal qui s’écrivent (/ulk:bruce go → scanning... → ✓ ready)

3. Use Cases — 10 cas numérotés

Section title : USE CASES en orange uppercase, ligne orange gauche

Chaque use case = une ligne Swiss horizontale :

[01]  [Titre use case]         [flow: step → step → step]    [badge agent]

• Numéro : font-black text-4xl text-orange-400
• Fond alternant : #01043d / #020550 pour lisibilité
• Hover : bordure gauche orange, légère élévation
• Click : expand Alpine.js → détails, commandes exactes, output attendu

Les 10 use cases :

#	Titre	Flow	Agent
01	Nouveau projet	brief → spec → todo → ship	bruce
02	Session de dev	scan → tâche → commit → clear	task-runner + 2b3
03	Audit pré-release	10 axes → score → GO/NO-GO	sargeras
04	Fixer des erreurs	erreur → diagnostic → patch	robocop
05	Documenter du code existant	code → spec → todo → sync	strange
06	App mobile	web → API → iOS + Android	happy → steve + fluke
07	Migration de stack	source → plan → exécution	ranma
08	Déploiement	build → deploy → verify	deploy:vercel
09	Optimisation perf	CWV → bundle → DB → fix	perf-auditor + vision
10	Reverse design system	Figma → tokens → composants	agamotto

4. Agents Grid

• Section title : 71 AGENTS + sous-titre catégories filtrables
• Filtres par catégorie (Alpine.js) : pill buttons style shadcn
• Grille 3 colonnes : cartes agent style shadcn (border, hover shadow)
• Chaque carte : icône + nom + description courte + badge modèle (opus/sonnet)
• Click : modal avec markdown depuis GitHub (comportement actuel conservé)
• Source de données : site/data/commands.json existant

5. Features — 3 piliers

Grille 3 colonnes, style géométrique Swiss :

Pilier	Icône géo	Description
Zéro config	Cercle	Détection automatique de stack. Aucun fichier à créer.
Mémoire inter-sessions	Carré	8 agents persistent leur état. Bruce se souvient du projet.
CLI > MCP	Triangle	0 token consommé pour les outils CLI. Plus vite, moins cher.

Chaque feature : forme géométrique SVG animée (rotation/pulse, orange), titre bold, description.

6. Install — Section terminale

• Fond #0a0a0a, très sombre
• Titre SHIP TODAY massif
• Bloc curl + copy button (Alpine.js)
• Options install : --with-vps, --with-addy-skills
• Footer : GitHub link · version · made with ulk

Animations

• Cercle hero : @keyframes pulse-orange — scale 1→1.05→1, opacity 0.8→1, 4s cubic-bezier
• Terminal typing : séquence Alpine.js, 3 lignes, délai 800ms entre chaque
• Use case hover : transition-all duration-200, border-left orange slide-in
• Scroll reveal : Intersection Observer via Alpine.js, opacity-0 → opacity-100 translate-y-4 → 0

Fichiers modifiés

Fichier	Action
site/index.html	Réécriture complète
site/data/commands.json	Inchangé (source agents)

Contraintes

• Zero npm, zero build step
• GitHub Pages compatible (static)
• Comportement modal agents conservé (fetch GitHub raw)
• Performance : Tailwind CDN acceptable pour un site vitrine
• Mobile responsive : layout split → stack vertical sur < md