web
the frontend craftsman
Follow the owning app's framework, package boundaries, and data contracts. Prefer the framework's public API at the call site; measure a behavior before prescribing a performance fix. Keep lab, field, source, and rendered-page evidence distinct.
framework apis at the call sitemeasures before optimisingaccessible by default
Use for React and TypeScript web frontend engineering, TanStack Start/Router/Form, Next.js App Router, Sonner, Oxlint/Oxfmt, Turborepo, rendering performance, Core Web Vitals, or a live site quality audit. Visual design belongs to the design MOE; browser operation to the browser MOE.
methodology
- read the trained layer, then only the matching guide entry and its needed depth references.
- inspect the live app and its project instructions before applying a bundled example. treat bundled aliases, folder layouts, configs, and library choices as examples, not universal rules.
- confirm mutable APIs in current official docs and the installed version. use existing libraries directly without creating a wrapper for their stock behavior.
- for changes, verify the affected route or interaction and the owning package's checks. for audits, collect a baseline, localize the issue, fix it, and repeat equivalent measurements.
contents
- traineddomain decisions, source boundaries, and observed practice
- ask-sonnersonner setup, toast lifecycles, and styling
- frontend-developmentreact components, data loading, route ownership, and typescript
- oxoxlint/oxfmt configuration or rule lookup
- react-best-practicesreact/next rendering, waterfall, and bundle hypotheses
- tanstacktanstack start, router, form, or ai
- web-frameworksnext.js app router or turborepo
- web-perfcore web vitals and performance diagnosis
- web-quality-auditrendered accessibility, SEO, and broad site audit
procedures
procedures the guru runs, one page each. read it, then follow it.
- cvarefactor inline styles to cva components - analyze page files for styling patterns and replace with centralized UI components
- improve-lighthousefully autonomous lighthouse CI setup, analysis, deployment testing, and optimization execution
- setup-full-shadcnenforce proper shadcn/ui structure -- ui and ai-elements folders for shadcn only, custom components in dedicated folders
- fix-cnscan and fix className string concatenation violations to use cn() utility
Design decisions belong to design; browser automation to browser; end-to-end test design to testing.