[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6CENJ1D6QTMAM7V0D5YV208":3,"skill-same:01M6CENJ1D6QTMAM7V0D5YV208":146},{"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":31,"linkOnly":32,"markdownContent":33,"markdownBody":34,"frontMatter":35,"refName":37,"commitSha":38,"skillDirectory":39,"forksCount":40,"repositoryHtmlUrl":41,"repositoryHomepageUrl":42,"ownerHtmlUrl":43,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":44,"install":45,"resources":58},"01M6CENJ1D6QTMAM7V0D5YV208","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.","hoanghd218\u002Fhuman-interior-a-Ninh","hoanghd218","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F49197448?v=4","01M6CEG06HBF8MQKQX19CR32ME","Hoang218","01M6CEG0AEJJK8ZENKVMYGYGA3",0,"MIT","https:\u002F\u002Fgithub.com\u002Fhoanghd218\u002Fhuman-interior-a-Ninh\u002Fblob\u002Fmain\u002F.claude\u002Fskills\u002Fweb-frameworks\u002FSKILL.md",[],[19,20,21,22,23,24,25,26,27,28,29,30],"web","web frameworks","react","ssr","server","turborepo","Optimization","Next.js","js","use","router","build","2026-11-10 10:12:30",false,"---\nname: 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\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: 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: 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":36,"description":7},"1.0.0","main","d0e454f354869d81ce15337bc6aa9e1bf0524a11",".claude\u002Fskills\u002Fweb-frameworks",1,"https:\u002F\u002Fgithub.com\u002Fhoanghd218\u002Fhuman-interior-a-Ninh","https:\u002F\u002Faninhhumaninteriorlandingpage1.vercel.app","https:\u002F\u002Fgithub.com\u002Fhoanghd218","2026-08-25 23:13:36",{"source":8,"skillName":5,"commands":46,"prompt":56,"zipAvailable":57},[47,50,53],{"tool":48,"command":49},"npx","npx skills add hoanghd218\u002Fhuman-interior-a-Ninh --skill web-frameworks",{"tool":51,"command":52},"bunx","bunx skills add hoanghd218\u002Fhuman-interior-a-Ninh --skill web-frameworks",{"tool":54,"command":55},"pnpm","pnpm dlx skills add hoanghd218\u002Fhuman-interior-a-Ninh --skill web-frameworks","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fhoanghd218\u002Fhuman-interior-a-Ninh\u002Fblob\u002Fmain\u002F.claude\u002Fskills\u002Fweb-frameworks\u002FSKILL.md",true,[59,65,69,73,77,81,85,89,93,97,101,106,110,114,118,122,126,130,134,138,142],{"path":60,"resourceType":61,"resourceTypeDesc":62,"sizeBytes":63,"sourceHtmlUrl":64},"references\u002Ffeed-routing.md","REFERENCE","参考文档",2779,"https:\u002F\u002Fgithub.com\u002Fjiayaoqijia\u002Fcryptoskill\u002Fblob\u002Fmain\u002Fskills\u002Fexchanges\u002Fbitget-official-news-briefing\u002Freferences\u002Ffeed-routing.md",{"path":66,"resourceType":61,"resourceTypeDesc":62,"sizeBytes":67,"sourceHtmlUrl":68},"references\u002Fnextjs-app-router.md",9366,"https:\u002F\u002Fgithub.com\u002Fhoanghd218\u002Fhuman-interior-a-Ninh\u002Fblob\u002Fmain\u002F.claude\u002Fskills\u002Fweb-frameworks\u002Freferences\u002Fnextjs-app-router.md",{"path":70,"resourceType":61,"resourceTypeDesc":62,"sizeBytes":71,"sourceHtmlUrl":72},"references\u002Fnextjs-data-fetching.md",10229,"https:\u002F\u002Fgithub.com\u002Fhoanghd218\u002Fhuman-interior-a-Ninh\u002Fblob\u002Fmain\u002F.claude\u002Fskills\u002Fweb-frameworks\u002Freferences\u002Fnextjs-data-fetching.md",{"path":74,"resourceType":61,"resourceTypeDesc":62,"sizeBytes":75,"sourceHtmlUrl":76},"references\u002Fnextjs-optimization.md",11210,"https:\u002F\u002Fgithub.com\u002Fhoanghd218\u002Fhuman-interior-a-Ninh\u002Fblob\u002Fmain\u002F.claude\u002Fskills\u002Fweb-frameworks\u002Freferences\u002Fnextjs-optimization.md",{"path":78,"resourceType":61,"resourceTypeDesc":62,"sizeBytes":79,"sourceHtmlUrl":80},"references\u002Fnextjs-server-components.md",10792,"https:\u002F\u002Fgithub.com\u002Fhoanghd218\u002Fhuman-interior-a-Ninh\u002Fblob\u002Fmain\u002F.claude\u002Fskills\u002Fweb-frameworks\u002Freferences\u002Fnextjs-server-components.md",{"path":82,"resourceType":61,"resourceTypeDesc":62,"sizeBytes":83,"sourceHtmlUrl":84},"references\u002Foutput-templates.md",2532,"https:\u002F\u002Fgithub.com\u002Fjiayaoqijia\u002Fcryptoskill\u002Fblob\u002Fmain\u002Fskills\u002Fexchanges\u002Fbitget-official-news-briefing\u002Freferences\u002Foutput-templates.md",{"path":86,"resourceType":61,"resourceTypeDesc":62,"sizeBytes":87,"sourceHtmlUrl":88},"references\u002Fremix-icon-integration.md",10810,"https:\u002F\u002Fgithub.com\u002Fhoanghd218\u002Fhuman-interior-a-Ninh\u002Fblob\u002Fmain\u002F.claude\u002Fskills\u002Fweb-frameworks\u002Freferences\u002Fremix-icon-integration.md",{"path":90,"resourceType":61,"resourceTypeDesc":62,"sizeBytes":91,"sourceHtmlUrl":92},"references\u002Fturborepo-caching.md",9714,"https:\u002F\u002Fgithub.com\u002Fhoanghd218\u002Fhuman-interior-a-Ninh\u002Fblob\u002Fmain\u002F.claude\u002Fskills\u002Fweb-frameworks\u002Freferences\u002Fturborepo-caching.md",{"path":94,"resourceType":61,"resourceTypeDesc":62,"sizeBytes":95,"sourceHtmlUrl":96},"references\u002Fturborepo-pipelines.md",8510,"https:\u002F\u002Fgithub.com\u002Fhoanghd218\u002Fhuman-interior-a-Ninh\u002Fblob\u002Fmain\u002F.claude\u002Fskills\u002Fweb-frameworks\u002Freferences\u002Fturborepo-pipelines.md",{"path":98,"resourceType":61,"resourceTypeDesc":62,"sizeBytes":99,"sourceHtmlUrl":100},"references\u002Fturborepo-setup.md",9696,"https:\u002F\u002Fgithub.com\u002Fhoanghd218\u002Fhuman-interior-a-Ninh\u002Fblob\u002Fmain\u002F.claude\u002Fskills\u002Fweb-frameworks\u002Freferences\u002Fturborepo-setup.md",{"path":102,"resourceType":103,"resourceTypeDesc":104,"sizeBytes":14,"sourceHtmlUrl":105},"scripts\u002F__init__.py","SCRIPT","脚本","https:\u002F\u002Fgithub.com\u002Fhoanghd218\u002Fhuman-interior-a-Ninh\u002Fblob\u002Fmain\u002F.claude\u002Fskills\u002Fweb-frameworks\u002Fscripts\u002F__init__.py",{"path":107,"resourceType":103,"resourceTypeDesc":104,"sizeBytes":108,"sourceHtmlUrl":109},"scripts\u002F.coverage",53248,"https:\u002F\u002Fgithub.com\u002Fhoanghd218\u002Fhuman-interior-a-Ninh\u002Fblob\u002Fmain\u002F.claude\u002Fskills\u002Fweb-frameworks\u002Fscripts\u002F.coverage",{"path":111,"resourceType":103,"resourceTypeDesc":104,"sizeBytes":112,"sourceHtmlUrl":113},"scripts\u002Fnextjs_init.py",15114,"https:\u002F\u002Fgithub.com\u002Fhoanghd218\u002Fhuman-interior-a-Ninh\u002Fblob\u002Fmain\u002F.claude\u002Fskills\u002Fweb-frameworks\u002Fscripts\u002Fnextjs_init.py",{"path":115,"resourceType":103,"resourceTypeDesc":104,"sizeBytes":116,"sourceHtmlUrl":117},"scripts\u002Frequirements.txt",430,"https:\u002F\u002Fgithub.com\u002Fhoanghd218\u002Fhuman-interior-a-Ninh\u002Fblob\u002Fmain\u002F.claude\u002Fskills\u002Fweb-frameworks\u002Fscripts\u002Frequirements.txt",{"path":119,"resourceType":103,"resourceTypeDesc":104,"sizeBytes":120,"sourceHtmlUrl":121},"scripts\u002Ftests\u002Fcoverage-web.json",34849,"https:\u002F\u002Fgithub.com\u002Fhoanghd218\u002Fhuman-interior-a-Ninh\u002Fblob\u002Fmain\u002F.claude\u002Fskills\u002Fweb-frameworks\u002Fscripts\u002Ftests\u002Fcoverage-web.json",{"path":123,"resourceType":103,"resourceTypeDesc":104,"sizeBytes":124,"sourceHtmlUrl":125},"scripts\u002Ftests\u002Frequirements.txt",52,"https:\u002F\u002Fgithub.com\u002Fhoanghd218\u002Fhuman-interior-a-Ninh\u002Fblob\u002Fmain\u002F.claude\u002Fskills\u002Fweb-frameworks\u002Fscripts\u002Ftests\u002Frequirements.txt",{"path":127,"resourceType":103,"resourceTypeDesc":104,"sizeBytes":128,"sourceHtmlUrl":129},"scripts\u002Ftests\u002Ftest_nextjs_init.py",10735,"https:\u002F\u002Fgithub.com\u002Fhoanghd218\u002Fhuman-interior-a-Ninh\u002Fblob\u002Fmain\u002F.claude\u002Fskills\u002Fweb-frameworks\u002Fscripts\u002Ftests\u002Ftest_nextjs_init.py",{"path":131,"resourceType":103,"resourceTypeDesc":104,"sizeBytes":132,"sourceHtmlUrl":133},"scripts\u002Ftests\u002Ftest_turborepo_migrate.py",12861,"https:\u002F\u002Fgithub.com\u002Fhoanghd218\u002Fhuman-interior-a-Ninh\u002Fblob\u002Fmain\u002F.claude\u002Fskills\u002Fweb-frameworks\u002Fscripts\u002Ftests\u002Ftest_turborepo_migrate.py",{"path":135,"resourceType":103,"resourceTypeDesc":104,"sizeBytes":136,"sourceHtmlUrl":137},"scripts\u002Fturborepo_migrate.py",13231,"https:\u002F\u002Fgithub.com\u002Fhoanghd218\u002Fhuman-interior-a-Ninh\u002Fblob\u002Fmain\u002F.claude\u002Fskills\u002Fweb-frameworks\u002Fscripts\u002Fturborepo_migrate.py",{"path":139,"resourceType":61,"resourceTypeDesc":62,"sizeBytes":140,"sourceHtmlUrl":141},"SOURCE.md",175,"https:\u002F\u002Fgithub.com\u002Fjiayaoqijia\u002Fcryptoskill\u002Fblob\u002Fmain\u002Fskills\u002Fexchanges\u002Fbitget-official-news-briefing\u002FSOURCE.md",{"path":143,"resourceType":61,"resourceTypeDesc":62,"sizeBytes":144,"sourceHtmlUrl":145},"TRUST.auto.yaml",2217,"https:\u002F\u002Fgithub.com\u002Fjiayaoqijia\u002Fcryptoskill\u002Fblob\u002Fmain\u002Fskills\u002Fexchanges\u002Fbitget-official-news-briefing\u002FTRUST.auto.yaml",[147,176,181,207,233,246],{"skillNo":148,"name":149,"nameZh":6,"description":150,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":151,"licenseFileUrl":6,"sourceHtmlUrl":152,"categories":153,"keywords":159,"publishedAt":31},"01M6CETP5XP3B7RKRN8A4GTTSP","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\u002Fhoanghd218\u002Fhuman-interior-a-Ninh\u002Fblob\u002Fmain\u002F.opencode\u002Fskills\u002Fweb-testing\u002FSKILL.md",[154],{"categoryNo":155,"categoryName":156,"taxonomyType":157,"taxonomyTypeDesc":158},"01JBSEEDCAT000000000000008","测试与质量","SCENARIO","使用场景",[160,19,161,162,163,164,165,166,167,168,169,170,171,172,173,174,28,175],"web testing","testing","security","gestures","automation","playwright","test","test automation","core","browser","integration","core web vitals","k6","e2e","vitest","mobile",{"skillNo":177,"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":178,"categories":179,"keywords":180,"publishedAt":31},"01M6CETJPBMKZE2ZQYJFX5AXHM","https:\u002F\u002Fgithub.com\u002Fhoanghd218\u002Fhuman-interior-a-Ninh\u002Fblob\u002Fmain\u002F.opencode\u002Fskills\u002Fweb-frameworks\u002FSKILL.md",[],[20,19,25,30,29,28,27,26,24,23,22,21],{"skillNo":182,"name":183,"nameZh":6,"description":184,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":185,"categories":186,"keywords":195,"publishedAt":31},"01M6CET3A5818B9JNRTMDZPV0H","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\u002Fhoanghd218\u002Fhuman-interior-a-Ninh\u002Fblob\u002Fmain\u002F.opencode\u002Fskills\u002Fui-styling\u002FSKILL.md",[187,190],{"categoryNo":188,"categoryName":189,"taxonomyType":157,"taxonomyTypeDesc":158},"01JBSEEDCAT000000000000015","视觉设计",{"categoryNo":191,"categoryName":192,"taxonomyType":193,"taxonomyTypeDesc":194},"01JBSEEDCAT000000000000032","设计师","PROFESSION","适用职业",[196,197,198,28,199,200,201,202,203,204,205,206],"ui styling","styling","ui","radix ui","customization","Tailwind","shadcn","design systems","components","css","design",{"skillNo":208,"name":209,"nameZh":6,"description":210,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":211,"categories":212,"keywords":216,"publishedAt":31},"01M6CESYYKE7R0FJGQ4QDY7RKS","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\u002Fhoanghd218\u002Fhuman-interior-a-Ninh\u002Fblob\u002Fmain\u002F.opencode\u002Fskills\u002Fthreejs\u002FSKILL.md",[213],{"categoryNo":214,"categoryName":215,"taxonomyType":157,"taxonomyTypeDesc":158},"01JBSEEDCAT000000000000010","后端与接口",[209,217,218,219,220,221,222,223,19,224,225,226,227,30,228,28,229,230,231,232],"webgl","api","actions","examples","shaders","create","webgpu","implement","Animation","pbr","gltf","Spatial","integrations","model","Audio","3D",{"skillNo":234,"name":235,"nameZh":6,"description":236,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":237,"categories":238,"keywords":239,"publishedAt":31},"01M6CESH1KR4ZWBY03T64MG8RX","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\u002Fhoanghd218\u002Fhuman-interior-a-Ninh\u002Fblob\u002Fmain\u002F.opencode\u002Fskills\u002Fsequential-thinking\u002FSKILL.md",[],[240,241,28,242,243,244,245],"sequential thinking","planning","analysis","hypothesis","verification","reasoning",{"skillNo":247,"name":248,"nameZh":6,"description":249,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":250,"categories":251,"keywords":255,"publishedAt":31},"01M6CESCRHXH650J32YHHFD1JK","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\u002Fhoanghd218\u002Fhuman-interior-a-Ninh\u002Fblob\u002Fmain\u002F.opencode\u002Fskills\u002Fresearch\u002FSKILL.md",[252],{"categoryNo":253,"categoryName":254,"taxonomyType":157,"taxonomyTypeDesc":158},"01JBSEEDCAT000000000000021","资料检索与研究",[248,256,257,242,258,162,259,206,28],"best practices","Evaluation","analyze","technical"]