design-engineering
FeaturedLoad 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
Install
Quality Score: 88/100
Skill Content
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
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.
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.
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.