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

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 problem with AI-generated code

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.

SKILL.md files

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.

What's in the bundle

🔐 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.

How to use them

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."

Works with Cursor too

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.

Where to get them

I packaged all 8 into a bundle: 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.