How I stopped rebuilding the same React features from scratch (using Claude Code skills)

A developer created a set of 8 reusable skill files for Claude Code that encode production React conventions for common features like auth flows, multi-step forms, and paginated tables. The skills, extracted from real SaaS codebases, allow AI agents to generate code matching the developer's own patterns instead of generic boilerplate. The bundle is available for purchase on Gumroad.

Every React project starts the same way. You open a new repo, and the first thing you need is auth. So you ask Claude Code to build it. And it generates... a 30-line login form. No OTP. No magic link. No proper error handling. No Zod validation. Just boilerplate you have to rewrite to match your actual conventions. I got tired of this. The issue isn't that Claude is bad at coding. It's that it doesn't know your conventions. It generates what a generic React app looks like, not what your production codebase looks like. Every senior engineer who joins a team brings institutional knowledge: how auth is structured, how forms are validated, what patterns the codebase follows. AI agents don't have that — unless you give it to them. Claude Code supports a skills system. You create a SKILL.md file with structured instructions and drop it in: When you describe what you're building, the agent activates the right skill automatically. No extra prompting needed. I started writing these for features I rebuild on every project. After a while I had a full set of 8, extracted from real production SaaS codebases. 🔐 Auth Flow Suite Login, register, OTP, magic link, forgot/reset password, invitation onboarding. Full flow, not just a login form. 📋 Multi-Step Form Wizard Step indicator, per-step validation, conditional steps, batch submit. 📊 Paginated Data Table Pages Searchable, sortable, paginated tables with skeleton loading states. 🔔 Real-Time Notification System WebSocket hub, unread badge, infinite-scroll dropdown, preference matrix. 🛡️ GDPR Privacy Compliance Kit Privacy/terms pages, cookie consent banner, delete account flow. 🏠 Airbnb-Style Detail Page Photo gallery lightbox, specs grid, sticky contact card, map, calculator. 🚀 SaaS Landing Page Hero, features, pricing table, FAQ, CTA sections, SEO meta tags. ⚛️ React + Supabase Best Practices Service/query layers, Zod forms, auth context, RLS patterns. Once installed, just describe what you're building: "Build a login page with OTP support" The auth-flow-suite skill activates and Claude generates a complete, production-structured flow instead of a bare-bones form. Or activate explicitly: "Follow the auth-flow-suite skill. Build the login flow." Same idea — drop the files in ~/.cursor/skills/<skill-name /SKILL.md and Cursor picks them up. Each skill is React + TypeScript as the reference implementation, with adaptation notes for Vue, Angular, and Svelte. I packaged all 8 into a bundle: shehasan.gumroad.com/l/react-skills-bundle https://shehasan.gumroad.com/l/react-skills-bundle One-time purchase, instant ZIP download. No subscription. If you're already using Claude Code or Cursor on React projects, these will save you a lot of repetitive setup time. Have questions about how SKILL.md files work? Drop them in the comments.