[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-eaf54fc4-1053-4895-bb43-75cec39a0709":3,"$fD8Swz1ZFKsW1jsilb_QoxkbI1UCCeo77TAZ-wvDGXC8":44},{"id":4,"title":5,"description":6,"categoryId":7,"moduleId":8,"tags":9,"prompt":10,"icon":11,"source":12,"sourceUrl":13,"authorId":14,"authorName":15,"isPublic":16,"stars":17,"runs":18,"createdAt":19,"updatedAt":19,"module":20,"category":27,"packages":34},"eaf54fc4-1053-4895-bb43-75cec39a0709","react-nextjs-development","React和Next.js 14+应用开发，使用App Router、服务器组件、TypeScript、Tailwind CSS和现代前端模式。","cat_coding_frontend","mod_coding","sickn33,coding","---\nname: react-nextjs-development\ndescription: \"React and Next.js 14+ application development with App Router, Server Components, TypeScript, Tailwind CSS, and modern frontend patterns.\"\ncategory: granular-workflow-bundle\nrisk: safe\nsource: personal\ndate_added: \"2026-02-27\"\n---\n\n# React\u002FNext.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\u002FSWR\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\u002FVitest\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.\n","","imported","https:\u002F\u002Fgithub.com\u002Fsickn33\u002Fantigravity-awesome-skills","user_system_seed","SkillOPIC",true,74,808,"2026-05-16 13:36:30",{"id":8,"name":21,"slug":22,"icon":23,"description":24,"sort":25,"createdAt":26},"编程开发","coding","mdi-code-braces","代码生成、调试、审查，提升开发效率",2,"2026-05-16 12:53:40",{"id":7,"name":28,"slug":29,"icon":30,"description":31,"moduleId":8,"sort":32,"skillCount":33,"createdAt":26},"前端开发","frontend","mdi-language-html5","HTML\u002FCSS\u002FJavaScript\u002F框架相关",1,96,[35],{"id":36,"skillId":4,"version":37,"fileName":38,"fileSize":39,"filePath":40,"fileHash":41,"manifest":42,"createdAt":43},"07487b62-3c54-4e4a-968a-4377a6335c9c","1.0.0","react-nextjs-development.zip",2111,"uploads\u002Fskills\u002Feaf54fc4-1053-4895-bb43-75cec39a0709\u002Freact-nextjs-development.zip","569d1042ef416a06c6ef3b98b7cd3de9cb0224f7de303559f88f22f5b05c4694","[{\"path\":\"SKILL.md\",\"isDirectory\":false,\"size\":5723}]","2026-05-16 13:36:31",{"code":45,"message":46,"data":47},200,"success",{"items":48,"stats":49,"page":52},[],{"averageRating":50,"totalRatings":50,"ratingCounts":51},0,[50,50,50,50,50],{"limit":53,"offset":50,"hasMore":54,"nextOffset":53,"ratedOnly":16},15,false]