perfect-uilisted

Design and build cohesive web pages with custom visual identity — landing pages and portfolios get rich anatomy + section archetypes; any other page type (blog, about, pricing, contact, coming-soon, dashboard, admin, e-commerce, custom) is supported through generic anatomy + skeleton. Use this skill whenever the user mentions: landing page, portfolio, personal site, hero section, marketing page, product page, sales page, splash page, blog page, about page, pricing page, contact page, coming-soon, waitlist, dashboard, admin panel, e-commerce store, redesign my site, design my portfolio, build a portfolio, work showcase, hire-me page, perfect-ui, perfect landing, or asks to create any web page surface. Two tiers: special (landing | portfolio — rich treatment) and generic (everything else — universal craft toolkit). Self-contained 8-phase pipeline: vibe discovery → visual direction (color/typography/mood) → custom icon set (NO emoji, NO icon library) → AI-generated visuals → optional shader effects layer → inlin
dris1153/perfect-ui · ★ 2 · Web & Frontend · score 69

Install: claude install-skill dris1153/perfect-ui

# Perfect UI — Cohesive Web-Page Designer Design and ship web pages where every visual element — icons, illustrations, 3D, copy, layout, motion — shares one coherent vibe. Built to **avoid AI slop** through curated direction, custom icons (zero emoji, zero icon libraries), and bespoke visuals. Landing pages and portfolios get rich type-specific treatment; every other page type uses a generic anatomy with the same universal craft toolkit. ## Scope This skill applies to **any web page output** — single-page sites, multi-section landings, content pages, portfolios, internal app surfaces. No refusals. ### Two-tier treatment | Tier | Types | Treatment | |------|-------|-----------| | **Special** | `landing`, `portfolio` | Rich anatomy per type + Next.js skeleton + per-vibe section archetypes + full Tier 1/2/3 anti-slop audit. Evidence-backed (12 marketing landings analyzed). | | **Generic** | Any other type — `blog`, `about`, `pricing`, `contact`, `coming-soon`, `error-page` (404/500), `legal`, `dashboard`, `admin`, `e-commerce`, or any custom string | Generic anatomy + generic Next.js skeleton + universal anti-slop subset (per § Applicability Matrix in `references/anti-slop-rules.md`). Best-effort universal craft when evidence base doesn't directly cover the type. | ### Universal toolkit (both tiers) Vibe lock + palette + typography + custom SVG icons + 2D illustrations + visual effects + motion intensity scale. All apply regardless of tier. ### What this skill does NOT d