{"id":"2c1cd68a-27b7-446c-9858-7017afa2eb74","shortId":"MRE3WD","kind":"skill","title":"react-nextjs-development","tagline":"React and Next.js 14+ application development with App Router, Server Components, TypeScript, Tailwind CSS, and modern frontend patterns.","description":"# React/Next.js Development Workflow\n\n## Overview\n\nSpecialized workflow for building React and Next.js 14+ applications with modern patterns including App Router, Server Components, TypeScript, and Tailwind CSS.\n\n## When to Use This Workflow\n\nUse this workflow when:\n- Building new React applications\n- Creating Next.js 14+ projects with App Router\n- Implementing Server Components\n- Setting up TypeScript with React\n- Styling with Tailwind CSS\n- Building full-stack Next.js applications\n\n## Workflow Phases\n\n### Phase 1: Project Setup\n\n#### Skills to Invoke\n- `app-builder` - Application scaffolding\n- `senior-fullstack` - Full-stack guidance\n- `nextjs-app-router-patterns` - Next.js 14+ patterns\n- `typescript-pro` - TypeScript setup\n\n#### Actions\n1. Choose project type (React SPA, Next.js app)\n2. Select build tool (Vite, Next.js, Create React App)\n3. Scaffold project structure\n4. Configure TypeScript\n5. Set up ESLint and Prettier\n\n#### Copy-Paste Prompts\n```\nUse @app-builder to scaffold a new Next.js 14 project with App Router\n```\n\n```\nUse @nextjs-app-router-patterns to set up Server Components\n```\n\n### Phase 2: Component Architecture\n\n#### Skills to Invoke\n- `frontend-developer` - Component development\n- `react-patterns` - React patterns\n- `react-state-management` - State management\n- `react-ui-patterns` - UI patterns\n\n#### Actions\n1. Design component hierarchy\n2. Create base components\n3. Implement layout components\n4. Set up state management\n5. Create custom hooks\n\n#### Copy-Paste Prompts\n```\nUse @frontend-developer to create reusable React components\n```\n\n```\nUse @react-patterns to implement proper component composition\n```\n\n```\nUse @react-state-management to set up Zustand store\n```\n\n### Phase 3: Styling and Design\n\n#### Skills to Invoke\n- `frontend-design` - UI design\n- `tailwind-patterns` - Tailwind CSS\n- `tailwind-design-system` - Design system\n- `core-components` - Component library\n\n#### Actions\n1. Set up Tailwind CSS\n2. Configure design tokens\n3. Create utility classes\n4. Build component styles\n5. Implement responsive design\n\n#### Copy-Paste Prompts\n```\nUse @tailwind-patterns to style components with Tailwind CSS v4\n```\n\n```\nUse @frontend-design to create a modern dashboard UI\n```\n\n### Phase 4: Data Fetching\n\n#### Skills to Invoke\n- `nextjs-app-router-patterns` - Server Components\n- `react-state-management` - React Query\n- `api-patterns` - API integration\n\n#### Actions\n1. Implement Server Components\n2. Set up React Query/SWR\n3. Create API client\n4. Handle loading states\n5. Implement error boundaries\n\n#### Copy-Paste Prompts\n```\nUse @nextjs-app-router-patterns to implement Server Components data fetching\n```\n\n### Phase 5: Routing and Navigation\n\n#### Skills to Invoke\n- `nextjs-app-router-patterns` - App Router\n- `nextjs-best-practices` - Next.js patterns\n\n#### Actions\n1. Set up file-based routing\n2. Create dynamic routes\n3. Implement nested routes\n4. Add route guards\n5. Configure redirects\n\n#### Copy-Paste Prompts\n```\nUse @nextjs-app-router-patterns to set up parallel routes and intercepting routes\n```\n\n### Phase 6: Forms and Validation\n\n#### Skills to Invoke\n- `frontend-developer` - Form development\n- `typescript-advanced-types` - Type validation\n- `react-ui-patterns` - Form patterns\n\n#### Actions\n1. Choose form library (React Hook Form, Formik)\n2. Set up validation (Zod, Yup)\n3. Create form components\n4. Handle submissions\n5. Implement error handling\n\n#### Copy-Paste Prompts\n```\nUse @frontend-developer to create forms with React Hook Form and Zod\n```\n\n### Phase 7: Testing\n\n#### Skills to Invoke\n- `javascript-testing-patterns` - Jest/Vitest\n- `playwright-skill` - E2E testing\n- `e2e-testing-patterns` - E2E patterns\n\n#### Actions\n1. Set up testing framework\n2. Write unit tests\n3. Create component tests\n4. Implement E2E tests\n5. Configure CI integration\n\n#### Copy-Paste Prompts\n```\nUse @javascript-testing-patterns to write Vitest tests\n```\n\n```\nUse @playwright-skill to create E2E tests for critical flows\n```\n\n### Phase 8: Build and Deployment\n\n#### Skills to Invoke\n- `vercel-deployment` - Vercel deployment\n- `vercel-deploy-claimable` - Vercel deployment\n- `web-performance-optimization` - Performance\n\n#### Actions\n1. Configure build settings\n2. Optimize bundle size\n3. Set up environment variables\n4. Deploy to Vercel\n5. Configure preview deployments\n\n#### Copy-Paste Prompts\n```\nUse @vercel-deployment to deploy Next.js app to production\n```\n\n## Technology Stack\n\n| Category | Technology |\n|----------|------------|\n| Framework | Next.js 14+, React 18+ |\n| Language | TypeScript 5+ |\n| Styling | Tailwind CSS v4 |\n| State | Zustand, React Query |\n| Forms | React Hook Form, Zod |\n| Testing | Vitest, Playwright |\n| Deployment | Vercel |\n\n## Quality Gates\n\n- [ ] TypeScript compiles without errors\n- [ ] All tests passing\n- [ ] Linting clean\n- [ ] Performance metrics met (LCP, CLS, FID)\n- [ ] Accessibility checked (WCAG 2.1)\n- [ ] Responsive design verified\n\n## Related Workflow Bundles\n\n- `development` - General development\n- `testing-qa` - Testing workflow\n- `documentation` - Documentation\n- `typescript-development` - TypeScript patterns\n\n## Limitations\n- Use this skill only when the task clearly matches the scope described above.\n- Do not treat the output as a substitute for environment-specific validation, testing, or expert review.\n- Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.","tags":["react","nextjs","development","antigravity","awesome","skills","sickn33","agent-skills","agentic-skills","ai-agent-skills","ai-agents","ai-coding"],"capabilities":["skill","source-sickn33","skill-react-nextjs-development","topic-agent-skills","topic-agentic-skills","topic-ai-agent-skills","topic-ai-agents","topic-ai-coding","topic-ai-workflows","topic-antigravity","topic-antigravity-skills","topic-claude-code","topic-claude-code-skills","topic-codex-cli","topic-codex-skills"],"categories":["antigravity-awesome-skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/sickn33/antigravity-awesome-skills/react-nextjs-development","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add sickn33/antigravity-awesome-skills","source_repo":"https://github.com/sickn33/antigravity-awesome-skills","install_from":"skills.sh"}},"qualityScore":"0.700","qualityRationale":"deterministic score 0.70 from registry signals: · indexed on github topic:agent-skills · 34583 github stars · SKILL.md body (5,441 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-04-22T18:52:06.610Z","embedding":null,"createdAt":"2026-04-18T21:43:21.140Z","updatedAt":"2026-04-22T18:52:06.610Z","lastSeenAt":"2026-04-22T18:52:06.610Z","tsv":"'1':89,121,210,293,365,424,490,555,625 '14':8,34,63,113,164,666 '18':668 '2':129,181,214,298,369,431,498,560,629 '2.1':710 '3':138,218,264,302,374,435,504,564,633 '4':142,222,306,340,378,439,508,568,638 '5':145,227,310,382,403,443,511,572,642,671 '6':465 '7':533 '8':601 'access':707 'action':120,209,292,364,423,489,554,624 'add':440 'advanc':479 'api':360,362,376 'api-pattern':359 'app':12,40,66,96,109,128,137,157,167,172,348,393,412,415,453,657 'app-build':95,156 'applic':9,35,60,85,98 'architectur':183 'ask':765 'base':216,429 'best':419 'boundari':385,773 'build':30,57,80,131,307,602,627 'builder':97,158 'bundl':631,716 'categori':662 'check':708 'choos':122,491 'ci':574 'claimabl':616 'clarif':767 'class':305 'clean':700 'clear':740 'client':377 'cls':705 'compil':693 'compon':15,43,70,179,182,190,212,217,221,243,251,289,290,308,324,352,368,399,507,566 'composit':252 'configur':143,299,444,573,626,643 'copi':152,232,315,387,447,516,577,647 'copy-past':151,231,314,386,446,515,576,646 'core':288 'core-compon':287 'creat':61,135,215,228,240,303,334,375,432,505,524,565,594 'criteria':776 'critic':598 'css':18,47,79,280,297,327,674 'custom':229 'dashboard':337 'data':341,400 'deploy':604,610,612,615,618,639,645,653,655,688 'describ':744 'design':211,267,273,275,283,285,300,313,332,712 'develop':4,10,24,189,191,238,474,476,522,717,719,729 'document':725,726 'dynam':433 'e2e':546,549,552,570,595 'e2e-testing-patterns':548 'environ':636,756 'environment-specif':755 'error':384,513,695 'eslint':148 'expert':761 'fetch':342,401 'fid':706 'file':428 'file-bas':427 'flow':599 'form':466,475,487,492,496,506,525,529,680,683 'formik':497 'framework':559,664 'frontend':21,188,237,272,331,473,521 'frontend-design':271,330 'frontend-develop':187,236,472,520 'full':82,104 'full-stack':81,103 'fullstack':102 'gate':691 'general':718 'guard':442 'guidanc':106 'handl':379,509,514 'hierarchi':213 'hook':230,495,528,682 'implement':68,219,249,311,366,383,397,436,512,569 'includ':39 'input':770 'integr':363,575 'intercept':462 'invok':94,186,270,345,409,471,537,607 'javascript':539,582 'javascript-testing-pattern':538,581 'jest/vitest':542 'languag':669 'layout':220 'lcp':704 'librari':291,493 'limit':732 'lint':699 'load':380 'manag':200,202,226,257,356 'match':741 'met':703 'metric':702 'miss':778 'modern':20,37,336 'navig':406 'nest':437 'new':58,162 'next.js':7,33,62,84,112,127,134,163,421,656,665 'nextj':3,108,171,347,392,411,418,452 'nextjs-app-router-pattern':107,170,346,391,410,451 'nextjs-best-practic':417 'optim':622,630 'output':750 'overview':26 'parallel':459 'pass':698 'past':153,233,316,388,448,517,578,648 'pattern':22,38,111,114,174,194,196,206,208,247,278,321,350,361,395,414,422,455,486,488,541,551,553,584,731 'perform':621,623,701 'permiss':771 'phase':87,88,180,263,339,402,464,532,600 'playwright':544,591,687 'playwright-skil':543,590 'practic':420 'prettier':150 'preview':644 'pro':117 'product':659 'project':64,90,123,140,165 'prompt':154,234,317,389,449,518,579,649 'proper':250 'qa':722 'qualiti':690 'queri':358,679 'query/swr':373 'react':2,5,31,59,75,125,136,193,195,198,204,242,246,255,354,357,372,484,494,527,667,678,681 'react-nextjs-develop':1 'react-pattern':192,245 'react-state-manag':197,254,353 'react-ui-pattern':203,483 'react/next.js':23 'redirect':445 'relat':714 'requir':769 'respons':312,711 'reusabl':241 'review':762 'rout':404,430,434,438,441,460,463 'router':13,41,67,110,168,173,349,394,413,416,454 'safeti':772 'scaffold':99,139,160 'scope':743 'select':130 'senior':101 'senior-fullstack':100 'server':14,42,69,178,351,367,398 'set':71,146,176,223,259,294,370,425,457,499,556,628,634 'setup':91,119 'size':632 'skill':92,184,268,343,407,469,535,545,592,605,735 'skill-react-nextjs-development' 'source-sickn33' 'spa':126 'special':27 'specif':757 'stack':83,105,661 'state':199,201,225,256,355,381,676 'stop':763 'store':262 'structur':141 'style':76,265,309,323,672 'submiss':510 'substitut':753 'success':775 'system':284,286 'tailwind':17,46,78,277,279,282,296,320,326,673 'tailwind-design-system':281 'tailwind-pattern':276,319 'task':739 'technolog':660,663 'test':534,540,547,550,558,563,567,571,583,588,596,685,697,721,723,759 'testing-qa':720 'token':301 'tool':132 'topic-agent-skills' 'topic-agentic-skills' 'topic-ai-agent-skills' 'topic-ai-agents' 'topic-ai-coding' 'topic-ai-workflows' 'topic-antigravity' 'topic-antigravity-skills' 'topic-claude-code' 'topic-claude-code-skills' 'topic-codex-cli' 'topic-codex-skills' 'treat':748 'type':124,480,481 'typescript':16,44,73,116,118,144,478,670,692,728,730 'typescript-advanced-typ':477 'typescript-develop':727 'typescript-pro':115 'ui':205,207,274,338,485 'unit':562 'use':50,53,155,169,235,244,253,318,329,390,450,519,580,589,650,733 'util':304 'v4':328,675 'valid':468,482,501,758 'variabl':637 'vercel':609,611,614,617,641,652,689 'vercel-deploy':608,651 'vercel-deploy-claim':613 'verifi':713 'vite':133 'vitest':587,686 'wcag':709 'web':620 'web-performance-optim':619 'without':694 'workflow':25,28,52,55,86,715,724 'write':561,586 'yup':503 'zod':502,531,684 'zustand':261,677","prices":[{"id":"fb288eed-de4c-4877-91f0-d5640162078a","listingId":"2c1cd68a-27b7-446c-9858-7017afa2eb74","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"sickn33","category":"antigravity-awesome-skills","install_from":"skills.sh"},"createdAt":"2026-04-18T21:43:21.140Z"}],"sources":[{"listingId":"2c1cd68a-27b7-446c-9858-7017afa2eb74","source":"github","sourceId":"sickn33/antigravity-awesome-skills/react-nextjs-development","sourceUrl":"https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/react-nextjs-development","isPrimary":false,"firstSeenAt":"2026-04-18T21:43:21.140Z","lastSeenAt":"2026-04-22T18:52:06.610Z"}],"details":{"listingId":"2c1cd68a-27b7-446c-9858-7017afa2eb74","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"sickn33","slug":"react-nextjs-development","github":{"repo":"sickn33/antigravity-awesome-skills","stars":34583,"topics":["agent-skills","agentic-skills","ai-agent-skills","ai-agents","ai-coding","ai-workflows","antigravity","antigravity-skills","claude-code","claude-code-skills","codex-cli","codex-skills","cursor","cursor-skills","developer-tools","gemini-cli","gemini-skills","kiro","mcp","skill-library"],"license":"mit","html_url":"https://github.com/sickn33/antigravity-awesome-skills","pushed_at":"2026-04-22T06:40:00Z","description":"Installable GitHub library of 1,400+ agentic skills for Claude Code, Cursor, Codex CLI, Gemini CLI, Antigravity, and more. Includes installer CLI, bundles, workflows, and official/community skill collections.","skill_md_sha":"5d40a9c9f6a34dd4c10e97e2a8059923af775fa6","skill_md_path":"skills/react-nextjs-development/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/react-nextjs-development"},"layout":"multi","source":"github","category":"antigravity-awesome-skills","frontmatter":{"name":"react-nextjs-development","description":"React and Next.js 14+ application development with App Router, Server Components, TypeScript, Tailwind CSS, and modern frontend patterns."},"skills_sh_url":"https://skills.sh/sickn33/antigravity-awesome-skills/react-nextjs-development"},"updatedAt":"2026-04-22T18:52:06.610Z"}}