design-engineering

Design engineering principles and patterns for building polished, accessible web interfaces. Use this skill when building UI components, reviewing frontend code, implementing forms, handling touch interactions, optimizing performance, or creating marketing pages. Triggers on: design engineering, UI polish, input fields, form validation, button states, touch devices, mobile UX, accessibility, a11y, keyboard navigation, aria labels, font rendering, typography, layout shift, z-index, animations, transitions, easing, hover effects, tap targets, iOS Safari, prefers-reduced-motion, marketing pages, landing pages, dark mode, theme switching, scrollbars, gradients, shadows, virtualization, preloading.

kyh

SKILL.md

Name

design-engineering

Description

kyh.io

Personal monorepo. Uses pnpm workspaces + Turborepo.

kyh.io

Apps

App	Description	Stack
kyh	Personal website	Next.js, Matter.js
kwadrants	2x2 matrix canvas editor	React, Konva, Vite
policingice	Crowdsourced ICE incident documentation	Next.js, Drizzle, Turso
stonksville	Trading chart game	Next.js, Canvas
tc	Total compensation calculator	React, Visx, Vite
covid-19	COVID-19 tracking dashboard	React, D3, Vite
vis-ml	Interactive ML visualizations	D3, Scrollama, Vite
cli	Personal CLI tool	React, OpenTUI, Bun
party	Real-time multiplayer server	PartyServer, Cloudflare Workers

Packages

Package	Description
typescript	Shared TypeScript config
eslint	Shared ESLint config

Development

pnpm i            # install dependencies
pnpm dev:<app>    # dev server for specific app (e.g. pnpm dev:kyh)
pnpm build        # build all
pnpm lint         # lint all
pnpm typecheck    # typecheck all

Deployment

Apps auto-deploy via Vercel/Cloudflare Pages on push to main.