Design Engineering

A skill graph that gives your coding agent taste. Motion, transitions, typography, color, components, and the AI-default tells it should refuse to ship.

Distilled from Emil Kowalski, Benji Taylor, Jakub Antalik (transitions.dev), guidelines.sh, Vercel design guidelines, Ben DC, DiceBear, lucide-animated, Google Labs design.md, and Agentation. One install, ~80 atomic nodes, six narrow subagents.

What it does

• Reviews UI code in a mandatory Before | After | Why Markdown table, scanned against an 11-row checklist before sign-off.
• Audits motion — picks easing curves, durations, and springs; decides first whether something should animate at all.
• Scans for AI-default tells — purple gradients, Inter on marketing, generic icon-grid hero sections, stock-photo testimonials, "lorem-ipsum smell." Returns a deletion list, not a redesign.
• Consumes DESIGN.md — reads Google Labs–format design tokens and threads them through generated UI (CSS / Tailwind / design-system components).
• Drives Agentation — click-to-annotate review in session one, structured fix loop in session two.
• Lets you fork the POV — pov.md overrides defaults, gotchas.md records lived failures append-only.

The signature output: review-format table

When asked to review a UI snippet, the agent returns a single artifact — never paragraphs of advice:

Eleven-row checklist runs silently behind every review (transform-only, prefers-reduced-motion, hover defaults, focus rings, empty state, loading state, dark mode parity, etc.).

Architecture — graph, not a wall of text

SKILL.md  (Map of Content — ~110 lines)
│
├── MOC-philosophy.md ─── taste-is-trained · delight-impact-curve · marketing-vs-product-ui · …
├── MOC-motion.md     ─── animation-decision-framework · easing-curves · duration-table · springs · …
├── MOC-surface.md    ─── color-monochromatic · dark-mode · shadows-whisper · border-radius · …
├── MOC-components.md ─── hover-states-subtle · empty-loading-states · forms-validation · avatars · …
├── MOC-anti-patterns ─── ai-default-tells · content-authenticity
└── agents/           ─── ui-reviewer · motion-auditor · anti-pattern-scanner · …

The agent reads SKILL.md, picks the cluster, opens one MOC, then reads one atomic node. Progressive disclosure keeps token cost flat as the graph grows.

Six subagents you can spawn

Each subagent loads its own slice of the graph and returns a structured result — your main agent stays cheap.

Clusters at a glance

• Motion — the largest cluster. Teaches when not to animate as much as how to. Includes easing curves, duration tables, spring tuning, stagger choreography, gesture momentum, prefers-reduced-motion, never-scale-from-zero, lerp breathing, morphing icons, tray rules.
• Transitions (transitions.dev) — cross-blur transitions, compose-subtract asymmetry, distance-falloff propagation, multi-segment shake.
• Typography — humanizing text in the AI default era. Line length, tracking, and how to avoid the Inter-on-marketing tell.
• Surface — color (monochromatic-first), dark mode, shadows that whisper, border-radius math, visual imperfection, contrast.
• Layout — viewport-custom design, sticky/scroll tells, URL-as-state.
• Components — hover states, empty/loading states, cards, forms, avatars (DiceBear), icon systems (lucide-animated), accessibility baseline, optimistic updates, copy voice.
• Anti-patterns — ai-default-tells, content-authenticity.

Why it's different

• Opinionated. Knows what to delete, not just what to add. The anti-patterns cluster is half the value.
• Cited. Every taste call traces back to a named designer's stated principle. No generic advice.
• POV-forkable. pov.md and gotchas.md are installer-editable. Your agent learns your taste, not the average.
• Composable. Six narrow subagents spawn on demand — your main thread doesn't carry the whole graph.
• Cross-host. Same skill runs in Claude Code, Cursor, Codex, Windsurf, Aider, Cline, Gemini, and 18+ harnesses via skills.sh.

Quickstart

After install:

Review this component for hover, focus, and motion polish:
<paste your JSX / Vue / Svelte>

The agent returns a Before | After | Why table. That's it. No essays.

For motion-only critique:

Audit the animation timing on this page. Tell me what should not animate.

For the AI-tells scan:

Does this landing page look AI-generated? Give me the deletion list.

Pairs well with

• Agentation — click-to-annotate review in the browser, structured handoff to a fix session.
• Obsidian — the graph is wikilink-native; opening the skill as a vault is the best way to read it.
• Any DESIGN.md project — Google Labs token format is treated as the source of truth.

Lineage

License

MIT. Fork freely. Edit pov.md to make it yours.

— HKTITAN