01
Craft &
Visual Systems
Reads a layout in pixels and optical weight — never approximations.
Typographic scale & rhythm
Optical alignment
Modular grids
Color & contrast theory
Hierarchy & emphasis
Composition & balance
Sub-pixel precision
Light / dark theming
Negative space
02
Interaction
& Motion
Motion that explains state instead of decorating it.
Easing & spring physics
Choreography & staggering
Enter / exit orchestration
Gesture & drag
State transitions
Perceived performance
Reduced-motion fallbacks
Web Animations API · Motion · GSAP
03
Front-End
Engineering
Ships production code, not handoff files.
TypeScript
React · hooks · composition · RSC
Semantic HTML
CSS Grid & Flexbox
Container queries
:has() & cascade layers
Custom properties · clamp()
Tailwind · vanilla-extract · CSS Modules
Browser rendering model
State management
04
Design Systems
& Tokens
Builds the system that makes everyone else faster.
Tokens · primitive → semantic → component
Component API design
Composition · slots · polymorphism
Controlled / uncontrolled patterns
Headless primitives · Radix · React Aria
Multi-brand theming · Style Dictionary
Versioning & distribution
Storybook documentation
Contribution & governance
05
Accessibility
Treats WCAG as the floor, not the goal.
WCAG 2.2 AA
Semantic structure & ARIA
Keyboard navigation
Focus management
Screen-reader testing
Contrast & visibility
prefers-reduced-motion
Accessible primitives from scratch
06
Prototyping &
AI-Assisted Build
Resolves the hard interaction in code before engineering commits.
High-fidelity coded prototypes
Figma · variables · auto-layout · variants
Code-vs-canvas judgment
Cursor · v0 · Claude · Copilot
Rapid throwaway exploration
Faithful spec handoff
Custom tooling & plugins
07
Engineering
Practice
Lives in the codebase like an engineer, and reviews like one.
Git & pull requests
Code review
Visual regression · Chromatic · Playwright
CI awareness
Monorepos
Core Web Vitals & perf budgets
Reading API contracts
DevTools debugging
08
Product &
Systems Thinking
Designs the edge case, the empty state, and the failure mode.
Problem framing & scoping
Complex, data-heavy workflows
Empty · loading · error states
Information architecture
Analytics · funnels · experiments
UX writing
Measuring craft impact
Tradeoff negotiation