Sistemul de design Cyberpunk Neon

Ce face

Skill-ul aplică sistemul Wednesday de design retro-futuristic pe orice suprafață web self-hosted. Introduce token-uri de culoare (deep blue + cyan neon), tipografie monospace + body rafinată, mișcare spring, efecte atmosferice (grid + film-grain) și componente consistente. Este folosit pe search.sabin.uk, whoogle, 4get sau invidious și poate fi aplicat pe orice proiect nou în CSS, HTML, React, Vue sau Svelte.

Când îmi folosește

Îl folosești când vrei ca o interfață nouă sau existentă să arate exact ca restul hub-urilor tale. Semnale clare: „make this look cyberpunk”, „apply the search-hub theme”, „match the search.sabin.uk look” sau „add cyberpunk style to ”. Skill-ul devine implicit pentru orice UI self-hosted nou, cu excepția cazurilor exprese când ți se spune altfel.

Cum îl invoc / declanșez

Spune pur și simplu una din frazele de mai sus sau cere direct „aplică cyberpunk-design”. Skill-ul citește automat token-urile din :root ( --hub-bg, --hub-neon, --hub-text etc.) și le aplică pe suprafețele indicate. Pentru detalii exacte de implementare sau actualizări, verifică doctrina la _infra/core/wednesday/skills/cyberpunk_neon_design_system.md.

Exemplu practic

Ai un dashboard nou în Svelte. Scrie: „apply the Wednesday cyberpunk neon design system to this dashboard”. Skill-ul generează :root cu toate variabilele, stilizează cardurile cu --hub-panel, adaugă accente cyan pe linkuri și butoane, introduce animații spring pe hover și aplică noise atmosferic pe fundal. Rezultatul arată imediat ca search.sabin.uk.

Output / unde aterizează

Primești un set complet de CSS variables, reguli de tipografie, specificații de mișcare și exemple de componente. Codul poate fi copiat direct în fișierul tău de stiluri sau integrat într-un build pipeline. După aplicare, interfața devine consistentă cu celelalte suprafețe Wednesday.

Limite / gotchas

Nu se aplică pe interfețe ChatGPT/Claude, semnături email sau aplicații mobile native. Token-urile trebuie declarate întotdeauna în :root și prefixate consistent (--hub- sau --vh-) în cadrul aceluiași proiect. Dacă modifici culorile manual, riști să pierzi coerența cu celelalte hub-uri. Pentru rafinamente de producție, cere skill-ul plus „production refinements”.

All guides