@su-record/vibe 2.8.24 → 2.8.26

package/skills/vercel-react-best-practices/rubrics/server-components.md

@@ -0,0 +1,86 @@
+# Server vs Client Component Decision Guide
+
+## Decision Tree
+
+```
+Does this component need any of the following?
+    │
+    ├─ useState / useReducer         → Client
+    ├─ useEffect / lifecycle hooks   → Client
+    ├─ Browser APIs (window, document, localStorage) → Client
+    ├─ Event handlers (onClick, onChange, onSubmit)  → Client
+    ├─ Third-party hooks (useRouter, useForm, etc.)  → Client
+    │
+    └─ None of the above?            → Server (default)
+```
+
+## Default: Server Component
+
+Next.js App Router defaults all components to Server. Only add `"use client"` when required.
+
+**Server components can:**
+- Fetch data directly (no useEffect needed)
+- Access backend resources (DB, filesystem, env secrets)
+- Reduce client bundle size (zero JS shipped)
+- Use `async/await` at the component level
+
+```tsx
+// Server component — no directive needed
+async function UserProfile({ id }: { id: string }) {
+  const user = await db.user.findUnique({ where: { id } });
+  return <div>{user?.name}</div>;
+}
+```
+
+## Client Component
+
+Add `"use client"` at the top of the file.
+
+```tsx
+"use client";
+import { useState } from "react";
+
+export function Counter() {
+  const [count, setCount] = useState(0);
+  return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
+}
+```
+
+## Composition Pattern: Push Client Down
+
+Keep client boundary as low as possible. Wrap only the interactive slice, not the whole page.
+
+```tsx
+// Bad: entire section becomes client
+"use client";
+async function ProductPage({ id }: { id: string }) { ... }
+
+// Good: server fetches, client handles interaction
+async function ProductPage({ id }: { id: string }) {
+  const product = await getProduct(id);
+  return (
+    <div>
+      <ProductDetails product={product} />   {/* server */}
+      <AddToCartButton productId={id} />     {/* client — small, isolated */}
+    </div>
+  );
+}
+```
+
+## Gotchas
+
+| Mistake | Effect | Fix |
+|---------|--------|-----|
+| Importing a Client component into a Server component that passes a non-serializable prop | Runtime error | Only pass serializable data (string, number, plain object) |
+| `"use client"` on a file that only uses server features | Unnecessary client bundle | Remove directive |
+| `async` component without Suspense wrapper | Blocks entire parent render | Wrap in `<Suspense fallback={...}>` |
+| Calling `React.cache()` in a Client component | No effect — cache is server-only | Move data fetching to Server component |
+| Secrets in Client component | Exposed to browser | Move fetch to Server component or API route |
+
+## Data Fetching Boundary
+
+| Where | Pattern |
+|-------|---------|
+| Server component | `await fetch()` / direct DB call |
+| Client component | `useEffect` + fetch, or SWR/React Query |
+| Shared across server components | Wrap with `React.cache()` for per-request dedup |

package/skills/vibe-docs/SKILL.md

@@ -0,0 +1,171 @@
+---
+name: vibe-docs
+tier: standard
+description: "Generate project documentation — README, architecture docs, user guide, release notes. Activates on docs, readme, documentation keywords."
+triggers: [vibe.docs, docs, documentation, readme, release notes, architecture doc]
+priority: 50
+---
+
+# vibe.docs — Project Documentation Generator
+
+Generate or update project documentation by analyzing the actual codebase.
+
+## Subcommands
+
+### `/vibe.docs readme` — README Generation
+
+Analyze the codebase and generate a complete README.md:
+
+1. **Detect project nature**: Read package.json, CLAUDE.md, existing README
+2. **Extract key info**: Tech stack, installation, usage, API surface
+3. **Generate sections**:
+
+```markdown
+# Project Name
+> One-line description from package.json
+
+## What is this?
+[2-3 sentences explaining the problem and solution]
+
+## Quick Start
+[Installation + minimal usage example]
+
+## Features
+[Auto-detected from codebase — exported functions, CLI commands, API endpoints]
+
+## Architecture
+[High-level module diagram if 5+ source directories]
+
+## Configuration
+[Detected config files and their purposes]
+
+## Development
+[Build, test, lint commands from package.json scripts]
+
+## License
+```
+
+**Analysis approach:**
+```
+Read: package.json → name, description, scripts, dependencies
+Glob: src/**/*.ts → module structure
+Grep: pattern="export (function|class|const)" → public API surface
+Grep: pattern="(app|router)\.(get|post|put|delete)" → API endpoints
+Read: CLAUDE.md → project conventions
+```
+
+### `/vibe.docs guide` — User Guide
+
+Generate a step-by-step user guide:
+
+1. **Installation**: Detect package manager, prerequisites
+2. **Configuration**: Find all config files, document each option
+3. **Usage**: Extract CLI commands or API usage patterns
+4. **FAQ**: Common issues from error handling patterns
+5. **Troubleshooting**: Known edge cases from test files
+
+Output: `docs/GUIDE.md`
+
+**Analysis approach:**
+```
+Read: package.json → bin, scripts, peerDependencies
+Glob: src/cli/commands/*.ts → CLI command list
+Grep: pattern="throw new|Error\(" → common error scenarios
+Grep: pattern="(process\.env|config)\.\w+" → configuration options
+```
+
+### `/vibe.docs arch` — Architecture Documentation
+
+Generate architecture overview with diagrams:
+
+1. **Module map**: Directory structure → responsibility mapping
+2. **Dependency graph**: Import analysis → Mermaid diagram
+3. **Data flow**: Entry points → processing → output
+4. **Key decisions**: Extract from CLAUDE.md and code comments
+
+Output: `docs/ARCHITECTURE.md`
+
+**Mermaid diagram generation:**
+```
+Glob: src/**/ → module list
+Grep: pattern="^import .+ from" → dependency edges
+Read: CLAUDE.md → architecture notes
+
+Generate:
+graph TD
+    CLI[CLI Commands] --> Core[Core Logic]
+    Core --> Infra[Infrastructure]
+    Infra --> DB[(Database)]
+    Infra --> API[External APIs]
+```
+
+### `/vibe.docs release` — Release Notes
+
+Generate release notes from git history:
+
+1. **Collect**: `git log` since last tag
+2. **Classify**: feat/fix/refactor/docs/chore from commit messages
+3. **Group**: By category with breaking changes highlighted
+4. **Format**: Semantic versioning suggestion
+
+Output: `RELEASE_NOTES.md` or append to `CHANGELOG.md`
+
+**Output format:**
+```markdown
+## [x.y.z] - YYYY-MM-DD
+
+### Breaking Changes
+- ...
+
+### Features
+- feat: description (#PR)
+
+### Bug Fixes
+- fix: description (#PR)
+
+### Other
+- refactor/docs/chore items
+```
+
+## Pipeline Integration
+
+`/vibe.docs` completes the development pipeline:
+
+```
+/vibe.spec    → Design (what to build)
+/vibe.run     → Implement (build it)
+/vibe.trace   → Verify (prove it works)
+/vibe.docs    → Document (explain it)
+```
+
+### Auto-trigger after `/vibe.trace`
+
+When `/vibe.trace` completes with all scenarios passing, suggest:
+> "All scenarios verified. Run `/vibe.docs readme` to update documentation?"
+
+## Guidelines
+
+### DO
+- Read the actual codebase before generating — never guess
+- Preserve existing documentation that's still accurate
+- Include concrete code examples from the actual project
+- Keep language consistent with project (Korean/English based on CLAUDE.md)
+- Use changelog-writer agent for `/vibe.docs release`
+- Use api-documenter agent for API-heavy projects
+- Use diagrammer agent for `/vibe.docs arch` Mermaid generation
+
+### DON'T
+- Don't generate placeholder text ("Lorem ipsum", "TODO: fill in")
+- Don't document internal implementation details in user-facing docs
+- Don't create files without reading existing ones first
+- Don't assume features — verify by reading code
+
+## Quality Checklist
+
+Before finalizing any document:
+
+- [ ] All code examples are runnable (copy-paste ready)
+- [ ] Installation steps tested against package.json
+- [ ] Links and paths are valid
+- [ ] No placeholder text remaining
+- [ ] Consistent with project language (Korean/English)

package/skills/vibe-docs/templates/architecture.md

@@ -0,0 +1,80 @@
+# Architecture: {{PROJECT_NAME}}
+
+> Version: {{VERSION}} | Updated: {{DATE}}
+
+## Overview
+
+{{2-3 SENTENCES: WHAT THIS SYSTEM DOES AND ITS PRIMARY ARCHITECTURAL APPROACH.}}
+
+## System Diagram
+
+```mermaid
+graph TD
+    {{ENTRY_POINT}}[{{ENTRY_LABEL}}] --> {{MODULE_A}}[{{MODULE_A_LABEL}}]
+    {{MODULE_A}} --> {{MODULE_B}}[{{MODULE_B_LABEL}}]
+    {{MODULE_A}} --> {{MODULE_C}}[{{MODULE_C_LABEL}}]
+    {{MODULE_B}} --> {{STORE}}[({{STORE_LABEL}})]
+    {{MODULE_C}} --> {{EXTERNAL}}[{{EXTERNAL_SERVICE_LABEL}}]
+```
+
+> Replace nodes above based on actual `import` analysis. Run:
+> `grep -r "^import .* from" src/ | sed 's/.*from //' | sort | uniq` to get dependency edges.
+
+## Module Responsibilities
+
+| Module / Directory | Responsibility | Key Files |
+|--------------------|---------------|-----------|
+| `{{MODULE_1}}/` | {{RESPONSIBILITY}} | `{{KEY_FILE}}` |
+| `{{MODULE_2}}/` | {{RESPONSIBILITY}} | `{{KEY_FILE}}` |
+| `{{MODULE_3}}/` | {{RESPONSIBILITY}} | `{{KEY_FILE}}` |
+
+## Data Flow
+
+```
+{{INPUT_SOURCE}}
+  ↓ {{STEP_1_DESCRIPTION}}
+{{PROCESSING_MODULE}}
+  ↓ {{STEP_2_DESCRIPTION}}
+{{OUTPUT_TARGET}}
+```
+
+### Key Data Entities
+
+| Entity | Where Defined | Storage |
+|--------|--------------|---------|
+| `{{ENTITY_1}}` | `{{FILE_PATH}}` | {{DB / FILE / MEMORY}} |
+| `{{ENTITY_2}}` | `{{FILE_PATH}}` | {{DB / FILE / MEMORY}} |
+
+## External Dependencies
+
+| Service | Purpose | Auth Method |
+|---------|---------|-------------|
+| `{{SERVICE_1}}` | {{PURPOSE}} | {{API_KEY / OAUTH / NONE}} |
+| `{{SERVICE_2}}` | {{PURPOSE}} | {{AUTH_METHOD}} |
+
+## Key Decisions
+
+| Decision | Chosen Approach | Alternatives Considered | Rationale |
+|----------|----------------|------------------------|-----------|
+| {{DECISION_1}} | {{CHOICE}} | {{ALTERNATIVES}} | {{WHY}} |
+| {{DECISION_2}} | {{CHOICE}} | {{ALTERNATIVES}} | {{WHY}} |
+
+## Constraints & Non-Goals
+
+**Constraints:**
+- {{CONSTRAINT_1}} (e.g., "Must work offline")
+- {{CONSTRAINT_2}}
+
+**Non-goals (out of scope):**
+- {{NON_GOAL_1}}
+- {{NON_GOAL_2}}
+
+## Local Development Setup
+
+```bash
+{{SETUP_COMMANDS}}
+```
+
+## Further Reading
+
+- {{INTERNAL_LINK_OR_DOC}}

package/skills/vibe-docs/templates/readme.md

@@ -0,0 +1,84 @@
+# {{PROJECT_NAME}}
+
+> {{ONE_LINE_DESCRIPTION_FROM_PACKAGE_JSON}}
+
+## What is this?
+
+{{2-3 SENTENCES: THE PROBLEM THIS PROJECT SOLVES AND HOW IT SOLVES IT.}}
+
+## Quick Start
+
+```bash
+# Install
+{{PACKAGE_MANAGER}} install {{PACKAGE_NAME}}
+
+# Minimal usage example
+{{USAGE_EXAMPLE}}
+```
+
+## Features
+
+- **{{FEATURE_1}}** — {{BRIEF_DESCRIPTION}}
+- **{{FEATURE_2}}** — {{BRIEF_DESCRIPTION}}
+- **{{FEATURE_3}}** — {{BRIEF_DESCRIPTION}}
+
+## Architecture
+
+> Include this section if the project has 5+ source directories.
+
+```
+{{PROJECT_NAME}}/
+├── {{DIR_1}}/      # {{RESPONSIBILITY_1}}
+├── {{DIR_2}}/      # {{RESPONSIBILITY_2}}
+└── {{DIR_3}}/      # {{RESPONSIBILITY_3}}
+```
+
+## Configuration
+
+| File | Purpose |
+|------|---------|
+| `{{CONFIG_FILE_1}}` | {{PURPOSE}} |
+| `{{CONFIG_FILE_2}}` | {{PURPOSE}} |
+
+**Key environment variables:**
+
+| Variable | Required | Default | Description |
+|----------|----------|---------|-------------|
+| `{{ENV_VAR_1}}` | Yes / No | `{{DEFAULT}}` | {{DESCRIPTION}} |
+
+## Development
+
+```bash
+# Install dependencies
+{{INSTALL_COMMAND}}
+
+# Build
+{{BUILD_COMMAND}}
+
+# Test
+{{TEST_COMMAND}}
+
+# Lint
+{{LINT_COMMAND}}
+```
+
+## API Reference
+
+> Include if the project exposes a public API.
+
+### `{{FUNCTION_OR_CLASS_NAME}}`
+
+```typescript
+{{FUNCTION_SIGNATURE}}
+```
+
+{{DESCRIPTION}}
+
+**Parameters:**
+- `{{PARAM_1}}` — {{TYPE}}: {{DESCRIPTION}}
+
+**Returns:** `{{RETURN_TYPE}}` — {{DESCRIPTION}}
+
+## License
+
+{{LICENSE}} — see [LICENSE](./LICENSE)

package/skills/vibe-docs/templates/release-notes.md

@@ -0,0 +1,74 @@
+# Release Notes: {{PROJECT_NAME}}
+
+---
+
+## [{{VERSION}}] — {{RELEASE_DATE}}
+
+> {{ONE_SENTENCE_SUMMARY_OF_THIS_RELEASE}}
+
+### Breaking Changes
+
+> If none, remove this section.
+
+- **{{CHANGE_DESCRIPTION}}** — {{MIGRATION_GUIDE}}
+  - Before: `{{OLD_USAGE}}`
+  - After: `{{NEW_USAGE}}`
+
+### Features
+
+- `feat`: {{FEATURE_DESCRIPTION}} ([#{{PR_NUMBER}}]({{PR_URL}}))
+- `feat`: {{FEATURE_DESCRIPTION}} ([#{{PR_NUMBER}}]({{PR_URL}}))
+
+### Bug Fixes
+
+- `fix`: {{BUG_DESCRIPTION}} — {{WHAT_WAS_WRONG_AND_HOW_FIXED}} ([#{{PR_NUMBER}}]({{PR_URL}}))
+
+### Performance
+
+- `perf`: {{IMPROVEMENT_DESCRIPTION}} — {{BEFORE}} → {{AFTER}}
+
+### Other
+
+- `refactor`: {{DESCRIPTION}}
+- `docs`: {{DESCRIPTION}}
+- `chore`: {{DESCRIPTION}}
+
+---
+
+## Upgrade Guide
+
+### From {{PREVIOUS_VERSION}} to {{VERSION}}
+
+```bash
+{{UPGRADE_COMMAND}}
+```
+
+**Required config changes:**
+1. {{CONFIG_CHANGE_1}}
+2. {{CONFIG_CHANGE_2}}
+
+---
+
+## [{{PREVIOUS_VERSION}}] — {{PREVIOUS_DATE}}
+
+> Past release notes continue below in reverse chronological order.
+
+---
+
+<!-- GENERATION NOTES (remove before publishing)
+
+Run to generate draft:
+  git log {{PREVIOUS_TAG}}..HEAD --oneline --no-merges
+
+Classify commits:
+  feat:     → Features
+  fix:      → Bug Fixes
+  perf:     → Performance
+  refactor/docs/chore/test: → Other
+  BREAKING CHANGE in footer: → Breaking Changes
+
+Version bump guidance:
+  Breaking changes → major (x.0.0)
+  New features      → minor (0.x.0)
+  Bug fixes only    → patch (0.0.x)
+-->