opencodekit 0.21.1 → 0.21.2

package/dist/template/.opencode/plugin/stitch.ts

@@ -1,307 +0,0 @@
-/**
- * Stitch Plugin — Google Stitch UI generation as native OpenCode tools.
- *
- * Replaces the MCP subprocess (`npx @_davideast/stitch-mcp proxy`) with
- * direct HTTP via `@google/stitch-sdk`'s `StitchToolClient`.
- *
- * Tools: stitch_create_project, stitch_get_project, stitch_list_projects,
- *        stitch_list_screens, stitch_get_screen, stitch_generate_screen,
- *        stitch_edit_screens, stitch_generate_variants
- *
- * Auth: Set STITCH_API_KEY env var (API key) or STITCH_ACCESS_TOKEN (OAuth).
- */
-
-import { StitchError, StitchToolClient } from "@google/stitch-sdk";
-import type { Plugin } from "@opencode-ai/plugin";
-import { tool } from "@opencode-ai/plugin/tool";
-
-// ---------------------------------------------------------------------------
-// Shared
-// ---------------------------------------------------------------------------
-
-let client: StitchToolClient | null = null;
-
-const getClient = (): StitchToolClient => {
-	if (!client) {
-		client = new StitchToolClient();
-	}
-	return client;
-};
-
-/** Call a Stitch MCP tool and return the result as a JSON string. */
-const callTool = async (
-	name: string,
-	args: Record<string, unknown>,
-): Promise<string> => {
-	try {
-		const result = await getClient().callTool(name, args);
-		return JSON.stringify(result, null, 2);
-	} catch (err: unknown) {
-		if (err instanceof StitchError) {
-			return JSON.stringify({
-				error: err.code,
-				message: err.message,
-				...(err.suggestion ? { suggestion: err.suggestion } : {}),
-				recoverable: err.recoverable,
-				tool: name,
-			});
-		}
-		return JSON.stringify({
-			error: "UNKNOWN_ERROR",
-			message: err instanceof Error ? err.message : String(err),
-			tool: name,
-		});
-	}
-};
-
-// ---------------------------------------------------------------------------
-// Enums (for agent guidance — not strict validation)
-// ---------------------------------------------------------------------------
-
-const DEVICE_TYPES = [
-	"DEVICE_TYPE_UNSPECIFIED",
-	"MOBILE",
-	"DESKTOP",
-	"TABLET",
-	"AGNOSTIC",
-] as const;
-
-const MODEL_IDS = [
-	"MODEL_ID_UNSPECIFIED",
-	"GEMINI_3_PRO",
-	"GEMINI_3_FLASH",
-] as const;
-
-// ---------------------------------------------------------------------------
-// Plugin
-// ---------------------------------------------------------------------------
-
-export const StitchPlugin: Plugin = async () => {
-	return {
-		tool: {
-			// ---------------------------------------------------------------
-			// Projects
-			// ---------------------------------------------------------------
-
-			stitch_create_project: tool({
-				description:
-					"Create a new Google Stitch project.\n\nOptionally provide a title.",
-				args: {
-					title: tool.schema
-						.string()
-						.optional()
-						.describe("Project title (optional)"),
-				},
-				async execute(args: { title?: string }) {
-					return callTool("create_project", args);
-				},
-			}),
-
-			stitch_get_project: tool({
-				description:
-					"Get details of a Stitch project by resource name.\n\nFormat: projects/{projectId}",
-				args: {
-					name: tool.schema
-						.string()
-						.describe(
-							"Project resource name (e.g. projects/abc123). Required.",
-						),
-				},
-				async execute(args: { name: string }) {
-					return callTool("get_project", args);
-				},
-			}),
-
-			stitch_list_projects: tool({
-				description: "List all Stitch projects. Optionally filter by keyword.",
-				args: {
-					filter: tool.schema
-						.string()
-						.optional()
-						.describe("Filter string (optional)"),
-				},
-				async execute(args: { filter?: string }) {
-					return callTool("list_projects", args);
-				},
-			}),
-
-			// ---------------------------------------------------------------
-			// Screens
-			// ---------------------------------------------------------------
-
-			stitch_list_screens: tool({
-				description:
-					"List all screens in a Stitch project.\n\nRequires projectId.",
-				args: {
-					projectId: tool.schema.string().describe("Project ID. Required."),
-				},
-				async execute(args: { projectId: string }) {
-					return callTool("list_screens", args);
-				},
-			}),
-
-			stitch_get_screen: tool({
-				description:
-					"Get screen details including HTML code.\n\nProvide the screen resource name (format: projects/{projectId}/screens/{screenId}).",
-				args: {
-					name: tool.schema
-						.string()
-						.describe(
-							"Screen resource name (e.g. projects/abc/screens/xyz). Required.",
-						),
-				},
-				async execute(args: { name: string }) {
-					return callTool("get_screen", args);
-				},
-			}),
-
-			// ---------------------------------------------------------------
-			// Generation
-			// ---------------------------------------------------------------
-
-			stitch_generate_screen: tool({
-				description: `Generate a UI screen from a text prompt.
-
-Device types: ${DEVICE_TYPES.join(", ")}
-Model IDs: ${MODEL_IDS.join(", ")}`,
-				args: {
-					projectId: tool.schema.string().describe("Project ID. Required."),
-					prompt: tool.schema
-						.string()
-						.describe("Text description of the UI to generate. Required."),
-					deviceType: tool.schema
-						.string()
-						.optional()
-						.describe(
-							`Device type: ${DEVICE_TYPES.join(" | ")} (default: MOBILE)`,
-						),
-					modelId: tool.schema
-						.string()
-						.optional()
-						.describe(
-							`Model: ${MODEL_IDS.join(" | ")} (default: GEMINI_3_FLASH)`,
-						),
-				},
-				async execute(args: {
-					projectId: string;
-					prompt: string;
-					deviceType?: string;
-					modelId?: string;
-				}) {
-					return callTool("generate_screen_from_text", args);
-				},
-			}),
-
-			stitch_edit_screens: tool({
-				description: `Edit existing screens with a text prompt.
-
-Device types: ${DEVICE_TYPES.join(", ")}
-Model IDs: ${MODEL_IDS.join(", ")}`,
-				args: {
-					projectId: tool.schema.string().describe("Project ID. Required."),
-					selectedScreenIds: tool.schema
-						.array(tool.schema.string())
-						.describe("Screen IDs to edit. Required."),
-					prompt: tool.schema.string().describe("Edit instructions. Required."),
-					deviceType: tool.schema
-						.string()
-						.optional()
-						.describe(
-							`Device type: ${DEVICE_TYPES.join(" | ")} (default: MOBILE)`,
-						),
-					modelId: tool.schema
-						.string()
-						.optional()
-						.describe(
-							`Model: ${MODEL_IDS.join(" | ")} (default: GEMINI_3_FLASH)`,
-						),
-				},
-				async execute(args: {
-					projectId: string;
-					selectedScreenIds: string[];
-					prompt: string;
-					deviceType?: string;
-					modelId?: string;
-				}) {
-					return callTool("edit_screens", args);
-				},
-			}),
-
-			stitch_generate_variants: tool({
-				description: `Generate design variants of existing screens.
-
-variantOptions:
-  - variantCount: number of variants (1-10)
-  - creativeRange: LOW, MEDIUM, HIGH (how different from original)
-  - aspects: optional comma-separated aspects to vary (e.g. "color,layout")
-
-Device types: ${DEVICE_TYPES.join(", ")}
-Model IDs: ${MODEL_IDS.join(", ")}`,
-				args: {
-					projectId: tool.schema.string().describe("Project ID. Required."),
-					selectedScreenIds: tool.schema
-						.array(tool.schema.string())
-						.describe("Screen IDs to create variants of. Required."),
-					prompt: tool.schema
-						.string()
-						.describe("Prompt describing desired variations. Required."),
-					variantCount: tool.schema
-						.number()
-						.optional()
-						.describe("Number of variants to generate (1-10, default: 3)"),
-					creativeRange: tool.schema
-						.string()
-						.optional()
-						.describe("Creative range: LOW | MEDIUM | HIGH (default: MEDIUM)"),
-					aspects: tool.schema
-						.string()
-						.optional()
-						.describe(
-							"Comma-separated aspects to vary (e.g. 'color,layout'). Optional.",
-						),
-					deviceType: tool.schema
-						.string()
-						.optional()
-						.describe(
-							`Device type: ${DEVICE_TYPES.join(" | ")} (default: MOBILE)`,
-						),
-					modelId: tool.schema
-						.string()
-						.optional()
-						.describe(
-							`Model: ${MODEL_IDS.join(" | ")} (default: GEMINI_3_FLASH)`,
-						),
-				},
-				async execute(args: {
-					projectId: string;
-					selectedScreenIds: string[];
-					prompt: string;
-					variantCount?: number;
-					creativeRange?: string;
-					aspects?: string;
-					deviceType?: string;
-					modelId?: string;
-				}) {
-					// Build variantOptions object from flat args
-					const variantOptions: Record<string, unknown> = {};
-					if (args.variantCount != null)
-						variantOptions.variantCount = args.variantCount;
-					if (args.creativeRange)
-						variantOptions.creativeRange = args.creativeRange;
-					if (args.aspects) variantOptions.aspects = args.aspects;
-
-					return callTool("generate_variants", {
-						projectId: args.projectId,
-						selectedScreenIds: args.selectedScreenIds,
-						prompt: args.prompt,
-						variantOptions,
-						...(args.deviceType ? { deviceType: args.deviceType } : {}),
-						...(args.modelId ? { modelId: args.modelId } : {}),
-					});
-				},
-			}),
-		},
-	};
-};
-
-export default StitchPlugin;

package/dist/template/.opencode/skill/stitch/SKILL.md

@@ -1,164 +0,0 @@
----
-name: stitch
-description: Use when generating, editing, or creating variants of UI screens in Google Stitch. MUST load before any stitch_generate_screen or stitch_edit_screens tool calls.
-version: 2.0.0
-tags: [design, ui, stitch]
-dependencies: []
----
-
-# Google Stitch Plugin
-
-## When to Use
-
-- When you need to generate or inspect Google Stitch UI designs.
-
-## When NOT to Use
-
-- When you don't have Stitch access or don't need Stitch-generated UI.
-
-## Overview
-
-Stitch tools are registered as native OpenCode tools via the Stitch plugin (`.opencode/plugin/stitch.ts`), using `@google/stitch-sdk` for direct HTTP to `stitch.googleapis.com/mcp`. No MCP subprocess needed.
-
-## Prerequisites
-
-1. **Google Cloud Project** with Stitch API enabled
-2. **Google Cloud CLI** (`gcloud`) installed and initialized
-3. **Required IAM Roles**:
-   - `roles/serviceusage.serviceUsageAdmin` (to enable the service)
-   - `roles/mcp.toolUser` (to call MCP tools)
-
-## Setup Steps
-
-### 1. Enable Stitch API in Google Cloud
-
-```bash
-gcloud config set project PROJECT_ID
-gcloud beta services mcp enable stitch.googleapis.com --project=PROJECT_ID
-```
-
-### 2. Set Environment Variables
-
-**API Key auth** (recommended):
-
-```bash
-export STITCH_API_KEY="your-api-key"
-```
-
-**Or OAuth auth**:
-
-```bash
-export STITCH_ACCESS_TOKEN=$(gcloud auth print-access-token)
-export GOOGLE_CLOUD_PROJECT="your-project-id"
-```
-
-### 3. Restart OpenCode
-
-Tools are available immediately after env vars are set and OpenCode restarts.
-
-## Available Tools
-
-| Tool                       | Description                          |
-| -------------------------- | ------------------------------------ |
-| `stitch_create_project`    | Create a new Stitch project          |
-| `stitch_get_project`       | Get project details by resource name |
-| `stitch_list_projects`     | List all projects (optional filter)  |
-| `stitch_list_screens`      | List screens in a project            |
-| `stitch_get_screen`        | Get screen details with HTML code    |
-| `stitch_generate_screen`   | Generate UI from text prompt         |
-| `stitch_edit_screens`      | Edit existing screens with a prompt  |
-| `stitch_generate_variants` | Generate design variants of screens  |
-
-## Usage Examples
-
-### List Projects
-
-```typescript
-stitch_list_projects({});
-```
-
-### Create a Project
-
-```typescript
-stitch_create_project({ title: "My E-commerce App" });
-```
-
-### Generate Screen from Text
-
-```typescript
-stitch_generate_screen({
-  projectId: "my-project-123",
-  prompt:
-    "Create a modern login page with email and password fields, social login buttons, and a forgot password link",
-  deviceType: "MOBILE",
-});
-```
-
-### Edit Existing Screens
-
-```typescript
-stitch_edit_screens({
-  projectId: "my-project-123",
-  selectedScreenIds: ["screen-abc"],
-  prompt: "Make the login button larger and change the color scheme to dark mode",
-});
-```
-
-### Generate Design Variants
-
-```typescript
-stitch_generate_variants({
-  projectId: "my-project-123",
-  selectedScreenIds: ["screen-abc"],
-  prompt: "Create variants with different color schemes",
-  variantCount: 3,
-  creativeRange: "MEDIUM",
-});
-```
-
-## Parameters
-
-### Device Types
-
-`DEVICE_TYPE_UNSPECIFIED` | `MOBILE` | `DESKTOP` | `TABLET` | `AGNOSTIC`
-
-### Model IDs
-
-`MODEL_ID_UNSPECIFIED` | `GEMINI_3_PRO` | `GEMINI_3_FLASH`
-
-### Variant Options
-
-- `variantCount`: Number of variants (1-10)
-- `creativeRange`: `LOW` | `MEDIUM` | `HIGH`
-- `aspects`: Comma-separated aspects to vary (e.g. "color,layout")
-
-## Troubleshooting
-
-### "AUTH_FAILED"
-
-```bash
-# API key auth
-export STITCH_API_KEY="your-key"
-
-# Or OAuth (token expires after ~1 hour)
-export STITCH_ACCESS_TOKEN=$(gcloud auth print-access-token)
-```
-
-### "Stitch API not enabled"
-
-```bash
-gcloud beta services mcp enable stitch.googleapis.com --project=YOUR_PROJECT_ID
-```
-
-## Documentation
-
-- [Google Stitch](https://stitch.withgoogle.com)
-- [Stitch SDK](https://github.com/google-labs-code/stitch-sdk)
-- [Stitch MCP Setup](https://stitch.withgoogle.com/docs/mcp/setup)
-
-## Tips
-
-- API key auth is simpler than OAuth (no token refresh)
-- Use descriptive prompts for better UI generation
-- `GEMINI_3_PRO` produces higher quality; `GEMINI_3_FLASH` is faster
-- Test generated code in your target framework before production use

package/dist/template/.opencode/skill/stitch-design-taste/DESIGN.md

@@ -1,121 +0,0 @@
-# Design System: Taste Standard
-**Skill:** stitch-design-taste
-
----
-
-## Configuration — Set Your Style
-Adjust these dials before using this design system. They control how creative, dense, and animated the output should be. Pick the level that fits your project.
-
-| Dial | Level | Description |
-|------|-------|-------------|
-| **Creativity** | `8` | `1` = Ultra-minimal, Swiss, silent, monochrome. `5` = Balanced, clean but with personality. `10` = Expressive, editorial, bold typography experiments, inline images in headlines, strong asymmetry. Default: `8` |
-| **Density** | `4` | `1` = Gallery-airy, massive whitespace. `5` = Balanced sections. `10` = Cockpit-dense, data-heavy. Default: `4` |
-| **Variance** | `8` | `1` = Predictable, symmetric grids. `5` = Subtle offsets. `10` = Artsy chaotic, no two sections alike. Default: `8` |
-| **Motion Intent** | `6` | `1` = Static, no animation noted. `5` = Subtle hover/entrance cues. `10` = Cinematic orchestration noted in every component. Default: `6` |
-
-> **How to use:** Change the numbers above to match your project's vibe. At **Creativity 1–3**, the system produces clean, quiet, Notion-like interfaces. At **Creativity 7–10**, expect inline image typography, dramatic scale contrast, and strong editorial layouts. The rest of the rules below adapt to your chosen levels.
-
----
-
-## 1. Visual Theme & Atmosphere
-A restrained, gallery-airy interface with confident asymmetric layouts and fluid spring-physics motion. The atmosphere is clinical yet warm — like a well-lit architecture studio where every element earns its place through function. Density is balanced (Level 4), variance runs high (Level 8) to prevent symmetrical boredom, and motion is fluid but never theatrical (Level 6). The overall impression: expensive, intentional, alive.
-
-## 2. Color Palette & Roles
-- **Canvas White** (#F9FAFB) — Primary background surface. Warm-neutral, never clinical blue-white
-- **Pure Surface** (#FFFFFF) — Card and container fill. Used with whisper shadow for elevation
-- **Charcoal Ink** (#18181B) — Primary text. Zinc-950 depth — never pure black
-- **Steel Secondary** (#71717A) — Body text, descriptions, metadata. Zinc-500 warmth
-- **Muted Slate** (#94A3B8) — Tertiary text, timestamps, disabled states
-- **Whisper Border** (rgba(226,232,240,0.5)) — Card borders, structural 1px lines. Semi-transparent for depth
-- **Diffused Shadow** (rgba(0,0,0,0.05)) — Card elevation. Wide-spreading, 40px blur, -15px offset. Never harsh
-
-### Accent Selection (Pick ONE per project)
-- **Emerald Signal** (#10B981) — For growth, success, positive data dashboards
-- **Electric Blue** (#3B82F6) — For productivity, SaaS, developer tools
-- **Deep Rose** (#E11D48) — For creative, editorial, fashion-adjacent projects
-- **Amber Warmth** (#F59E0B) — For community, social, warm-toned products
-
-### Banned Colors
-- Purple/Violet neon gradients — the "AI Purple" aesthetic
-- Pure Black (#000000) — always Off-Black or Zinc-950
-- Oversaturated accents above 80% saturation
-- Mixed warm/cool gray systems within one project
-
-## 3. Typography Rules
-- **Display:** `Geist`, `Satoshi`, `Cabinet Grotesk`, or `Outfit` — Track-tight (`-0.025em`), controlled fluid scale, weight-driven hierarchy (700–900). Not screaming. Leading compressed (`1.1`). Alternatives forced — `Inter` is BANNED for premium contexts
-- **Body:** Same family at weight 400 — Relaxed leading (`1.65`), 65ch max-width, Steel Secondary color (#71717A)
-- **Mono:** `Geist Mono` or `JetBrains Mono` — For code blocks, metadata, timestamps. When density exceeds Level 7, all numbers switch to monospace
-- **Scale:** Display at `clamp(2.25rem, 5vw, 3.75rem)`. Body at `1rem/1.125rem`. Mono metadata at `0.8125rem`
-
-### Banned Fonts
-- `Inter` — banned everywhere in premium/creative contexts
-- Generic serif fonts (`Times New Roman`, `Georgia`, `Garamond`, `Palatino`) — BANNED. If serif is needed for editorial/creative, use only distinctive modern serifs like `Fraunces`, `Gambarino`, `Editorial New`, or `Instrument Serif`. Never use default browser serif stacks. Serif is always BANNED in dashboards or software UIs regardless
-
-## 4. Component Stylings
-* **Buttons:** Flat surface, no outer glow. Primary: accent fill with white text. Secondary: ghost/outline. Active state: `-1px translateY` or `scale(0.98)` for tactile push. Hover: subtle background shift, never glow
-* **Cards/Containers:** Generously rounded corners (`2.5rem`). Pure white fill. Whisper border (`1px`, semi-transparent). Diffused shadow (`0 20px 40px -15px rgba(0,0,0,0.05)`). Internal padding `2rem–2.5rem`. Used ONLY when elevation communicates hierarchy — high-density layouts replace cards with `border-top` dividers or negative space
-* **Inputs/Forms:** Label positioned above input. Helper text optional. Error text below in Deep Rose. Focus ring in accent color, `2px` offset. No floating labels. Standard `0.5rem` gap between label-input-error stack
-* **Navigation:** Sleek, sticky. Icons scale on hover (Dock Magnification optional). No hamburger on desktop. Clean horizontal with generous spacing
-* **Loaders:** Skeletal shimmer matching exact layout dimensions and rounded corners. Shifting light reflection across placeholder shapes. Never circular spinners
-* **Empty States:** Composed illustration or icon composition with guidance text. Never just "No data found"
-* **Error States:** Inline, contextual. Red accent underline or border. Clear recovery action
-
-## 5. Hero Section
-The Hero is the first impression — it must be striking, creative, and never generic.
-- **Inline Image Typography:** Embed small, contextual photos or visuals directly between words or letters in the headline. Example: "We build [photo of hands typing] digital [photo of screen] products" — images sit inline at type-height, rounded, acting as visual punctuation between words. This is the signature creative technique
-- **No Overlapping Elements:** Text must never overlap images or other text. Every element has its own clear spatial zone. No z-index stacking of content layers, no absolute-positioned headlines over images. Clean separation always
-- **No Filler Text:** "Scroll to explore", "Swipe down", scroll arrow icons, bouncing chevrons, and any instructional UI chrome are BANNED. The user knows how to scroll. Let the content pull them in naturally
-- **Asymmetric Structure:** Centered Hero layouts are BANNED at this variance level. Use Split Screen (50/50), Left-Aligned text / Right visual, or Asymmetric Whitespace with large empty zones
-- **CTA Restraint:** Maximum one primary CTA button. No secondary "Learn more" links. No redundant micro-copy below the headline
-
-## 6. Layout Principles
-- **Grid-First:** CSS Grid for all structural layouts. Never flexbox percentage math (`calc(33% - 1rem)` is BANNED)
-- **No Overlapping:** Elements must never overlap each other. No absolute-positioned layers stacking content on content. Every element occupies its own grid cell or flow position. Clean, separated spatial zones
-- **Feature Sections:** The "3 equal cards in a row" pattern is BANNED. Use 2-column Zig-Zag, asymmetric Bento grids (2fr 1fr 1fr), or horizontal scroll galleries
-- **Containment:** All content within `max-width: 1400px`, centered. Generous horizontal padding (`1rem` mobile, `2rem` tablet, `4rem` desktop)
-- **Full-Height:** Use `min-height: 100dvh` — never `height: 100vh` (iOS Safari address bar jump)
-- **Bento Architecture:** For feature grids, use Row 1: 3 columns | Row 2: 2 columns (70/30 split). Each tile contains a perpetual micro-animation
-
-## 7. Responsive Rules
-Every screen must work flawlessly across all viewports. **Responsive is not optional — it is a hard requirement. Every single element must be tested at 375px, 768px, and 1440px.**
-- **Mobile-First Collapse (< 768px):** All multi-column layouts collapse to a strict single column. `width: 100%`, `padding: 1rem`, `gap: 1.5rem`. No exceptions
-- **No Horizontal Scroll:** Horizontal overflow on mobile is a critical failure. All elements must fit within viewport width. If any element causes horizontal scroll, the design is broken
-- **Typography Scaling:** Headlines scale down gracefully via `clamp()`. Body text stays `1rem` minimum. Never shrink body below `14px`. Headlines must remain readable on 375px screens
-- **Touch Targets:** All interactive elements minimum `44px` tap target. Generous spacing between clickable items. Buttons must be full-width on mobile
-- **Image Behavior:** Hero and inline images scale proportionally. Inline typography images (photos between words) stack below the headline on mobile instead of inline
-- **Navigation:** Desktop horizontal nav collapses to a clean mobile menu (slide-in or full-screen overlay). No tiny hamburger icons without labels
-- **Cards & Grids:** Bento grids and asymmetric layouts revert to stacked single-column cards with full-width. Maintain internal padding (`1rem`)
-- **Spacing Consistency:** Vertical section gaps reduce proportionally on mobile (`clamp(3rem, 8vw, 6rem)`). Never cramped, never excessively airy
-- **Testing Viewports:** Designs must be verified at: `375px` (iPhone SE), `390px` (iPhone 14), `768px` (iPad), `1024px` (small laptop), `1440px` (desktop)
-
-## 8. Motion & Interaction (Code-Phase Intent)
-> **Note:** Stitch generates static screens — it does not animate. This section documents the **intended motion behavior** so that the coding agent (Antigravity, Cursor, etc.) knows exactly how to implement animations when building the exported design into a live product.
-
-- **Physics Engine:** Spring-based exclusively. `stiffness: 100, damping: 20`. No linear easing anywhere. Premium, weighty feel on all interactive elements
-- **Perpetual Micro-Loops:** Every active dashboard component has an infinite-loop state — Pulse on status dots, Typewriter on search bars, Float on feature icons, Shimmer on loading states
-- **Staggered Orchestration:** Lists and grids mount with cascaded delays (`animation-delay: calc(var(--index) * 100ms)`). Waterfall reveals, never instant mount
-- **Layout Transitions:** Smooth re-ordering via shared element IDs. Items swap positions with physics, simulating real-time intelligence
-- **Hardware Rules:** Animate ONLY `transform` and `opacity`. Never `top`, `left`, `width`, `height`. Grain/noise filters on fixed, pointer-events-none pseudo-elements only
-- **Performance:** CPU-heavy perpetual animations isolated in microscopic leaf components. Never trigger parent re-renders. Target 60fps minimum
-
-## 9. Anti-Patterns (Banned)
-- No emojis — anywhere in UI, code, or alt text
-- No `Inter` font — use `Geist`, `Outfit`, `Cabinet Grotesk`, `Satoshi`
-- No generic serif fonts (`Times New Roman`, `Georgia`, `Garamond`) — if serif is needed, use distinctive modern serifs only (`Fraunces`, `Instrument Serif`)
-- No pure black (`#000000`) — Off-Black or Zinc-950 only
-- No neon outer glows or default box-shadow glows
-- No oversaturated accent colors above 80%
-- No excessive gradient text on large headers
-- No custom mouse cursors
-- No overlapping elements — text never overlaps images or other content. Clean spatial separation always
-- No 3-column equal card layouts for features
-- No centered Hero sections (at this variance level)
-- No filler UI text: "Scroll to explore", "Swipe down", "Discover more below", scroll arrows, bouncing chevrons — all BANNED
-- No generic names: "John Doe", "Sarah Chan", "Acme", "Nexus", "SmartFlow"
-- No fake round numbers: `99.99%`, `50%`, `1234567` — use organic data: `47.2%`, `+1 (312) 847-1928`
-- No AI copywriting clichés: "Elevate", "Seamless", "Unleash", "Next-Gen", "Revolutionize"
-- No broken Unsplash links — use `picsum.photos/seed/{id}/800/600` or SVG UI Avatars
-- No generic `shadcn/ui` defaults — customize radii, colors, shadows to match this system
-- No `z-index` spam — use only for Navbar, Modal, Overlay layer contexts
-- No `h-screen` — always `min-h-[100dvh]`
-- No circular loading spinners — skeletal shimmer only