[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6CY1G2ZHS2ZFFZZ50N3KFTW":3,"skill-same:01M6CY1G2ZHS2ZFFZZ50N3KFTW":69},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":9,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":15,"categories":16,"keywords":22,"publishedAt":43,"linkOnly":44,"markdownContent":45,"markdownBody":46,"frontMatter":47,"refName":48,"commitSha":49,"skillDirectory":50,"forksCount":13,"repositoryHtmlUrl":51,"repositoryHomepageUrl":6,"ownerHtmlUrl":52,"ownerBlogUrl":6,"ownerDescription":53,"updatedAt":54,"install":55,"resources":68},"01M6CY1G2ZHS2ZFFZZ50N3KFTW","skeuomorphic-forge",null,"This skill should be used when the user asks to build physically-realistic skeuomorphic UI with Tailwind CSS — buttons, panels, gauges, knobs, CRT\u002FLED displays, glass\u002Fmetal effects, particle systems, industrial hardware. Triggers on requests mentioning: skeuomorphic, realistic depth, industrial UI, 3D button, gauge, meter, analog, tactile, material texture, retro-industrial, aerospace panel, DSP cockpit, VU meter, rotary knob, CRT display, rim light, metal recess, faceplate. Mandatory workflow: resolve bundled resources, read golden examples, run\u002Fsearch references, inspect a matching HTML asset when available, classify the physical object and shadow tier, then verify U0-U7 before delivery. Do NOT trigger for flat\u002Fminimal UI or standard Material\u002FShadcn components.","MMMProd-Org\u002Fskeuomorphic-forge","MMMProd-Org","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F279903646?v=4","01M6CY180B9R04H8E1SN9AR729","01M6CY184EP7A9674S6V8X3TWF",0,"MIT","https:\u002F\u002Fgithub.com\u002FMMMProd-Org\u002Fskeuomorphic-forge\u002Fblob\u002Fmain\u002Fskills\u002Fskeuomorphic-forge\u002FSKILL.md",[17],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000009","前端开发","SCENARIO","使用场景",[23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42],"skeuomorphic forge","forge","verify","physical","matching","delivery","do","build","references","minimal","read","css","Tailwind","3D","examples","search","run","components","workflow","metal","2026-11-10 10:12:30",false,"---\nname: skeuomorphic-forge\ndescription: \"This skill should be used when the user asks to build physically-realistic skeuomorphic UI with Tailwind CSS — buttons, panels, gauges, knobs, CRT\u002FLED displays, glass\u002Fmetal effects, particle systems, industrial hardware. Triggers on requests mentioning: skeuomorphic, realistic depth, industrial UI, 3D button, gauge, meter, analog, tactile, material texture, retro-industrial, aerospace panel, DSP cockpit, VU meter, rotary knob, CRT display, rim light, metal recess, faceplate. Mandatory workflow: resolve bundled resources, read golden examples, run\u002Fsearch references, inspect a matching HTML asset when available, classify the physical object and shadow tier, then verify U0-U7 before delivery. Do NOT trigger for flat\u002Fminimal UI or standard Material\u002FShadcn components.\"\n---\n\n# SKEUOMORPHIC FORGE — Instructions de generation UI\n\nCe skill produit de l'UI skeuomorphique physiquement realiste. Chaque composant genere DOIT ressembler a un objet physique reel (metal usine, verre CRT, aluminium brosse, Bakelite), pas un div plat avec une ombre CSS.\n\nGenerer du code React\u002FJSX avec Tailwind CSS + inline styles (`style={{}}`). Pas de classes CSS custom sauf indication contraire.\n\n---\n\n## CONTRAT D'EXECUTION OBLIGATOIRE\n\nCe skill contient beaucoup d'exemples. Ne pas \"s'inspirer vaguement\". L'agent DOIT utiliser les ressources bundlees comme une bibliotheque de pieces a copier-adapter.\n\nAvant de produire du code, faire ces etapes dans l'ordre :\n\n1. **Resoudre le root des ressources** (voir section suivante). Si `references\u002F`, `assets\u002F` ou `scripts\u002Fsearch.py` sont introuvables, STOP : dire que le skill est mal installe au lieu d'inventer un style.\n2. **Lire `references\u002F00-golden-examples.md`** pour partir d'un shadow stack, d'un pattern ou d'une table de lookup canonique.\n3. **Classer le composant** : objet physique nomme, theme, tier d'ombre, materiau, etat interactif.\n4. **Lancer `scripts\u002Fsearch.py`** avec au moins 2 requetes ciblees sauf si l'environnement ne permet aucun shell. Requetes minimales :\n   - type d'objet : `\"button shadow\"`, `\"CRT display\"`, `\"gauge well\"`, `\"knob gradient\"`, `\"metal chassis\"`, etc.\n   - finition : `\"rim light\"`, `\"brushed metal\"`, `\"glass reflection\"`, `\"pressed active state\"`, etc.\n5. **Ouvrir au moins 1 asset HTML pertinent** depuis `assets\u002F` quand il existe pour ce type de composant. Copier-adapter sa structure visuelle. Ne pas repartir d'un div vierge.\n6. **Si page existante** : lire le code environnant AVANT de styler, puis consulter `references\u002F17-context-scan-matrices.md`.\n7. **Si composant complexe** (chassis, CRT, gauge, dashboard, full-page) : consulter aussi `references\u002F16-benchmark-lessons.md` et `references\u002F18-verification-checklist.md`.\n8. **Verifier U0-U7** avant livraison. Un echec CRITICAL bloque la livraison.\n\n### Bloc FORGE PLAN\n\nAvant le code, produire un bloc court `FORGE PLAN` (ou un commentaire en haut du fichier si l'utilisateur exige code-only) :\n\n```text\nFORGE PLAN\n- Lecture: page existante ou greenfield, audience, role UI\n- Objet physique: ex. faceplate aluminium usine, switch Bakelite, CRT encastre\n- Theme\u002Ftier: warm industrial, Advanced 8+ layers, light source 135deg\n- Sources: 00-golden-examples + search(\"...\") + asset \"...html\" + refs supplementaires\n- Verification cible: U0-U7, plus U9 si display\u002Fchassis\n```\n\nSi ce bloc ne peut pas citer au moins `00-golden-examples.md` et une recherche\u002Fasset pertinente, le travail n'est pas pret.\n\n### Resolution du root ressources\n\nLes installations peuvent exposer ce skill soit comme plugin (`skills\u002Fskeuomorphic-forge\u002FSKILL.md` avec ressources au root du repo), soit comme dossier de skill autonome. Resoudre le root dans cet ordre :\n\n1. Si `references\u002F00-golden-examples.md` existe dans le cwd, utiliser le cwd.\n2. Sinon, si `..\u002F..\u002Freferences\u002F00-golden-examples.md` existe depuis le dossier de ce `SKILL.md`, utiliser `..\u002F..`.\n3. Sinon, chercher en remontant jusqu'a 3 parents un dossier qui contient `references\u002F00-golden-examples.md`, `assets\u002F`, et `scripts\u002Fsearch.py`.\n\nExemples de commandes utiles depuis le root :\n\n```bash\npython3 scripts\u002Fsearch.py \"button shadow\" -n 5 --code-only\npython3 scripts\u002Fsearch.py \"rim light\" -n 5 --context 4\npython3 scripts\u002Fsearch.py \"CRT display\" --file deep-screen -n 3\n```\n\nNe jamais remplacer ces recherches par de la memoire approximative si les fichiers sont accessibles.\n\n---\n\n## CONTRAINTES PHYSIQUES ABSOLUES (s'appliquent a CHAQUE composant)\n\nVioler une seule de ces regles produit un composant visuellement casse.\n\n**C1 Ombres portees = NOIR UNIQUEMENT.** Tous les `box-shadow` non-inset utilisent exclusivement `rgba(0,0,0,...)`. Une ombre est l'absence de lumiere. Jamais d'ombre portee violette, ambree, bleue. Exceptions : (a) les `inset` highlights avec rgba clair\u002Fcolore sont OK (lumiere frappant les bords internes), (b) les glows d'emission\u002Fbacklight a tres faible opacite (\u003C 0.08) sont OK pour simuler la lumiere emise par un ecran\u002FLED (ex: `0 0 60px rgba(255,176,0,0.06)`).\n\n**C2 Source lumineuse unique a 135deg**, coherente sur TOUS les composants de la page. Plusieurs directions = physiquement impossible.\n\n**C3 Highlights chauds au-dessus de 0.10 d'opacite.** Tout `rgba(255,255,255,X)` avec X > 0.10 doit devenir `rgba(255,240,220,X)` ou plus chaud. Blanc pur au-dessus de 0.10 = blafard\u002Fclinique. Les edge catches a 0.03-0.08 peuvent rester en blanc pur.\n\n**C4 Separation de contraste.** Les fonds de conteneurs\u002Fwells (#08-#10) DOIVENT etre plus sombres que les fonds de cartes (#1c-#28). Delta minimum #12 hex. Renforcer les bords de carte : `borderTop: \"1px solid rgba(255,255,255,0.09)\"`, `borderLeft: \"1px solid rgba(255,255,255,0.06)\"`.\n\n**C5 Ombre et lumiere sont des systemes SEPARES.** L'ombre (rgba sombre) cree profondeur\u002Frecession via `box-shadow`. La lumiere (rgba chaud, gradients, pseudo-elements) cree reflets speculaires\u002Fedge catches. Ne jamais les confondre dans un stack brouille.\n\n**C6 Minimum de couches d'ombre.** Standard (boutons\u002Fcartes\u002Ftoggles) >= 5. Advanced (knobs\u002Fdials\u002Fmeters) >= 8. Hero (panneaux\u002Fchassis) >= 11. Ultra (CRT vitrine) = 31. LES COMPTER apres collage.\n\n**C7 Ne jamais inventer de shadow stacks.** Toujours copier-adapter depuis les stacks canoniques ci-dessous.\n\n**C8 Ordre d'assemblage : arriere vers avant.** Backplate -> sous-panneaux\u002Fbezels -> wells\u002Frecesses -> instruments\u002Fdisplays -> hardware (vis\u002Frivets) -> labels -> verre\u002Freflet. Du hardware sur une surface plate = contradiction. Construire la profondeur D'ABORD.\n\n**C9 Taille physique fixe.** Les cartes-appareils (CRT, gauge, instrument) ont des dimensions FIXES. Toutes les instances du meme composant = meme width+height. Etat disabled = memes dimensions que actif. Le contenu se centre dans le chassis. Utiliser `width` + `height` explicites.\n\n**C10 Max 2 couleurs d'accent par page.** Un 3e accent necessite approbation explicite.\n\n---\n\n## VERIFICATION PRE-LIVRAISON (checker AVANT de livrer)\n\nUn composant qui echoue un gate CRITICAL ne doit PAS etre livre.\n\nLa livraison finale DOIT mentionner en 3-5 lignes :\n- sources consultees avec preuves : commandes `python3 scripts\u002Fsearch.py ...` exactes, asset HTML ouvert, references\u002Fsections utilisees\n- objet physique + tier choisi\n- nombre de couches shadow du composant principal\n- resultat U0-U7 (`pass` ou blocage explicite)\n\nDire seulement \"sources consultees\" sans commandes exactes ni asset nomme est insuffisant. Le lecteur doit pouvoir reproduire le chemin de recherche.\n\n**U0 Context Scan (BLOCKING):** La page existante a ete analysee avant de styler. Palette, boutons existants, hierarchie des conteneurs identifies. Meme role = meme style que les siblings. Shadow stack source depuis les canoniques, pas invente.\n\n**U1 Shadow Depth (CRITICAL):** Nombre de couches respecte le minimum du tier (C6). Ombres portees NOIR uniquement (C1). Progression graduee du blur.\n\n**U2 Light Source (CRITICAL):** Direction unique 135deg partout (C2). Lumiere\u002Fombre separees (C5). Pas de blanc pur au-dessus de 0.10 (C3). Gradient de surface present.\n\n**U3 Construction (HIGH):** Objet physique nomme explicitement. 4 couches : chassis + profondeur + eclairage + detail. Ordre d'assemblage respecte (C8).\n\n**U4 Hardware (HIGH):** Vis aux coins avec radial-gradient sphere + 7 couches d'ombre + slot torx\u002Fphillips. Vis sur METAL uniquement, jamais sur verre\u002Fecran.\n\n**U5 Interaction States (HIGH):** hover (lift + expand shadow), active (depress + compress), disabled (opacity 0.5 + desaturate), focus-visible (outline 2px). Le shadow stack CHANGE entre les etats.\n\n**U6 Typography (HIGH):** Body >= 13px, titres >= 14px, labels >= 11px, rien sous 10px. Texte primaire opacity >= 0.85, secondaire >= 0.5, tertiaire >= 0.35. Labels en silkscreen (text-shadow) ou grave (clip + gradient), pas en texte brut.\n\n**U7 Accessibility (MEDIUM):** Contraste WCAG OK. `focus-visible` sur tous les interactifs. Touch targets >= 44px. `prefers-reduced-motion`. `pointer-events: none` sur les overlays de texture. Pas de `filter: blur()` dans les animations.\n\n---\n\n## SHADOW STACKS CANONIQUES (copier-adapter, ne jamais inventer)\n\nLes quatre tiers de shadow stacks — **Standard** (5+ couches), **Advanced** (8-9), **Hero** (11+ minimum, golden example en utilise 13+), **Ultra** (31) — sont documentes avec code verbatim dans `references\u002F00-golden-examples.md` section `## 1. SHADOW STACKS BY TIER`. **Charger ce fichier AVANT de construire tout composant avec relief.** Ne jamais reconstruire un stack de memoire : copier-adapter depuis le golden file.\n\nRappel des tiers (pour classifier rapidement, voir tableau CLASSIFICATION DU COMPOSANT ci-dessous) :\n- **Standard 5+** : boutons, cartes, toggles\n- **Advanced 8-9** : knobs, dials, meters, rails de switch, display wells\n- **Hero 11+ minimum (golden = 13+)** : panneaux, chassis, faceplates\n- **Ultra 31** : deep CRT recess\n\n---\n\n## CLASSIFICATION DU COMPOSANT\n\n### Boutons\n\n| Role | Tier shadow | Gradient | Taille |\n|---|---|---|---|\n| CTA\u002FHero | Advanced 8+ | Bold thematique + shimmer\u002FLED | 48-56px height, 1 par page max |\n| Primary | Standard 5+ | Surface gradient accent | 40-44px |\n| Secondary | Standard 5 | Subtle surface gradient | 36-40px |\n| Tertiary\u002FGhost | Minimal 2-3 inset (exception C6 — ghost = pas de relief physique) | Aucun, transparent + border | 32-40px |\n| Destructive | Standard 5+ | Red `#4a1010->#2a0808` | 40-44px |\n\n### Conteneurs\n\n| Role | Background | Shadow |\n|---|---|---|\n| Section well | #08-#0e (le plus sombre) | Inset 4-6 couches |\n| Card (flottante) | #1c-#28 (plus clair) | Drop Standard 5+ |\n| Card imbriquee | #14-#1c (intermediaire) | Drop 3-5 |\n| Modal\u002Foverlay | #1a-#22 | Hero 11+ |\n\n### Elements speciaux\n\n| Type | Tier shadow |\n|---|---|\n| Gauge\u002Fmeter | Advanced 8+ |\n| CRT display | Hero 11+ ou Ultra 31 |\n| Toggle\u002Fswitch | Standard 5 |\n| Knob\u002Fdial | Advanced 8+ |\n| LED indicator | Standard 5 |\n\n---\n\n## PROTOCOLE DE CONSTRUCTION\n\n### 1. Nommer l'objet physique\n\nDire explicitement : \"Ceci est une faceplate en aluminium usine\" ou \"Ceci est un interrupteur a bascule en Bakelite\". Si l'analogie physique est floue, le composant sera generique.\n\n### 2. Choisir la famille esthetique\n\n| Theme | Surface gradient | Accent | Inset highlight | Texte |\n|---|---|---|---|---|\n| Warm industrial (defaut) | `#1e1e1e->#141414` | `hsl(35 100% 60%)` amber | `rgba(255,240,220,0.12)` | `rgba(255,240,220,0.9)` |\n| Cool steel | `#1a1c20->#12141a` | `hsl(210 70% 60%)` blue | `rgba(180,200,255,0.10)` | `rgba(200,220,255,0.9)` |\n| Deep purple | `#2d1854->#150b28` | `hsl(270 100% 70%)` violet | `rgba(200,160,255,0.12)` | `rgba(220,200,255,0.95)` |\n| Military | `#1a1e14->#10140c` | `hsl(0 70% 55%)` red | `rgba(180,200,150,0.08)` | `rgba(180,200,150,0.85)` |\n| Vintage audio | `#2a2218->#1a1610` | `hsl(30 80% 55%)` copper | `rgba(255,220,180,0.10)` | `rgba(240,220,190,0.9)` |\n| CRT terminal | `#0a0f0a->#050805` | `hsl(120 100% 50%)` green | `rgba(0,255,60,0.06)` | `rgba(0,255,60,0.85)` |\n\nLes ombres portees restent NOIRES `rgba(0,0,0,...)` quel que soit le theme.\n\n### 3. Eclairage (applique APRES les ombres)\n\n1. **Gradient de surface** (courbure) : `background: linear-gradient(145deg, plus-clair 0%, plus-sombre 100%)`\n2. **Bords biseautes** : `borderTop: \"1px solid rgba(255,255,255,0.08)\"`, `borderBottom: \"1px solid rgba(0,0,0,0.3)\"`\n3. **Point speculaire** : `::before` avec `radial-gradient(circle at 35% 30%, rgba(255,240,220,0.2), transparent 60%)`\n4. **Rim glow** : `::before` avec `radial-gradient(ellipse at center, rgba(255,255,255,0.25), transparent 70%)` au bord superieur, `pointerEvents: \"none\"`\n\n| But | Couleur | Opacite |\n|---|---|---|\n| Edge catch (surface plate uniquement) | `rgba(255,255,255,...)` | 0.03-0.08 |\n| Top bevel | `rgba(255,255,255,...)` | 0.08-0.15 |\n| **Levre \u002F RIM d'un recess ou well (bord sup.)** | `rgba(255,250,240,...)` | **0.20-0.25 — plancher 0.20 (§16.2), JAMAIS 0.03-0.15** |\n| Specular hotspot | `rgba(255,240,220,...)` | 0.15-0.30 |\n| Active glow | `rgba(255,180,60,...)` | 0.10-0.40 |\n| CRT\u002FLED emission | `hsl(35 100% 60%)` | Full |\n| Rim light (pseudo) | `rgba(255,255,255,0.25)` center->transparent | radial-gradient |\n\n### 4. Etats d'interaction (CHAQUE element interactif)\n\n```javascript\n\u002F\u002F Hover — lift + expand shadow\nonHover: { transform: 'translateY(-1px)', boxShadow: '\u002F* meme stack, blur +2px\u002Fcouche, highlight opacity +0.05 *\u002F' }\n\u002F\u002F Active — depress\nonActive: { transform: 'translateY(1px)', boxShadow: 'inset 0 2px 4px rgba(0,0,0,0.5), inset 0 1px 1px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.3)' }\n\u002F\u002F Disabled\nonDisabled: { opacity: 0.5, filter: 'saturate(0.3)', pointerEvents: 'none' }\n\u002F\u002F Focus\nfocusVisible: { outline: '2px solid hsl(35 100% 60%)', outlineOffset: '2px' }\n```\n\n---\n\n## REGLES COMPOSANTS SPECIFIQUES\n\n### Metal Recesses \u002F Wells\n\nChaque recess necessite les 4 zones : top attack, murs lateraux, bottom catch, **levre superieure (RIM)**. La levre superieure DOIT rester visible : `inset 0 1px 0 rgba(255,250,240,0.22)` (plancher 0.20, plage 0.20-0.25, §16.2 — ne PAS descendre aux valeurs d'edge catch 0.03-0.08). **PLACEMENT** : ce rim inset doit etre le **PREMIER** layer du `box-shadow` (frontmost) — en CSS le premier layer peint AU-DESSUS, donc un rim ajoute en DERNIER passe DERRIERE les insets sombres = occlus = well plat (le defaut #1 retrouve en prod). En dessous du plancher OU occlus = rim invisible = well qui parait plat (echec #1 recurrent).\n\n| Composant | Min couches inset | Background |\n|---|---|---|\n| Input \u002F petit statut | 6 | `#080808->#0c0c0c` |\n| Well de gauge\u002Fmeter | 9 | `#050505->#080808` |\n| CRT\u002Fdeep display | 12 | `#030303` |\n| Canal slider | 5 | gradient `#050505->#0f0f0f` |\n| Trou LED | 4 | radial `#1a1a1a->#000` |\n\n**INTERDIT** : `inset 0 2px 4px rgba(0,0,0,0.3)` seul (1-3 couches). C'est un input CSS, pas un recess metal.\n\n### Rim Light\n\nShadow stack construit D'ABORD (5+ couches), PUIS rim light par-dessus. Bord superieur 2-4x plus lumineux que le bas. Au moins UN pseudo-element overlay (`\u003Cspan>` absolu ou Tailwind `before:` \u002F `after:`) avec `radial-gradient` pour hotspot concentre. Rim light opacity de la levre superieure d'un recess\u002Fwell : **0.20-0.25, plancher 0.20 NON NEGOCIABLE** (en dessous = rim invisible = well qui parait plat — echec #1 recurrent, cf. `references\u002F16-benchmark-lessons.md` §16.2). Ne PAS confondre avec l'edge catch d'une surface plate (0.03-0.08). Specular hotspots et active glows peuvent aller plus haut — voir tableau Eclairage. `pointerEvents: \"none\"` sur les overlays.\n\n**INTERDIT** : `border: 1px solid rgba(255,255,255,0.1)` comme \"rim light\" (border uniforme = cadre photo). `box-shadow: 0 0 20px rgba(255,255,255,0.1)` seul (glow uniforme = neon).\n\n**Note pseudo-elements** : En JSX inline, `::before`\u002F`::after` ne sont pas disponibles. Utiliser soit des classes Tailwind (`before:content-[''] before:absolute before:...`), soit un `\u003Cspan aria-hidden=\"true\" className=\"pointer-events-none absolute ...\" \u002F>` comme overlay dedié.\n\n### Chassis Metal \u002F Panneaux\n\n3+ zones obligatoires parmi : (1) Cadre bezel (rim multi-couches + bevel borders), (2) Surface principale (metal brosse\u002Ftexture, PAS gris plat), (3) Wells\u002Frecesses, (4) Zones d'affichage (recessed + color bleed), (5) Grille\u002Fventilation (hex perf ou fentes), (6) Labels (estampes\u002Fgraves, PAS texte brut).\n\n**INTERDIT** : Rectangle plat `#333` avec grille CSS de points. Tout chassis a besoin de texture de surface, au moins un recess, au moins un detail hardware.\n\n---\n\n## PATTERNS DE PRODUCTION CANONIQUES\n\nTous les patterns prets-a-l'emploi (bouton rest\u002Fhover\u002Factive, card avec rim light, tete de vis, phosphor\u002FCRT glow, silkscreen label, gradients de materiaux metal\u002Fchrome\u002Fcuir\u002Fbois) sont documentes avec code verbatim dans `references\u002F00-golden-examples.md`. Les references utilisent les titres exacts (`## N. NAME`) du golden file pour resister aux renumerotations :\n\n| Pattern | Section dans `references\u002F00-golden-examples.md` |\n|---|---|\n| Bouton complet Rest\u002FHover\u002FActive | `## 2. COMPLETE BUTTON — Rest \u002F Hover \u002F Active` |\n| Industrial Circuit Relay Button | `### Industrial Circuit Relay Button` |\n| Card avec Rim Light | `## 3. COMPLETE CARD WITH RIM LIGHT` |\n| Tete de vis (7 couches + slot torx) | `## 4. SCREW HEAD (7 layers + radial gradient)` |\n| Phosphor \u002F CRT Text Glow (amber, rouge) | `## 5. PHOSPHOR \u002F CRT TEXT GLOW` |\n| Silkscreen Label | `## 6. SILKSCREEN LABEL` |\n| Metal brosse \u002F Sphere knob \u002F Chrome \u002F Cuir \u002F Bois | `## 7. MATERIAL SURFACE GRADIENTS` |\n\n**Workflow** : charger `references\u002F00-golden-examples.md`, trouver le pattern par son titre exact, copier le bloc, adapter les couleurs\u002Ftailles au theme cible. **IMPORTANT** : les blocs golden sont ecrits en CSS pur (`.button { box-shadow: ... }`). Conformement a la regle de generation (React\u002FJSX + Tailwind + inline styles), **traduire chaque bloc CSS en `style={{ boxShadow: '...' }}` ou en classes Tailwind avant utilisation** — ne jamais coller le CSS verbatim dans une feuille de style globale ni creer de classes custom. Pour des materiaux avances (aluminium brosse detaille, acier, cuivre) consulter `references\u002F08-metal-effects.md`. Pour le verre consulter `references\u002F07-glass-effects.md`.\n\nUne etape CI (`Validate golden-examples references` dans `skill-integrity.yml`) verifie qu'a chaque release, tous les titres de section listes ci-dessus existent encore dans `references\u002F00-golden-examples.md`. Si la verification echoue, soit le golden file a ete renomme, soit ce tableau doit etre mis a jour.\n\n---\n\n## ROUTAGE OBLIGATOIRE PAR BESOIN\n\nLire le minimum utile, mais le lire vraiment. Pour chaque demande, suivre la ligne correspondante avant de coder :\n\n| Demande | Lire | Search obligatoire | Asset HTML a inspecter |\n|---|---|---|---|\n| Button \u002F CTA \u002F active press | `00-golden-examples.md` sections 1-2 + 17 matrix | `\"button shadow\" --code-only`, `\"pressed active state\"` | `power-button.html`, `color-mix-buttons.html`, `tile-buttons-divs.html` |\n| Segmented keypad \u002F multi-state selector (2-4 keys, one well) | `00` sections 1-2 + `11-retro-industrial-patterns.md` §43 (+ thin-ledge variant) | `\"pressed active state\"`, `\"keypad key selected\"` | `rimlight-toggle-switch.html`, `color-mix-buttons.html` |\n| Toggle \u002F rocker \u002F switch | `00` + `02-hardware-animation-neumorphism.md` | `\"switch recess\"`, `\"rocker active shadow\"` | `skeuomorphic-switch.html`, `rimlight-toggle-switch.html`, `rocker-3d-switch.html` |\n| Gauge \u002F VU \u002F meter | `00` + `14-metal-recess-wells.md` + `16` | `\"gauge well\"`, `\"needle shadow\"`, `\"metal recess\"` | `tube-compressor-vu.html`, `credit-score-gauge.html`, `horizontal-thermometer.html` |\n| CRT \u002F LCD \u002F phosphor display | `00` + `07-glass-effects.md` + `11-retro-industrial-patterns.md` + `16` | `\"CRT display\"`, `\"glass reflection\"`, `\"phosphor glow\"` | `codepen-deep-screen.html`, `deep-screen-phosphor.html`, `lcd-db-display.html` |\n| Metal chassis \u002F faceplate \u002F dashboard | `00` + `15-detailed-chassis.md` + `11` + `18` | `\"metal chassis\"`, `\"bezel screw\"`, `\"display well\"` | `agile-tech-skeuomorphic-site.html`, `synthscore-analytics.html`, `autochord-alert-panel.html` |\n| Glass \u002F lens \u002F dome | `00` + `07-glass-effects.md` + `09-rim-light-effects.md` | `\"glass reflection\"`, `\"rim light\"` | CRT\u002Fdisplay assets or relevant component asset |\n| Knob \u002F lever \u002F dial | `00` + `08-metal-effects.md` + `13-3d-depth-techniques.md` | `\"knob gradient\"`, `\"lever shadow\"` | `industrial-lever.html` |\n| Loading \u002F progress \u002F neumorphic light UI | `00` + `02` + `16` | `\"neumorphic pressed\"`, `\"progress loader\"` | `neumorphic-loading-circle.html`, `neumorphic-progress-loader.html`, `neumorphic-pressed-buttons.html` |\n\nSi plusieurs lignes s'appliquent, choisir la plus specifique puis ajouter une deuxieme recherche pour la finition dominante.\n\n---\n\n## PALETTE & TYPOGRAPHIE\n\nLa palette **WARM INDUSTRIAL** (defaut — 13 tokens : chassis-dark\u002Fbase\u002Fmid\u002Flight, bevel, highlight, amber\u002Famber-dim\u002Famber-glow, cream, green, red, silk) et la table **Typographie** (CRT\u002FVFD Orbitron, Terminal Share Tech Mono, Counter digits, Silkscreen, Gravure) sont documentees dans `references\u002F00-golden-examples.md` sections `## 8. WARM INDUSTRIAL PALETTE` et `## 9. TYPOGRAPHY`. La version reference inclut `--ri-silk-active` (label backlit) en bonus.\n\nPour les autres themes (cool steel, deep purple, military, vintage audio, CRT terminal) voir la section `### 2. Choisir la famille esthetique` sous `## PROTOCOLE DE CONSTRUCTION` ci-dessus. Pour les palettes etendues et tokens de patina\u002Fvieillissement voir `references\u002F06-aging-safety-tokens-palettes.md`.\n\n---\n\n## VOCABULAIRE 3D\n\n| L'utilisateur dit | Technique |\n|---|---|\n| \"3D effect\" \u002F \"effet 3D\" | Multi-layer shadow stack + perspective tilt optionnel |\n| \"3D button\" | Press effect : compression shadow sur :active |\n| \"depth\" \u002F \"profondeur\" | Couches d'ombre graduees OU translateZ |\n| \"relief\" \u002F \"embossed\" | Texte\u002Fforme sureleve via gradient clip + text-shadow |\n| \"recessed\" \u002F \"inset\" | Inset shadow stack (effet gorge) |\n| \"floating\" \u002F \"levitating\" | Drop shadows extra-larges + translateY lift |\n| \"parallax\" | Couches a differents translateZ ou vitesses de scroll |\n| \"glass dome\" \u002F \"bubble\" | Pseudo-element radial-gradient sur le contenu |\n| \"flip card\" | rotateY(180deg) + preserve-3d + backface-visibility |\n| \"isometric\" | rotateX + rotateY petits angles + faces d'arete |\n\n---\n\n## ANTI-PATTERNS\n\n| MAUVAIS | BON |\n|---|---|\n| 2-3 couches box-shadow | 5-15 couches, blur gradue |\n| Vis sur surface plate | Profondeur D'ABORD, vis par-dessus |\n| Vis sur verre\u002Fecran | Vis sur METAL uniquement |\n| Vis cercle plat 1 inset | Radial gradient sphere + 7 couches + slot torx |\n| Carte qui resize avec contenu | width+height explicites, frame fixe |\n| Recess sans inner rim light | 1px warm border au bord, top plus lumineux |\n| 1-3 inset pour ecran | 12+ couches inset + inner rim light |\n| Rim light avec glow\u002Fblur | Border clean 1px, PAS de bloom |\n| Pas de color bleed depuis display | Inner rim capte la couleur display a 0.06-0.10 |\n| Texte embosse opacity \u003C 0.25 | Min 0.35 tertiaire, 0.50 secondaire |\n| Taille differente pour etat disabled | Memes width+height pour tous les etats |\n| Rim light decoratif sans source physique | Chaque effet lumineux a une source physique |\n| Blanc pur rgba(255,255,255,X) X>0.10 | rgba(255,240,220,X) tint chaud |\n| Meme box-shadow rest\u002Fhover\u002Factive | Stacks differents par etat |\n| `filter: blur()` en animation | opacity + transform uniquement |\n| Plusieurs directions lumineuses | 135deg unique partout |\n| Inventer des shadow stacks | Copier-adapter depuis les canoniques |\n| Hardware avant profondeur | Ordre d'assemblage : profondeur d'abord |\n| Lumiere + ombre melangees | Systemes separes |\n| Edge catch rgba(255,255,255,0.5) | Max 0.08 pour les edges |\n| Ombres portees colorees | rgba(0,0,0,...) pour TOUTES les drops |\n| Body text \u003C 13px | Body >= 13px, titres >= 14px, labels >= 11px |\n| Conteneur\u002Fcarte meme luminosite | Delta minimum #12 hex |\n| Toujours amber-on-dark | Proposer 2-3 themes si nouvelle UI |\n| Styler sans lire la page | Scanner la page, extraire palette, matcher hierarchie |\n| Choisir style bouton sans classifier | Utiliser la matrice de decision |\n| Ajouter un 3e accent silencieusement | Max 2 par page, demander avant le 3e |\n| Ignorer les siblings | Meme role = meme style |\n\n---\n\n## VARIETE CREATIVE (nouvelles UIs uniquement)\n\nSi modification d'une page existante : coherence, matcher le theme existant. Ne pas proposer de variete.\n\nSi creation d'un composant net-new sans theme etabli : proposer 2 options maximum depuis les 6 themes ci-dessus. L'utilisateur choisit.\n\nNe jamais proposer de variete quand la page environnante etablit deja le role, la palette et la hierarchie.\n\n---\n\n## HTML ASSETS — Lookup rapide\n\n| Besoin | Fichier | Cle recherche |\n|---|---|---|\n| Push button avec LED | `power-button.html` | `power-button` |\n| Dashboard \u002F analytics | `synthscore-analytics.html` | `synthscore` |\n| VU meter \u002F gauge | `tube-compressor-vu.html` | `vu-meter` |\n| Toggle switch | `skeuomorphic-switch.html` | `switch` |\n| LCD numeric display | `lcd-db-display.html` | `lcd` |\n| Rotary lever \u002F knob | `industrial-lever.html` | `lever` |\n| Score gauge \u002F radial | `credit-score-gauge.html` | `gauge` |\n| Alert \u002F warning panel | `autochord-alert-panel.html` | `alert` |\n| CRT danger screen | `deep-screen-phosphor.html` | `phosphor` |\n| Folding \u002F accordion | `folding-header.html` | `folding` |\n| Horizontal bar meter | `horizontal-thermometer.html` | `thermometer` |\n| Deep CRT (31 layers) | `codepen-deep-screen.html` | `deep-screen` |\n| Full page (15+ buttons) | `agile-tech-skeuomorphic-site.html` | `site` |\n| Rimlight toggle switch | `rimlight-toggle-switch.html` | `rimlight` |\n| Color-mix buttons | `color-mix-buttons.html` | `color-mix` |\n| Rocker 3D switch | `rocker-3d-switch.html` | `rocker` |\n| Tile up\u002Fdown\u002Fbutton | `tile-buttons-divs.html` | `tiles` |\n| Neumorphic loader | `neumorphic-loading-circle.html` | `loading` |\n| Progress loader (light) | `neumorphic-progress-loader.html` | `progress` |\n| Pressed buttons (light) | `neumorphic-pressed-buttons.html` | `pressed` |\n| Fingerprint SVG button | `fingerprint-button.html` | `fingerprint` |\n\nTous les fichiers dans `assets\u002F` (au niveau root du plugin).\n\n---\n\n## RESSOURCES SUPPLEMENTAIRES\n\nCe skill expose trois dossiers au niveau root du plugin (`assets\u002F`, `references\u002F`, `scripts\u002F`). Les references contiennent ~108k mots de deep-dive pour sujets qui depassent le scope du SKILL.md principal.\n\n### Reference Files (`references\u002F`)\n\nCharger a la demande selon le sujet de travail :\n\n| Fichier | Contenu | Quand consulter |\n|---|---|---|\n| `00-golden-examples.md` | Exemples canoniques a copier-adapter | Tout nouveau composant — partir d'un golden exemple |\n| `01-shadows-materials-textures.md` | Shadow stacks detailles par materiau + textures SVG | Construire un nouveau tier de shadow stack |\n| `02-hardware-animation-neumorphism.md` | Vis, rivets, hinges + animations + neumorphism variants | Ajouter du hardware ou des etats animes |\n| `03-blueprints-performance-palettes.md` | Blueprints complets + perf tips + palettes etendues | Composant complexe multi-couches |\n| `04-community-techniques.md` | Techniques issues de la communaute (CodePen, Dribbble) | Inspiration pour effets avances |\n| `05-physics-composition-interaction-typography.md` | Regles physiques + composition + states + typo detaillee | Debug d'un composant qui parait \"faux\" |\n| `06-aging-safety-tokens-palettes.md` | Patina\u002Fvieillissement, design tokens, palettes etendues | Theming global ou finition vintage |\n| `07-glass-effects.md` | Verre CRT, domes, lenses, reflets speculaires | Tout ce qui doit ressembler a du verre |\n| `08-metal-effects.md` | Aluminium brosse, acier, chrome, cuivre | Surfaces metal texturees |\n| `09-rim-light-effects.md` | Rim light avance (beyond le pseudo-element basique) | Quand rim light basique insuffisant |\n| `10-particle-effects.md` | Particules, sparks, dust, ambient motion | Fonds animes, feedback visuel |\n| `11-retro-industrial-patterns.md` | Patterns complets aerospace \u002F DSP \u002F military cockpit | Theme retro-industrial full-page |\n| `12-production-components.md` | Composants production-ready pret a l'emploi | Reutilisation de composants eprouves |\n| `13-3d-depth-techniques.md` | Perspective, tilt, parallax, isometric | Effets 3D au-dela des shadow stacks |\n| `14-metal-recess-wells.md` | Construction detaillee de wells metalliques | Recess complexe (gauge\u002Fmeter\u002Fdisplay) |\n| `15-detailed-chassis.md` | Chassis multi-zones (bezel + surface + wells + grille + labels) | Panneau complet faceplate |\n| `16-benchmark-lessons.md` | Lecons des benchmarks (ce qui marche \u002F ce qui casse) | Eviter les pieges connus |\n| `17-context-scan-matrices.md` | Matrices U0 Context Scan approfondies | Styler dans une page existante complexe |\n| `18-verification-checklist.md` | Checklist verification U0-U7 detaillee avec exemples | Gate final avant livraison |\n\n### Scripts (`scripts\u002F`)\n\n- **`search.py`** — Recherche semantique sur `assets\u002F` et `references\u002F`. Utile pour trouver le bon exemple ou la bonne reference sans charger 108k mots dans le contexte. Executer via `python3 scripts\u002Fsearch.py \"query\"` (le script utilise des features Python 3 — typing `list[dict]`, etc.).\n\n### Assets (`assets\u002F`)\n\n21 fichiers HTML complets de composants skeuomorphiques production-ready (voir tableau \"HTML ASSETS — Lookup rapide\" ci-dessus). Copier-adapter plutot que re-inventer.\n","# SKEUOMORPHIC FORGE — Instructions de generation UI\n\nCe skill produit de l'UI skeuomorphique physiquement realiste. Chaque composant genere DOIT ressembler a un objet physique reel (metal usine, verre CRT, aluminium brosse, Bakelite), pas un div plat avec une ombre CSS.\n\nGenerer du code React\u002FJSX avec Tailwind CSS + inline styles (`style={{}}`). Pas de classes CSS custom sauf indication contraire.\n\n---\n\n## CONTRAT D'EXECUTION OBLIGATOIRE\n\nCe skill contient beaucoup d'exemples. Ne pas \"s'inspirer vaguement\". L'agent DOIT utiliser les ressources bundlees comme une bibliotheque de pieces a copier-adapter.\n\nAvant de produire du code, faire ces etapes dans l'ordre :\n\n1. **Resoudre le root des ressources** (voir section suivante). Si `references\u002F`, `assets\u002F` ou `scripts\u002Fsearch.py` sont introuvables, STOP : dire que le skill est mal installe au lieu d'inventer un style.\n2. **Lire `references\u002F00-golden-examples.md`** pour partir d'un shadow stack, d'un pattern ou d'une table de lookup canonique.\n3. **Classer le composant** : objet physique nomme, theme, tier d'ombre, materiau, etat interactif.\n4. **Lancer `scripts\u002Fsearch.py`** avec au moins 2 requetes ciblees sauf si l'environnement ne permet aucun shell. Requetes minimales :\n   - type d'objet : `\"button shadow\"`, `\"CRT display\"`, `\"gauge well\"`, `\"knob gradient\"`, `\"metal chassis\"`, etc.\n   - finition : `\"rim light\"`, `\"brushed metal\"`, `\"glass reflection\"`, `\"pressed active state\"`, etc.\n5. **Ouvrir au moins 1 asset HTML pertinent** depuis `assets\u002F` quand il existe pour ce type de composant. Copier-adapter sa structure visuelle. Ne pas repartir d'un div vierge.\n6. **Si page existante** : lire le code environnant AVANT de styler, puis consulter `references\u002F17-context-scan-matrices.md`.\n7. **Si composant complexe** (chassis, CRT, gauge, dashboard, full-page) : consulter aussi `references\u002F16-benchmark-lessons.md` et `references\u002F18-verification-checklist.md`.\n8. **Verifier U0-U7** avant livraison. Un echec CRITICAL bloque la livraison.\n\n### Bloc FORGE PLAN\n\nAvant le code, produire un bloc court `FORGE PLAN` (ou un commentaire en haut du fichier si l'utilisateur exige code-only) :\n\n```text\nFORGE PLAN\n- Lecture: page existante ou greenfield, audience, role UI\n- Objet physique: ex. faceplate aluminium usine, switch Bakelite, CRT encastre\n- Theme\u002Ftier: warm industrial, Advanced 8+ layers, light source 135deg\n- Sources: 00-golden-examples + search(\"...\") + asset \"...html\" + refs supplementaires\n- Verification cible: U0-U7, plus U9 si display\u002Fchassis\n```\n\nSi ce bloc ne peut pas citer au moins `00-golden-examples.md` et une recherche\u002Fasset pertinente, le travail n'est pas pret.\n\n### Resolution du root ressources\n\nLes installations peuvent exposer ce skill soit comme plugin (`skills\u002Fskeuomorphic-forge\u002FSKILL.md` avec ressources au root du repo), soit comme dossier de skill autonome. Resoudre le root dans cet ordre :\n\n1. Si `references\u002F00-golden-examples.md` existe dans le cwd, utiliser le cwd.\n2. Sinon, si `..\u002F..\u002Freferences\u002F00-golden-examples.md` existe depuis le dossier de ce `SKILL.md`, utiliser `..\u002F..`.\n3. Sinon, chercher en remontant jusqu'a 3 parents un dossier qui contient `references\u002F00-golden-examples.md`, `assets\u002F`, et `scripts\u002Fsearch.py`.\n\nExemples de commandes utiles depuis le root :\n\n```bash\npython3 scripts\u002Fsearch.py \"button shadow\" -n 5 --code-only\npython3 scripts\u002Fsearch.py \"rim light\" -n 5 --context 4\npython3 scripts\u002Fsearch.py \"CRT display\" --file deep-screen -n 3\n```\n\nNe jamais remplacer ces recherches par de la memoire approximative si les fichiers sont accessibles.\n\n---\n\n## CONTRAINTES PHYSIQUES ABSOLUES (s'appliquent a CHAQUE composant)\n\nVioler une seule de ces regles produit un composant visuellement casse.\n\n**C1 Ombres portees = NOIR UNIQUEMENT.** Tous les `box-shadow` non-inset utilisent exclusivement `rgba(0,0,0,...)`. Une ombre est l'absence de lumiere. Jamais d'ombre portee violette, ambree, bleue. Exceptions : (a) les `inset` highlights avec rgba clair\u002Fcolore sont OK (lumiere frappant les bords internes), (b) les glows d'emission\u002Fbacklight a tres faible opacite (\u003C 0.08) sont OK pour simuler la lumiere emise par un ecran\u002FLED (ex: `0 0 60px rgba(255,176,0,0.06)`).\n\n**C2 Source lumineuse unique a 135deg**, coherente sur TOUS les composants de la page. Plusieurs directions = physiquement impossible.\n\n**C3 Highlights chauds au-dessus de 0.10 d'opacite.** Tout `rgba(255,255,255,X)` avec X > 0.10 doit devenir `rgba(255,240,220,X)` ou plus chaud. Blanc pur au-dessus de 0.10 = blafard\u002Fclinique. Les edge catches a 0.03-0.08 peuvent rester en blanc pur.\n\n**C4 Separation de contraste.** Les fonds de conteneurs\u002Fwells (#08-#10) DOIVENT etre plus sombres que les fonds de cartes (#1c-#28). Delta minimum #12 hex. Renforcer les bords de carte : `borderTop: \"1px solid rgba(255,255,255,0.09)\"`, `borderLeft: \"1px solid rgba(255,255,255,0.06)\"`.\n\n**C5 Ombre et lumiere sont des systemes SEPARES.** L'ombre (rgba sombre) cree profondeur\u002Frecession via `box-shadow`. La lumiere (rgba chaud, gradients, pseudo-elements) cree reflets speculaires\u002Fedge catches. Ne jamais les confondre dans un stack brouille.\n\n**C6 Minimum de couches d'ombre.** Standard (boutons\u002Fcartes\u002Ftoggles) >= 5. Advanced (knobs\u002Fdials\u002Fmeters) >= 8. Hero (panneaux\u002Fchassis) >= 11. Ultra (CRT vitrine) = 31. LES COMPTER apres collage.\n\n**C7 Ne jamais inventer de shadow stacks.** Toujours copier-adapter depuis les stacks canoniques ci-dessous.\n\n**C8 Ordre d'assemblage : arriere vers avant.** Backplate -> sous-panneaux\u002Fbezels -> wells\u002Frecesses -> instruments\u002Fdisplays -> hardware (vis\u002Frivets) -> labels -> verre\u002Freflet. Du hardware sur une surface plate = contradiction. Construire la profondeur D'ABORD.\n\n**C9 Taille physique fixe.** Les cartes-appareils (CRT, gauge, instrument) ont des dimensions FIXES. Toutes les instances du meme composant = meme width+height. Etat disabled = memes dimensions que actif. Le contenu se centre dans le chassis. Utiliser `width` + `height` explicites.\n\n**C10 Max 2 couleurs d'accent par page.** Un 3e accent necessite approbation explicite.\n\n---\n\n## VERIFICATION PRE-LIVRAISON (checker AVANT de livrer)\n\nUn composant qui echoue un gate CRITICAL ne doit PAS etre livre.\n\nLa livraison finale DOIT mentionner en 3-5 lignes :\n- sources consultees avec preuves : commandes `python3 scripts\u002Fsearch.py ...` exactes, asset HTML ouvert, references\u002Fsections utilisees\n- objet physique + tier choisi\n- nombre de couches shadow du composant principal\n- resultat U0-U7 (`pass` ou blocage explicite)\n\nDire seulement \"sources consultees\" sans commandes exactes ni asset nomme est insuffisant. Le lecteur doit pouvoir reproduire le chemin de recherche.\n\n**U0 Context Scan (BLOCKING):** La page existante a ete analysee avant de styler. Palette, boutons existants, hierarchie des conteneurs identifies. Meme role = meme style que les siblings. Shadow stack source depuis les canoniques, pas invente.\n\n**U1 Shadow Depth (CRITICAL):** Nombre de couches respecte le minimum du tier (C6). Ombres portees NOIR uniquement (C1). Progression graduee du blur.\n\n**U2 Light Source (CRITICAL):** Direction unique 135deg partout (C2). Lumiere\u002Fombre separees (C5). Pas de blanc pur au-dessus de 0.10 (C3). Gradient de surface present.\n\n**U3 Construction (HIGH):** Objet physique nomme explicitement. 4 couches : chassis + profondeur + eclairage + detail. Ordre d'assemblage respecte (C8).\n\n**U4 Hardware (HIGH):** Vis aux coins avec radial-gradient sphere + 7 couches d'ombre + slot torx\u002Fphillips. Vis sur METAL uniquement, jamais sur verre\u002Fecran.\n\n**U5 Interaction States (HIGH):** hover (lift + expand shadow), active (depress + compress), disabled (opacity 0.5 + desaturate), focus-visible (outline 2px). Le shadow stack CHANGE entre les etats.\n\n**U6 Typography (HIGH):** Body >= 13px, titres >= 14px, labels >= 11px, rien sous 10px. Texte primaire opacity >= 0.85, secondaire >= 0.5, tertiaire >= 0.35. Labels en silkscreen (text-shadow) ou grave (clip + gradient), pas en texte brut.\n\n**U7 Accessibility (MEDIUM):** Contraste WCAG OK. `focus-visible` sur tous les interactifs. Touch targets >= 44px. `prefers-reduced-motion`. `pointer-events: none` sur les overlays de texture. Pas de `filter: blur()` dans les animations.\n\n---\n\n## SHADOW STACKS CANONIQUES (copier-adapter, ne jamais inventer)\n\nLes quatre tiers de shadow stacks — **Standard** (5+ couches), **Advanced** (8-9), **Hero** (11+ minimum, golden example en utilise 13+), **Ultra** (31) — sont documentes avec code verbatim dans `references\u002F00-golden-examples.md` section `## 1. SHADOW STACKS BY TIER`. **Charger ce fichier AVANT de construire tout composant avec relief.** Ne jamais reconstruire un stack de memoire : copier-adapter depuis le golden file.\n\nRappel des tiers (pour classifier rapidement, voir tableau CLASSIFICATION DU COMPOSANT ci-dessous) :\n- **Standard 5+** : boutons, cartes, toggles\n- **Advanced 8-9** : knobs, dials, meters, rails de switch, display wells\n- **Hero 11+ minimum (golden = 13+)** : panneaux, chassis, faceplates\n- **Ultra 31** : deep CRT recess\n\n---\n\n## CLASSIFICATION DU COMPOSANT\n\n### Boutons\n\n| Role | Tier shadow | Gradient | Taille |\n|---|---|---|---|\n| CTA\u002FHero | Advanced 8+ | Bold thematique + shimmer\u002FLED | 48-56px height, 1 par page max |\n| Primary | Standard 5+ | Surface gradient accent | 40-44px |\n| Secondary | Standard 5 | Subtle surface gradient | 36-40px |\n| Tertiary\u002FGhost | Minimal 2-3 inset (exception C6 — ghost = pas de relief physique) | Aucun, transparent + border | 32-40px |\n| Destructive | Standard 5+ | Red `#4a1010->#2a0808` | 40-44px |\n\n### Conteneurs\n\n| Role | Background | Shadow |\n|---|---|---|\n| Section well | #08-#0e (le plus sombre) | Inset 4-6 couches |\n| Card (flottante) | #1c-#28 (plus clair) | Drop Standard 5+ |\n| Card imbriquee | #14-#1c (intermediaire) | Drop 3-5 |\n| Modal\u002Foverlay | #1a-#22 | Hero 11+ |\n\n### Elements speciaux\n\n| Type | Tier shadow |\n|---|---|\n| Gauge\u002Fmeter | Advanced 8+ |\n| CRT display | Hero 11+ ou Ultra 31 |\n| Toggle\u002Fswitch | Standard 5 |\n| Knob\u002Fdial | Advanced 8+ |\n| LED indicator | Standard 5 |\n\n---\n\n## PROTOCOLE DE CONSTRUCTION\n\n### 1. Nommer l'objet physique\n\nDire explicitement : \"Ceci est une faceplate en aluminium usine\" ou \"Ceci est un interrupteur a bascule en Bakelite\". Si l'analogie physique est floue, le composant sera generique.\n\n### 2. Choisir la famille esthetique\n\n| Theme | Surface gradient | Accent | Inset highlight | Texte |\n|---|---|---|---|---|\n| Warm industrial (defaut) | `#1e1e1e->#141414` | `hsl(35 100% 60%)` amber | `rgba(255,240,220,0.12)` | `rgba(255,240,220,0.9)` |\n| Cool steel | `#1a1c20->#12141a` | `hsl(210 70% 60%)` blue | `rgba(180,200,255,0.10)` | `rgba(200,220,255,0.9)` |\n| Deep purple | `#2d1854->#150b28` | `hsl(270 100% 70%)` violet | `rgba(200,160,255,0.12)` | `rgba(220,200,255,0.95)` |\n| Military | `#1a1e14->#10140c` | `hsl(0 70% 55%)` red | `rgba(180,200,150,0.08)` | `rgba(180,200,150,0.85)` |\n| Vintage audio | `#2a2218->#1a1610` | `hsl(30 80% 55%)` copper | `rgba(255,220,180,0.10)` | `rgba(240,220,190,0.9)` |\n| CRT terminal | `#0a0f0a->#050805` | `hsl(120 100% 50%)` green | `rgba(0,255,60,0.06)` | `rgba(0,255,60,0.85)` |\n\nLes ombres portees restent NOIRES `rgba(0,0,0,...)` quel que soit le theme.\n\n### 3. Eclairage (applique APRES les ombres)\n\n1. **Gradient de surface** (courbure) : `background: linear-gradient(145deg, plus-clair 0%, plus-sombre 100%)`\n2. **Bords biseautes** : `borderTop: \"1px solid rgba(255,255,255,0.08)\"`, `borderBottom: \"1px solid rgba(0,0,0,0.3)\"`\n3. **Point speculaire** : `::before` avec `radial-gradient(circle at 35% 30%, rgba(255,240,220,0.2), transparent 60%)`\n4. **Rim glow** : `::before` avec `radial-gradient(ellipse at center, rgba(255,255,255,0.25), transparent 70%)` au bord superieur, `pointerEvents: \"none\"`\n\n| But | Couleur | Opacite |\n|---|---|---|\n| Edge catch (surface plate uniquement) | `rgba(255,255,255,...)` | 0.03-0.08 |\n| Top bevel | `rgba(255,255,255,...)` | 0.08-0.15 |\n| **Levre \u002F RIM d'un recess ou well (bord sup.)** | `rgba(255,250,240,...)` | **0.20-0.25 — plancher 0.20 (§16.2), JAMAIS 0.03-0.15** |\n| Specular hotspot | `rgba(255,240,220,...)` | 0.15-0.30 |\n| Active glow | `rgba(255,180,60,...)` | 0.10-0.40 |\n| CRT\u002FLED emission | `hsl(35 100% 60%)` | Full |\n| Rim light (pseudo) | `rgba(255,255,255,0.25)` center->transparent | radial-gradient |\n\n### 4. Etats d'interaction (CHAQUE element interactif)\n\n```javascript\n\u002F\u002F Hover — lift + expand shadow\nonHover: { transform: 'translateY(-1px)', boxShadow: '\u002F* meme stack, blur +2px\u002Fcouche, highlight opacity +0.05 *\u002F' }\n\u002F\u002F Active — depress\nonActive: { transform: 'translateY(1px)', boxShadow: 'inset 0 2px 4px rgba(0,0,0,0.5), inset 0 1px 1px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.3)' }\n\u002F\u002F Disabled\nonDisabled: { opacity: 0.5, filter: 'saturate(0.3)', pointerEvents: 'none' }\n\u002F\u002F Focus\nfocusVisible: { outline: '2px solid hsl(35 100% 60%)', outlineOffset: '2px' }\n```\n\n---\n\n## REGLES COMPOSANTS SPECIFIQUES\n\n### Metal Recesses \u002F Wells\n\nChaque recess necessite les 4 zones : top attack, murs lateraux, bottom catch, **levre superieure (RIM)**. La levre superieure DOIT rester visible : `inset 0 1px 0 rgba(255,250,240,0.22)` (plancher 0.20, plage 0.20-0.25, §16.2 — ne PAS descendre aux valeurs d'edge catch 0.03-0.08). **PLACEMENT** : ce rim inset doit etre le **PREMIER** layer du `box-shadow` (frontmost) — en CSS le premier layer peint AU-DESSUS, donc un rim ajoute en DERNIER passe DERRIERE les insets sombres = occlus = well plat (le defaut #1 retrouve en prod). En dessous du plancher OU occlus = rim invisible = well qui parait plat (echec #1 recurrent).\n\n| Composant | Min couches inset | Background |\n|---|---|---|\n| Input \u002F petit statut | 6 | `#080808->#0c0c0c` |\n| Well de gauge\u002Fmeter | 9 | `#050505->#080808` |\n| CRT\u002Fdeep display | 12 | `#030303` |\n| Canal slider | 5 | gradient `#050505->#0f0f0f` |\n| Trou LED | 4 | radial `#1a1a1a->#000` |\n\n**INTERDIT** : `inset 0 2px 4px rgba(0,0,0,0.3)` seul (1-3 couches). C'est un input CSS, pas un recess metal.\n\n### Rim Light\n\nShadow stack construit D'ABORD (5+ couches), PUIS rim light par-dessus. Bord superieur 2-4x plus lumineux que le bas. Au moins UN pseudo-element overlay (`\u003Cspan>` absolu ou Tailwind `before:` \u002F `after:`) avec `radial-gradient` pour hotspot concentre. Rim light opacity de la levre superieure d'un recess\u002Fwell : **0.20-0.25, plancher 0.20 NON NEGOCIABLE** (en dessous = rim invisible = well qui parait plat — echec #1 recurrent, cf. `references\u002F16-benchmark-lessons.md` §16.2). Ne PAS confondre avec l'edge catch d'une surface plate (0.03-0.08). Specular hotspots et active glows peuvent aller plus haut — voir tableau Eclairage. `pointerEvents: \"none\"` sur les overlays.\n\n**INTERDIT** : `border: 1px solid rgba(255,255,255,0.1)` comme \"rim light\" (border uniforme = cadre photo). `box-shadow: 0 0 20px rgba(255,255,255,0.1)` seul (glow uniforme = neon).\n\n**Note pseudo-elements** : En JSX inline, `::before`\u002F`::after` ne sont pas disponibles. Utiliser soit des classes Tailwind (`before:content-[''] before:absolute before:...`), soit un `\u003Cspan aria-hidden=\"true\" className=\"pointer-events-none absolute ...\" \u002F>` comme overlay dedié.\n\n### Chassis Metal \u002F Panneaux\n\n3+ zones obligatoires parmi : (1) Cadre bezel (rim multi-couches + bevel borders), (2) Surface principale (metal brosse\u002Ftexture, PAS gris plat), (3) Wells\u002Frecesses, (4) Zones d'affichage (recessed + color bleed), (5) Grille\u002Fventilation (hex perf ou fentes), (6) Labels (estampes\u002Fgraves, PAS texte brut).\n\n**INTERDIT** : Rectangle plat `#333` avec grille CSS de points. Tout chassis a besoin de texture de surface, au moins un recess, au moins un detail hardware.\n\n---\n\n## PATTERNS DE PRODUCTION CANONIQUES\n\nTous les patterns prets-a-l'emploi (bouton rest\u002Fhover\u002Factive, card avec rim light, tete de vis, phosphor\u002FCRT glow, silkscreen label, gradients de materiaux metal\u002Fchrome\u002Fcuir\u002Fbois) sont documentes avec code verbatim dans `references\u002F00-golden-examples.md`. Les references utilisent les titres exacts (`## N. NAME`) du golden file pour resister aux renumerotations :\n\n| Pattern | Section dans `references\u002F00-golden-examples.md` |\n|---|---|\n| Bouton complet Rest\u002FHover\u002FActive | `## 2. COMPLETE BUTTON — Rest \u002F Hover \u002F Active` |\n| Industrial Circuit Relay Button | `### Industrial Circuit Relay Button` |\n| Card avec Rim Light | `## 3. COMPLETE CARD WITH RIM LIGHT` |\n| Tete de vis (7 couches + slot torx) | `## 4. SCREW HEAD (7 layers + radial gradient)` |\n| Phosphor \u002F CRT Text Glow (amber, rouge) | `## 5. PHOSPHOR \u002F CRT TEXT GLOW` |\n| Silkscreen Label | `## 6. SILKSCREEN LABEL` |\n| Metal brosse \u002F Sphere knob \u002F Chrome \u002F Cuir \u002F Bois | `## 7. MATERIAL SURFACE GRADIENTS` |\n\n**Workflow** : charger `references\u002F00-golden-examples.md`, trouver le pattern par son titre exact, copier le bloc, adapter les couleurs\u002Ftailles au theme cible. **IMPORTANT** : les blocs golden sont ecrits en CSS pur (`.button { box-shadow: ... }`). Conformement a la regle de generation (React\u002FJSX + Tailwind + inline styles), **traduire chaque bloc CSS en `style={{ boxShadow: '...' }}` ou en classes Tailwind avant utilisation** — ne jamais coller le CSS verbatim dans une feuille de style globale ni creer de classes custom. Pour des materiaux avances (aluminium brosse detaille, acier, cuivre) consulter `references\u002F08-metal-effects.md`. Pour le verre consulter `references\u002F07-glass-effects.md`.\n\nUne etape CI (`Validate golden-examples references` dans `skill-integrity.yml`) verifie qu'a chaque release, tous les titres de section listes ci-dessus existent encore dans `references\u002F00-golden-examples.md`. Si la verification echoue, soit le golden file a ete renomme, soit ce tableau doit etre mis a jour.\n\n---\n\n## ROUTAGE OBLIGATOIRE PAR BESOIN\n\nLire le minimum utile, mais le lire vraiment. Pour chaque demande, suivre la ligne correspondante avant de coder :\n\n| Demande | Lire | Search obligatoire | Asset HTML a inspecter |\n|---|---|---|---|\n| Button \u002F CTA \u002F active press | `00-golden-examples.md` sections 1-2 + 17 matrix | `\"button shadow\" --code-only`, `\"pressed active state\"` | `power-button.html`, `color-mix-buttons.html`, `tile-buttons-divs.html` |\n| Segmented keypad \u002F multi-state selector (2-4 keys, one well) | `00` sections 1-2 + `11-retro-industrial-patterns.md` §43 (+ thin-ledge variant) | `\"pressed active state\"`, `\"keypad key selected\"` | `rimlight-toggle-switch.html`, `color-mix-buttons.html` |\n| Toggle \u002F rocker \u002F switch | `00` + `02-hardware-animation-neumorphism.md` | `\"switch recess\"`, `\"rocker active shadow\"` | `skeuomorphic-switch.html`, `rimlight-toggle-switch.html`, `rocker-3d-switch.html` |\n| Gauge \u002F VU \u002F meter | `00` + `14-metal-recess-wells.md` + `16` | `\"gauge well\"`, `\"needle shadow\"`, `\"metal recess\"` | `tube-compressor-vu.html`, `credit-score-gauge.html`, `horizontal-thermometer.html` |\n| CRT \u002F LCD \u002F phosphor display | `00` + `07-glass-effects.md` + `11-retro-industrial-patterns.md` + `16` | `\"CRT display\"`, `\"glass reflection\"`, `\"phosphor glow\"` | `codepen-deep-screen.html`, `deep-screen-phosphor.html`, `lcd-db-display.html` |\n| Metal chassis \u002F faceplate \u002F dashboard | `00` + `15-detailed-chassis.md` + `11` + `18` | `\"metal chassis\"`, `\"bezel screw\"`, `\"display well\"` | `agile-tech-skeuomorphic-site.html`, `synthscore-analytics.html`, `autochord-alert-panel.html` |\n| Glass \u002F lens \u002F dome | `00` + `07-glass-effects.md` + `09-rim-light-effects.md` | `\"glass reflection\"`, `\"rim light\"` | CRT\u002Fdisplay assets or relevant component asset |\n| Knob \u002F lever \u002F dial | `00` + `08-metal-effects.md` + `13-3d-depth-techniques.md` | `\"knob gradient\"`, `\"lever shadow\"` | `industrial-lever.html` |\n| Loading \u002F progress \u002F neumorphic light UI | `00` + `02` + `16` | `\"neumorphic pressed\"`, `\"progress loader\"` | `neumorphic-loading-circle.html`, `neumorphic-progress-loader.html`, `neumorphic-pressed-buttons.html` |\n\nSi plusieurs lignes s'appliquent, choisir la plus specifique puis ajouter une deuxieme recherche pour la finition dominante.\n\n---\n\n## PALETTE & TYPOGRAPHIE\n\nLa palette **WARM INDUSTRIAL** (defaut — 13 tokens : chassis-dark\u002Fbase\u002Fmid\u002Flight, bevel, highlight, amber\u002Famber-dim\u002Famber-glow, cream, green, red, silk) et la table **Typographie** (CRT\u002FVFD Orbitron, Terminal Share Tech Mono, Counter digits, Silkscreen, Gravure) sont documentees dans `references\u002F00-golden-examples.md` sections `## 8. WARM INDUSTRIAL PALETTE` et `## 9. TYPOGRAPHY`. La version reference inclut `--ri-silk-active` (label backlit) en bonus.\n\nPour les autres themes (cool steel, deep purple, military, vintage audio, CRT terminal) voir la section `### 2. Choisir la famille esthetique` sous `## PROTOCOLE DE CONSTRUCTION` ci-dessus. Pour les palettes etendues et tokens de patina\u002Fvieillissement voir `references\u002F06-aging-safety-tokens-palettes.md`.\n\n---\n\n## VOCABULAIRE 3D\n\n| L'utilisateur dit | Technique |\n|---|---|\n| \"3D effect\" \u002F \"effet 3D\" | Multi-layer shadow stack + perspective tilt optionnel |\n| \"3D button\" | Press effect : compression shadow sur :active |\n| \"depth\" \u002F \"profondeur\" | Couches d'ombre graduees OU translateZ |\n| \"relief\" \u002F \"embossed\" | Texte\u002Fforme sureleve via gradient clip + text-shadow |\n| \"recessed\" \u002F \"inset\" | Inset shadow stack (effet gorge) |\n| \"floating\" \u002F \"levitating\" | Drop shadows extra-larges + translateY lift |\n| \"parallax\" | Couches a differents translateZ ou vitesses de scroll |\n| \"glass dome\" \u002F \"bubble\" | Pseudo-element radial-gradient sur le contenu |\n| \"flip card\" | rotateY(180deg) + preserve-3d + backface-visibility |\n| \"isometric\" | rotateX + rotateY petits angles + faces d'arete |\n\n---\n\n## ANTI-PATTERNS\n\n| MAUVAIS | BON |\n|---|---|\n| 2-3 couches box-shadow | 5-15 couches, blur gradue |\n| Vis sur surface plate | Profondeur D'ABORD, vis par-dessus |\n| Vis sur verre\u002Fecran | Vis sur METAL uniquement |\n| Vis cercle plat 1 inset | Radial gradient sphere + 7 couches + slot torx |\n| Carte qui resize avec contenu | width+height explicites, frame fixe |\n| Recess sans inner rim light | 1px warm border au bord, top plus lumineux |\n| 1-3 inset pour ecran | 12+ couches inset + inner rim light |\n| Rim light avec glow\u002Fblur | Border clean 1px, PAS de bloom |\n| Pas de color bleed depuis display | Inner rim capte la couleur display a 0.06-0.10 |\n| Texte embosse opacity \u003C 0.25 | Min 0.35 tertiaire, 0.50 secondaire |\n| Taille differente pour etat disabled | Memes width+height pour tous les etats |\n| Rim light decoratif sans source physique | Chaque effet lumineux a une source physique |\n| Blanc pur rgba(255,255,255,X) X>0.10 | rgba(255,240,220,X) tint chaud |\n| Meme box-shadow rest\u002Fhover\u002Factive | Stacks differents par etat |\n| `filter: blur()` en animation | opacity + transform uniquement |\n| Plusieurs directions lumineuses | 135deg unique partout |\n| Inventer des shadow stacks | Copier-adapter depuis les canoniques |\n| Hardware avant profondeur | Ordre d'assemblage : profondeur d'abord |\n| Lumiere + ombre melangees | Systemes separes |\n| Edge catch rgba(255,255,255,0.5) | Max 0.08 pour les edges |\n| Ombres portees colorees | rgba(0,0,0,...) pour TOUTES les drops |\n| Body text \u003C 13px | Body >= 13px, titres >= 14px, labels >= 11px |\n| Conteneur\u002Fcarte meme luminosite | Delta minimum #12 hex |\n| Toujours amber-on-dark | Proposer 2-3 themes si nouvelle UI |\n| Styler sans lire la page | Scanner la page, extraire palette, matcher hierarchie |\n| Choisir style bouton sans classifier | Utiliser la matrice de decision |\n| Ajouter un 3e accent silencieusement | Max 2 par page, demander avant le 3e |\n| Ignorer les siblings | Meme role = meme style |\n\n---\n\n## VARIETE CREATIVE (nouvelles UIs uniquement)\n\nSi modification d'une page existante : coherence, matcher le theme existant. Ne pas proposer de variete.\n\nSi creation d'un composant net-new sans theme etabli : proposer 2 options maximum depuis les 6 themes ci-dessus. L'utilisateur choisit.\n\nNe jamais proposer de variete quand la page environnante etablit deja le role, la palette et la hierarchie.\n\n---\n\n## HTML ASSETS — Lookup rapide\n\n| Besoin | Fichier | Cle recherche |\n|---|---|---|\n| Push button avec LED | `power-button.html` | `power-button` |\n| Dashboard \u002F analytics | `synthscore-analytics.html` | `synthscore` |\n| VU meter \u002F gauge | `tube-compressor-vu.html` | `vu-meter` |\n| Toggle switch | `skeuomorphic-switch.html` | `switch` |\n| LCD numeric display | `lcd-db-display.html` | `lcd` |\n| Rotary lever \u002F knob | `industrial-lever.html` | `lever` |\n| Score gauge \u002F radial | `credit-score-gauge.html` | `gauge` |\n| Alert \u002F warning panel | `autochord-alert-panel.html` | `alert` |\n| CRT danger screen | `deep-screen-phosphor.html` | `phosphor` |\n| Folding \u002F accordion | `folding-header.html` | `folding` |\n| Horizontal bar meter | `horizontal-thermometer.html` | `thermometer` |\n| Deep CRT (31 layers) | `codepen-deep-screen.html` | `deep-screen` |\n| Full page (15+ buttons) | `agile-tech-skeuomorphic-site.html` | `site` |\n| Rimlight toggle switch | `rimlight-toggle-switch.html` | `rimlight` |\n| Color-mix buttons | `color-mix-buttons.html` | `color-mix` |\n| Rocker 3D switch | `rocker-3d-switch.html` | `rocker` |\n| Tile up\u002Fdown\u002Fbutton | `tile-buttons-divs.html` | `tiles` |\n| Neumorphic loader | `neumorphic-loading-circle.html` | `loading` |\n| Progress loader (light) | `neumorphic-progress-loader.html` | `progress` |\n| Pressed buttons (light) | `neumorphic-pressed-buttons.html` | `pressed` |\n| Fingerprint SVG button | `fingerprint-button.html` | `fingerprint` |\n\nTous les fichiers dans `assets\u002F` (au niveau root du plugin).\n\n---\n\n## RESSOURCES SUPPLEMENTAIRES\n\nCe skill expose trois dossiers au niveau root du plugin (`assets\u002F`, `references\u002F`, `scripts\u002F`). Les references contiennent ~108k mots de deep-dive pour sujets qui depassent le scope du SKILL.md principal.\n\n### Reference Files (`references\u002F`)\n\nCharger a la demande selon le sujet de travail :\n\n| Fichier | Contenu | Quand consulter |\n|---|---|---|\n| `00-golden-examples.md` | Exemples canoniques a copier-adapter | Tout nouveau composant — partir d'un golden exemple |\n| `01-shadows-materials-textures.md` | Shadow stacks detailles par materiau + textures SVG | Construire un nouveau tier de shadow stack |\n| `02-hardware-animation-neumorphism.md` | Vis, rivets, hinges + animations + neumorphism variants | Ajouter du hardware ou des etats animes |\n| `03-blueprints-performance-palettes.md` | Blueprints complets + perf tips + palettes etendues | Composant complexe multi-couches |\n| `04-community-techniques.md` | Techniques issues de la communaute (CodePen, Dribbble) | Inspiration pour effets avances |\n| `05-physics-composition-interaction-typography.md` | Regles physiques + composition + states + typo detaillee | Debug d'un composant qui parait \"faux\" |\n| `06-aging-safety-tokens-palettes.md` | Patina\u002Fvieillissement, design tokens, palettes etendues | Theming global ou finition vintage |\n| `07-glass-effects.md` | Verre CRT, domes, lenses, reflets speculaires | Tout ce qui doit ressembler a du verre |\n| `08-metal-effects.md` | Aluminium brosse, acier, chrome, cuivre | Surfaces metal texturees |\n| `09-rim-light-effects.md` | Rim light avance (beyond le pseudo-element basique) | Quand rim light basique insuffisant |\n| `10-particle-effects.md` | Particules, sparks, dust, ambient motion | Fonds animes, feedback visuel |\n| `11-retro-industrial-patterns.md` | Patterns complets aerospace \u002F DSP \u002F military cockpit | Theme retro-industrial full-page |\n| `12-production-components.md` | Composants production-ready pret a l'emploi | Reutilisation de composants eprouves |\n| `13-3d-depth-techniques.md` | Perspective, tilt, parallax, isometric | Effets 3D au-dela des shadow stacks |\n| `14-metal-recess-wells.md` | Construction detaillee de wells metalliques | Recess complexe (gauge\u002Fmeter\u002Fdisplay) |\n| `15-detailed-chassis.md` | Chassis multi-zones (bezel + surface + wells + grille + labels) | Panneau complet faceplate |\n| `16-benchmark-lessons.md` | Lecons des benchmarks (ce qui marche \u002F ce qui casse) | Eviter les pieges connus |\n| `17-context-scan-matrices.md` | Matrices U0 Context Scan approfondies | Styler dans une page existante complexe |\n| `18-verification-checklist.md` | Checklist verification U0-U7 detaillee avec exemples | Gate final avant livraison |\n\n### Scripts (`scripts\u002F`)\n\n- **`search.py`** — Recherche semantique sur `assets\u002F` et `references\u002F`. Utile pour trouver le bon exemple ou la bonne reference sans charger 108k mots dans le contexte. Executer via `python3 scripts\u002Fsearch.py \"query\"` (le script utilise des features Python 3 — typing `list[dict]`, etc.).\n\n### Assets (`assets\u002F`)\n\n21 fichiers HTML complets de composants skeuomorphiques production-ready (voir tableau \"HTML ASSETS — Lookup rapide\" ci-dessus). Copier-adapter plutot que re-inventer.\n",{"name":5,"description":7},"main","ed15ebdefbb53bf298fc0276da4cd1e02da5636c","skills\u002Fskeuomorphic-forge","https:\u002F\u002Fgithub.com\u002FMMMProd-Org\u002Fskeuomorphic-forge","https:\u002F\u002Fgithub.com\u002FMMMProd-Org","SaaS and Soft","2026-10-14 23:49:15",{"source":8,"skillName":5,"commands":56,"prompt":66,"zipAvailable":67},[57,60,63],{"tool":58,"command":59},"npx","npx skills add MMMProd-Org\u002Fskeuomorphic-forge --skill skeuomorphic-forge",{"tool":61,"command":62},"bunx","bunx skills add MMMProd-Org\u002Fskeuomorphic-forge --skill skeuomorphic-forge",{"tool":64,"command":65},"pnpm","pnpm dlx skills add MMMProd-Org\u002Fskeuomorphic-forge --skill skeuomorphic-forge","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FMMMProd-Org\u002Fskeuomorphic-forge\u002Fblob\u002Fmain\u002Fskills\u002Fskeuomorphic-forge\u002FSKILL.md",true,[],[70],{"skillNo":71,"name":5,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":9,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":72,"categories":73,"keywords":74,"publishedAt":43},"01M6CY1A31Y0Q8MS7YV71NVK1Q","https:\u002F\u002Fgithub.com\u002FMMMProd-Org\u002Fskeuomorphic-forge\u002Fblob\u002Fmain\u002FSKILL.md",[],[24,23]]