Skill Explorer

Make or critique a brand identity (logo, type, palette) as 1–4 sets built together from one brief. Uses a one-message intake, one mechanism per set, decision axes, differentiation from real competitors, a reflex test against AI defaults, then a checkpoint where the user picks. Never picks for the user and never claims colors "convert".

Fill DESIGN_MAP.md from the user and the project before any design work. Covers what the product is, who it serves, the one job of the screen, the brand that already exists, real competitors, the assets that actually exist, and a subject inventory of 8–12 things only this product has. Asks only what blocks the direction and never invents product facts.

Write the five-line design direction (Product, Character, World, Moments, Signature) from the subject itself, plus the idea sentence, the competitor test, the page argument and the token set that follows. Then stop for the user's agreement before any CSS is written.

Add or change UI animation the disciplined way. Decide first whether it should animate at all (frequency gate), name its purpose, pick the cheapest tool, then the right properties, easing, duration and origin, and ship reduced-motion and hover gating with it. Use when asked to animate, add transitions, or make something "feel smoother".

Check UI code against the interface guidelines (keyboard, targets, forms, state and URL, feedback, touch, layout, content and accessibility, performance, dark mode, hydration, design details) and report file:line findings with severities. Use before shipping a form, dialog, navigation, list or any interactive screen.

Review existing or changed animation code against ten motion standards (justified, frequency-appropriate, responsive easing, sub-300ms UI, correct origin, interruptible, GPU-only, accessible, asymmetric, cohesive). Output a Before/After/Why table, a tiered verdict, and an explicit Block or Approve.

Audit a screen for AI-slop signs (reflex gradients, glows, emoji icons, hype copy, heavy headings, pulsing elements, off-scale spacing, template look), decide how much slop there is (heavy, light, none), set or confirm the direction, and fix in nine ordered passes. Use when a UI "looks AI-made", generic or templated, or before shipping any screen.

Break a component with worst-case but realistic data (long names, unbreakable emails, CJK/RTL, 0/1/1,000 items, huge numbers, missing fields), wire a dev-only data toggle, check at 320px, 200% zoom, dark mode and RTL, and report Broken/Ugly/Fragile findings with fixes. Report only; fix on request.