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

> Source: <https://dev.to/ajsquared/how-i-stopped-rebuilding-the-same-react-features-from-scratch-using-claude-code-skills-3m4c>
> Published: 2026-06-29 13:29:04+00:00

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