Craft & Competencies

What the work concretely involves — the engineering stack, the design discipline, and the prototyping loop that ties them together. (The "craft" spine; supports the role.)

The engineering stack

• The three pillars of the web. Advanced HTML (semantic, accessible), modern CSS (Flexbox, Grid, Container Queries, custom properties mapped to tokens), and JavaScript/TypeScript for state and interaction.²
• Frameworks. React and Next.js are the industry standard for design engineers at companies like Vercel and Stripe; utility-first CSS (Tailwind) gives a direct translation from design tokens to code.²
• Motion & graphics. Web Animations API, Framer Motion, GSAP, plus SVG and Canvas for custom, performant visuals.² See Motion & Animation.

The design discipline

• Visual fundamentals. Typography, color theory (including contrast/accessibility), layout and hierarchy, and grid systems (e.g. the 8pt grid).²
• HCI & accessibility. WCAG as a core feature, semantic markup, keyboard operability, and localization/internationalization.²
• Taste. The trained eye for what feels right — learnable through deliberate study, noticing, and rebuilding.⁶

The defining skill: the final 10%

What most distinguishes the craft is care for the "final 10%" — the micro-interactions, timing, and polish that make an experience feel delightful rather than merely functional.⁵⁶ Interaction quality depends on a precise vocabulary (easing, cubic-bezier timing, clip-path, morphing) and on restraint — motion should serve the experience, avoiding the "everything is a spring" trap.⁵

The prototyping loop

1. Ideate and sketch with designers.
2. Code the prototype quickly (React/Next.js).
3. Test with real users on a deployed preview.
4. Refine and document in the design system.²

Working in real code surfaces edge cases early — network latency, unexpected data — that static mockups hide.²³