← ClaudeAtlas

visual-experiencelisted

Gorgeous/cinematic requirements every delivered app's UI must meet — anti-slop premium bar, exact brand tokens, motion, logo/image quality, WCAG 2.2 visual accessibility.
heymegabyte/claude-skills · ★ 22 · AI & Automation · score 72
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