{"slug": "how-i-stopped-rebuilding-the-same-react-features-from-scratch-using-claude-code", "title": "How I stopped rebuilding the same React features from scratch (using Claude Code skills)", "summary": "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.", "body_md": "Every React project starts the same way.\n\nYou 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.\n\nI got tired of this.\n\nThe 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.\n\nEvery 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.\n\nClaude Code supports a skills system. You create a `SKILL.md`\n\nfile with structured instructions and drop it in:\n\nWhen you describe what you're building, the agent activates the right skill automatically. No extra prompting needed.\n\nI 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.\n\n**🔐 Auth Flow Suite**\n\nLogin, register, OTP, magic link, forgot/reset password, invitation onboarding. Full flow, not just a login form.\n\n**📋 Multi-Step Form Wizard**\n\nStep indicator, per-step validation, conditional steps, batch submit.\n\n**📊 Paginated Data Table Pages**\n\nSearchable, sortable, paginated tables with skeleton loading states.\n\n**🔔 Real-Time Notification System**\n\nWebSocket hub, unread badge, infinite-scroll dropdown, preference matrix.\n\n**🛡️ GDPR Privacy Compliance Kit**\n\nPrivacy/terms pages, cookie consent banner, delete account flow.\n\n**🏠 Airbnb-Style Detail Page**\n\nPhoto gallery lightbox, specs grid, sticky contact card, map, calculator.\n\n**🚀 SaaS Landing Page**\n\nHero, features, pricing table, FAQ, CTA sections, SEO meta tags.\n\n**⚛️ React + Supabase Best Practices**\n\nService/query layers, Zod forms, auth context, RLS patterns.\n\nOnce installed, just describe what you're building:\n\n\"Build a login page with OTP support\"\n\nThe auth-flow-suite skill activates and Claude generates a complete, production-structured flow instead of a bare-bones form.\n\nOr activate explicitly:\n\n\"Follow the auth-flow-suite skill. Build the login flow.\"\n\nSame idea — drop the files in `~/.cursor/skills/<skill-name>/SKILL.md`\n\nand Cursor picks them up.\n\nEach skill is React + TypeScript as the reference implementation, with adaptation notes for Vue, Angular, and Svelte.\n\nI packaged all 8 into a bundle: [shehasan.gumroad.com/l/react-skills-bundle](https://shehasan.gumroad.com/l/react-skills-bundle)\n\nOne-time purchase, instant ZIP download. No subscription.\n\nIf you're already using Claude Code or Cursor on React projects, these will save you a lot of repetitive setup time.\n\n*Have questions about how SKILL.md files work? Drop them in the comments.*", "url": "https://wpnews.pro/news/how-i-stopped-rebuilding-the-same-react-features-from-scratch-using-claude-code", "canonical_source": "https://dev.to/ajsquared/how-i-stopped-rebuilding-the-same-react-features-from-scratch-using-claude-code-skills-3m4c", "published_at": "2026-06-29 13:29:04+00:00", "updated_at": "2026-06-29 13:49:14.586486+00:00", "lang": "en", "topics": ["developer-tools", "artificial-intelligence", "large-language-models", "ai-agents", "ai-products"], "entities": ["Claude Code", "Cursor", "React", "TypeScript", "Supabase", "Gumroad", "Zod", "WebSocket"], "alternates": {"html": "https://wpnews.pro/news/how-i-stopped-rebuilding-the-same-react-features-from-scratch-using-claude-code", "markdown": "https://wpnews.pro/news/how-i-stopped-rebuilding-the-same-react-features-from-scratch-using-claude-code.md", "text": "https://wpnews.pro/news/how-i-stopped-rebuilding-the-same-react-features-from-scratch-using-claude-code.txt", "jsonld": "https://wpnews.pro/news/how-i-stopped-rebuilding-the-same-react-features-from-scratch-using-claude-code.jsonld"}}