Loading...
Loading...
Found 11 Skills
Stand up a Design Engineering practice (hybrid design+engineering) by producing a Design Engineering Execution Pack: charter, prototype→production workflow, design-to-code contract, component delivery plan, and quality bar. Use for design engineering, UI engineering, design systems engineering, and prototype-to-production processes.
Help users understand and build design engineering capabilities. Use when someone is creating a design engineering function, hiring design engineers, or bridging the gap between design and engineering teams.
Load when reviewing UI code, designing a component or layout, picking an easing curve or transition, deciding whether something should animate or make a sound, choosing typography, color (OKLCH, contrast) or avatars, writing UI copy or errors, auditing for AI-default tells, code tells or a11y misses, making a screen look less generated, consuming DESIGN.md or .design tokens, writing design-system docs for agents, giving Agentation feedback, asking why a UI feels flat or unfinished, judging when delight earns its weight, designing or generating UI sound effects and syncing them to motion, planning, cutting, scoring or reviewing a product launch video, creating or animating SVG (icons, mascots, logo reveals, video-to-vector), prototyping directions behind a picker, building a tool instead of re-prompting, or choosing which design skill should own a job. Distills Emil Kowalski, Benji Taylor, transitions.dev, guidelines.sh, Vercel, Index, Apple's audio-haptic principles and 47 measured launch films.
Design engineering concepts from Craft (craft.gustavofior.com) covering typography, color, layout, motion, sound, and data details that make interfaces feel right. Use when building or reviewing UI components, hover and press states, borders, shadows, border radius, icons, numbers, charts, animations, or when the user asks for polish, craft, taste, or to make something "feel better".
Apply concrete design-engineering details that make interfaces feel polished. Use when reviewing or improving UI spacing, typography, borders, shadows, motion, hit areas, icons, text wrapping, and interaction states.
Create a high-quality pull request description for UX-related implementation that explains why the change exists, what behavior changed, design-system usage, states, accessibility, testing, risks, and what reviewers should inspect. Use when design or design-engineering work is ready to become a PR.
A design engineering skill that helps developers add crafted micro-interactions, polish, and thoughtful details to their interfaces — the invisible decisions that separate software people love from software people tolerate.
Emil Kowalski's entire design engineering philosophy as a skill. Creator of Sonner (13M+ weekly npm downloads), Vaul, and animations.dev. Covers animation decision framework, custom easing curves, component interaction principles, and typography rules.
Front door. Reads the current project (framework, tokens, brief, spec, harness) and reports what ui-craft can do right now, then routes you to the right next step. Run this first if you're new or unsure where to begin. No code changes. Invoke when the user asks for start on their UI, or mentions 'start' alongside design / UI / frontend work.
Prepare UX work for engineering by preserving user intent, behavior, states, design-system usage, accessibility requirements, dependencies, acceptance behavior, and unresolved questions. Use when a designer says "get this ready for engineering", needs a handoff, behavioral contract, implementation-ready ticket content, or wants to stop engineering from guessing.
Classic skill for GPT and Codex, opt-in: it runs only when called by name. Layout variance, a strict AIDA page structure and GSAP scroll motion.