visual-experiencelisted
Install: claude install-skill heymegabyte/claude-skills
# Visual & Experience — every app's UI must be gorgeous
## The bar
- **Every surface: black + cyan + gorgeous + beautiful + animated + annotated + cited + HBO-level + cinematic + catchy.** Non-negotiable house style.
- Anti-AI-slop, premium, distinctive — investor-demo quality. Apple Test: two elements compete → remove one; crowded → add whitespace; final feel effortless, inevitable.
- Gorgeous-by-default: every iteration measurably more beautiful than the last. Never ship "functional but plain."
## Cinematic floor
- Hero: full-screen video or particle / gradient-mesh field — never a flat gradient placeholder.
- Scroll-driven section transitions + View Transitions on every public surface; `@starting-style` entrances; custom cursor / micro-interactions.
- Depth: layered surfaces, gradient meshes, glass + subtle grain.
## Brand (exact, non-inferable)
- Dark-first. `#060610` bg (never `#000`) · `#00E5FF` cyan (primary CTA) · `#50AAE3` blue (secondary) · `#7C3AED`/`#8B5CF6` purple. Text `#f0f0f5` (never `#fff`).
- Fonts: Space Grotesk (headings) · Sora (body) · JetBrains Mono (mono) · Clash Display (hero only). Self-hosted WOFF2 — never Google Fonts CDN.
- Fluid `clamp()` type scale; `text-wrap: balance` (headings) / `pretty` (body); max 65ch; border-radius never 0, never pill.
## Motion
- Purposeful, brand-locked; scroll-driven + View Transitions; always honor `prefers-reduced-motion` with a full non-animated path.
## Logo (non-negotiable)
- White/light-text logo only