@iamnishankhan/opencode-kit-grok 1.0.0

package/kit/.opencode/skills/design-spec/collection.md

@@ -0,0 +1,106 @@
+## Collection
+
+### AI & LLM Platforms
+
+- [**Claude**](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/claude/DESIGN.md) - Anthropic's AI assistant. Warm terracotta accent, clean editorial layout
+- [**Cohere**](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/cohere/DESIGN.md) - Enterprise AI platform. Vibrant gradients, data-rich dashboard aesthetic
+- [**ElevenLabs**](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/elevenlabs/DESIGN.md) - AI voice platform. Dark cinematic UI, audio-waveform aesthetics
+- [**Minimax**](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/minimax/DESIGN.md) - AI model provider. Bold dark interface with neon accents
+- [**Mistral AI**](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/mistral.ai/DESIGN.md) - Open-weight LLM provider. French-engineered minimalism, purple-toned
+- [**Ollama**](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/ollama/DESIGN.md) - Run LLMs locally. Terminal-first, monochrome simplicity
+- [**OpenCode AI**](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/opencode.ai/DESIGN.md) - AI coding platform. Developer-centric dark theme
+- [**Replicate**](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/replicate/DESIGN.md) - Run ML models via API. Clean white canvas, code-forward
+- [**Runway**](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/runwayml/DESIGN.md) - AI creative-tools platform with an editorial film-festival aesthetic — cinematic dark heroes, paper-white reading bands, single proprietary sans, and pure black pill CTAs.
+- [**Together AI**](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/together.ai/DESIGN.md) - Open-source AI infrastructure. Technical, blueprint-style design
+- [**VoltAgent**](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/voltagent/DESIGN.md) - AI agent framework. Void-black canvas, emerald accent, terminal-native
+- [**xAI**](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/x.ai/DESIGN.md) - Elon Musk's AI lab. Stark monochrome, futuristic minimalism
+
+### Developer Tools & IDEs
+
+- [**Cursor**](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/cursor/DESIGN.md) - AI-first code editor. Sleek dark interface, gradient accents
+- [**Expo**](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/expo/DESIGN.md) - React Native platform. Dark theme, tight letter-spacing, code-centric
+- [**Lovable**](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/lovable/DESIGN.md) - AI full-stack builder. Playful gradients, friendly dev aesthetic
+- [**Raycast**](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/raycast/DESIGN.md) - Productivity launcher. Sleek dark chrome, vibrant gradient accents
+- [**Superhuman**](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/superhuman/DESIGN.md) - Fast email client. Premium dark UI, keyboard-first, purple glow
+- [**Vercel**](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/vercel/DESIGN.md) - Frontend deployment platform. Black and white precision, Geist font
+- [**Warp**](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/warp/DESIGN.md) - Modern terminal. Dark IDE-like interface, block-based command UI
+
+### Backend, Database & DevOps
+
+- [**ClickHouse**](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/clickhouse/DESIGN.md) - Fast analytics database. Yellow-accented, technical documentation style
+- [**Composio**](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/composio/DESIGN.md) - Tool integration platform. Modern dark with colorful integration icons
+- [**HashiCorp**](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/hashicorp/DESIGN.md) - Infrastructure automation. Enterprise-clean, black and white
+- [**MongoDB**](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/mongodb/DESIGN.md) - Document database. Green leaf branding, developer documentation focus
+- [**PostHog**](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/posthog/DESIGN.md) - Product analytics. Playful hedgehog branding, developer-friendly dark UI
+- [**Sanity**](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/sanity/DESIGN.md) - Headless content platform with a dark-first editorial marketing surface — 112px display type, IBM Plex Mono technical eyebrows, and a single coral-red accent reserved for the highest-priority CTA.
+- [**Sentry**](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/sentry/DESIGN.md) - Error monitoring. Dark dashboard, data-dense, pink-purple accent
+- [**Supabase**](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/supabase/DESIGN.md) - Open-source Firebase alternative. Dark emerald theme, code-first
+
+### Productivity & SaaS
+
+- [**Cal.com**](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/cal/DESIGN.md) - Open-source scheduling. Clean neutral UI, developer-oriented simplicity
+- [**Intercom**](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/intercom/DESIGN.md) - Customer messaging. Friendly blue palette, conversational UI patterns
+- [**Linear**](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/linear.app/DESIGN.md) - Project management for engineers. Ultra-minimal, precise, purple accent
+- [**Mintlify**](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/mintlify/DESIGN.md) - Documentation platform. Clean, green-accented, reading-optimized
+- [**Notion**](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/notion/DESIGN.md) - All-in-one workspace. Warm minimalism, serif headings, soft surfaces
+- [**Resend**](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/resend/DESIGN.md) - Email API for developers. Minimal dark theme, monospace accents
+- [**Zapier**](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/zapier/DESIGN.md) - Automation platform. Warm orange, friendly illustration-driven
+
+### Design & Creative Tools
+
+- [**Airtable**](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/airtable/DESIGN.md) - Spreadsheet-database hybrid. Colorful, friendly, structured data aesthetic
+- [**Clay**](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/clay/DESIGN.md) - Creative agency. Organic shapes, soft gradients, art-directed layout
+- [**Figma**](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/figma/DESIGN.md) - Collaborative design tool. Vibrant multi-color, playful yet professional
+- [**Framer**](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/framer/DESIGN.md) - Website builder. Bold black and blue, motion-first, design-forward
+- [**Miro**](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/miro/DESIGN.md) - Visual collaboration. Bright yellow accent, infinite canvas aesthetic
+- [**Webflow**](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/webflow/DESIGN.md) - Visual web builder. Blue-accented, polished marketing site aesthetic
+
+### Fintech & Crypto
+
+- [**Binance**](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/binance/DESIGN.md) - Crypto exchange. Bold Binance Yellow on monochrome, trading-floor urgency
+- [**Coinbase**](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/coinbase/DESIGN.md) - Crypto exchange. Clean blue identity, trust-focused, institutional feel
+- [**Kraken**](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/kraken/DESIGN.md) - Crypto trading platform. Purple-accented dark UI, data-dense dashboards
+- [**Mastercard**](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/mastercard/DESIGN.md) - Global payments network. Warm cream canvas, orbital pill shapes, editorial warmth
+- [**Revolut**](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/revolut/DESIGN.md) - Digital banking. Sleek dark interface, gradient cards, fintech precision
+- [**Stripe**](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/stripe/DESIGN.md) - Payment infrastructure. Signature purple gradients, weight-300 elegance
+- [**Wise**](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/wise/DESIGN.md) - International money transfer. Bright green accent, friendly and clear
+
+### E-commerce & Retail
+
+- [**Airbnb**](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/airbnb/DESIGN.md) - Travel marketplace. Warm coral accent, photography-driven, rounded UI
+- [**Meta**](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/meta/DESIGN.md) - Tech retail store. Photography-first, binary light/dark surfaces, Meta Blue CTAs
+- [**Nike**](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/nike/DESIGN.md) - Athletic retail. Monochrome UI, massive uppercase Futura, full-bleed photography
+- [**Shopify**](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/shopify/DESIGN.md) - E-commerce platform. Dark-first cinematic, neon green accent, ultra-light display type
+- [**Starbucks**](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/starbucks/DESIGN.md) - Coffee retail flagship. Four-tier earth-green system, warm cream canvas, proprietary SoDoSans typography
+
+### Media & Consumer Tech
+
+- [**Apple**](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/apple/DESIGN.md) - Consumer electronics. Premium white space, SF Pro, cinematic imagery
+- [**HP**](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/hp/DESIGN.md) - PC and printer maker. Pure white canvas, HP Electric Blue signal CTA, geometric Forma DJR Micro, blue chevron decorations
+- [**IBM**](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/ibm/DESIGN.md) - Enterprise technology. Carbon design system, structured blue palette
+- [**NVIDIA**](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/nvidia/DESIGN.md) - GPU computing. Green-black energy, technical power aesthetic
+- [**Pinterest**](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/pinterest/DESIGN.md) - Visual discovery platform. Red accent, masonry grid, image-first
+- [**PlayStation**](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/playstation/DESIGN.md) - Gaming console retail. Three-surface channel layout, cyan hover-scale interaction
+- [**SpaceX**](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/spacex/DESIGN.md) - Space technology. Stark black and white, full-bleed imagery, futuristic
+- [**Spotify**](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/spotify/DESIGN.md) - Music streaming. Vibrant green on dark, bold type, album-art-driven
+- [**The Verge**](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/theverge/DESIGN.md) - Tech editorial media. Acid-mint and ultraviolet accents, Manuka display type
+- [**Uber**](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/uber/DESIGN.md) - Mobility platform. Bold black and white, tight type, urban energy
+- [**Vodafone**](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/vodafone/DESIGN.md) - Global telecom brand. Monumental uppercase display, Vodafone Red chapter bands
+- [**WIRED**](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/wired/DESIGN.md) - Tech magazine. Paper-white broadsheet density, custom serif, ink-blue links
+
+### Automotive
+
+- [**BMW**](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/bmw/DESIGN.md) - Luxury automotive. Dark premium surfaces, precise German engineering aesthetic
+- [**BMW M**](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/bmw-m/DESIGN.md) - Performance automotive. Motorsport-inspired contrast, M color accents, precision-driven layout
+- [**Bugatti**](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/bugatti/DESIGN.md) - Luxury hypercar. Cinema-black canvas, monochrome austerity, monumental display type
+- [**Ferrari**](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/ferrari/DESIGN.md) - Luxury automotive. Chiaroscuro black-white editorial, Ferrari Red with extreme sparseness
+- [**Lamborghini**](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/lamborghini/DESIGN.md) - Luxury automotive. True black cathedral, gold accent, LamboType custom Neo-Grotesk
+- [**Renault**](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/renault/DESIGN.md) - French automotive. Vivid aurora gradients, NouvelR proprietary typeface, zero-radius buttons
+- [**Tesla**](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/tesla/DESIGN.md) - Electric vehicles. Radical subtraction, cinematic full-viewport photography, Universal Sans
+
+### Retro Web · DESIGN.md Nostalgia
+
+A Saturday series — DESIGN.md files extracted from the web of the 1990s. Drop one in and tell your AI agent to build a period-accurate vintage UI.
+
+- [**Dell (1996)**](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/dell-1996/DESIGN.md) - Catalog-era enterprise web. Literal black page frame, flat color-block "ribbon cards", chunky Helvetica-Black titles over Times Roman body, and hand-cut GIF stickers (NEW! bursts, award seals, beveled product photos).
+- [**Nintendo.com (2001)**](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/nintendo-2001/DESIGN.md) - Y2K "console chrome" web. Brushed-periwinkle beveled metal panels, a halftone-dotted carbon nav glowing amber, outlined Arial-Black box-art wordmarks over circuit-board hero fields, and a pixel Mario welcome bubble.

package/kit/.opencode/skills/documentation-templates/SKILL.md

@@ -0,0 +1,196 @@
+---
+name: documentation-templates
+description: Documentation templates and structure guidelines. README, API docs, code comments, and AI-friendly documentation.
+compatibility: opencode
+metadata:
+  when_to_use: "\"When writing README files, API documentation, code comments, or generating AI-friendly documentation.\""
+  version: "1.0.0"
+---
+# Documentation Templates
+
+> Templates and structure guidelines for common documentation types.
+
+---
+
+## 1. README Structure
+
+### Essential Sections (Priority Order)
+
+| Section | Purpose |
+|---------|---------|
+| **Title + One-liner** | What is this? |
+| **Quick Start** | Running in <5 min |
+| **Features** | What can I do? |
+| **Configuration** | How to customize |
+| **API Reference** | Link to detailed docs |
+| **Contributing** | How to help |
+| **License** | Legal |
+
+### README Template
+
+```markdown
+# Project Name
+
+Brief one-line description.
+
+## Quick Start
+
+[Minimum steps to run]
+
+## Features
+
+- Feature 1
+- Feature 2
+
+## Configuration
+
+| Variable | Description | Default |
+|----------|-------------|---------|
+| PORT | Server port | 3000 |
+
+## Documentation
+
+- [API Reference](./docs/api.md)
+- [Architecture](./docs/architecture.md)
+
+## License
+
+MIT
+```
+
+---
+
+## 2. API Documentation Structure
+
+### Per-Endpoint Template
+
+```markdown
+## GET /users/:id
+
+Get a user by ID.
+
+**Parameters:**
+| Name | Type | Required | Description |
+|------|------|----------|-------------|
+| id | string | Yes | User ID |
+
+**Response:**
+- 200: User object
+- 404: User not found
+
+**Example:**
+[Request and response example]
+```
+
+---
+
+## 3. Code Comment Guidelines
+
+### JSDoc/TSDoc Template
+
+```typescript
+/**
+ * Brief description of what the function does.
+ * 
+ * @param paramName - Description of parameter
+ * @returns Description of return value
+ * @throws ErrorType - When this error occurs
+ * 
+ * @example
+ * const result = functionName(input);
+ */
+```
+
+### When to Comment
+
+| ✅ Comment | ❌ Don't Comment |
+|-----------|-----------------|
+| Why (business logic) | What (obvious) |
+| Complex algorithms | Every line |
+| Non-obvious behavior | Self-explanatory code |
+| API contracts | Implementation details |
+
+---
+
+## 4. Changelog Template (Keep a Changelog)
+
+```markdown
+# Changelog
+
+## [Unreleased]
+### Added
+- New feature
+
+## [1.0.0] - 2025-01-01
+### Added
+- Initial release
+### Changed
+- Updated dependency
+### Fixed
+- Bug fix
+```
+
+---
+
+## 5. Architecture Decision Record (ADR)
+
+```markdown
+# ADR-001: [Title]
+
+## Status
+Accepted / Deprecated / Superseded
+
+## Context
+Why are we making this decision?
+
+## Decision
+What did we decide?
+
+## Consequences
+What are the trade-offs?
+```
+
+---
+
+## 6. AI-Friendly Documentation
+
+### llms.txt Template
+
+For AI crawlers and agents:
+
+```markdown
+# Project Name
+> One-line objective.
+
+## Core Files
+- [src/index.ts]: Main entry
+- [src/api/]: API routes
+- [docs/]: Documentation
+
+## Key Concepts
+- Concept 1: Brief explanation
+- Concept 2: Brief explanation
+```
+
+### MCP-Ready Documentation
+
+For RAG indexing:
+- Clear H1-H3 hierarchy
+- JSON/YAML examples for data structures
+- Mermaid diagrams for flows
+- Self-contained sections
+
+---
+
+## 7. Structure Principles
+
+| Principle | Why |
+|-----------|-----|
+| **Scannable** | Headers, lists, tables |
+| **Examples first** | Show, don't just tell |
+| **Progressive detail** | Simple → Complex |
+| **Up to date** | Outdated = misleading |
+
+---
+
+> **Remember:** Templates are starting points. Adapt to your project's needs.

package/kit/.opencode/skills/frontend-architecture/SKILL.md

@@ -0,0 +1,245 @@
+---
+name: frontend-architecture
+description: How to organize frontend code — separation of concerns (UI / logic / data / type), file responsibility, state tiers, API services, schema validation, and framework conventions for React/Next and Vue. Structural rules, not visual design.
+compatibility: opencode
+metadata:
+  when_to_use: "\"When structuring a frontend codebase or reviewing how frontend code is organized — where logic, API calls, state, types, and validation should live; component vs hook/composable boundaries; Next.js s"
+  version: "1.0.0"
+---
+# Frontend Architecture
+
+> How to organize frontend code so it scales. Separation of concerns over file-type folders.
+> Applies to React/Next and Vue. For directory layout, follow [app-builder](../app-builder/scaffolding.md). For visual design, see [frontend-design](../frontend-design/SKILL.md). For React/Next performance, see [nextjs-react-expert](../nextjs-react-expert/SKILL.md).
+
+---
+
+## 1. Separation of Concerns — the core rule
+
+Split code into four layers by responsibility. A unit of code does ONE of these, not several:
+
+| Layer | Holds | Lives in |
+|-------|-------|----------|
+| **UI** | Rendering, markup, presentational state | `components/` |
+| **Logic** | State, effects, data transforms, reusable UI logic | `hooks/` (React) · `composables/` (Vue) |
+| **Data** | API calls, fetch/axios, cache keys | `lib/` / service files (`*.api.ts`) |
+| **Type** | TypeScript types, domain models | `types.ts` / `*.types.ts` |
+| **Validation** | Form/data schemas | `*.schema.ts` (zod/yup/valibot) |
+
+> **Directory layout** (top-level folders) follows the project's scaffolding skill — do not invent a competing structure here. This skill is about *which layer code belongs to*, not where the folders sit.
+
+---
+
+## 2. File Responsibility & Size
+
+One clear responsibility per file. Size is a **signal, not a hard limit** — a clear 230-line file beats a 90-line file that fetches, validates, renders, and juggles modals + toasts.
+
+| File type | Comfortable range |
+|-----------|-------------------|
+| UI component | 80–180 lines |
+| Page / screen | 100–220 lines |
+| Hook / composable | 40–150 lines |
+| API service | 50–200 lines |
+| Type / schema | flexible |
+
+Split a file when it mixes UI + API + business logic + validation + state. Don't split a coherent file just to hit a number.
+
+---
+
+## 3. Components render UI; logic goes elsewhere
+
+Components should primarily render. Push fetching/state/transforms into a hook or composable.
+
+```tsx
+// ❌ Component owns the data layer
+function ProductList() {
+  const [products, setProducts] = useState([])
+  useEffect(() => { fetch('/api/products').then(r => r.json()).then(setProducts) }, [])
+  return <div>{/* render */}</div>
+}
+
+// ✅ Component renders; logic lives in a hook
+function ProductList() {
+  const { products, isLoading } = useProducts()
+  if (isLoading) return <Loading />
+  return <div>{/* render */}</div>
+}
+```
+
+- Custom hooks must start with `use`.
+- A component calling an API directly is acceptable only for the smallest one-off cases.
+
+---
+
+## 4. Next.js — Server Components by default
+
+In the App Router, `page.tsx` and `layout.tsx` are Server Components. Reach for `"use client"` only when you actually need the client.
+
+| Server Component | Client Component |
+|------------------|------------------|
+| Fetch data, read DB/API | Form, modal, dropdown |
+| Handle secret tokens | Event handlers, animation |
+| Render static/semi-static layout | `useState`/`useEffect`, browser APIs (`window`, `localStorage`) |
+
+Keep client components small. Don't `"use client"` a whole page for one interactive button — extract the button into its own client component and keep the page a Server Component.
+
+---
+
+## 5. Vue — Composition API + composables
+
+For full production apps, prefer the Composition API with `<script setup>` Single File Components. (Options API is fine for simple cases / progressive enhancement.)
+
+- `components/` → UI
+- `composables/` → reusable pure logic (`useX`)
+- service files → API calls
+
+Use a composable for reusable pure logic; use a component when reusing both logic and layout.
+
+---
+
+## 6. State — start local, escalate only when needed
+
+| Need | Use |
+|------|-----|
+| Component-internal state | `useState` / `ref` |
+| Reusable state/logic in one feature | custom hook / composable |
+| Shared UI state in a subtree | Context (React) / `provide`-`inject` (Vue) |
+| Cross-app, complex, persisted | Zustand / Pinia / Redux |
+| Server state / API cache | TanStack Query (react-query) / similar |
+
+Don't reach for global state (or Redux) on day one of a small app. Server state belongs in a query library, not a global store.
+
+---
+
+## 7. API in service files
+
+Never scatter raw `fetch`/`axios` across components.
+
+```ts
+// user.api.ts
+export async function getUsers() {
+  const res = await http.get('/users')
+  return res.data
+}
+
+// useUsers.ts
+export function useUsers() {
+  return useQuery({ queryKey: ['users'], queryFn: getUsers })
+}
+```
+
+Always handle loading, error, and empty states explicitly.
+
+---
+
+## 8. Forms validate against a schema
+
+Don't inline long validation inside a component.
+
+- React/Next: react-hook-form + zod (or yup)
+- Vue: vee-validate + zod/yup
+
+Keep schemas in `*.schema.ts` next to the form they validate.
+
+---
+
+## 9. Naming
+
+Descriptive, not cryptic. Context from the folder is allowed, but lean explicit.
+
+| Prefer | Avoid |
+|--------|-------|
+| `UserProfileCard.tsx` | `Card.tsx` |
+| `useCreateBooking.ts` | `handle.ts` |
+| `booking.api.ts` | `api.ts` (bare) |
+| `booking.schema.ts` | `data.ts` |
+
+---
+
+## 10. Props
+
+Type props explicitly. When a component takes many related fields, pass the object, not a scatter of primitives.
+
+```tsx
+// ✅
+type ProductCardProps = { product: Product; onSelect?: (p: Product) => void }
+
+// ❌ seven loose props
+<ProductCard id={id} name={name} price={price} image={image} discount={discount} stock={stock} />
+```
+
+---
+
+## 11. Anti "god component"
+
+Split a component when it shows these tells:
+
+- longer than ~200 lines
+- more than ~3 `useEffect`/`watch`
+- many `useState`/`ref`
+- renders UI **and** fetches API
+- many `if/else` business branches
+- multiple modals/tables/forms in one file
+
+Decompose along the page seams:
+
+```
+Page
+ ├─ Header
+ ├─ Filter
+ ├─ Table / List
+ ├─ Pagination
+ └─ Modal / Form
+```
+
+---
+
+## 12. Tailwind class hygiene
+
+- If a `className` runs past ~5–8 logical groups, extract a component.
+- Repeated patterns → a reusable component or variant helper.
+- No complex conditional logic inline in `className` — use `cn()`.
+
+```tsx
+// ✅
+const cardClassName = cn(
+  'rounded-xl border p-4',
+  isActive && 'bg-blue-500 text-white',
+  isError && 'border-red-500',
+)
+```
+
+---
+
+## 13. TypeScript
+
+- Enable `strict: true`.
+- Avoid `any`.
+- Type props, API responses, and domain models explicitly.
+- Prefer union types over enums when a union suffices.
+- Validate external data with schemas (zod) — types alone don't guard runtime input.
+
+---
+
+## 14. Minimum testing
+
+Don't test everything up front; do cover:
+
+- utilities → unit tests
+- important hooks/composables → unit tests
+- main forms → validation tests
+- critical flows → e2e
+
+Colocate (`useBooking.test.ts` next to `useBooking.ts`) or keep `tests/unit` + `tests/e2e` — pick one and stay consistent.
+
+---
+
+## 15. Accessibility floor
+
+- Use `<button>` for actions, not `<div onClick>`.
+- Every input has a label; every image has `alt`.
+- Modals support keyboard escape + focus trap.
+- Forms surface errors clearly.
+
+---
+
+> **Remember:** one file = one responsibility · UI doesn't own logic · logic → hook/composable · API → service · validation → schema · types separate · Next is server-first · Vue is composable-first. Directory structure comes from the scaffolding skill, not from here.