[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M714D71XA6MVTNPY4VK7DZXK":3,"skill-same:01M714D71XA6MVTNPY4VK7DZXK":71},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":23,"publishedAt":44,"linkOnly":45,"markdownContent":46,"markdownBody":47,"frontMatter":48,"refName":51,"commitSha":52,"skillDirectory":53,"forksCount":14,"repositoryHtmlUrl":54,"repositoryHomepageUrl":6,"ownerHtmlUrl":55,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":56,"install":57,"resources":70},"01M714D71XA6MVTNPY4VK7DZXK","react-nextjs-development",null,"React and Next.js 14+ application development with App Router, Server Components, TypeScript, Tailwind CSS, and modern frontend patterns.","sapsapshen\u002Fai-memory-router","sapsapshen","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F20347959?v=4","01M6XDQEF1DP50DKF37H81J3J5","shenmian","01M6XDQEJPE41Y3DT2763X8ZJN",0,"MIT","https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router\u002Fblob\u002Fmain\u002Fskills-store\u002Fcopilot\u002Freact-nextjs-development\u002FSKILL.md",[18],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000009","前端开发","SCENARIO","使用场景",[24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43],"react","react nextjs development","development","nextjs","Next.js","personal","patterns","typescript","safe","2026","next","server","router","Server Components","components","workflow","frontend","Tailwind","css","app","2026-11-10 10:12:30",false,"---\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","# 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",{"name":5,"risk":32,"source":29,"category":49,"date_added":50,"description":7},"granular-workflow-bundle","2026-02-27","main","7a38d8e7073e61c16eda85681cb32fb68a8657a5","skills-store\u002Fcopilot\u002Freact-nextjs-development","https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router","https:\u002F\u002Fgithub.com\u002Fsapsapshen","2026-04-14 21:12:12",{"source":8,"skillName":5,"commands":58,"prompt":68,"zipAvailable":69},[59,62,65],{"tool":60,"command":61},"npx","npx skills add sapsapshen\u002Fai-memory-router --skill react-nextjs-development",{"tool":63,"command":64},"bunx","bunx skills add sapsapshen\u002Fai-memory-router --skill react-nextjs-development",{"tool":66,"command":67},"pnpm","pnpm dlx skills add sapsapshen\u002Fai-memory-router --skill react-nextjs-development","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router\u002Fblob\u002Fmain\u002Fskills-store\u002Fcopilot\u002Freact-nextjs-development\u002FSKILL.md",true,[],[72,96,122,132,145,162],{"skillNo":73,"name":74,"nameZh":6,"description":75,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":76,"categories":77,"keywords":83,"publishedAt":44},"01M71ATQRKG48SH06FQ697T5G9","wechat-search","Search WeChat Official Account articles using OpenClaw's web search and fetch capabilities with compliance-focused design.","https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router\u002Fblob\u002Fmain\u002Fskills-store\u002Fopenclaw\u002Fwechat-search-release\u002FSKILL.md",[78],{"categoryNo":79,"categoryName":80,"taxonomyType":81,"taxonomyTypeDesc":82},"01JBSEEDCAT000000000000037","律师与法务","PROFESSION","适用职业",[84,85,86,87,88,89,90,91,92,93,94,95],"wechat search","wechat","search","capabilities","openclaw","design","web search","compliance","web","official","fetch","with",{"skillNo":97,"name":98,"nameZh":6,"description":99,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":100,"categories":101,"keywords":102,"publishedAt":44},"01M71ATNAVGZB35PFYM2GC5N00","trend-tap","Real-time trending topics aggregator across 7 platforms (X\u002FTwitter, Reddit, Google Trends, Hacker News, Zhihu, Bilibili, Weibo). Trigger: when user says 'trend', 'trends', 'trend tap', '热点', '热搜', or asks what is trending\u002Fhot. Do NOT use web_search — this skill already fetches live data from all platforms with zero API keys.","https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router\u002Fblob\u002Fmain\u002Fskills-store\u002Fopenclaw\u002Ftrend-tap\u002FSKILL.md",[],[103,104,105,106,107,108,86,109,110,111,112,113,114,115,116,117,118,119,120,121],"trend","trend tap","tap","api keys","Bash","time","trending","hacker","aggregator","do","when","brew","live","data","google","install","read","across","api",{"skillNo":123,"name":124,"nameZh":6,"description":125,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":126,"categories":127,"keywords":128,"publishedAt":44},"01M71ATJ9AM5KM15AA8PS302EB","trend-radar","Real-time trending topics aggregator across 7 platforms (X\u002FTwitter, Reddit, Google Trends, Hacker News, Zhihu, Bilibili, Weibo). Trigger: when user says 'trend', 'trends', 'trend pulse', '热点', '热搜', or asks what is trending\u002Fhot. Do NOT use web_search — this skill already fetches live data from all platforms with zero API keys.","https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router\u002Fblob\u002Fmain\u002Fskills-store\u002Fopenclaw\u002Ftrend-radar\u002FSKILL.md",[],[129,130,103,114,115,116,117,107,86,119,131,120,121,113,111,110,109,118,108,106],"trend radar","radar","pulse",{"skillNo":133,"name":134,"nameZh":6,"description":135,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":136,"categories":137,"keywords":138,"publishedAt":44},"01M71ATGF095N3EJM9G8SD0BB5","tech-news-daily","每日科技新闻汇——从全球多个 RSS 源抓取最新科技新闻，翻译（英→中）、去重、排版成每日简报。当用户询问科技新闻、科技新鲜事、每日科技、技术动态、Daily Tech News 或类似表达时触发此技能。","https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router\u002Fblob\u002Fmain\u002Fskills-store\u002Fopenclaw\u002Ftech-news-daily\u002FSKILL.md",[],[139,140,141,142,143,144],"news","tech","tech news daily","daily","rss","翻译",{"skillNo":146,"name":147,"nameZh":6,"description":148,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":149,"categories":150,"keywords":154,"publishedAt":44},"01M71ATFAEAMQ17M70NQNY7SR8","summarize","Summarize URLs or files with the summarize CLI (web, PDFs, images, audio, YouTube).","https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router\u002Fblob\u002Fmain\u002Fskills-store\u002Fopenclaw\u002Fsummarize\u002FSKILL.md",[151],{"categoryNo":152,"categoryName":153,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000021","资料检索与研究",[147,92,155,156,157,95,114,158,159,160,105,161,118],"Audio","cli","youtube","images","https","files","pdfs",{"skillNo":163,"name":164,"nameZh":6,"description":165,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":166,"categories":167,"keywords":168,"publishedAt":44},"01M71ATDNS3R0M4H936PACQAWZ","sonoscli","Control Sonos speakers (discover\u002Fstatus\u002Fplay\u002Fvolume\u002Fgroup).","https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router\u002Fblob\u002Fmain\u002Fskills-store\u002Fopenclaw\u002Fsonoscli\u002FSKILL.md",[],[164,169,170,171,118,172,159,173,174,175,176,177],"status","play","go","latest","github","discover","control","cmd","volume"]