Every React project starts the same way. You spin up a new repo, crack your knuckles, and ask Claude Code to build auth. What you get back is 30 lines of boilerplate—a bare login form with no OTP support, no magic links, zero Zod validation, and error handling that wouldn't survive five minutes in staging. It's not that Claude is bad at coding. It's that it doesn't know your conventions.

The AI Code Generation Problem

Senior engineers bring institutional knowledge to every team they join—how auth flows are structured, what patterns the codebase follows, how forms get validated. AI agents don't have access to that context unless you explicitly hand it to them. That's where things break down. You end up spending more time rewriting AI-generated code than if you'd just written it yourself from scratch.

Enter SKILL.md Files

Claude Code supports a skills system built around SKILL.md files. Drop one of these in your project and the agent activates the right skill automatically based on what you're describing—no extra prompting required. The author behind this technique, posting as ajsquared on DEV.to, started extracting patterns from real production SaaS codebases and packaging them into structured instructions. After a while, they had eight complete skills covering the features every React project needs:

What's In the Bundle

The auth-flow-suite skill handles login, registration, OTP verification, magic links, forgot/reset password flows, and invitation onboarding—full production structure instead of bare-bones forms. The multi-step form wizard includes step indicators, per-step validation, conditional steps, and batch submission logic. Paginated data table pages come with search, sort, pagination, and skeleton loading states built in. There's a real-time notification system with WebSocket hub, unread badges, infinite-scroll dropdowns, and preference matrices. GDPR compliance gets its own kit covering privacy pages, cookie consent banners, and account deletion flows. Rounding it out: an Airbnb-style detail page template, SaaS landing page sections with SEO meta tags, and React + Supabase best practices for service/query layers, Zod forms, auth context, and Row Level Security patterns.

How It Works in Practice

Once installed, you just describe what you're building: 'Build a login page with OTP support.' The auth-flow-suite skill activates automatically and Claude generates the complete flow matching your conventions. You can also activate explicitly with commands like 'Follow the auth-flow-suite skill. Build the login flow.' The same approach works in Cursor—drop files into ~/.cursor/skills//SKILL.md and it picks them up. Reference implementations are React + TypeScript, with adaptation notes for Vue, Angular, and Svelte developers.

Key Takeaways

  • SKILL.md files transfer institutional knowledge to AI agents so they generate code matching your actual conventions
  • Eight pre-built skills cover auth, forms, tables, notifications, GDPR compliance, detail pages, landing pages, and Supabase patterns
  • Skills activate automatically when you describe what you're building—no manual prompting required
  • Works with both Claude Code and Cursor; adaptations available for Vue, Angular, and Svelte codebases

The Bottom Line

This is exactly the kind of workflow improvement that separates devs who are fighting their tools from ones who've made AI work for them. If you're running Claude Code or Cursor on React projects without a skills library, you're leaving real productivity gains on the table. Grab the bundle and stop rewriting the same auth flow for the hundredth time.