{"id":51837281,"url":"https://github.com/pythoughts-labs/react-frontend-skills","last_synced_at":"2026-07-23T00:02:31.203Z","repository":{"id":366196239,"uuid":"1275402028","full_name":"Pythoughts-labs/react-frontend-skills","owner":"Pythoughts-labs","description":"⚛️ 18 production-grade AI agent skills for the React ecosystem — install into Claude Code, Codex, Cursor, OpenCode, Pi, Kiro \u0026 more. By Pythoughts.","archived":false,"fork":false,"pushed_at":"2026-06-20T16:59:49.000Z","size":720,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-06-20T18:24:12.527Z","etag":null,"topics":["agent-skills","ai-agents","ai-coding-assistant","claude-code","codex","cursor","frontend","llm","nextjs","opencode","pythoughts","react","react19","skills","tailwindcss","typescript"],"latest_commit_sha":null,"homepage":"https://github.com/Pythoughts-labs/react-frontend-skills","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Pythoughts-labs.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-06-20T16:34:57.000Z","updated_at":"2026-06-20T16:59:01.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/Pythoughts-labs/react-frontend-skills","commit_stats":null,"previous_names":["pythoughts-labs/react-frontend-skills"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/Pythoughts-labs/react-frontend-skills","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Pythoughts-labs%2Freact-frontend-skills","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Pythoughts-labs%2Freact-frontend-skills/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Pythoughts-labs%2Freact-frontend-skills/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Pythoughts-labs%2Freact-frontend-skills/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Pythoughts-labs","download_url":"https://codeload.github.com/Pythoughts-labs/react-frontend-skills/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Pythoughts-labs%2Freact-frontend-skills/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":35782270,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-07-20T02:08:10.276Z","status":"online","status_checked_at":"2026-07-22T02:00:06.236Z","response_time":124,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["agent-skills","ai-agents","ai-coding-assistant","claude-code","codex","cursor","frontend","llm","nextjs","opencode","pythoughts","react","react19","skills","tailwindcss","typescript"],"created_at":"2026-07-23T00:02:30.408Z","updated_at":"2026-07-23T00:02:31.194Z","avatar_url":"https://github.com/Pythoughts-labs.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003e⚛️ React Frontend Skills\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cstrong\u003eA robust, agent-ready skills collection for the modern React ecosystem — by Pythoughts\u003c/strong\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/Pythoughts-labs/react-frontend-skills/stargazers\"\u003e\u003cimg src=\"https://img.shields.io/github/stars/Pythoughts-labs/react-frontend-skills?style=for-the-badge\u0026logo=github\u0026color=yellow\" alt=\"GitHub Stars\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/Pythoughts-labs/react-frontend-skills/network/members\"\u003e\u003cimg src=\"https://img.shields.io/github/forks/Pythoughts-labs/react-frontend-skills?style=for-the-badge\u0026logo=github\u0026color=blue\" alt=\"GitHub Forks\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/Pythoughts-labs/react-frontend-skills/issues\"\u003e\u003cimg src=\"https://img.shields.io/github/issues/Pythoughts-labs/react-frontend-skills?style=for-the-badge\u0026color=orange\" alt=\"Open Issues\" /\u003e\u003c/a\u003e\n  \u003ca href=\"LICENSE\"\u003e\u003cimg src=\"https://img.shields.io/github/license/Pythoughts-labs/react-frontend-skills?style=for-the-badge\u0026color=green\" alt=\"License\" /\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"#-quick-start\"\u003eQuick Start\u003c/a\u003e •\n  \u003ca href=\"#-install-per-agent\"\u003ePer-Agent Install\u003c/a\u003e •\n  \u003ca href=\"#-skills-included\"\u003eSkills\u003c/a\u003e •\n  \u003ca href=\"#-why\"\u003eWhy?\u003c/a\u003e •\n  \u003ca href=\"#-contributing\"\u003eContributing\u003c/a\u003e\n\u003c/p\u003e\n\n---\n\n## 🎯 What is this?\n\n**React Frontend Skills** is a curated collection of **18 production-grade AI agent skills** for the React ecosystem. Drop them into your AI coding assistant and it instantly applies battle-tested best practices for performance, UI, testing, data, and architecture.\n\nEach skill is a portable folder (`SKILL.md` + `AGENTS.md` + `references/`) that follows the open agent-skills convention, so it works across **every major AI coding agent** — no lock-in.\n\n- ⚡ **Performance** — React 19, Next.js 16, concurrent rendering\n- 🎨 **UI** — Tailwind CSS v4, shadcn/ui, responsive \u0026 accessible design\n- 🧪 **Testing** — Vitest, Playwright, TDD, MSW\n- 📦 **Data** — TanStack Query, Zod, React Hook Form, nuqs\n- 🏗️ **Architecture** — feature-based organization, composition patterns\n\n---\n\n## 🚀 Quick Start\n\nInstall everything with one command — it auto-detects the AI agents installed on your machine:\n\n```bash\nnpx skills add Pythoughts-labs/react-frontend-skills --all\n```\n\nPick specific skills instead:\n\n```bash\nnpx skills add Pythoughts-labs/react-frontend-skills -s react,nextjs,tailwind\n```\n\nInstall at the user level (global) so every project sees them:\n\n```bash\nnpx skills add Pythoughts-labs/react-frontend-skills --all -g\n```\n\n\u003e Powered by the open-source `skills` CLI. No account, no config — skills are symlinked into your agent's directory and activate automatically when relevant.\n\n### Or install from npm\n\nPublished as [`@pythoughts/react-frontend-skills`](https://www.npmjs.com/package/@pythoughts/react-frontend-skills). Add it as a project dependency, then sync into your agent:\n\n```bash\nnpm install @pythoughts/react-frontend-skills\nnpx skills experimental_sync\n```\n\n`experimental_sync` reads the package from `node_modules` and installs all 18 skills into your detected agent.\n\n---\n\n## 🤖 Install Per-Agent\n\nTarget a single agent with `-a \u003cagent\u003e` (use `-s '*'` for all skills, `-g` for a global install):\n\n| Agent | Command |\n| ----- | ------- |\n| **Claude Code** | `npx skills add Pythoughts-labs/react-frontend-skills -a claude-code -s '*' -y` |\n| **Codex** | `npx skills add Pythoughts-labs/react-frontend-skills -a codex -s '*' -y` |\n| **Cursor** | `npx skills add Pythoughts-labs/react-frontend-skills -a cursor -s '*' -y` |\n| **OpenCode** | `npx skills add Pythoughts-labs/react-frontend-skills -a opencode -s '*' -y` |\n| **Pi** | `npx skills add Pythoughts-labs/react-frontend-skills -a pi -s '*' -y` |\n| **Kiro CLI** | `npx skills add Pythoughts-labs/react-frontend-skills -a kiro-cli -s '*' -y` |\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003ePythinker \u0026amp; any other AGENTS.md-aware agent (manual)\u003c/strong\u003e\u003c/summary\u003e\n\nEvery skill ships a standard `AGENTS.md`, so any agent that reads agent instructions can consume them directly — no CLI required:\n\n```bash\n# Clone once\ngit clone https://github.com/Pythoughts-labs/react-frontend-skills.git\n\n# Point your agent at the skills directory, or copy what you need\ncp -r react-frontend-skills/skills/react   ./.agent/skills/\ncp -r react-frontend-skills/skills/nextjs  ./.agent/skills/\n```\n\nThen reference a skill from your agent context, e.g. `@skills/react/AGENTS.md`. This is the path for **Pythinker** and any custom in-house agent.\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003eFull list of 60+ supported agents\u003c/strong\u003e\u003c/summary\u003e\n\nThe `skills` CLI supports Claude Code, Codex, Cursor, OpenCode, Pi, Kiro CLI, GitHub Copilot, Gemini CLI, Windsurf, Cline, Roo, Goose, Kilo, Droid, Antigravity, Trae, Warp, Zed, Continue, Qwen Code, and many more. Run `npx skills add Pythoughts-labs/react-frontend-skills` with no agent flag to auto-detect yours.\n\n\u003c/details\u003e\n\n---\n\n## 📚 Skills Included\n\n### Core Framework\n\n| Skill | Rules | Description |\n| ----- | ----- | ----------- |\n| ⚛️ [**react**](skills/react) | 40+ | React 19 concurrent rendering, Server Components, hooks optimization |\n| 🔺 [**nextjs**](skills/nextjs) | 40+ | Next.js 16 App Router, caching, server components, routing |\n| 📘 [**typescript**](skills/typescript) | 42+ | Type system optimization, compiler config, async patterns |\n\n### UI \u0026 Styling\n\n| Skill | Rules | Description |\n| ----- | ----- | ----------- |\n| 🎨 [**tailwind**](skills/tailwind) | 42+ | Tailwind CSS v4 optimization, utility patterns, theming |\n| 🧩 [**shadcn**](skills/shadcn) | 42+ | shadcn/ui components, Radix primitives, accessibility |\n| 🎭 [**ui-design**](skills/ui-design) | 42+ | UI/UX best practices, accessibility, responsive design |\n| 🌐 [**web-design-guidelines**](skills/web-design-guidelines) | 100+ | Comprehensive web design principles |\n\n### Data \u0026 State\n\n| Skill | Rules | Description |\n| ----- | ----- | ----------- |\n| 🔄 [**tanstack-query**](skills/tanstack-query) | 40+ | Data fetching, caching, mutations, optimistic updates |\n| 📝 [**react-hook-form**](skills/react-hook-form) | 41+ | Form validation, performance, field arrays |\n| ✅ [**zod**](skills/zod) | 43+ | Schema validation, type inference, error handling |\n| 🔗 [**nuqs**](skills/nuqs) | 42+ | Type-safe URL query state for Next.js |\n\n### Testing\n\n| Skill | Rules | Description |\n| ----- | ----- | ----------- |\n| 🧪 [**vitest**](skills/vitest) | 44+ | Testing patterns, mocking, async testing |\n| 🎭 [**playwright**](skills/playwright) | 43+ | E2E testing, selectors, authentication, CI |\n| 🔌 [**msw**](skills/msw) | 45+ | API mocking with Mock Service Worker |\n| 🔴 [**tdd**](skills/tdd) | 42+ | Test-Driven Development methodology |\n\n### Architecture \u0026 Best Practices\n\n| Skill | Rules | Description |\n| ----- | ----- | ----------- |\n| 🏛️ [**feature-arch**](skills/feature-arch) | 42+ | Feature-based architecture, module organization |\n| 🧱 [**vercel-composition-patterns**](skills/vercel-composition-patterns) | — | React composition patterns |\n| ⚡ [**vercel-react-best-practices**](skills/vercel-react-best-practices) | 57+ | React performance optimization |\n\n---\n\n## 💡 Why\n\n### Expert-level, source-grounded\n\nEvery skill is built from official documentation, production-tested patterns, and real-world performance work — not generic advice.\n\n### Prioritized by impact\n\n| Priority | Impact | Description |\n| -------- | ------ | ----------- |\n| 🔴 **CRITICAL** | Major | Performance issues, build failures |\n| 🟠 **HIGH** | Significant | Notable improvements |\n| 🟡 **MEDIUM** | Important | Best practices |\n| 🟢 **LOW** | Minor | Edge cases, optimizations |\n\n### Actionable, every rule\n\nEach rule includes **DO** (correct pattern + code), **DON'T** (anti-pattern), **WHY** (reasoning), and **HOW** (implementation).\n\n---\n\n## 📁 Project Structure\n\n```\nreact-frontend-skills/\n├── skills/\n│   ├── react/                # React 19 patterns\n│   ├── nextjs/               # Next.js 16 App Router\n│   ├── typescript/           # TypeScript optimization\n│   ├── tailwind/             # Tailwind CSS v4\n│   ├── shadcn/               # shadcn/ui components\n│   ├── tanstack-query/       # Data fetching \u0026 caching\n│   ├── react-hook-form/      # Form handling\n│   ├── zod/                  # Schema validation\n│   ├── nuqs/                 # URL state management\n│   ├── vitest/               # Unit testing\n│   ├── playwright/           # E2E testing\n│   ├── msw/                  # API mocking\n│   ├── tdd/                  # TDD methodology\n│   ├── feature-arch/         # Feature architecture\n│   ├── ui-design/            # UI/UX best practices\n│   ├── vercel-composition-patterns/\n│   ├── vercel-react-best-practices/\n│   └── web-design-guidelines/\n├── README.md\n├── LICENSE\n└── CHANGELOG.md\n```\n\nEach skill folder contains:\n\n```\nskills/\u003cname\u003e/\n├── SKILL.md       # Frontmatter + quick reference (what the agent loads)\n├── AGENTS.md      # Full agent-facing guide\n└── references/    # Detailed rule files\n```\n\n---\n\n## 🔧 Usage\n\nOnce installed, skills activate automatically when your agent detects a relevant task:\n\n```typescript\n// \"Create a Next.js page with data fetching\"  → nextjs, react, tanstack-query\n// \"Build a form with validation\"              → react-hook-form, zod, shadcn\n// \"Write tests for this component\"            → vitest, tdd, msw\n```\n\nOr reference the guidelines directly:\n\n```bash\ncat skills/react/SKILL.md\ncat skills/nextjs/references/cache-use-cache-directive.md\n```\n\n---\n\n## 🤝 Contributing\n\nContributions are welcome.\n\n1. Fork the repo\n2. Add a skill folder under `skills/your-skill/` with `SKILL.md`, `AGENTS.md`, and `references/`\n3. Open a Pull Request\n\nImproving an existing skill (new rules, fixes, version updates) is just as valuable — open a PR.\n\n---\n\n## 📄 License\n\nMIT © 2026 [Mohamed Elkholy](https://github.com/Pythoughts-labs) — see [LICENSE](LICENSE).\n\n---\n\n\u003cp align=\"center\"\u003e\n  \u003cstrong\u003eFind this useful? ⭐ Star the repo.\u003c/strong\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  Built and maintained by \u003cstrong\u003ePythoughts\u003c/strong\u003e — \u003ca href=\"https://github.com/Pythoughts-labs\"\u003e@Pythoughts-labs\u003c/a\u003e\n\u003c/p\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpythoughts-labs%2Freact-frontend-skills","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpythoughts-labs%2Freact-frontend-skills","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpythoughts-labs%2Freact-frontend-skills/lists"}