design-engineering

Featured

Load when reviewing UI code, designing a component or page layout, picking an easing curve or transition pattern, deciding whether something should animate at all, choosing an avatar/typography/color system, building an OKLCH palette or fixing contrast, writing UI copy or error messages, auditing for AI-default tells, code tells, or a11y misses, making a screen look less generated, consuming a project's DESIGN.md or .design tokens, writing design-system docs for agents, giving feedback through Agentation or a similar annotation tool, asking why a UI feels flat or unfinished, judging when delight earns its weight, deciding whether an interaction should make a sound, designing or generating UI sound effects (ElevenLabs or open-source), syncing sound to animation, scoring a product launch video or deriving its sound stem from the motion, cutting a multi-scene launch video so it reads as one camera move, creating or animating SVG (icons, mascots, logo reveals, video-to-vector), prototyping several directions behi

Web & Frontend 25 stars 1 forks Updated 6 days ago MIT

Install

View on GitHub

Quality Score: 88/100

Stars 20%
47
Recency 20%
100
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
50
License 10%
100
Description 5%
100

Skill Content

# design-engineering > 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. ## How to use this skill 0. `/design-engineering` is a router before it is a library: `[[skill-router]]` resolves the design contract, classifies the phase (undecided → build → refine → check → name), and hands the job to one owner — a node here, a subagent, or an installed companion skill (AgentsORG `design`, impeccable, HyperFrames, ElevenLabs, transitions-dev, the shadcn CLI). One or two owners, never five. 1. Route first: `[[routing-table]]` maps intent → entry node for most single questions. If two intents blur, `[[disambiguation]]` names the tiebreaker. Multi-cluster jobs follow `[[stacking-chains]]`. 2. Otherwise scan the MOCs below, pick the cluster, and open its `MOC-*.md` for the atomic nodes under it. 3. Read only the atomic nodes that match. Each node is standalone — you don't need siblings. 4. Before reviewing UI code, also load `[[gotchas]]` and `[[pov]]`. If the user asks for a UI code review, use the format defined in `[[review-format]]` and scan against `[[review-checklist]]`. ## Philosophy — when, where, and why polish matters 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]], [[mar...

Details

Author
AgentsORG
Repository
AgentsORG/design-engineering
Created
3 months ago
Last Updated
6 days ago
Language
JavaScript
License
MIT

Bundled in these plugins

Similar Skills

Semantically similar based on skill content — not just same category

Web & Frontend Listed

frontend-design-skill

Use when creating or changing anything a human will look at — website, landing page, web app, mobile app, dashboard, admin panel, screen, component, form, modal, email, brand kit, layout, UI styling, redesign, "make it look good", "fix this interface". Does not apply to backend-only work with no visual output.

0 Updated 2 weeks ago
Zealotic-spec
Web & Frontend Listed

design

Audit and fix the design of interfaces that already exist in files, across 17 modes (checkup, smell, review, deslop, typeset, recolor, motion, interaction, relayout, responsive, redesign, tokenize, setup, finish, refine, voice, surface). Use this whenever the user types "/design" or "design" followed by a mode name or a target file. Also use it, without waiting for the word "design", whenever someone says a screen looks generic, AI-generated, templated, sloppy, boring, flat, weak, unfinished, or "like every other landing page", or asks to audit, critique, review, de-slop, restyle, recolor, retype, relayout, tighten, polish, or ship-check an existing page or component. Trigger on complaints about a hero, feature cards, spacing, type hierarchy, color palette, motion, hover or focus states, empty and error states, dark mode, or responsive behavior in code that is already written. For inventing a brand new interface from nothing, prefer the frontend-design skill; this skill is for UI that is already in files.

0 Updated 1 months ago
adnanalpolink
Web & Frontend Listed

design-taste

Use whenever building, modifying, or reviewing UI — React components, pages, layouts, CSS, animations, micro-interactions, or design system work. Encodes a curated set of design-engineering philosophies (Emil Kowalski, animations.dev, impeccable.style, tasteskill.dev) covering taste, motion, polish, and the unseen details that make software feel right. Auto-invoke alongside ui-ux-pro-max for all frontend work.

1 Updated 3 weeks ago
iamnolanhu