Why I Built a 4,000-Line Agent Skill Instead of Another npm Package

The Problem I use Claude Code (and sometimes Cursor) for frontend work every day. And every day, I fix the same mistakes: // AI generates this const user : User = await res . json () Looks fine. TypeScript is happy. But res.json() returns any at runtime — if the API changes shape, this silently breaks in production. // AI also loves this const [ isLoading , setIsLoading ] = useState ( false ) const [ error , setError ] = useState < Error | null > ( null ) const [ data , setData ] = useState < User | null > ( null ) Three separate pieces of state that can represent impossible combinations. isLoading: true AND data present? error set but isLoading still true? And my personal favorite: ' use client ' // slapped on the page component export default function ProductPage () { // ...entire page is now client-rendered } These aren't obscure edge cases. They happen constantly because AI agents don't have a structured reference for frontend TypeScript patterns. Why Not Just Fix It Each Time? I d