From design-engineering
Reviews UI design decisions covering animation, typography, color, accessibility, and visual polish, with philosophy and motion guidance from expert sources.
How this skill is triggered — by the user, by Claude, or both
Slash command
/design-engineering:design-engineeringThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
> This skill is a graph, not a file. The body below is the **Map of Content**. Follow the `[[wikilinks]]` only as needed — that's the whole point of progressive disclosure.
agents/README.mdevals/README.mdevals/loading.jsonlevals/progressive-reads.jsonlreferences/anti-patterns/MOC-anti-patterns.mdreferences/anti-patterns/ai-default-tells.mdreferences/anti-patterns/content-authenticity.mdreferences/components/MOC-components.mdreferences/components/accessibility-baseline.mdreferences/components/avatar-systems.mdreferences/components/cards-design.mdreferences/components/component-confusables.mdreferences/components/copy-voice.mdreferences/components/empty-loading-states.mdreferences/components/forms-validation.mdreferences/components/hover-states-subtle.mdreferences/components/icon-systems.mdreferences/components/interaction-personality.mdreferences/components/optimistic-updates.mdreferences/layout/MOC-layout.mdThis skill is a graph, not a file. The body below is the Map of Content. Follow the
[[wikilinks]]only as needed — that's the whole point of progressive disclosure.
MOC-*.md for that cluster. It lists the atomic nodes under it.[[gotchas]] and [[pov]].If the user asks for a UI code review, use the format defined in [[review-format]] and scan against [[review-checklist]].
How to think about taste, delight, and the difference between marketing and product UI.
[[MOC-philosophy]] → [[taste-is-trained]], [[unseen-details-compound]], [[beauty-is-leverage]], [[delight-impact-curve]], [[feeling-right]], [[marketing-vs-product-ui]], [[states-are-the-work]], [[data-is-content]], [[dependency-discipline]], [[pointing-beats-describing]], [[articulate-precisely]]The largest cluster. Animation is the most overused tool in modern UI; this cluster tells you when not to animate as much as when to.
[[MOC-motion]] → [[animation-decision-framework]], [[easing-curves]], [[duration-table]], [[spring-animations]], [[transform-opacity-only]], [[transform-mastery]], [[clip-path-tricks]], [[never-scale-from-zero]], [[gesture-momentum]], [[stagger-choreography]], [[prefers-reduced-motion]], [[fly-not-teleport]], [[responsive-feedback]], [[sonner-principles]], [[debugging-animations]], [[lerp-breathing]], [[morphing-icons]], [[shared-letter-morph]], [[hover-default-imperative]], [[tray-rules]], [[css-conventions]]A subset of motion focused on canonical transitions for common UI archetypes. Where the Motion MOC teaches principles, these nodes teach implementation. From transitions.dev.
filter: blur(2px) ↔ 0 to mask imperfect crossfades.lift * pow(falloff, distance) for grouped hover.The font defaults of the AI era are tells. Better choices and the rules around them.
[[MOC-typography]] → [[typography-humanity]], [[line-length-tracking]]The "background" choices that most decks of guidelines skip. They're load-bearing for feel.
[[MOC-surface]] → [[color-monochromatic]], [[dark-mode]], [[shadows-whisper]], [[border-radius]], [[visual-imperfection]], [[contrast-and-color-scheme]]The container, not the component. Marketing especially benefits from custom-per-viewport thinking; product apps benefit from URL-driven state.
[[MOC-layout]] → [[viewport-custom-design]], [[sticky-and-scroll-tells]], [[url-as-state]]The atoms users actually touch. Their behavior is where craft lives.
[[MOC-components]] → [[hover-states-subtle]], [[empty-loading-states]], [[icon-systems]], [[cards-design]], [[forms-validation]], [[avatar-systems]], [[interaction-personality]], [[accessibility-baseline]], [[optimistic-updates]], [[copy-voice]]What looks "AI default" and what to do instead. High-value because it's about deletion, not addition.
[[MOC-anti-patterns]] → [[ai-default-tells]], [[content-authenticity]]Procedural rules and growing files. [[review-format]] is mandatory when doing UI code reviews.
agents/ directorySix narrow-purpose subagents live in agents/ next to this file. Spawn one when its specific workflow matches the user's ask. Each subagent loads its own slice of the graph and returns to the main agent with a structured result.
[[review-format]] table + [[review-checklist]] audit on a UI snippet.[[agentation-workflow]]. Reads MCP annotations and applies fixes.[[using-design-md]].[[pov]] and append to [[gotchas]] after a real failure.See agents/README.md for the full directory and selection guide.
The repo also ships a SOUL.md at root — voice, stance, and taste lineage for any agent operating in this skill. AGENTS.md is the "what/how"; SOUL.md is the "who/why". Read it once per session if your harness doesn't auto-inject it.
Every sentence above costs tokens in every session. If you find yourself adding a sentence, ask: would the agent get this wrong without it? If no, delete it. If yes, it belongs in an atomic node, not here.
— HKTITAN, 2026.
npx claudepluginhub agentsorg/design-engineering --plugin design-engineeringGuides creation, editing, and verification of skills for AI coding agents using test-driven development with subagent scenarios. Use when authoring or debugging skills.