Design Engineer

Overview

Use this skill to turn rough or merely functional frontend work into a carefully designed, shippable interface. Read the app first, preserve the stack's local conventions, then improve the actual product surface rather than adding generic decoration.

Quick Start

1. Read references/design-language.md when the target is a docs site, product landing page, component library, studio app, dashboard, or technical OSS website. Read Design Craft References for Jakub Krehel's and Emil Kowalski's skill references or the Sales CRM example.
2. Read references/implementation-patterns.md when building a component library, adding reusable primitives, or mining existing source for package/component patterns. Read UI Components when sourcing a component, comparing libraries, or implementing a pattern missing from the local UI kit.
3. Read references/interaction-language.md before changing navigation, command palettes, tables, forms, copy actions, loading/empty/error states, dialogs, charts, or mobile flows.
4. Read references/design-tools.md when choosing design-engineering tools, design-to-code workflows, source-of-truth strategy, asset sources, or inspiration libraries.
5. Read references/motion-and-icons.md before adding animation, transitions, loaders, status indicators, or iconography.
6. Implement the smallest complete design pass that improves the real workflow.
7. Run the app's typecheck/build/tests when available, then visually verify the edited screens in a browser across desktop and mobile.

Workflow

1. Understand the Surface