Initial commit: antigravity-claudekit

2026-02-16 14:02:42 +09:00
commit 2d31c0a137
93 changed files with 9518 additions and 0 deletions
--- a/skills/ck-web-frameworks/SKILL.md
+++ b/skills/ck-web-frameworks/SKILL.md
@@ -0,0 +1,141 @@
+---
+name: ck-web-frameworks
+description: Build with Next.js App Router, RSC, SSR, ISR, and Turborepo monorepos. Use for React apps, server rendering, build optimization, caching strategies, shared component libraries, monorepo setup.
+---
+
+# ck-web-frameworks
+
+Comprehensive guide for building modern full-stack web applications using Next.js, Turborepo, and RemixIcon.
+
+## When to Use
+
+- Building new full-stack web applications with modern React
+- Setting up monorepos with multiple apps and shared packages
+- Implementing server-side rendering and static generation
+- Optimizing build performance with intelligent caching
+- Managing workspace dependencies across multiple projects
+- Deploying production-ready applications
+
+## Don't Use When
+
+- Pure component-level React patterns — use `ck-frontend-development`
+- Backend API design — use `ck-backend-development`
+- Simple single-page static site with no SSR needs
+
+## Stack Selection Guide
+
+### Single Application: Next.js
+
+Use for standalone applications:
+- E-commerce sites, marketing websites, SaaS applications
+- Documentation sites, blogs, content platforms
+
+```bash
+npx create-next-app@latest my-app
+npm install remixicon
+```
+
+### Monorepo: Next.js + Turborepo
+
+Use when building multiple applications with shared code:
+- Microfrontends, multi-tenant platforms
+- Multiple apps (web, admin, mobile-web) sharing logic
+- Design system with documentation site
+
+```bash
+npx create-turbo@latest my-monorepo
+```
+
+## Monorepo Structure
+
+```
+my-monorepo/
+├── apps/
+│   ├── web/              # Customer-facing Next.js app
+│   ├── admin/            # Admin dashboard
+│   └── docs/             # Documentation site
+├── packages/
+│   ├── ui/               # Shared UI components
+│   ├── api-client/       # Shared API client
+│   ├── config/           # Shared ESLint, TypeScript configs
+│   └── types/            # Shared TypeScript types
+└── turbo.json
+```
+
+## Next.js Best Practices
+
+- Default to Server Components; use Client Components only when needed
+- Implement proper loading and error states (`loading.tsx`, `error.tsx`)
+- Use `<Image>` component for automatic optimization
+- Set proper metadata for SEO
+- Leverage caching: `force-cache`, `revalidate`, `no-store`
+
+**Rendering Modes:**
+- **SSR**: `fetch(url)` — fresh data per request
+- **SSG**: `generateStaticParams()` — build-time generation
+- **ISR**: `{ next: { revalidate: 3600 } }` — stale-while-revalidate
+
+## Turborepo Best Practices
+
+- Structure with clear separation: `apps/`, `packages/`
+- Define task dependencies correctly (`^build` for topological)
+- Configure outputs for proper caching
+- Enable remote caching for team collaboration
+- Use filters to run tasks on changed packages only
+
+**turbo.json pipeline:**
+```json
+{
+  "pipeline": {
+    "build": { "dependsOn": ["^build"], "outputs": [".next/**", "dist/**"] },
+    "dev": { "cache": false, "persistent": true },
+    "lint": {},
+    "test": { "dependsOn": ["build"] }
+  }
+}
+```
+
+## RemixIcon Usage
+
+```tsx
+// Webfont (HTML)
+<i className="ri-home-line"></i>
+
+// React component
+import { RiHomeLine } from "@remixicon/react"
+<RiHomeLine size={24} />
+```
+
+**Guidelines:**
+- Use line style for minimal interfaces, fill for emphasis
+- Provide `aria-label` for accessibility
+- Use `currentColor` for flexible theming
+- Prefer webfonts for multiple icons; SVG for single icons
+
+## CI/CD Pipeline
+
+```yaml
+jobs:
+  build:
+    steps:
+      - run: npm install
+      - run: npx turbo run build test lint
+        env:
+          TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
+          TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
+```
+
+## Implementation Checklist
+
+- [ ] Project structure (single app or monorepo)
+- [ ] TypeScript and ESLint configured
+- [ ] Next.js with App Router
+- [ ] Turborepo pipeline (if monorepo)
+- [ ] RemixIcon installed and configured
+- [ ] Routing and layouts implemented
+- [ ] Loading and error states added
+- [ ] Image and font optimization configured
+- [ ] Data fetching patterns established
+- [ ] Caching strategies configured
+- [ ] Remote caching enabled (if monorepo)
+- [ ] CI/CD pipeline configured