[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6DK62F9T0MF746SD8PESCMM":3,"skill-same:01M6DK62F9T0MF746SD8PESCMM":139},{"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":18,"publishedAt":39,"linkOnly":40,"markdownContent":41,"markdownBody":42,"frontMatter":43,"refName":46,"commitSha":47,"skillDirectory":48,"forksCount":14,"repositoryHtmlUrl":49,"repositoryHomepageUrl":6,"ownerHtmlUrl":50,"ownerBlogUrl":51,"ownerDescription":52,"updatedAt":53,"install":54,"resources":67},"01M6DK62F9T0MF746SD8PESCMM","ck:web-frameworks",null,"Build with Next.js (App Router, RSC, SSR, ISR), Turborepo monorepos. Use for React apps, server rendering, build optimization, caching strategies, shared dependencies.","bkdev98\u002Fcautious-rotary-phone","bkdev98","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F16166195?v=4","01M6DJJTJ383MRQSK35DJ6VE8N","Khanh Bui","01M6DJJTQ26138J2RXZGN4SF0N",0,"MIT","https:\u002F\u002Fgithub.com\u002Fbkdev98\u002Fcautious-rotary-phone\u002Fblob\u002Fmain\u002F.claude\u002Fskills\u002Fweb-frameworks\u002FSKILL.md",[],[19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38],"web","ck:web frameworks","frameworks","web frameworks","apps","app","feature","shared","strategies","caching","next","router","use","Next.js","Optimization","turborepo","server","framework","ssr","react","2026-11-10 10:12:30",false,"---\nname: ck:web-frameworks\ndescription: Build with Next.js (App Router, RSC, SSR, ISR), Turborepo monorepos. Use for React apps, server rendering, build optimization, caching strategies, shared dependencies.\nlicense: MIT\nversion: 1.0.0\nargument-hint: \"[framework] [feature]\"\n---\n\n# Web Frameworks Skill Group\n\nComprehensive guide for building modern full-stack web applications using Next.js, Turborepo, and RemixIcon.\n\n## Overview\n\nThis skill group combines three powerful tools for web development:\n\n**Next.js** - React framework with SSR, SSG, RSC, and optimization features\n**Turborepo** - High-performance monorepo build system for JavaScript\u002FTypeScript\n**RemixIcon** - Icon library with 3,100+ outlined and filled style icons\n\n## When to Use This Skill Group\n\n- Building new full-stack web applications with modern React\n- Setting up monorepos with multiple apps and shared packages\n- Implementing server-side rendering and static generation\n- Optimizing build performance with intelligent caching\n- Creating consistent UI with professional iconography\n- Managing workspace dependencies across multiple projects\n- Deploying production-ready applications with proper optimization\n\n## Stack Selection Guide\n\n### Single Application: Next.js + RemixIcon\n\nUse when building a standalone application:\n- E-commerce sites\n- Marketing websites\n- SaaS applications\n- Documentation sites\n- Blogs and content platforms\n\n**Setup:**\n```bash\nnpx create-next-app@latest my-app\ncd my-app\nnpm install remixicon\n```\n\n### Monorepo: Next.js + Turborepo + RemixIcon\n\nUse when building multiple applications with shared code:\n- Microfrontends\n- Multi-tenant platforms\n- Internal tools with shared component library\n- Multiple apps (web, admin, mobile-web) sharing logic\n- Design system with documentation site\n\n**Setup:**\n```bash\nnpx create-turbo@latest my-monorepo\n# Then configure Next.js apps in apps\u002F directory\n# Install remixicon in shared UI packages\n```\n\n### Framework Features Comparison\n\n| Feature | Next.js | Turborepo | RemixIcon |\n|---------|---------|-----------|-----------|\n| Primary Use | Web framework | Build system | UI icons |\n| Best For | SSR\u002FSSG apps | Monorepos | Consistent iconography |\n| Performance | Built-in optimization | Caching & parallel tasks | Lightweight fonts\u002FSVG |\n| TypeScript | Full support | Full support | Type definitions available |\n\n## Quick Start\n\n### Next.js Application\n\n```bash\n# Create new project\nnpx create-next-app@latest my-app\ncd my-app\n\n# Install RemixIcon\nnpm install remixicon\n\n# Import in layout\n# app\u002Flayout.tsx\nimport 'remixicon\u002Ffonts\u002Fremixicon.css'\n\n# Start development\nnpm run dev\n```\n\n### Turborepo Monorepo\n\n```bash\n# Create monorepo\nnpx create-turbo@latest my-monorepo\ncd my-monorepo\n\n# Structure:\n# apps\u002Fweb\u002F          - Next.js application\n# apps\u002Fdocs\u002F         - Documentation site\n# packages\u002Fui\u002F       - Shared components with RemixIcon\n# packages\u002Fconfig\u002F   - Shared configs\n# turbo.json         - Pipeline configuration\n\n# Run all apps\nnpm run dev\n\n# Build all packages\nnpm run build\n```\n\n### RemixIcon Integration\n\n```tsx\n\u002F\u002F Webfont (HTML\u002FCSS)\n\u003Ci className=\"ri-home-line\">\u003C\u002Fi>\n\u003Ci className=\"ri-search-fill ri-2x\">\u003C\u002Fi>\n\n\u002F\u002F React component\nimport { RiHomeLine, RiSearchFill } from \"@remixicon\u002Freact\"\n\u003CRiHomeLine size={24} \u002F>\n\u003CRiSearchFill size={32} color=\"blue\" \u002F>\n```\n\n## Reference Navigation\n\n**Next.js References:**\n- [App Router Architecture](.\u002Freferences\u002Fnextjs-app-router.md) - Routing, layouts, pages, parallel routes\n- [Server Components](.\u002Freferences\u002Fnextjs-server-components.md) - RSC patterns, client vs server, streaming\n- [Data Fetching](.\u002Freferences\u002Fnextjs-data-fetching.md) - fetch API, caching, revalidation, loading states\n- [Optimization](.\u002Freferences\u002Fnextjs-optimization.md) - Images, fonts, scripts, bundle analysis, PPR\n\n**Turborepo References:**\n- [Setup & Configuration](.\u002Freferences\u002Fturborepo-setup.md) - Installation, workspace config, package structure\n- [Task Pipelines](.\u002Freferences\u002Fturborepo-pipelines.md) - Dependencies, parallel execution, task ordering\n- [Caching Strategies](.\u002Freferences\u002Fturborepo-caching.md) - Local cache, remote cache, cache invalidation\n\n**RemixIcon References:**\n- [Integration Guide](.\u002Freferences\u002Fremix-icon-integration.md) - Installation, usage, customization, accessibility\n\n## Common Patterns & Workflows\n\n### Pattern 1: Full-Stack Monorepo\n\n```\nmy-monorepo\u002F\n├── apps\u002F\n│   ├── web\u002F              # Customer-facing Next.js app\n│   ├── admin\u002F            # Admin dashboard Next.js app\n│   └── docs\u002F             # Documentation site\n├── packages\u002F\n│   ├── ui\u002F               # Shared UI with RemixIcon\n│   ├── api-client\u002F       # API client library\n│   ├── config\u002F           # ESLint, TypeScript configs\n│   └── types\u002F            # Shared TypeScript types\n└── turbo.json            # Build pipeline\n```\n\n**turbo.json:**\n```json\n{\n  \"$schema\": \"https:\u002F\u002Fturbo.build\u002Fschema.json\",\n  \"pipeline\": {\n    \"build\": {\n      \"dependsOn\": [\"^build\"],\n      \"outputs\": [\".next\u002F**\", \"!.next\u002Fcache\u002F**\", \"dist\u002F**\"]\n    },\n    \"dev\": {\n      \"cache\": false,\n      \"persistent\": true\n    },\n    \"lint\": {},\n    \"test\": {\n      \"dependsOn\": [\"build\"]\n    }\n  }\n}\n```\n\n### Pattern 2: Shared Component Library\n\n```tsx\n\u002F\u002F packages\u002Fui\u002Fsrc\u002Fbutton.tsx\nimport { RiLoader4Line } from \"@remixicon\u002Freact\"\n\nexport function Button({ children, loading, icon }) {\n  return (\n    \u003Cbutton>\n      {loading ? \u003CRiLoader4Line className=\"animate-spin\" \u002F> : icon}\n      {children}\n    \u003C\u002Fbutton>\n  )\n}\n\n\u002F\u002F apps\u002Fweb\u002Fapp\u002Fpage.tsx\nimport { Button } from \"@repo\u002Fui\u002Fbutton\"\nimport { RiHomeLine } from \"@remixicon\u002Freact\"\n\nexport default function Page() {\n  return \u003CButton icon={\u003CRiHomeLine \u002F>}>Home\u003C\u002FButton>\n}\n```\n\n### Pattern 3: Optimized Data Fetching\n\n```tsx\n\u002F\u002F app\u002Fposts\u002F[slug]\u002Fpage.tsx\nimport { notFound } from 'next\u002Fnavigation'\n\n\u002F\u002F Static generation at build time\nexport async function generateStaticParams() {\n  const posts = await getPosts()\n  return posts.map(post => ({ slug: post.slug }))\n}\n\n\u002F\u002F Revalidate every hour\nasync function getPost(slug: string) {\n  const res = await fetch(`https:\u002F\u002Fapi.example.com\u002Fposts\u002F${slug}`, {\n    next: { revalidate: 3600 }\n  })\n  if (!res.ok) return null\n  return res.json()\n}\n\nexport default async function Post({ params }: { params: { slug: string } }) {\n  const post = await getPost(params.slug)\n  if (!post) notFound()\n\n  return \u003Carticle>{post.content}\u003C\u002Farticle>\n}\n```\n\n### Pattern 4: Monorepo CI\u002FCD Pipeline\n\n```yaml\n# .github\u002Fworkflows\u002Fci.yml\nname: ck:CI\non: [push, pull_request]\n\njobs:\n  build:\n    runs-on: ubuntu-latest\n    steps:\n      - uses: actions\u002Fcheckout@v4\n      - uses: actions\u002Fsetup-node@v4\n        with:\n          node-version: 18\n      - run: npm install\n      - run: npx turbo run build test lint\n        env:\n          TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}\n          TURBO_TEAM: ${{ secrets.TURBO_TEAM }}\n```\n\n## Utility Scripts\n\nPython utilities in `scripts\u002F` directory:\n\n**nextjs-init.py** - Initialize Next.js project with best practices\n**turborepo-migrate.py** - Convert existing monorepo to Turborepo\n\nUsage examples:\n```bash\n# Initialize new Next.js app with TypeScript and recommended setup\npython scripts\u002Fnextjs-init.py --name my-app --typescript --app-router\n\n# Migrate existing monorepo to Turborepo with dry-run\npython scripts\u002Fturborepo-migrate.py --path .\u002Fmy-monorepo --dry-run\n\n# Run tests\ncd scripts\u002Ftests\npytest\n```\n\n## Best Practices\n\n**Next.js:**\n- Default to Server Components, use Client Components only when needed\n- Implement proper loading and error states\n- Use Image component for automatic optimization\n- Set proper metadata for SEO\n- Leverage caching strategies (force-cache, revalidate, no-store)\n\n**Turborepo:**\n- Structure monorepo with clear separation (apps\u002F, packages\u002F)\n- Define task dependencies correctly (^build for topological)\n- Configure outputs for proper caching\n- Enable remote caching for team collaboration\n- Use filters to run tasks on changed packages only\n\n**RemixIcon:**\n- Use line style for minimal interfaces, fill for emphasis\n- Maintain 24x24 grid alignment for crisp rendering\n- Provide aria-labels for accessibility\n- Use currentColor for flexible theming\n- Prefer webfonts for multiple icons, SVG for single icons\n\n## Resources\n\n- Next.js: https:\u002F\u002Fnextjs.org\u002Fdocs\u002Fllms.txt\n- Turborepo: https:\u002F\u002Fturbo.build\u002Frepo\u002Fdocs\n- RemixIcon: https:\u002F\u002Fremixicon.com\n\n## Implementation Checklist\n\nBuilding with this stack:\n\n- [ ] Create project structure (single app or monorepo)\n- [ ] Configure TypeScript and ESLint\n- [ ] Set up Next.js with App Router\n- [ ] Configure Turborepo pipeline (if monorepo)\n- [ ] Install and configure RemixIcon\n- [ ] Implement routing and layouts\n- [ ] Add loading and error states\n- [ ] Configure image and font optimization\n- [ ] Set up data fetching patterns\n- [ ] Configure caching strategies\n- [ ] Add API routes as needed\n- [ ] Implement shared component library (if monorepo)\n- [ ] Configure remote caching (if monorepo)\n- [ ] Set up CI\u002FCD pipeline\n- [ ] Configure deployment platform\n","# Web Frameworks Skill Group\n\nComprehensive guide for building modern full-stack web applications using Next.js, Turborepo, and RemixIcon.\n\n## Overview\n\nThis skill group combines three powerful tools for web development:\n\n**Next.js** - React framework with SSR, SSG, RSC, and optimization features\n**Turborepo** - High-performance monorepo build system for JavaScript\u002FTypeScript\n**RemixIcon** - Icon library with 3,100+ outlined and filled style icons\n\n## When to Use This Skill Group\n\n- Building new full-stack web applications with modern React\n- Setting up monorepos with multiple apps and shared packages\n- Implementing server-side rendering and static generation\n- Optimizing build performance with intelligent caching\n- Creating consistent UI with professional iconography\n- Managing workspace dependencies across multiple projects\n- Deploying production-ready applications with proper optimization\n\n## Stack Selection Guide\n\n### Single Application: Next.js + RemixIcon\n\nUse when building a standalone application:\n- E-commerce sites\n- Marketing websites\n- SaaS applications\n- Documentation sites\n- Blogs and content platforms\n\n**Setup:**\n```bash\nnpx create-next-app@latest my-app\ncd my-app\nnpm install remixicon\n```\n\n### Monorepo: Next.js + Turborepo + RemixIcon\n\nUse when building multiple applications with shared code:\n- Microfrontends\n- Multi-tenant platforms\n- Internal tools with shared component library\n- Multiple apps (web, admin, mobile-web) sharing logic\n- Design system with documentation site\n\n**Setup:**\n```bash\nnpx create-turbo@latest my-monorepo\n# Then configure Next.js apps in apps\u002F directory\n# Install remixicon in shared UI packages\n```\n\n### Framework Features Comparison\n\n| Feature | Next.js | Turborepo | RemixIcon |\n|---------|---------|-----------|-----------|\n| Primary Use | Web framework | Build system | UI icons |\n| Best For | SSR\u002FSSG apps | Monorepos | Consistent iconography |\n| Performance | Built-in optimization | Caching & parallel tasks | Lightweight fonts\u002FSVG |\n| TypeScript | Full support | Full support | Type definitions available |\n\n## Quick Start\n\n### Next.js Application\n\n```bash\n# Create new project\nnpx create-next-app@latest my-app\ncd my-app\n\n# Install RemixIcon\nnpm install remixicon\n\n# Import in layout\n# app\u002Flayout.tsx\nimport 'remixicon\u002Ffonts\u002Fremixicon.css'\n\n# Start development\nnpm run dev\n```\n\n### Turborepo Monorepo\n\n```bash\n# Create monorepo\nnpx create-turbo@latest my-monorepo\ncd my-monorepo\n\n# Structure:\n# apps\u002Fweb\u002F          - Next.js application\n# apps\u002Fdocs\u002F         - Documentation site\n# packages\u002Fui\u002F       - Shared components with RemixIcon\n# packages\u002Fconfig\u002F   - Shared configs\n# turbo.json         - Pipeline configuration\n\n# Run all apps\nnpm run dev\n\n# Build all packages\nnpm run build\n```\n\n### RemixIcon Integration\n\n```tsx\n\u002F\u002F Webfont (HTML\u002FCSS)\n\u003Ci className=\"ri-home-line\">\u003C\u002Fi>\n\u003Ci className=\"ri-search-fill ri-2x\">\u003C\u002Fi>\n\n\u002F\u002F React component\nimport { RiHomeLine, RiSearchFill } from \"@remixicon\u002Freact\"\n\u003CRiHomeLine size={24} \u002F>\n\u003CRiSearchFill size={32} color=\"blue\" \u002F>\n```\n\n## Reference Navigation\n\n**Next.js References:**\n- [App Router Architecture](.\u002Freferences\u002Fnextjs-app-router.md) - Routing, layouts, pages, parallel routes\n- [Server Components](.\u002Freferences\u002Fnextjs-server-components.md) - RSC patterns, client vs server, streaming\n- [Data Fetching](.\u002Freferences\u002Fnextjs-data-fetching.md) - fetch API, caching, revalidation, loading states\n- [Optimization](.\u002Freferences\u002Fnextjs-optimization.md) - Images, fonts, scripts, bundle analysis, PPR\n\n**Turborepo References:**\n- [Setup & Configuration](.\u002Freferences\u002Fturborepo-setup.md) - Installation, workspace config, package structure\n- [Task Pipelines](.\u002Freferences\u002Fturborepo-pipelines.md) - Dependencies, parallel execution, task ordering\n- [Caching Strategies](.\u002Freferences\u002Fturborepo-caching.md) - Local cache, remote cache, cache invalidation\n\n**RemixIcon References:**\n- [Integration Guide](.\u002Freferences\u002Fremix-icon-integration.md) - Installation, usage, customization, accessibility\n\n## Common Patterns & Workflows\n\n### Pattern 1: Full-Stack Monorepo\n\n```\nmy-monorepo\u002F\n├── apps\u002F\n│   ├── web\u002F              # Customer-facing Next.js app\n│   ├── admin\u002F            # Admin dashboard Next.js app\n│   └── docs\u002F             # Documentation site\n├── packages\u002F\n│   ├── ui\u002F               # Shared UI with RemixIcon\n│   ├── api-client\u002F       # API client library\n│   ├── config\u002F           # ESLint, TypeScript configs\n│   └── types\u002F            # Shared TypeScript types\n└── turbo.json            # Build pipeline\n```\n\n**turbo.json:**\n```json\n{\n  \"$schema\": \"https:\u002F\u002Fturbo.build\u002Fschema.json\",\n  \"pipeline\": {\n    \"build\": {\n      \"dependsOn\": [\"^build\"],\n      \"outputs\": [\".next\u002F**\", \"!.next\u002Fcache\u002F**\", \"dist\u002F**\"]\n    },\n    \"dev\": {\n      \"cache\": false,\n      \"persistent\": true\n    },\n    \"lint\": {},\n    \"test\": {\n      \"dependsOn\": [\"build\"]\n    }\n  }\n}\n```\n\n### Pattern 2: Shared Component Library\n\n```tsx\n\u002F\u002F packages\u002Fui\u002Fsrc\u002Fbutton.tsx\nimport { RiLoader4Line } from \"@remixicon\u002Freact\"\n\nexport function Button({ children, loading, icon }) {\n  return (\n    \u003Cbutton>\n      {loading ? \u003CRiLoader4Line className=\"animate-spin\" \u002F> : icon}\n      {children}\n    \u003C\u002Fbutton>\n  )\n}\n\n\u002F\u002F apps\u002Fweb\u002Fapp\u002Fpage.tsx\nimport { Button } from \"@repo\u002Fui\u002Fbutton\"\nimport { RiHomeLine } from \"@remixicon\u002Freact\"\n\nexport default function Page() {\n  return \u003CButton icon={\u003CRiHomeLine \u002F>}>Home\u003C\u002FButton>\n}\n```\n\n### Pattern 3: Optimized Data Fetching\n\n```tsx\n\u002F\u002F app\u002Fposts\u002F[slug]\u002Fpage.tsx\nimport { notFound } from 'next\u002Fnavigation'\n\n\u002F\u002F Static generation at build time\nexport async function generateStaticParams() {\n  const posts = await getPosts()\n  return posts.map(post => ({ slug: post.slug }))\n}\n\n\u002F\u002F Revalidate every hour\nasync function getPost(slug: string) {\n  const res = await fetch(`https:\u002F\u002Fapi.example.com\u002Fposts\u002F${slug}`, {\n    next: { revalidate: 3600 }\n  })\n  if (!res.ok) return null\n  return res.json()\n}\n\nexport default async function Post({ params }: { params: { slug: string } }) {\n  const post = await getPost(params.slug)\n  if (!post) notFound()\n\n  return \u003Carticle>{post.content}\u003C\u002Farticle>\n}\n```\n\n### Pattern 4: Monorepo CI\u002FCD Pipeline\n\n```yaml\n# .github\u002Fworkflows\u002Fci.yml\nname: ck:CI\non: [push, pull_request]\n\njobs:\n  build:\n    runs-on: ubuntu-latest\n    steps:\n      - uses: actions\u002Fcheckout@v4\n      - uses: actions\u002Fsetup-node@v4\n        with:\n          node-version: 18\n      - run: npm install\n      - run: npx turbo run build test lint\n        env:\n          TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}\n          TURBO_TEAM: ${{ secrets.TURBO_TEAM }}\n```\n\n## Utility Scripts\n\nPython utilities in `scripts\u002F` directory:\n\n**nextjs-init.py** - Initialize Next.js project with best practices\n**turborepo-migrate.py** - Convert existing monorepo to Turborepo\n\nUsage examples:\n```bash\n# Initialize new Next.js app with TypeScript and recommended setup\npython scripts\u002Fnextjs-init.py --name my-app --typescript --app-router\n\n# Migrate existing monorepo to Turborepo with dry-run\npython scripts\u002Fturborepo-migrate.py --path .\u002Fmy-monorepo --dry-run\n\n# Run tests\ncd scripts\u002Ftests\npytest\n```\n\n## Best Practices\n\n**Next.js:**\n- Default to Server Components, use Client Components only when needed\n- Implement proper loading and error states\n- Use Image component for automatic optimization\n- Set proper metadata for SEO\n- Leverage caching strategies (force-cache, revalidate, no-store)\n\n**Turborepo:**\n- Structure monorepo with clear separation (apps\u002F, packages\u002F)\n- Define task dependencies correctly (^build for topological)\n- Configure outputs for proper caching\n- Enable remote caching for team collaboration\n- Use filters to run tasks on changed packages only\n\n**RemixIcon:**\n- Use line style for minimal interfaces, fill for emphasis\n- Maintain 24x24 grid alignment for crisp rendering\n- Provide aria-labels for accessibility\n- Use currentColor for flexible theming\n- Prefer webfonts for multiple icons, SVG for single icons\n\n## Resources\n\n- Next.js: https:\u002F\u002Fnextjs.org\u002Fdocs\u002Fllms.txt\n- Turborepo: https:\u002F\u002Fturbo.build\u002Frepo\u002Fdocs\n- RemixIcon: https:\u002F\u002Fremixicon.com\n\n## Implementation Checklist\n\nBuilding with this stack:\n\n- [ ] Create project structure (single app or monorepo)\n- [ ] Configure TypeScript and ESLint\n- [ ] Set up Next.js with App Router\n- [ ] Configure Turborepo pipeline (if monorepo)\n- [ ] Install and configure RemixIcon\n- [ ] Implement routing and layouts\n- [ ] Add loading and error states\n- [ ] Configure image and font optimization\n- [ ] Set up data fetching patterns\n- [ ] Configure caching strategies\n- [ ] Add API routes as needed\n- [ ] Implement shared component library (if monorepo)\n- [ ] Configure remote caching (if monorepo)\n- [ ] Set up CI\u002FCD pipeline\n- [ ] Configure deployment platform\n",{"name":5,"license":15,"version":44,"description":7,"argument-hint":45},"1.0.0","[framework] [feature]","main","281d4781645af618daed3d899b2ca2c04c1fe60c",".claude\u002Fskills\u002Fweb-frameworks","https:\u002F\u002Fgithub.com\u002Fbkdev98\u002Fcautious-rotary-phone","https:\u002F\u002Fgithub.com\u002Fbkdev98","https:\u002F\u002Fquocs.com","Building polished mobile and web experiences.","2026-03-12 10:15:41",{"source":8,"skillName":5,"commands":55,"prompt":65,"zipAvailable":66},[56,59,62],{"tool":57,"command":58},"npx","npx skills add bkdev98\u002Fcautious-rotary-phone --skill \"ck:web-frameworks\"",{"tool":60,"command":61},"bunx","bunx skills add bkdev98\u002Fcautious-rotary-phone --skill \"ck:web-frameworks\"",{"tool":63,"command":64},"pnpm","pnpm dlx skills add bkdev98\u002Fcautious-rotary-phone --skill \"ck:web-frameworks\"","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fbkdev98\u002Fcautious-rotary-phone\u002Fblob\u002Fmain\u002F.claude\u002Fskills\u002Fweb-frameworks\u002FSKILL.md",true,[68,74,78,82,86,90,94,98,102,107,111,115,119,123,127,131,135],{"path":69,"resourceType":70,"resourceTypeDesc":71,"sizeBytes":72,"sourceHtmlUrl":73},"references\u002Fnextjs-app-router.md","REFERENCE","参考文档",9366,"https:\u002F\u002Fgithub.com\u002Fbkdev98\u002Fcautious-rotary-phone\u002Fblob\u002Fmain\u002F.claude\u002Fskills\u002Fweb-frameworks\u002Freferences\u002Fnextjs-app-router.md",{"path":75,"resourceType":70,"resourceTypeDesc":71,"sizeBytes":76,"sourceHtmlUrl":77},"references\u002Fnextjs-data-fetching.md",10229,"https:\u002F\u002Fgithub.com\u002Fbkdev98\u002Fcautious-rotary-phone\u002Fblob\u002Fmain\u002F.claude\u002Fskills\u002Fweb-frameworks\u002Freferences\u002Fnextjs-data-fetching.md",{"path":79,"resourceType":70,"resourceTypeDesc":71,"sizeBytes":80,"sourceHtmlUrl":81},"references\u002Fnextjs-optimization.md",11210,"https:\u002F\u002Fgithub.com\u002Fbkdev98\u002Fcautious-rotary-phone\u002Fblob\u002Fmain\u002F.claude\u002Fskills\u002Fweb-frameworks\u002Freferences\u002Fnextjs-optimization.md",{"path":83,"resourceType":70,"resourceTypeDesc":71,"sizeBytes":84,"sourceHtmlUrl":85},"references\u002Fnextjs-server-components.md",10792,"https:\u002F\u002Fgithub.com\u002Fbkdev98\u002Fcautious-rotary-phone\u002Fblob\u002Fmain\u002F.claude\u002Fskills\u002Fweb-frameworks\u002Freferences\u002Fnextjs-server-components.md",{"path":87,"resourceType":70,"resourceTypeDesc":71,"sizeBytes":88,"sourceHtmlUrl":89},"references\u002Fremix-icon-integration.md",10810,"https:\u002F\u002Fgithub.com\u002Fbkdev98\u002Fcautious-rotary-phone\u002Fblob\u002Fmain\u002F.claude\u002Fskills\u002Fweb-frameworks\u002Freferences\u002Fremix-icon-integration.md",{"path":91,"resourceType":70,"resourceTypeDesc":71,"sizeBytes":92,"sourceHtmlUrl":93},"references\u002Fturborepo-caching.md",9714,"https:\u002F\u002Fgithub.com\u002Fbkdev98\u002Fcautious-rotary-phone\u002Fblob\u002Fmain\u002F.claude\u002Fskills\u002Fweb-frameworks\u002Freferences\u002Fturborepo-caching.md",{"path":95,"resourceType":70,"resourceTypeDesc":71,"sizeBytes":96,"sourceHtmlUrl":97},"references\u002Fturborepo-pipelines.md",8510,"https:\u002F\u002Fgithub.com\u002Fbkdev98\u002Fcautious-rotary-phone\u002Fblob\u002Fmain\u002F.claude\u002Fskills\u002Fweb-frameworks\u002Freferences\u002Fturborepo-pipelines.md",{"path":99,"resourceType":70,"resourceTypeDesc":71,"sizeBytes":100,"sourceHtmlUrl":101},"references\u002Fturborepo-setup.md",9696,"https:\u002F\u002Fgithub.com\u002Fbkdev98\u002Fcautious-rotary-phone\u002Fblob\u002Fmain\u002F.claude\u002Fskills\u002Fweb-frameworks\u002Freferences\u002Fturborepo-setup.md",{"path":103,"resourceType":104,"resourceTypeDesc":105,"sizeBytes":14,"sourceHtmlUrl":106},"scripts\u002F__init__.py","SCRIPT","脚本","https:\u002F\u002Fgithub.com\u002Fbkdev98\u002Fcautious-rotary-phone\u002Fblob\u002Fmain\u002F.claude\u002Fskills\u002Fweb-frameworks\u002Fscripts\u002F__init__.py",{"path":108,"resourceType":104,"resourceTypeDesc":105,"sizeBytes":109,"sourceHtmlUrl":110},"scripts\u002F.coverage",53248,"https:\u002F\u002Fgithub.com\u002Fbkdev98\u002Fcautious-rotary-phone\u002Fblob\u002Fmain\u002F.claude\u002Fskills\u002Fweb-frameworks\u002Fscripts\u002F.coverage",{"path":112,"resourceType":104,"resourceTypeDesc":105,"sizeBytes":113,"sourceHtmlUrl":114},"scripts\u002Fnextjs_init.py",15114,"https:\u002F\u002Fgithub.com\u002Fbkdev98\u002Fcautious-rotary-phone\u002Fblob\u002Fmain\u002F.claude\u002Fskills\u002Fweb-frameworks\u002Fscripts\u002Fnextjs_init.py",{"path":116,"resourceType":104,"resourceTypeDesc":105,"sizeBytes":117,"sourceHtmlUrl":118},"scripts\u002Frequirements.txt",430,"https:\u002F\u002Fgithub.com\u002Fbkdev98\u002Fcautious-rotary-phone\u002Fblob\u002Fmain\u002F.claude\u002Fskills\u002Fweb-frameworks\u002Fscripts\u002Frequirements.txt",{"path":120,"resourceType":104,"resourceTypeDesc":105,"sizeBytes":121,"sourceHtmlUrl":122},"scripts\u002Ftests\u002Fcoverage-web.json",34849,"https:\u002F\u002Fgithub.com\u002Fbkdev98\u002Fcautious-rotary-phone\u002Fblob\u002Fmain\u002F.claude\u002Fskills\u002Fweb-frameworks\u002Fscripts\u002Ftests\u002Fcoverage-web.json",{"path":124,"resourceType":104,"resourceTypeDesc":105,"sizeBytes":125,"sourceHtmlUrl":126},"scripts\u002Ftests\u002Frequirements.txt",52,"https:\u002F\u002Fgithub.com\u002Fbkdev98\u002Fcautious-rotary-phone\u002Fblob\u002Fmain\u002F.claude\u002Fskills\u002Fweb-frameworks\u002Fscripts\u002Ftests\u002Frequirements.txt",{"path":128,"resourceType":104,"resourceTypeDesc":105,"sizeBytes":129,"sourceHtmlUrl":130},"scripts\u002Ftests\u002Ftest_nextjs_init.py",10735,"https:\u002F\u002Fgithub.com\u002Fbkdev98\u002Fcautious-rotary-phone\u002Fblob\u002Fmain\u002F.claude\u002Fskills\u002Fweb-frameworks\u002Fscripts\u002Ftests\u002Ftest_nextjs_init.py",{"path":132,"resourceType":104,"resourceTypeDesc":105,"sizeBytes":133,"sourceHtmlUrl":134},"scripts\u002Ftests\u002Ftest_turborepo_migrate.py",12861,"https:\u002F\u002Fgithub.com\u002Fbkdev98\u002Fcautious-rotary-phone\u002Fblob\u002Fmain\u002F.claude\u002Fskills\u002Fweb-frameworks\u002Fscripts\u002Ftests\u002Ftest_turborepo_migrate.py",{"path":136,"resourceType":104,"resourceTypeDesc":105,"sizeBytes":137,"sourceHtmlUrl":138},"scripts\u002Fturborepo_migrate.py",13231,"https:\u002F\u002Fgithub.com\u002Fbkdev98\u002Fcautious-rotary-phone\u002Fblob\u002Fmain\u002F.claude\u002Fskills\u002Fweb-frameworks\u002Fscripts\u002Fturborepo_migrate.py",[140,171,176,210,236,254],{"skillNo":141,"name":142,"nameZh":6,"description":143,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":144,"licenseFileUrl":6,"sourceHtmlUrl":145,"categories":146,"keywords":152,"publishedAt":39},"01M6DKK3NBKMHRVBX4XNCS7WG5","ck:web-testing","Web testing with Playwright, Vitest, k6. E2E\u002Funit\u002Fintegration\u002Fload\u002Fsecurity\u002Fvisual\u002Fa11y testing. Use for test automation, flakiness, Core Web Vitals, mobile gestures, cross-browser.","Apache-2.0","https:\u002F\u002Fgithub.com\u002Fbkdev98\u002Fcautious-rotary-phone\u002Fblob\u002Fmain\u002F.opencode\u002Fskills\u002Fweb-testing\u002FSKILL.md",[147],{"categoryNo":148,"categoryName":149,"taxonomyType":150,"taxonomyTypeDesc":151},"01JBSEEDCAT000000000000008","测试与质量","SCENARIO","使用场景",[153,19,154,155,156,157,158,159,160,161,162,163,164,165,166,167,31,168,169,170],"testing","web testing","ck:web testing","security","gestures","automation","playwright","test","test automation","core","browser","integration","core web vitals","e2e","vitest","mobile","visual","type",{"skillNo":172,"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":173,"categories":174,"keywords":175,"publishedAt":39},"01M6DKJZMMJW529FDS878H3M8V","https:\u002F\u002Fgithub.com\u002Fbkdev98\u002Fcautious-rotary-phone\u002Fblob\u002Fmain\u002F.opencode\u002Fskills\u002Fweb-frameworks\u002FSKILL.md",[],[19,22,21,20,38,37,36,35,34,33,32,31,30,29,28,27,26,25,24,23],{"skillNo":177,"name":178,"nameZh":6,"description":179,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":180,"categories":181,"keywords":190,"publishedAt":39},"01M6DKJ88WV49J39MS714ZYSVC","ck:ui-styling","Style UIs with shadcn\u002Fui components (Radix UI + Tailwind CSS). Use for accessible components, themes, dark mode, responsive layouts, design systems, color customization.","https:\u002F\u002Fgithub.com\u002Fbkdev98\u002Fcautious-rotary-phone\u002Fblob\u002Fmain\u002F.opencode\u002Fskills\u002Fui-styling\u002FSKILL.md",[182,185],{"categoryNo":183,"categoryName":184,"taxonomyType":150,"taxonomyTypeDesc":151},"01JBSEEDCAT000000000000015","视觉设计",{"categoryNo":186,"categoryName":187,"taxonomyType":188,"taxonomyTypeDesc":189},"01JBSEEDCAT000000000000032","设计师","PROFESSION","适用职业",[191,192,193,194,195,196,197,198,199,200,201,202,203,31,204,205,206,207,208,209],"ui styling","ui","styling","ck:ui styling","design","css","components","component","design systems","shadcn","Tailwind","customization","radix ui","Tailwind CSS","responsive","layout","systems","dark mode","style",{"skillNo":211,"name":212,"nameZh":6,"description":213,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":214,"categories":215,"keywords":219,"publishedAt":39},"01M6DKJ0NJ6AC3S2AKCJXVPDF0","ck:threejs","Build 3D web apps with Three.js (WebGL\u002FWebGPU). 556 searchable examples, 60 API classes, 20 use cases. Actions: create 3D scene, load model, add animation, implement physics, build VR\u002FXR. Topics: GLTF loader, PBR materials, particle effects, shadows, post-processing, compute shaders, TSL. Integrations: WebGPU, physics engines, spatial audio.","https:\u002F\u002Fgithub.com\u002Fbkdev98\u002Fcautious-rotary-phone\u002Fblob\u002Fmain\u002F.opencode\u002Fskills\u002Fthreejs\u002FSKILL.md",[216],{"categoryNo":217,"categoryName":218,"taxonomyType":150,"taxonomyTypeDesc":151},"01JBSEEDCAT000000000000010","后端与接口",[220,212,221,222,223,224,225,226,227,228,229,230,231,232,31,233,234,235,25,23],"threejs","gltf","implement","webgpu","create","examples","actions","api","Animation","3D","Audio","model","integrations","three","compute","physics",{"skillNo":237,"name":238,"nameZh":6,"description":239,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":240,"categories":241,"keywords":242,"publishedAt":39},"01M6DKH5P6MD48X0JW4MC2BYGY","ck:sequential-thinking","Apply step-by-step analysis for complex problems with revision capability. Use for multi-step reasoning, hypothesis verification, adaptive planning, problem decomposition, course correction.","https:\u002F\u002Fgithub.com\u002Fbkdev98\u002Fcautious-rotary-phone\u002Fblob\u002Fmain\u002F.opencode\u002Fskills\u002Fsequential-thinking\u002FSKILL.md",[],[243,244,245,246,247,248,249,250,251,31,252,253],"sequential thinking","thinking","ck:sequential thinking","planning","reasoning","verification","hypothesis","analysis","analyze","decomposition","problem",{"skillNo":255,"name":256,"nameZh":6,"description":257,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":258,"categories":259,"keywords":263,"publishedAt":39},"01M6DKGRQDXHFT07KCK450EY3P","ck:research","Research technical solutions, analyze architectures, gather requirements thoroughly. Use for technology evaluation, best practices research, solution design, scalability\u002Fsecurity\u002Fmaintainability analysis.","https:\u002F\u002Fgithub.com\u002Fbkdev98\u002Fcautious-rotary-phone\u002Fblob\u002Fmain\u002F.opencode\u002Fskills\u002Fresearch\u002FSKILL.md",[260],{"categoryNo":261,"categoryName":262,"taxonomyType":150,"taxonomyTypeDesc":151},"01JBSEEDCAT000000000000021","资料检索与研究",[264,256,195,156,265,266,250,251,267,31,268,269,270,271],"research","best practices","Evaluation","technical","scalability","technology","requirements","maintainability"]