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