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 did. For months. The