← ClaudeAtlas

repaintlisted

Build production-grade frontend UI that doesn't read as "AI-made" — and behaves like an elite product, not just looks like one. A self-contained pipeline — research real references, lock a register + anchor, commit OKLCH tokens + distinctive type, design the interaction (feedback, forgiving input, keyboard, recovery), make it accessible and SEO-ready (semantic HTML, landmarks, alt, metadata), build, then iterate against slop + experience + a11y/SEO audits and a live browser-screenshot loop. Grounded in the industry-standard design systems (Material 3, Apple HIG, Carbon, Polaris, Fluent, Ant, shadcn) and the psychology of interface design (Gestalt, Hick, Fitts, peak-end), with manipulative dark patterns banned. Use for any page, component, dashboard, landing page, settings, data table, onboarding, or app surface — especially when output looks generic, templated, or "AI-made", feels hollow, or is inaccessible/invisible to search; aim at Linear/Vercel/Stripe/Notion quality. Ships a reference library + 23 evals.
LucasSantana-Dev/repaint · ★ 1 · Web & Frontend · score 77
Install: claude install-skill LucasSantana-Dev/repaint
# repaint A self-contained pipeline for frontend UI that looks designed, not generated — **and behaves like it, too.** It depends on **no other skills and no agents** — everything it needs ships in this folder. It stands on six pillars: 1. **Scraping** — research *real, current* references for the brief (your web search), not vibes. 2. **Tokens** — commit a concrete token system (OKLCH color + distinctive type) before any markup. 3. **References** — a curated library ([references/context-anchors.md](references/context-anchors.md)) of named anchors per context, art-direction directions, 2026 token defaults, a slop catalog, type-by-role, experience patterns, microcopy, and an accessibility & SEO checklist. 4. **Experience** — the *interaction* is designed, not just the pixels: honest feedback and perceived performance, forgiving input, recoverable actions, and a real keyboard path. Looks pass the eye; experience passes the hand. Gate 4, Gate 5, and the experience audit enforce it. 5. **Reach** — the work is **accessible to every user** (assistive tech) and **findable by search**. One semantic-HTML foundation — landmark regions, one H1 + a logical heading order, real labels, meaningful alt — serves screen readers *and* crawlers. Gate 6 and the accessibility & SEO audit enforce it (SEO is register-gated to public surfaces). 6. **Real iteration feedback** — build → render → screenshot → slop-audit + experience-audit + a11y/SEO audit → iterate, against live browser output, not a