@mrtrinhvn/ag-kit 1.1.0 → 1.1.1

package/template/.agent/.shared/ui-ux-pro-max/scripts/search.py

@@ -0,0 +1,106 @@
+#!/usr/bin/env python3
+# -*- coding: utf-8 -*-
+"""
+UI/UX Pro Max Search - BM25 search engine for UI/UX style guides
+Usage: python search.py "<query>" [--domain <domain>] [--stack <stack>] [--max-results 3]
+       python search.py "<query>" --design-system [-p "Project Name"]
+       python search.py "<query>" --design-system --persist [-p "Project Name"] [--page "dashboard"]
+
+Domains: style, prompt, color, chart, landing, product, ux, typography
+Stacks: html-tailwind, react, nextjs
+
+Persistence (Master + Overrides pattern):
+  --persist    Save design system to design-system/MASTER.md
+  --page       Also create a page-specific override file in design-system/pages/
+"""
+
+import argparse
+from core import CSV_CONFIG, AVAILABLE_STACKS, MAX_RESULTS, search, search_stack
+from design_system import generate_design_system, persist_design_system
+
+
+def format_output(result):
+    """Format results for Claude consumption (token-optimized)"""
+    if "error" in result:
+        return f"Error: {result['error']}"
+
+    output = []
+    if result.get("stack"):
+        output.append(f"## UI Pro Max Stack Guidelines")
+        output.append(f"**Stack:** {result['stack']} | **Query:** {result['query']}")
+    else:
+        output.append(f"## UI Pro Max Search Results")
+        output.append(f"**Domain:** {result['domain']} | **Query:** {result['query']}")
+    output.append(f"**Source:** {result['file']} | **Found:** {result['count']} results\n")
+
+    for i, row in enumerate(result['results'], 1):
+        output.append(f"### Result {i}")
+        for key, value in row.items():
+            value_str = str(value)
+            if len(value_str) > 300:
+                value_str = value_str[:300] + "..."
+            output.append(f"- **{key}:** {value_str}")
+        output.append("")
+
+    return "\n".join(output)
+
+
+if __name__ == "__main__":
+    parser = argparse.ArgumentParser(description="UI Pro Max Search")
+    parser.add_argument("query", help="Search query")
+    parser.add_argument("--domain", "-d", choices=list(CSV_CONFIG.keys()), help="Search domain")
+    parser.add_argument("--stack", "-s", choices=AVAILABLE_STACKS, help="Stack-specific search (html-tailwind, react, nextjs)")
+    parser.add_argument("--max-results", "-n", type=int, default=MAX_RESULTS, help="Max results (default: 3)")
+    parser.add_argument("--json", action="store_true", help="Output as JSON")
+    # Design system generation
+    parser.add_argument("--design-system", "-ds", action="store_true", help="Generate complete design system recommendation")
+    parser.add_argument("--project-name", "-p", type=str, default=None, help="Project name for design system output")
+    parser.add_argument("--format", "-f", choices=["ascii", "markdown"], default="ascii", help="Output format for design system")
+    # Persistence (Master + Overrides pattern)
+    parser.add_argument("--persist", action="store_true", help="Save design system to design-system/MASTER.md (creates hierarchical structure)")
+    parser.add_argument("--page", type=str, default=None, help="Create page-specific override file in design-system/pages/")
+    parser.add_argument("--output-dir", "-o", type=str, default=None, help="Output directory for persisted files (default: current directory)")
+
+    args = parser.parse_args()
+
+    # Design system takes priority
+    if args.design_system:
+        result = generate_design_system(
+            args.query, 
+            args.project_name, 
+            args.format,
+            persist=args.persist,
+            page=args.page,
+            output_dir=args.output_dir
+        )
+        print(result)
+        
+        # Print persistence confirmation
+        if args.persist:
+            project_slug = args.project_name.lower().replace(' ', '-') if args.project_name else "default"
+            print("\n" + "=" * 60)
+            print(f"✅ Design system persisted to design-system/{project_slug}/")
+            print(f"   📄 design-system/{project_slug}/MASTER.md (Global Source of Truth)")
+            if args.page:
+                page_filename = args.page.lower().replace(' ', '-')
+                print(f"   📄 design-system/{project_slug}/pages/{page_filename}.md (Page Overrides)")
+            print("")
+            print(f"📖 Usage: When building a page, check design-system/{project_slug}/pages/[page].md first.")
+            print(f"   If exists, its rules override MASTER.md. Otherwise, use MASTER.md.")
+            print("=" * 60)
+    # Stack search
+    elif args.stack:
+        result = search_stack(args.query, args.stack, args.max_results)
+        if args.json:
+            import json
+            print(json.dumps(result, indent=2, ensure_ascii=False))
+        else:
+            print(format_output(result))
+    # Domain search
+    else:
+        result = search(args.query, args.domain, args.max_results)
+        if args.json:
+            import json
+            print(json.dumps(result, indent=2, ensure_ascii=False))
+        else:
+            print(format_output(result))

package/template/.agent/ARCHITECTURE.md

@@ -0,0 +1,288 @@
+# Antigravity Kit Architecture
+
+> Comprehensive AI Agent Capability Expansion Toolkit
+
+---
+
+## 📋 Overview
+
+Antigravity Kit is a modular system consisting of:
+
+- **20 Specialist Agents** - Role-based AI personas
+- **36 Skills** - Domain-specific knowledge modules
+- **11 Workflows** - Slash command procedures
+
+---
+
+## 🏗️ Directory Structure
+
+```plaintext
+.agent/
+├── ARCHITECTURE.md          # This file
+├── agents/                  # 20 Specialist Agents
+├── skills/                  # 36 Skills
+├── workflows/               # 11 Slash Commands
+├── rules/                   # Global Rules
+└── scripts/                 # Master Validation Scripts
+```
+
+---
+
+## 🤖 Agents (20)
+
+Specialist AI personas for different domains.
+
+| Agent                    | Focus                      | Skills Used                                              |
+| ------------------------ | -------------------------- | -------------------------------------------------------- |
+| `orchestrator`           | Multi-agent coordination   | parallel-agents, behavioral-modes                        |
+| `project-planner`        | Discovery, task planning   | brainstorming, plan-writing, architecture                |
+| `frontend-specialist`    | Web UI/UX                  | frontend-design, react-best-practices, tailwind-patterns |
+| `backend-specialist`     | API, business logic        | api-patterns, nodejs-best-practices, database-design     |
+| `database-architect`     | Schema, SQL                | database-design, prisma-expert                           |
+| `mobile-developer`       | iOS, Android, RN           | mobile-design                                            |
+| `game-developer`         | Game logic, mechanics      | game-development                                         |
+| `devops-engineer`        | CI/CD, Docker              | deployment-procedures, docker-expert                     |
+| `security-auditor`       | Security compliance        | vulnerability-scanner, red-team-tactics                  |
+| `penetration-tester`     | Offensive security         | red-team-tactics                                         |
+| `test-engineer`          | Testing strategies         | testing-patterns, tdd-workflow, webapp-testing           |
+| `debugger`               | Root cause analysis        | systematic-debugging                                     |
+| `performance-optimizer`  | Speed, Web Vitals          | performance-profiling                                    |
+| `seo-specialist`         | Ranking, visibility        | seo-fundamentals, geo-fundamentals                       |
+| `documentation-writer`   | Manuals, docs              | documentation-templates                                  |
+| `product-manager`        | Requirements, user stories | plan-writing, brainstorming                              |
+| `product-owner`          | Strategy, backlog, MVP     | plan-writing, brainstorming                              |
+| `qa-automation-engineer` | E2E testing, CI pipelines  | webapp-testing, testing-patterns                         |
+| `code-archaeologist`     | Legacy code, refactoring   | clean-code, code-review-checklist                        |
+| `explorer-agent`         | Codebase analysis          | -                                                        |
+
+---
+
+## 🧩 Skills (36)
+
+Modular knowledge domains that agents can load on-demand. based on task context.
+
+### Frontend & UI
+
+| Skill                   | Description                                                           |
+| ----------------------- | --------------------------------------------------------------------- |
+| `react-best-practices`  | React & Next.js performance optimization (Vercel - 57 rules)          |
+| `web-design-guidelines` | Web UI audit - 100+ rules for accessibility, UX, performance (Vercel) |
+| `tailwind-patterns`     | Tailwind CSS v4 utilities                                             |
+| `frontend-design`       | UI/UX patterns, design systems                                        |
+| `ui-ux-pro-max`         | 50 styles, 21 palettes, 50 fonts                                      |
+
+### Backend & API
+
+| Skill                   | Description                    |
+| ----------------------- | ------------------------------ |
+| `api-patterns`          | REST, GraphQL, tRPC            |
+| `nestjs-expert`         | NestJS modules, DI, decorators |
+| `nodejs-best-practices` | Node.js async, modules         |
+| `python-patterns`       | Python standards, FastAPI      |
+
+### Database
+
+| Skill             | Description                 |
+| ----------------- | --------------------------- |
+| `database-design` | Schema design, optimization |
+| `prisma-expert`   | Prisma ORM, migrations      |
+
+### TypeScript/JavaScript
+
+| Skill               | Description                         |
+| ------------------- | ----------------------------------- |
+| `typescript-expert` | Type-level programming, performance |
+
+### Cloud & Infrastructure
+
+| Skill                   | Description               |
+| ----------------------- | ------------------------- |
+| `docker-expert`         | Containerization, Compose |
+| `deployment-procedures` | CI/CD, deploy workflows   |
+| `server-management`     | Infrastructure management |
+
+### Testing & Quality
+
+| Skill                   | Description              |
+| ----------------------- | ------------------------ |
+| `testing-patterns`      | Jest, Vitest, strategies |
+| `webapp-testing`        | E2E, Playwright          |
+| `tdd-workflow`          | Test-driven development  |
+| `code-review-checklist` | Code review standards    |
+| `lint-and-validate`     | Linting, validation      |
+
+### Security
+
+| Skill                   | Description              |
+| ----------------------- | ------------------------ |
+| `vulnerability-scanner` | Security auditing, OWASP |
+| `red-team-tactics`      | Offensive security       |
+
+### Architecture & Planning
+
+| Skill           | Description                |
+| --------------- | -------------------------- |
+| `app-builder`   | Full-stack app scaffolding |
+| `architecture`  | System design patterns     |
+| `plan-writing`  | Task planning, breakdown   |
+| `brainstorming` | Socratic questioning       |
+
+### Mobile
+
+| Skill           | Description           |
+| --------------- | --------------------- |
+| `mobile-design` | Mobile UI/UX patterns |
+
+### Game Development
+
+| Skill              | Description           |
+| ------------------ | --------------------- |
+| `game-development` | Game logic, mechanics |
+
+### SEO & Growth
+
+| Skill              | Description                   |
+| ------------------ | ----------------------------- |
+| `seo-fundamentals` | SEO, E-E-A-T, Core Web Vitals |
+| `geo-fundamentals` | GenAI optimization            |
+
+### Shell/CLI
+
+| Skill                | Description               |
+| -------------------- | ------------------------- |
+| `bash-linux`         | Linux commands, scripting |
+| `powershell-windows` | Windows PowerShell        |
+
+### Other
+
+| Skill                     | Description               |
+| ------------------------- | ------------------------- |
+| `clean-code`              | Coding standards (Global) |
+| `behavioral-modes`        | Agent personas            |
+| `parallel-agents`         | Multi-agent patterns      |
+| `mcp-builder`             | Model Context Protocol    |
+| `documentation-templates` | Doc formats               |
+| `i18n-localization`       | Internationalization      |
+| `performance-profiling`   | Web Vitals, optimization  |
+| `systematic-debugging`    | Troubleshooting           |
+
+---
+
+## 🔄 Workflows (11)
+
+Slash command procedures. Invoke with `/command`.
+
+| Command          | Description              |
+| ---------------- | ------------------------ |
+| `/brainstorm`    | Socratic discovery       |
+| `/create`        | Create new features      |
+| `/debug`         | Debug issues             |
+| `/deploy`        | Deploy application       |
+| `/enhance`       | Improve existing code    |
+| `/orchestrate`   | Multi-agent coordination |
+| `/plan`          | Task breakdown           |
+| `/preview`       | Preview changes          |
+| `/status`        | Check project status     |
+| `/test`          | Run tests                |
+| `/ui-ux-pro-max` | Design with 50 styles    |
+
+---
+
+## 🎯 Skill Loading Protocol
+
+```plaintext
+User Request → Skill Description Match → Load SKILL.md
+                                            ↓
+                                    Read references/
+                                            ↓
+                                    Read scripts/
+```
+
+### Skill Structure
+
+```plaintext
+skill-name/
+├── SKILL.md           # (Required) Metadata & instructions
+├── scripts/           # (Optional) Python/Bash scripts
+├── references/        # (Optional) Templates, docs
+└── assets/            # (Optional) Images, logos
+```
+
+### Enhanced Skills (with scripts/references)
+
+| Skill               | Files | Coverage                            |
+| ------------------- | ----- | ----------------------------------- |
+| `ui-ux-pro-max`     | 27    | 50 styles, 21 palettes, 50 fonts    |
+| `app-builder`       | 20    | Full-stack scaffolding              |
+
+---
+
+## � Scripts (2)
+
+Master validation scripts that orchestrate skill-level scripts.
+
+### Master Scripts
+
+| Script          | Purpose                                 | When to Use              |
+| --------------- | --------------------------------------- | ------------------------ |
+| `checklist.py`  | Priority-based validation (Core checks) | Development, pre-commit  |
+| `verify_all.py` | Comprehensive verification (All checks) | Pre-deployment, releases |
+
+### Usage
+
+```bash
+# Quick validation during development
+python .agent/scripts/checklist.py .
+
+# Full verification before deployment
+python .agent/scripts/verify_all.py . --url http://localhost:3000
+```
+
+### What They Check
+
+**checklist.py** (Core checks):
+
+- Security (vulnerabilities, secrets)
+- Code Quality (lint, types)
+- Schema Validation
+- Test Suite
+- UX Audit
+- SEO Check
+
+**verify_all.py** (Full suite):
+
+- Everything in checklist.py PLUS:
+- Lighthouse (Core Web Vitals)
+- Playwright E2E
+- Bundle Analysis
+- Mobile Audit
+- i18n Check
+
+For details, see [scripts/README.md](scripts/README.md)
+
+---
+
+## 📊 Statistics
+
+| Metric              | Value                         |
+| ------------------- | ----------------------------- |
+| **Total Agents**    | 20                            |
+| **Total Skills**    | 36                            |
+| **Total Workflows** | 11                            |
+| **Total Scripts**   | 2 (master) + 18 (skill-level) |
+| **Coverage**        | ~90% web/mobile development   |
+
+---
+
+## 🔗 Quick Reference
+
+| Need     | Agent                 | Skills                                |
+| -------- | --------------------- | ------------------------------------- |
+| Web App  | `frontend-specialist` | react-best-practices, frontend-design |
+| API      | `backend-specialist`  | api-patterns, nodejs-best-practices   |
+| Mobile   | `mobile-developer`    | mobile-design                         |
+| Database | `database-architect`  | database-design, prisma-expert        |
+| Security | `security-auditor`    | vulnerability-scanner                 |
+| Testing  | `test-engineer`       | testing-patterns, webapp-testing      |
+| Debug    | `debugger`            | systematic-debugging                  |
+| Plan     | `project-planner`     | brainstorming, plan-writing           |

package/template/.agent/knowledge/orchestrator_v3_protocol.md

@@ -0,0 +1,60 @@
+# 🧠 Giao Thức Quản Đốc Vô Song (Orchestrator V3 Protocol)
+
+Bản thảo này đúc kết toàn bộ kinh nghiệm "xương máu" khi nâng cấp Antigravity Orchestrator lên phiên bản V3 - Một hệ thống nổ máy tự động, có tư duy chiến lược và quyền năng can thiệp trực tiếp vào IDE (God Mode).
+
+---
+
+## 1. Hệ Tư Duy Chiến Lược (Strategic Prompting)
+
+Đối với các Model tầm trung (8B - 14B), để tránh việc chúng bị "ngáo quyền năng" hoặc nhại lời Sếp, cần áp dụng cấu trúc Prompt JSON-First sau:
+
+### Quy tắc Vô Song:
+- **Trường `strategy`**: Ép Model phải giải trình chiến lược TRƯỚC khi đưa ra câu trả lời. Điều này giúp AI tự kiểm tra logic của chính mình.
+- **Cây Quyết Định (Decision Tree)**:
+    1. Câu hỏi kiến thức/xã hội -> `reply_user`.
+    2. Task nhẹ/quét file -> `execute_task` (Sandbox).
+    3. Task nặng/sửa code dự án -> `telepathy_inject` (IDE).
+
+### Prompt Mẫu (System Prompt):
+```markdown
+Bạn là QUẢN ĐỐC - AI Manager của Sếp Tạo.
+Phong thái: Thực quyền, chuyên nghiệp, không nhại lời Sếp.
+Tuyệt đối không xưng tên là Antigravity. Bạn là Quản Đốc của Antigravity.
+... [Cây quyết định] ...
+```
+
+---
+
+## 2. Cầu Nối Thần Giao Cách Cảm (Telepathy Bridge)
+
+Đây là quyền năng cho phép Orchestrator (chạy trong terminal/telegram) điều khiển trực tiếp IDE Antigravity (GUI) đang mở trên máy Sếp qua giao thức CDP.
+
+### Cấu hình Cổng Cố định (Fixed Port Protocol):
+Để tránh xung đột khi mở nhiều dự án, hãy áp dụng dải cổng chuẩn:
+- **Dự án chính**: Port 9222.
+- **Dự án phụ 1, 2, 3...**: Port 9223, 9224... 
+- **Quản Đốc**: Sẽ tự động quét từ 9222 -> 9230 để tìm đúng IDE dựa trên đường dẫn dự án (`target_path`).
+
+### Lệnh khởi động God Mode:
+Sử dụng tham số `--remote-debugging-port=9222` khi mở Antigravity.
+
+---
+
+## 3. Bộ Khởi Động Một Chạm (The telepathy.sh Standard)
+
+Để Sếp không phải nhớ lệnh terminal, mọi dự án Antigravity nên có file `telepathy.sh` với nội dung:
+- Kiểm tra cổng bận (tránh mở trùng).
+- Tự động chọn "No" khi hỏi Overwrite `.agent`.
+- Chạy ngầm (`nohup` + `& disown`) để tắt terminal mà IDE vẫn sống.
+
+---
+
+## 4. Tự Phẫu Thuật Code (Self-Healing IDE)
+
+Khi Quản Đốc dùng `telepathy_inject`, nó sẽ "bơm" trực tiếp Payload vào Chat Box của IDE. 
+- **Ưu điểm**: Sử dụng được toàn bộ sức mạnh của "Mắt Thần" (AutoAccept) trong IDE để sửa code mà không cần Sếp duyệt từng dòng.
+- **Lưu ý**: Sau khi bơm lệnh, Quản Đốc cần dùng lệnh `bash` (git status, rgrep) để kiểm tra xem IDE đã hoàn thành công việc chưa trước khi báo cáo Sếp.
+
+---
+
+*Cập nhật lần cuối: 24/03/2026 bởi Antigravity (Quản Đốc Vô Song)*

package/template/.agent/knowledge/self_healing_logs.md

@@ -0,0 +1,22 @@
+
+## [2026-03-23T15:14:48.328Z] 🚨 Lịch Sử Tự Phẫu Thuật (Self-Heal)
+- **Bác sĩ Trực:** hf.co/bartowski/nvidia_Orchestrator-8B-GGUF:Q4_K_M
+- **Nạn nhân:** `BrokenMathTool.ts`
+- **Thông báo Bệnh (Triệu chứng):**
+```
+TypeError: FATAL EXHAUSTION: Cannot add numbers because the quantum capacitor is uncalibrated, and the math core structure is completely broken and fundamentally flawed.
+    at Function.add (/home/tao/Projects/ag-orchestrator/src/tools/BrokenMathTool.ts:7:11)
+    at runTest (/home/tao/Projects/ag-orchestrator/scripts/test_mini_antigravity.ts:12:35)
+```
+- **Kết quả:** Code đột biến vượt qua Sandbox, Hot-Reload thành công, đã lưu Git Backup.
+
+## [2026-03-23T15:22:20.904Z] 🚨 Lịch Sử Tự Phẫu Thuật (Self-Heal)
+- **Bác sĩ Trực:** hf.co/bartowski/nvidia_Orchestrator-8B-GGUF:Q4_K_M
+- **Nạn nhân:** `BrokenMathTool.ts`
+- **Thông báo Bệnh (Triệu chứng):**
+```
+TypeError: FATAL CRASH: I forgot how to add numbers. The system structure is damaged.
+    at Function.add (/home/tao/Projects/ag-orchestrator/src/tools/BrokenMathTool.ts:3:11)
+    at runTest (/home/tao/Projects/ag-orchestrator/scripts/test_mini_antigravity.ts:12:35)
+```
+- **Kết quả:** Code đột biến vượt qua Sandbox, Hot-Reload thành công, đã lưu Git Backup.

package/template/.agent/mcp_config.json

@@ -0,0 +1,24 @@
+{
+    "mcpServers": {
+        "context7": {
+            "command": "npx",
+            "args": [
+                "-y",
+                "@upstash/context7-mcp",
+                "--api-key",
+                "YOUR_API_KEY"
+            ]
+        },
+        "shadcn": {
+            "command": "npx",
+            "args": [
+                "shadcn@latest",
+                "mcp"
+            ]
+        }
+        //other mcp servers
+    }
+}
+
+// setup mcp server in  ~/.gemini\antigravity\mcp_config.json
+

package/template/.agent/rules/GEMINI.md

@@ -268,7 +268,7 @@ If your code changes affect the architecture, data flow, API payloads, or core l
 ### Agents & Skills
 
 - **Masters**: `orchestrator`, `project-planner`, `security-auditor` (Cyber/Audit), `backend-specialist` (API/DB), `frontend-specialist` (UI/UX), `mobile-developer`, `debugger`, `game-developer`
-- **Key Skills**: `clean-code`, `brainstorming`, `app-builder`, `frontend-design`, `mobile-design`, `plan-writing`, `behavioral-modes`, `knowledge-management`, `regent-orchestrator`, `telegram-bridge`
+- **Key Skills**: `clean-code`, `brainstorming`, `app-builder`, `frontend-design`, `mobile-design`, `plan-writing`, `behavioral-modes`, `knowledge-management`
 
 ### Key Scripts
 

package/template/.agent/skills/nextjs-react-expert/9-cache-components.md

@@ -0,0 +1,103 @@
+# Cache Components: `use cache` & `cacheLife`
+
+> [!IMPORTANT]
+> This is a Next.js 16+ specific skill. Do NOT apply these patterns to Next.js 15 or earlier without explicitly checking compatibility.
+
+## Core Philosophy
+Next.js 16 marks the transition from "Segment-level caching" to "Component-level caching". We no longer rely on `export const revalidate = 3600`. Instead, we use granular directives and profiles.
+
+## 1. The `use cache` Directive
+The `use cache` directive can be applied to **Server Components** or **Functions**.
+
+### Rule: Granular Application
+Wrap only the data-fetching logic or the specific component that needs caching.
+
+```tsx
+// Good: Granular function caching
+async function getProduct(id: string) {
+  'use cache'
+  return await db.product.findUnique({ where: { id } })
+}
+
+// Good: Component-level caching
+export default async function ProductCard({ id }: { id: string }) {
+  'use cache'
+  const product = await getProduct(id)
+  return <div>{product.name}</div>
+}
+```
+
+## 2. Using `cacheLife`
+`cacheLife` defines the "Freshness" and "Staleness" of a cached item using pre-defined or custom profiles.
+
+### Usage Pattern
+```tsx
+import { cacheLife } from 'next/cache'
+
+async function getStockInfo() {
+  'use cache'
+  cacheLife('minutes') // Using a pre-defined profile
+  return await fetchStocks()
+}
+```
+
+### Profile Reference
+- `default`: Base profile (1 year stale time).
+- `seconds`: High-frequency updates.
+- `minutes`: Standard dynamic content.
+- `hours`: Stable content (e.g., blog posts).
+- `days`: Semi-static content.
+- `weeks`: Static-like content.
+- `max`: Permanent cache until invalidated.
+
+## 3. On-Demand Invalidation with `cacheTag`
+`cacheTag` allows you to label cached data for selective purging.
+
+### Implementation
+```tsx
+import { cacheTag } from 'next/cache'
+
+async function getProfile(user: string) {
+  'use cache'
+  cacheTag(`profile-${user}`)
+  return await db.user.findUnique(...)
+}
+```
+
+### Revalidation
+In a Server Action:
+```tsx
+import { revalidateTag, updateTag } from 'next/cache'
+
+export async function updateProfile(user: string, data: any) {
+  await db.user.update(...)
+  
+  // Choice A: Background revalidation (Stale-While-Revalidate)
+  revalidateTag(`profile-${user}`)
+  
+  // Choice B: Immediate "Read-Your-Writes" update
+  updateTag(`profile-${user}`)
+}
+```
+
+## 4. Partial Pre-Rendering (PPR)
+Next.js 16 stabilizes PPR via the `cacheComponents` flag in `next.config.ts`. 
+
+### Pattern: Suspense Boundaries
+Always wrap dynamic "Cache Components" in `<Suspense>` to enable PPR.
+
+```tsx
+import { Suspense } from 'react'
+import { Skeleton } from '@/components/ui/skeleton'
+
+export default function Page() {
+  return (
+    <main>
+      <h1>Static Header</h1>
+      <Suspense fallback={<Skeleton />}>
+        <DynamicCacheComponent />
+      </Suspense>
+    </main>
+  )
+}
+```