design-engineering skill
Apply interface craft when building or reviewing UI - motion, easing, timing, springs, component feel, and visual foundations. Use when building a component, animation, transition, hover or press state, modal, drawer, toast, or when polishing an interface so it feels right. Says "make this feel better", "add an animation", "polish the UI", "review this component".
Is the design-engineering skill safe?
Clean: nothing in its files matched our rules. We read 1 file in the folder on 2026-09-28.
No findings.
Install the design-engineering skill
A skill is a folder. Copy it into your agent's skills folder and the agent loads it when the task matches its description.
git clone --depth 1 https://github.com/rohitg00/pro-workflow.git /tmp/pro-workflow mkdir -p ~/.claude/skills cp -r /tmp/pro-workflow/skills/design-engineering ~/.claude/skills/design-engineering
In the Claude apps, zip the folder and upload it from the Skills settings. The folder on GitHub
The instructions your agent would load
SKILL.md as published, without the frontmatter. Read it on GitHub
design-engineering
In a world where most software works well enough, feel is the differentiator. Most of what makes an interface feel right is detail the user never consciously notices - the aggregate of small correct choices. Build for that aggregate.
Motion decision framework
Answer these in order before writing any animation.
1. Should it animate at all?
The deciding factor is frequency. The more often a user sees it, the less it should move.
Never animate a keyboard-initiated action. It repeats all day; animation makes it feel slow and disconnected from the keypress.
2. What is the purpose?
Every animation needs an answer to "why does this move?" Valid ones: spatial consistency (enters and exits the same edge), state change, feedback (a press that confirms the interface heard you), or preventing a jarring appear/disappear. "It looks cool" is not a purpose for anything the user sees often.
3. What easing?
- Entering or exiting -> ease-out (fast start, feels responsive).
- Moving or morphing on screen -> ease-in-out.
- Hover or color change -> ease.
- Constant motion (marquee, progress) -> linear.
Never use ease-in for UI. It delays the first moment of movement - exactly when the user is watching - so a 300ms ease-in dropdown feels slower than a 300ms ease-out one. The built-in curves are weak; use stronger custom ones:
--ease-out: cubic-bezier(0.23, 1, 0.32, 1); /* UI interactions */
--ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); /* on-screen movement */
--ease-drawer: cubic-bezier(0.32, 0.72, 0, 1); /* iOS-like drawer */4. How fast?
Keep frequent, interactive UI under 300ms; the modal and drawer range above (up to 500ms) is the deliberate exception for occasional, first-time surfaces. Perceived speed is real: a faster spinner makes a load feel faster at the same load time, and an instant tooltip after the first one makes a whole toolbar feel quick.
Springs
Springs settle on physics, not a fixed duration, so they feel alive and, unlike CSS keyframes, keep their velocity when interrupted. Reach for them on drag and gesture interactions the user can reverse mid-motion, and on decorative, mouse-tracked motion. Keep bounce subtle (0.1 to 0.3) and usually absent - save it for drag-to-dismiss and playful moments, not functional UI.
Component feel
:active with a ~160ms ease-out transition. Subtle (0.95 to 0.98); it makes the interface feel like it is listening.
- Press feedback. Any pressable element gets transform: scale(0.97) on
scale(0.9) or higher plus opacity so the entrance has shape.
- Never animate from scale(0). Nothing real appears from nothing. Start at
their center. Modals stay centered.
- Scale from the trigger. Popovers and dropdowns scale from their origin, not
- Respect prefers-reduced-motion. Drop or shorten non-essential motion.
Visual foundations
read as noise.
- One spacing scale, one type scale. Consistency reads as intent; ad-hoc values
A control with no states feels dead.
- Restrained color: a small palette with clear roles beats many accents.
- Make every interactive state explicit - hover, active, focus-visible, disabled.
Review format
When reviewing UI code, output a single markdown table, one row per issue, with Before | After | Why. Do not use separate "Before:" / "After:" lines.
More skills from rohitg00/pro-workflow
- Aagent-teamsCoordinate multiple Claude Code sessions as a team — lead + teammates with shared task lists, mailbox messaging, and file-lock claiming. Patterns for team sizing, task decomposition, and when to use teams vs sub-agents vs worktrees.
- Aauto-setupAuto-configure quality gates, hooks, and settings for a new project. Detects project type and sets up appropriate tooling. Use when onboarding a new codebase.
- Abatch-orchestrationDecompose large-scale changes into independent units and spawn parallel agents in isolated worktrees. Use for migrations, refactors, codemods, and any change touching 10+ files with the same pattern.
- Cbug-captureCapture a user-reported defect as a durable GitHub issue written in the project's own domain language. Explores the codebase in parallel for context but never leaks file paths or line numbers into the issue. Use when the user reports a bug conversationally, runs a QA pass, or says "file an issue", "log this as a bug", "capture this".
- Acompact-guardSmart context compaction with state preservation. Saves critical files, task progress, and working state before compaction, restores after. Use before manual compact or when auto-compact triggers.
- Acontext-engineeringMaster the four operations of context engineering — Write, Select, Compress, Isolate. Manage token budgets, compaction strategies, and context partitioning to keep AI sessions sharp and efficient.
- Acontext-optimizerOptimize token usage and context management. Use when sessions feel slow, context is degraded, or you're running out of budget.
- Acost-trackerTrack session costs, set budget alerts, and optimize token spend. Use to check costs mid-session or set spending limits.
- AdeslopRemove AI-generated code slop, unnecessary comments, and over-engineering from the current branch diff. Cleans up boilerplate, simplifies abstractions, strips defensive code, and in skill-file mode lints SKILL.md files for quality. Use when cleaning up code, simplifying, removing boilerplate, before committing, or when reviewing a skill before promoting it.
- Adomain-modelingBuild the project's shared language and bounded contexts before writing code, so names stay consistent and the agent stops paraphrasing domain concepts. Produces a CONTEXT.md glossary and decision records. Use at the start of a project or feature, or when the codebase and the people describing it speak different languages.
- Afile-watcherConfigure file watching hooks to auto-react to config changes, env file updates, and dependency modifications. Use to set up reactive workflows.
- Aimprove-architectureAudit an area of the codebase and propose the smallest structural moves that improve it - untangle boundaries, kill duplication, fix seams, break cycles. Produces a prioritized plan and decision records, not a rewrite. Use when a codebase feels tangled, hard to change, or is becoming a ball of mud, or when asked to improve or refactor architecture.