[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6CB8V1E4APYVGPP6XVVVZVV":3,"skill-same:01M6CB8V1E4APYVGPP6XVVVZVV":153},{"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":45,"commitSha":46,"skillDirectory":47,"forksCount":14,"repositoryHtmlUrl":48,"repositoryHomepageUrl":6,"ownerHtmlUrl":49,"ownerBlogUrl":50,"ownerDescription":6,"updatedAt":51,"install":52,"resources":65},"01M6CB8V1E4APYVGPP6XVVVZVV","web-frameworks",null,"Build modern full-stack web applications with Next.js (App Router, Server Components, RSC, PPR, SSR, SSG, ISR), Turborepo (monorepo management, task pipelines, remote caching, parallel execution), and RemixIcon (3100+ SVG icons in outlined\u002Ffilled styles). Use when creating React applications, implementing server-side rendering, setting up monorepos with multiple packages, optimizing build performance and caching strategies, adding icon libraries, managing shared dependencies, or working with TypeScript full-stack projects.","vienkmt\u002FTermiPro","vienkmt","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F20434534?v=4","01M6C6SZP4N31HMXD9G3PBSAM3","VienLv","01M6C6SZTVB1M4VE0BMW58YG0B",0,"MIT","https:\u002F\u002Fgithub.com\u002Fvienkmt\u002FTermiPro\u002Fblob\u002Fmain\u002FTermiMax\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","web frameworks","projects","performance","parallel execution","up","router","use","monorepo","parallel","stack","components","Next.js","applications","execution","server","icons","packages","libraries","react","2026-11-10 10:12:30",false,"---\nname: web-frameworks\ndescription: Build modern full-stack web applications with Next.js (App Router, Server Components, RSC, PPR, SSR, SSG, ISR), Turborepo (monorepo management, task pipelines, remote caching, parallel execution), and RemixIcon (3100+ SVG icons in outlined\u002Ffilled styles). Use when creating React applications, implementing server-side rendering, setting up monorepos with multiple packages, optimizing build performance and caching strategies, adding icon libraries, managing shared dependencies, or working with TypeScript full-stack projects.\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":44,"description":7},"1.0.0","main","812c56c3373a712c9368c5a705fe9f1c7604fbbd","TermiMax\u002F.claude\u002Fskills\u002Fweb-frameworks","https:\u002F\u002Fgithub.com\u002Fvienkmt\u002FTermiPro","https:\u002F\u002Fgithub.com\u002Fvienkmt","https:\u002F\u002Fwww.facebook.com\u002Fmark","2026-08-09 20:17:36",{"source":8,"skillName":5,"commands":53,"prompt":63,"zipAvailable":64},[54,57,60],{"tool":55,"command":56},"npx","npx skills add vienkmt\u002FTermiPro --skill web-frameworks",{"tool":58,"command":59},"bunx","bunx skills add vienkmt\u002FTermiPro --skill web-frameworks",{"tool":61,"command":62},"pnpm","pnpm dlx skills add vienkmt\u002FTermiPro --skill web-frameworks","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fvienkmt\u002FTermiPro\u002Fblob\u002Fmain\u002FTermiMax\u002F.claude\u002Fskills\u002Fweb-frameworks\u002FSKILL.md",true,[66,72,76,80,84,88,92,96,100,104,109,113,117,121,125,129,133,137,141,145,149],{"path":67,"resourceType":68,"resourceTypeDesc":69,"sizeBytes":70,"sourceHtmlUrl":71},"_meta.json","REFERENCE","参考文档",136,"https:\u002F\u002Fgithub.com\u002Fjiayaoqijia\u002Fcryptoskill\u002Fblob\u002Fmain\u002Fskills\u002Fchains\u002Fmonad\u002F_meta.json",{"path":73,"resourceType":68,"resourceTypeDesc":69,"sizeBytes":74,"sourceHtmlUrl":75},"references\u002Fnextjs-app-router.md",9366,"https:\u002F\u002Fgithub.com\u002Fvienkmt\u002FTermiPro\u002Fblob\u002Fmain\u002FTermiMax\u002F.claude\u002Fskills\u002Fweb-frameworks\u002Freferences\u002Fnextjs-app-router.md",{"path":77,"resourceType":68,"resourceTypeDesc":69,"sizeBytes":78,"sourceHtmlUrl":79},"references\u002Fnextjs-data-fetching.md",10229,"https:\u002F\u002Fgithub.com\u002Fvienkmt\u002FTermiPro\u002Fblob\u002Fmain\u002FTermiMax\u002F.claude\u002Fskills\u002Fweb-frameworks\u002Freferences\u002Fnextjs-data-fetching.md",{"path":81,"resourceType":68,"resourceTypeDesc":69,"sizeBytes":82,"sourceHtmlUrl":83},"references\u002Fnextjs-optimization.md",11210,"https:\u002F\u002Fgithub.com\u002Fvienkmt\u002FTermiPro\u002Fblob\u002Fmain\u002FTermiMax\u002F.claude\u002Fskills\u002Fweb-frameworks\u002Freferences\u002Fnextjs-optimization.md",{"path":85,"resourceType":68,"resourceTypeDesc":69,"sizeBytes":86,"sourceHtmlUrl":87},"references\u002Fnextjs-server-components.md",10792,"https:\u002F\u002Fgithub.com\u002Fvienkmt\u002FTermiPro\u002Fblob\u002Fmain\u002FTermiMax\u002F.claude\u002Fskills\u002Fweb-frameworks\u002Freferences\u002Fnextjs-server-components.md",{"path":89,"resourceType":68,"resourceTypeDesc":69,"sizeBytes":90,"sourceHtmlUrl":91},"references\u002Fremix-icon-integration.md",10810,"https:\u002F\u002Fgithub.com\u002Fvienkmt\u002FTermiPro\u002Fblob\u002Fmain\u002FTermiMax\u002F.claude\u002Fskills\u002Fweb-frameworks\u002Freferences\u002Fremix-icon-integration.md",{"path":93,"resourceType":68,"resourceTypeDesc":69,"sizeBytes":94,"sourceHtmlUrl":95},"references\u002Fturborepo-caching.md",9714,"https:\u002F\u002Fgithub.com\u002Fvienkmt\u002FTermiPro\u002Fblob\u002Fmain\u002FTermiMax\u002F.claude\u002Fskills\u002Fweb-frameworks\u002Freferences\u002Fturborepo-caching.md",{"path":97,"resourceType":68,"resourceTypeDesc":69,"sizeBytes":98,"sourceHtmlUrl":99},"references\u002Fturborepo-pipelines.md",8510,"https:\u002F\u002Fgithub.com\u002Fvienkmt\u002FTermiPro\u002Fblob\u002Fmain\u002FTermiMax\u002F.claude\u002Fskills\u002Fweb-frameworks\u002Freferences\u002Fturborepo-pipelines.md",{"path":101,"resourceType":68,"resourceTypeDesc":69,"sizeBytes":102,"sourceHtmlUrl":103},"references\u002Fturborepo-setup.md",9696,"https:\u002F\u002Fgithub.com\u002Fvienkmt\u002FTermiPro\u002Fblob\u002Fmain\u002FTermiMax\u002F.claude\u002Fskills\u002Fweb-frameworks\u002Freferences\u002Fturborepo-setup.md",{"path":105,"resourceType":106,"resourceTypeDesc":107,"sizeBytes":14,"sourceHtmlUrl":108},"scripts\u002F__init__.py","SCRIPT","脚本","https:\u002F\u002Fgithub.com\u002Fvienkmt\u002FTermiPro\u002Fblob\u002Fmain\u002FTermiMax\u002F.claude\u002Fskills\u002Fweb-frameworks\u002Fscripts\u002F__init__.py",{"path":110,"resourceType":106,"resourceTypeDesc":107,"sizeBytes":111,"sourceHtmlUrl":112},"scripts\u002F.coverage",53248,"https:\u002F\u002Fgithub.com\u002Fvienkmt\u002FTermiPro\u002Fblob\u002Fmain\u002FTermiMax\u002F.claude\u002Fskills\u002Fweb-frameworks\u002Fscripts\u002F.coverage",{"path":114,"resourceType":106,"resourceTypeDesc":107,"sizeBytes":115,"sourceHtmlUrl":116},"scripts\u002Fnextjs_init.py",15114,"https:\u002F\u002Fgithub.com\u002Fvienkmt\u002FTermiPro\u002Fblob\u002Fmain\u002FTermiMax\u002F.claude\u002Fskills\u002Fweb-frameworks\u002Fscripts\u002Fnextjs_init.py",{"path":118,"resourceType":106,"resourceTypeDesc":107,"sizeBytes":119,"sourceHtmlUrl":120},"scripts\u002Frequirements.txt",430,"https:\u002F\u002Fgithub.com\u002Fvienkmt\u002FTermiPro\u002Fblob\u002Fmain\u002FTermiMax\u002F.claude\u002Fskills\u002Fweb-frameworks\u002Fscripts\u002Frequirements.txt",{"path":122,"resourceType":106,"resourceTypeDesc":107,"sizeBytes":123,"sourceHtmlUrl":124},"scripts\u002Ftests\u002Fcoverage-web.json",34849,"https:\u002F\u002Fgithub.com\u002Fvienkmt\u002FTermiPro\u002Fblob\u002Fmain\u002FTermiMax\u002F.claude\u002Fskills\u002Fweb-frameworks\u002Fscripts\u002Ftests\u002Fcoverage-web.json",{"path":126,"resourceType":106,"resourceTypeDesc":107,"sizeBytes":127,"sourceHtmlUrl":128},"scripts\u002Ftests\u002Frequirements.txt",52,"https:\u002F\u002Fgithub.com\u002Fvienkmt\u002FTermiPro\u002Fblob\u002Fmain\u002FTermiMax\u002F.claude\u002Fskills\u002Fweb-frameworks\u002Fscripts\u002Ftests\u002Frequirements.txt",{"path":130,"resourceType":106,"resourceTypeDesc":107,"sizeBytes":131,"sourceHtmlUrl":132},"scripts\u002Ftests\u002Ftest_nextjs_init.py",10735,"https:\u002F\u002Fgithub.com\u002Fvienkmt\u002FTermiPro\u002Fblob\u002Fmain\u002FTermiMax\u002F.claude\u002Fskills\u002Fweb-frameworks\u002Fscripts\u002Ftests\u002Ftest_nextjs_init.py",{"path":134,"resourceType":106,"resourceTypeDesc":107,"sizeBytes":135,"sourceHtmlUrl":136},"scripts\u002Ftests\u002Ftest_turborepo_migrate.py",12861,"https:\u002F\u002Fgithub.com\u002Fvienkmt\u002FTermiPro\u002Fblob\u002Fmain\u002FTermiMax\u002F.claude\u002Fskills\u002Fweb-frameworks\u002Fscripts\u002Ftests\u002Ftest_turborepo_migrate.py",{"path":138,"resourceType":106,"resourceTypeDesc":107,"sizeBytes":139,"sourceHtmlUrl":140},"scripts\u002Fturborepo_migrate.py",13231,"https:\u002F\u002Fgithub.com\u002Fvienkmt\u002FTermiPro\u002Fblob\u002Fmain\u002FTermiMax\u002F.claude\u002Fskills\u002Fweb-frameworks\u002Fscripts\u002Fturborepo_migrate.py",{"path":142,"resourceType":68,"resourceTypeDesc":69,"sizeBytes":143,"sourceHtmlUrl":144},"skill-card.md",2028,"https:\u002F\u002Fgithub.com\u002Fjiayaoqijia\u002Fcryptoskill\u002Fblob\u002Fmain\u002Fskills\u002Fchains\u002Fmonad\u002Fskill-card.md",{"path":146,"resourceType":68,"resourceTypeDesc":69,"sizeBytes":147,"sourceHtmlUrl":148},"SOURCE.md",268,"https:\u002F\u002Fgithub.com\u002Fjiayaoqijia\u002Fcryptoskill\u002Fblob\u002Fmain\u002Fskills\u002Fchains\u002Fmonad\u002FSOURCE.md",{"path":150,"resourceType":68,"resourceTypeDesc":69,"sizeBytes":151,"sourceHtmlUrl":152},"TRUST.auto.yaml",2176,"https:\u002F\u002Fgithub.com\u002Fjiayaoqijia\u002Fcryptoskill\u002Fblob\u002Fmain\u002Fskills\u002Fchains\u002Fmonad\u002FTRUST.auto.yaml",[154,184,207,221,235,241],{"skillNo":155,"name":156,"nameZh":6,"description":157,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":158,"categories":159,"keywords":170,"publishedAt":39},"01M6CB8D4MXVYSA7Q8F0VXBR0T","ui-styling","Create beautiful, accessible user interfaces with shadcn\u002Fui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs. Use when building user interfaces, implementing design systems, creating responsive layouts, adding accessible components (dialogs, dropdowns, forms, tables), customizing themes and colors, implementing dark mode, generating visual designs and posters, or establishing consistent styling patterns across applications.","https:\u002F\u002Fgithub.com\u002Fvienkmt\u002FTermiPro\u002Fblob\u002Fmain\u002FTermiMax\u002F.claude\u002Fskills\u002Fui-styling\u002FSKILL.md",[160,165],{"categoryNo":161,"categoryName":162,"taxonomyType":163,"taxonomyTypeDesc":164},"01JBSEEDCAT000000000000015","视觉设计","SCENARIO","使用场景",{"categoryNo":166,"categoryName":167,"taxonomyType":168,"taxonomyTypeDesc":169},"01JBSEEDCAT000000000000032","设计师","PROFESSION","适用职业",[171,172,173,174,26,175,176,177,178,32,179,180,30,181,182,183],"styling","ui styling","ui","create","radix ui","user","Tailwind","first","shadcn","design systems","canvas","css","design",{"skillNo":185,"name":186,"nameZh":6,"description":187,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":188,"categories":189,"keywords":190,"publishedAt":39},"01M6CB89DT68MMYZKTWKDT0ARW","threejs","Build immersive 3D web experiences with Three.js - WebGL\u002FWebGPU library for scenes, cameras, geometries, materials, lights, animations, loaders, post-processing, shaders (including node-based TSL), compute, physics, VR\u002FXR, and advanced rendering. Use when creating 3D visualizations, games, interactive graphics, data viz, product configurators, architectural walkthroughs, or WebGL\u002FWebGPU applications. Covers OrbitControls, GLTF\u002FFBX loading, PBR materials, shadow mapping, post-processing effects (bloom, SSAO, SSR), custom shaders, instancing, LOD, animation systems, and WebXR.","https:\u002F\u002Fgithub.com\u002Fvienkmt\u002FTermiPro\u002Fblob\u002Fmain\u002FTermiMax\u002F.claude\u002Fskills\u002Fthreejs\u002FSKILL.md",[],[186,191,19,192,193,194,195,196,32,197,198,199,200,201,202,203,26,204,205,206],"webgpu","ssr","shaders","product","webxr","data","Animation","webgl","3D","visualizations","pbr","node","Shadow","interactive","gltf","graphics",{"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":213,"publishedAt":39},"01M6CB7Y4KZKH2T51JF2THHAFB","sequential-thinking","Apply structured, reflective problem-solving for complex tasks requiring multi-step analysis, revision capability, and hypothesis verification. Use for complex problem decomposition, adaptive planning, analysis needing course correction, problems with unclear scope, multi-step solutions, and hypothesis-driven work.","https:\u002F\u002Fgithub.com\u002Fvienkmt\u002FTermiPro\u002Fblob\u002Fmain\u002FTermiMax\u002F.claude\u002Fskills\u002Fsequential-thinking\u002FSKILL.md",[],[214,26,215,216,217,218,219,220],"sequential thinking","work","analysis","hypothesis","verification","planning","tasks",{"skillNo":222,"name":223,"nameZh":6,"description":224,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":225,"categories":226,"keywords":230,"publishedAt":39},"01M6CB7VW0MXYN6P7TV9142X11","research","Use when you need to research, analyze, and plan technical solutions that are scalable, secure, and maintainable.","https:\u002F\u002Fgithub.com\u002Fvienkmt\u002FTermiPro\u002Fblob\u002Fmain\u002FTermiMax\u002F.claude\u002Fskills\u002Fresearch\u002FSKILL.md",[227],{"categoryNo":228,"categoryName":229,"taxonomyType":163,"taxonomyTypeDesc":164},"01JBSEEDCAT000000000000021","资料检索与研究",[223,26,231,232,233,234],"technical","analyze","plan","secure",{"skillNo":236,"name":219,"nameZh":6,"description":237,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":238,"categories":239,"keywords":240,"publishedAt":39},"01M6CB7FGCAFQX40TX1MMAQ38M","Use when you need to plan technical solutions that are scalable, secure, and maintainable.","https:\u002F\u002Fgithub.com\u002Fvienkmt\u002FTermiPro\u002Fblob\u002Fmain\u002FTermiMax\u002F.claude\u002Fskills\u002Fplanning\u002FSKILL.md",[],[219,234,26,231,233],{"skillNo":242,"name":243,"nameZh":6,"description":244,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":245,"categories":246,"keywords":247,"publishedAt":39},"01M6CB7B61PKARVSEBJCXQ5PHV","payment-integration","Implement payment integrations with SePay (Vietnamese payment gateway with VietQR, bank transfers, cards) and Polar (global SaaS monetization platform with subscriptions, usage-based billing, automated benefits). Use when integrating payment processing, implementing checkout flows, managing subscriptions, handling webhooks, processing bank transfers, generating QR codes, automating benefit delivery, or building billing systems. Supports authentication (API keys, OAuth2), product management, customer portals, tax compliance (Polar as MoR), and comprehensive SDK integrations (Node.js, PHP, Python, Go, Laravel, Next.js).","https:\u002F\u002Fgithub.com\u002Fvienkmt\u002FTermiPro\u002Fblob\u002Fmain\u002FTermiMax\u002F.claude\u002Fskills\u002Fpayment-integration\u002FSKILL.md",[],[248,249,250,251,252,26,253,202,254,255,31,256,257,258,194,259,260,261,262,263],"payment integration","integration","api","product management","webhooks","tax","integrations","laravel","saas","compliance","gateway","authentication","customer","implement","sdk","python"]