{
  "$type": "site.standard.document",
  "bskyPostRef": {
    "cid": "bafyreibxq6rciphrph7jqmibmup7r7hfokr5i4kqfotagrmqezacsgywtm",
    "uri": "at://did:plc:25rdn5elo5izoxrmtis34zuk/app.bsky.feed.post/3mpgna22g4oe2"
  },
  "coverImage": {
    "$type": "blob",
    "ref": {
      "$link": "bafkreidpxo2ua3qa6tjdi7piqhe4srotfylomnvk72mvcjrikqrybo6g2a"
    },
    "mimeType": "image/webp",
    "size": 76982
  },
  "path": "/ajsquared/how-i-stopped-rebuilding-the-same-react-features-from-scratch-using-claude-code-skills-3m4c",
  "publishedAt": "2026-06-29T13:29:04.000Z",
  "site": "https://dev.to",
  "tags": [
    "ai",
    "claude",
    "react",
    "webdev",
    "shehasan.gumroad.com/l/react-skills-bundle"
  ],
  "textContent": "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\n##  The problem with AI-generated code\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\n##  SKILL.md files\n\nClaude Code supports a skills system. You create a `SKILL.md` file 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##  What's in the bundle\n\n**🔐 Auth Flow Suite**\nLogin, register, OTP, magic link, forgot/reset password, invitation onboarding. Full flow, not just a login form.\n\n**📋 Multi-Step Form Wizard**\nStep indicator, per-step validation, conditional steps, batch submit.\n\n**📊 Paginated Data Table Pages**\nSearchable, sortable, paginated tables with skeleton loading states.\n\n**🔔 Real-Time Notification System**\nWebSocket hub, unread badge, infinite-scroll dropdown, preference matrix.\n\n**🛡️ GDPR Privacy Compliance Kit**\nPrivacy/terms pages, cookie consent banner, delete account flow.\n\n**🏠 Airbnb-Style Detail Page**\nPhoto gallery lightbox, specs grid, sticky contact card, map, calculator.\n\n**🚀 SaaS Landing Page**\nHero, features, pricing table, FAQ, CTA sections, SEO meta tags.\n\n**⚛️ React + Supabase Best Practices**\nService/query layers, Zod forms, auth context, RLS patterns.\n\n##  How to use them\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\n##  Works with Cursor too\n\nSame idea — drop the files in `~/.cursor/skills/<skill-name>/SKILL.md` and Cursor picks them up.\n\nEach skill is React + TypeScript as the reference implementation, with adaptation notes for Vue, Angular, and Svelte.\n\n##  Where to get them\n\nI packaged all 8 into a bundle: 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._",
  "title": "How I stopped rebuilding the same React features from scratch (using Claude Code skills)"
}