### Quick Start: Setting up the Next.js Pro Template

Source: https://github.com/wasintoh/toh-framework/blob/main/src/templates/nextjs-pro/README.md

These commands guide you through creating a new Next.js project, copying the template files, installing necessary dependencies (Zustand, Supabase, Zod, React Hook Form), integrating shadcn/ui components, and starting the development server.

```bash
npx create-next-app@latest my-app --typescript --tailwind --eslint --app --src-dir=false
cp -r ~/.claude/templates/nextjs-pro/* my-app/
cd my-app
npm install zustand @supabase/supabase-js zod react-hook-form @hookform/resolvers
npx shadcn@latest init
npx shadcn@latest add button card input label badge avatar dropdown-menu dialog sheet table tabs
npm run dev
```

--------------------------------

### Supabase Client Setup and Environment Variables

Source: https://github.com/wasintoh/toh-framework/blob/main/src/commands/toh-connect.md

Illustrates the necessary steps to set up the Supabase JavaScript client and configure environment variables. This involves installing the necessary npm package and defining the project URL and anon key.

```bash
npm install @supabase/supabase-js
```

```env
NEXT_PUBLIC_SUPABASE_URL=https://xxx.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJ...
```

--------------------------------

### LINE Mini App Setup Steps

Source: https://github.com/wasintoh/toh-framework/blob/main/src/commands/toh-line.md

This section outlines the sequence of actions required to set up a LINE Mini App, including dependency installation, file creation for LIFF integration, and the addition of various LINE-specific features.

```bash
0. 🚨 READ MEMORY (MANDATORY!)
   ├── .toh/memory/active.md
   ├── .toh/memory/summary.md
   └── .toh/memory/decisions.md
   (Check current project context)

1. READ Skills
   └── ~/.claude/skills/platform-specialist/SKILL.md (LINE section)

2. SETUP LIFF
   ├── npm install @line/liff
   ├── Create lib/liff.ts
   ├── Create providers/liff-provider.tsx
   └── Add LIFF initialization

3. ADD LINE Features
   ├── LIFF Login
   ├── Get Profile
   ├── Send Message
   ├── Share Target Picker
   └── Close Window

4. STYLE for LINE
   ├── LINE green (#06C755) as accent
   ├── Full-width buttons
   └── Mobile-optimized layout

5. CONNECT Auth (optional)
   └── LIFF → Supabase custom auth

6. 🚨 SAVE MEMORY (MANDATORY!)
   ├── Update active.md
   ├── Add to decisions.md (LINE config)
   └── Update summary.md (LINE integration)
```

--------------------------------

### Create Expo App and Setup NativeWind

Source: https://github.com/wasintoh/toh-framework/blob/main/src/agents/platform-adapter.md

Commands to create a new Expo application with the tabs template, install NativeWind, and configure Babel and Tailwind CSS.

```bash
npx create-expo-app [name] --template tabs
npx expo install nativewind
# Configure babel.config.js
# Configure tailwind.config.js
```

--------------------------------

### Toh Framework Deployment Example Prompts

Source: https://github.com/wasintoh/toh-framework/blob/main/src/commands/toh-ship.md

Provides example command-line invocations for the /toh:ship command. It demonstrates how to deploy with default settings (Vercel), specify a platform like Netlify, and include additional checks within the deployment command. These examples are practical for users wanting to deploy their applications.

```bash
# Default (Vercel)
/toh:ship

# Specific platform
/toh:s vercel
/toh:ship netlify

# With checks
/toh:s deploy with full checks first
```

--------------------------------

### Toh Framework Quick Start for Gemini CLI (Google)

Source: https://github.com/wasintoh/toh-framework/blob/main/README.md

Instructions to start and use the Toh Framework with the Gemini CLI. Includes starting the CLI, specifying models, and using Toh commands.

```bash
# Start Gemini CLI in project directory
gemini

# Or use specific model
gemini --model gemini-2.5-pro

# Use commands like Claude Code
/toh:help
/toh:vibe Inventory management system
```

--------------------------------

### Toh Framework Installation Commands

Source: https://github.com/wasintoh/toh-framework/blob/main/README.md

Commands for installing the Toh Framework interactively, via quick install, or for specific IDEs and multiple IDEs. This section covers different installation scenarios.

```bash
# Interactive install (choose IDEs and language)
npx toh-framework install

# Quick install (Claude Code + Cursor, English)
npx toh-framework install --quick

# Specific IDE only
npx toh-framework install --ide claude
npx toh-framework install --ide cursor
npx toh-framework install --ide gemini
npx toh-framework install --ide codex

# Multiple IDEs
npx toh-framework install --ide "claude,cursor,gemini,codex"
```

--------------------------------

### Supabase Connected Success Message and Next Steps

Source: https://github.com/wasintoh/toh-framework/blob/main/src/commands/toh-connect.md

Example output format indicating a successful Supabase connection. It lists created files, provides instructions for Supabase project setup, schema execution, environment variable configuration, and testing.

```markdown
## ✅ Supabase connected successfully!

### Files created:
- `lib/supabase.ts` - Client configuration
- `lib/api/products.ts` - Updated with real queries
- `supabase/schema.sql` - Copy to SQL Editor

### Next steps:

1. **Create Supabase Project**
   - Go to https://supabase.com/dashboard
   - Create new project

2. **Run Schema**
   - Go to SQL Editor
   - Paste content from `supabase/schema.sql`
   - Run

3. **Add Environment Variables**
   ```env
   NEXT_PUBLIC_SUPABASE_URL=https://xxx.supabase.co
   NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJ...
   ```

4. **Test**
   - Refresh app
   - CRUD should work with real database now
```

--------------------------------

### Specific /toh Command Usage Examples (Bash)

Source: https://github.com/wasintoh/toh-framework/blob/main/src/commands/README.md

Examples demonstrating the usage of specific /toh commands for power users who know the exact agent they need. These cover project setup, UI, logic, backend, design, testing, and deployment.

```bash
# Using /toh (recommended)
/toh expense tracker app
/toh dashboard with stats and charts
/toh add product CRUD
/toh connect database
/toh convert to LINE Mini App

# Using specific commands (power users)
/toh:vibe expense tracker for recording income and expenses
/toh:ui dashboard page with stats cards and chart
/toh:dev CRUD operations for product management
/toh:connect supabase
/toh:line add LIFF login and share feature
/toh:ship vercel
```

--------------------------------

### Bash Command for Starting Dev Server

Source: https://github.com/wasintoh/toh-framework/blob/main/src/skills/preview-mode/SKILL.md

A common bash command used to start a development server, typically for Node.js projects, which is relevant for enabling live previews.

```bash
npm run dev
```

--------------------------------

### Toh Framework Quick Start for Claude Code (Anthropic)

Source: https://github.com/wasintoh/toh-framework/blob/main/README.md

Basic commands to get started with Toh Framework using Claude Code. Includes project creation, help, UI addition, design improvement, testing, and deployment.

```bash
# Open project with Claude Code
claude .

# Show all commands
/toh:help

# Create new project (natural language!)
/toh:vibe I want a coffee shop management system with POS, inventory, and sales reports

# Add UI
/toh:ui Add a dashboard page showing daily sales

# Improve Design
/toh:design Make it look professional and polished

# Test system (Auto fix until pass!)
/toh:test Test all pages

# Deploy
/toh:ship
```

--------------------------------

### Progress Tracking Example

Source: https://github.com/wasintoh/toh-framework/blob/main/src/agents/ui-builder.md

An example of the progress reporting by the `progress-tracking` skill during multi-component creation, showing the current status and percentage complete.

```text
🔄 **กำลังสร้าง Dashboard UI**

[████████░░░░░░░░] 50%

✅ Types defined
✅ Mock data created
⏳ Creating components... (2/4)
⬚ Creating page

```

--------------------------------

### Expo React Native Project Setup

Source: https://github.com/wasintoh/toh-framework/blob/main/src/skills/platform-specialist/SKILL.md

Commands to initialize a new Expo React Native project, optionally using a specific stack, and install essential dependencies like NativeWind, React Native Reanimated, Zustand, and Supabase.

```bash
# Create new Expo project
npx create-expo-app my-app --template tabs

# Or with our stack
npx create-expo-app my-app
cd my-app
npx expo install nativewind
npx expo install react-native-reanimated
npm install zustand @supabase/supabase-js

```

--------------------------------

### Toh UI Example Prompts

Source: https://github.com/wasintoh/toh-framework/blob/main/src/commands/toh-ui.md

Provides practical examples of how to use the /toh:ui command for various UI development tasks, including creating new pages, components, editing existing elements, and modifying layouts. Demonstrates the flexibility of natural language input.

```bash
# New page
/toh:ui settings page with profile edit form

# New component
/toh:u product card component showing image, name, price, add to cart button

# Edit existing
/toh:ui add sidebar to dashboard page

# Layout change
/toh:u change layout to 2 columns on desktop

# Complex UI
/toh:ui modal for edit product with image upload
```

--------------------------------

### Install Shared Dependencies

Source: https://github.com/wasintoh/toh-framework/blob/main/src/agents/platform-adapter.md

Installs essential shared dependencies for state management (zustand) and backend integration (supabase-js).

```bash
npm install zustand @supabase/supabase-js
```

--------------------------------

### Mock Data Generation Example (TypeScript)

Source: https://github.com/wasintoh/toh-framework/blob/main/src/skills/ui-first-builder/SKILL.md

Provides examples of well-structured and realistic mock data for users, products, and statistics. This follows the guidelines for the UI First Builder, emphasizing practical and varied data.

```typescript
const mockUsers = [
  { id: 1, name: "John Smith", email: "john@company.com", role: "Admin" },
  { id: 2, name: "Sarah Johnson", email: "sarah@company.com", role: "User" },
  { id: 3, name: "Michael Davis", email: "michael@company.com", role: "Editor" },
]

const mockProducts = [
  { id: 1, name: "House Blend Drip Coffee", price: 4.50, stock: 45 },
  { id: 2, name: "Matcha Green Tea Latte", price: 5.25, stock: 32 },
  { id: 3, name: "Hot Chocolate", price: 3.75, stock: 28 },
]

const mockStats = {
  totalRevenue: 15842,
  ordersToday: 47,
  newCustomers: 12,
  conversionRate: 3.2,
}
```

--------------------------------

### LINE Mini App Conversion Examples

Source: https://github.com/wasintoh/toh-framework/blob/main/src/commands/toh-line.md

Provides example commands for using the /toh:line tool to convert existing applications or create new LINE Mini Apps with specific features, demonstrating different use cases and options.

```bash
# Convert existing app
/toh:line convert to LINE Mini App

# With specific features
/toh:l add LINE login and share feature

# New LINE app
/toh:line create queue booking system for LINE OA

# Share functionality
/toh:l add share to LINE button
```

--------------------------------

### Install Playwright and Npx Playwright Install

Source: https://github.com/wasintoh/toh-framework/blob/main/src/commands/toh-test.md

Installs Playwright as a development dependency and downloads necessary browser binaries. This is the first step to setting up Playwright for automated testing.

```bash
npm install -D @playwright/test
npx playwright install
```

--------------------------------

### Progress Update Response Example (Markdown)

Source: https://github.com/wasintoh/toh-framework/blob/main/src/skills/progress-tracking/SKILL.md

Shows an example of a markdown-formatted response that the AI provides to the user after a progress update. It includes a confirmation of the completed task, an updated progress bar, and a summary of current statuses.

```markdown
✅ **[Task Name]** เสร็จแล้ว!

📊 Progress Update:
[████████████░░░░] 75% (+15%)

✅ เสร็จแล้ว: UI, Logic, Database
⏳ กำลังทำ: Testing (50%)
⬚ เหลือ: Deploy

💡 แนะนำถัดไป: เสร็จสิ้น Testing แล้ว Deploy ได้เลย
```

--------------------------------

### Preview Mode Markdown Example

Source: https://github.com/wasintoh/toh-framework/blob/main/src/agents/ui-builder.md

An example of markdown used by the `preview-mode` skill to visualize UI layouts before development. It includes a textual representation of the page structure and a list of components.

```markdown
📄 **Preview: Dashboard Page**

**Layout:**
┌─────────────────────────────────────┐
│ 🔵 Header (Logo + Nav + Profile)   │
├─────────────────────────────────────┤
│ 📊 Stats Cards (4 columns)          │
│ ┌───┐ ┌───┐ ┌───┐ ┌───┐            │
│ │ $ │ │ 📦│ │ 👥│ │ 📈│            │
│ └───┘ └───┘ └───┘ └───┘            │
├─────────────────────────────────────┤
│ 📈 Sales Chart                     │
├─────────────────────────────────────┤
│ 📋 Recent Orders Table             │
└─────────────────────────────────────┘

**Components:**
- StatsCard.tsx (reusable)
- SalesChart.tsx
- OrdersTable.tsx

สร้างเลยไหมครับ?

```

--------------------------------

### Smart Suggestions Example

Source: https://github.com/wasintoh/toh-framework/blob/main/src/agents/ui-builder.md

Demonstrates the output of the `smart-suggestions` skill after UI completion, proposing next actions for the developer.

```markdown
✅ **สร้าง Dashboard** เสร็จแล้ว!

📁 Files created:
- app/dashboard/page.tsx
- components/dashboard/StatsCard.tsx
- components/dashboard/SalesChart.tsx

💡 **แนะนำขั้นตอนถัดไป:**
1. `/toh:design` ปรับ UI ให้สวยขึ้น ← แนะนำ
2. `/toh:dev` เพิ่ม logic ให้ทำงานได้จริง
3. `/toh:ui` สร้างหน้าถัดไป

พิมพ์ตัวเลข หรือบอกว่าอยากทำอะไรต่อครับ

```

--------------------------------

### LINE API Usage Examples (TypeScript)

Source: https://github.com/wasintoh/toh-framework/blob/main/src/agents/dev-builder.md

Provides examples of how to interact with the LINE API using the `lineApi` utility. This includes sending push messages to users and retrieving user profile information. This functionality relies on the `lineApi` module, likely imported from '@/lib/api/line'.

```typescript
import { lineApi } from '@/lib/api/line'

// Send push message
await lineApi.pushMessage({
  to: 'USER_ID',
  messages: [{ type: 'text', text: 'Hello!' }]
})

// Get user profile
const profile = await lineApi.getProfile('USER_ID')
```

--------------------------------

### Toh Framework Agent Delegation Example

Source: https://context7.com/wasintoh/toh-framework/llms.txt

An example of agent delegation in the Toh Framework. The '/toh:plan' command initiates the creation of an e-commerce platform, with the Plan Agent orchestrating different specialized agents for various development phases.

```typescript
// Agent delegation example
/toh:plan create e-commerce platform

// Plan Agent orchestrates:
{
  phase1: {
    agents: [
      'ui-builder',      // Creates all pages and components
      'dev-builder',     // Adds stores and validation
      'backend-connector' // Sets up database schema
    ]
  },
  phase2: {
    agents: [
      'design-reviewer', // Polishes visual design
      'test-runner'      // Tests and auto-fixes
    ]
  }
}
```

--------------------------------

### Agent Skills Configuration (YAML)

Source: https://github.com/wasintoh/toh-framework/blob/main/src/skills/response-format/SKILL.md

Example of how to include the 'response-format' skill in an agent's configuration file.

```yaml
# In agent file
skills:
  - response-format    # MANDATORY for all agents
  - [other skills...]    
```

--------------------------------

### Zustand Store for Product Management

Source: https://context7.com/wasintoh/toh-framework/llms.txt

Example of a Zustand store implementation for managing product data. It includes functions for adding, updating, deleting, and retrieving products, interacting with mock data.

```typescript
// stores/products.ts - Zustand store
import { create } from 'zustand'

interface Product {
  id: string;
  name: string;
  price: number;
  stock: number;
  category: 'electronics' | 'clothing' | 'food' | 'other';
}

// Assume mockProducts is defined elsewhere, e.g., lib/mock-data.ts
declare const mockProducts: Product[];

interface ProductsStore {
  products: Product[]
  addProduct: (product: Product) => void
  updateProduct: (id: string, data: Partial<Product>) => void
  deleteProduct: (id: string) => void
  getProduct: (id: string) => Product | undefined
}

export const useProducts = create<ProductsStore>((set, get) => ({
  products: mockProducts,
  addProduct: (product) => set((state) => ({
    products: [...state.products, product]
  })),
  updateProduct: (id, data) => set((state) => ({
    products: state.products.map(p => p.id === id ? {...p, ...data} : p)
  })),
  deleteProduct: (id) => set((state) => ({
    products: state.products.filter(p => p.id !== id)
  })),
  getProduct: (id) => get().products.find(p => p.id === id)
}))
```

--------------------------------

### Toh Framework Deployment Workflow Steps

Source: https://github.com/wasintoh/toh-framework/blob/main/src/commands/toh-ship.md

This illustrates the detailed workflow of the /toh:ship command, from mandatory memory reading and pre-flight checks (build, lint, env vars) to preparation (config updates), deployment (Vercel, Netlify, others), and post-deployment actions (verification, memory saving). It highlights critical steps and dependencies.

```text
0. 🚨 READ MEMORY (MANDATORY!)
   ├── .toh/memory/active.md
   ├── .toh/memory/summary.md
   └── .toh/memory/decisions.md
   (Check project info + required env vars)

1. PRE-FLIGHT Checks
   ├── npm run build (must pass)
   ├── npm run lint (should pass)
   ├── Check environment variables
   └── Verify .gitignore

2. PREPARE
   ├── Update next.config.js if needed
   ├── Create/update vercel.json
   └── Check for hardcoded localhost URLs

3. DEPLOY
   ├── Vercel: npx vercel --prod
   ├── Netlify: netlify deploy --prod
   └── Others: provide instructions

4. POST-DEPLOY
   ├── Verify live site works
   ├── Check environment variables are set
   └── Test critical flows

5. 🚨 SAVE MEMORY (MANDATORY!)
   ├── Update active.md (deployed URL)
   ├── Add to decisions.md (deployment config)
   └── Update summary.md (production URL)
```

--------------------------------

### Test Runner Agent - Memory Integration: On Start Read

Source: https://github.com/wasintoh/toh-framework/blob/main/src/agents/test-runner.md

Details the process of reading memory files at the start of tests for the Test Runner Agent. It outlines which files to read (active.md, summary.md, decisions.md) and how to use the information to guide testing efforts.

```text
Before starting tests, read 3 main files:
├── active.md → Know what's in progress, previous tests
├── summary.md → Know features to test
└── decisions.md → Know past testing decisions

Use this information to:
- Test relevant features
- Don't re-test what already passed
- Focus on new/changed features
```

--------------------------------

### Tauri Setup for Existing Next.js Project

Source: https://github.com/wasintoh/toh-framework/blob/main/src/skills/platform-specialist/SKILL.md

Commands to add Tauri to an existing Next.js project for desktop application development. It involves installing the Tauri CLI and initializing Tauri within the project. Dependencies: npm/yarn/pnpm.

```bash
# Install Tauri CLI
npm install -D @tauri-apps/cli

# Initialize Tauri in existing project
npx tauri init
```

--------------------------------

### Rust Tauri Command Example

Source: https://github.com/wasintoh/toh-framework/blob/main/src/agents/platform-adapter.md

Demonstrates how to define and handle custom commands in a Tauri application using Rust. This includes a simple greeting command and a command to read a file asynchronously. Ensure the `tauri` crate is a dependency in your `Cargo.toml`.

```rust
#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]

use tauri::Manager;

#[tauri::command]
fn greet(name: &str) -> String {
    format!("Hello, {}!", name)
}

#[tauri::command]
async fn read_file(path: String) -> Result<String, String> {
    std::fs::read_to_string(path).map_err(|e| e.to_string())
}

fn main() {
    tauri::Builder::default()
        .invoke_handler(tauri::generate_handler![greet, read_file])
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}
```

--------------------------------

### Migration Checklist: Mock to Supabase

Source: https://github.com/wasintoh/toh-framework/blob/main/src/skills/backend-engineer/SKILL.md

A comprehensive checklist to guide the migration process from mock data to Supabase. It covers setup, schema conversion, security implementation (RLS policies), data migration, and verification steps to ensure a smooth transition.

```markdown
## Migration Checklist (Mock → Supabase)

### Setup Phase
- [ ] Create Supabase project
- [ ] Add environment variables
- [ ] Install @supabase/supabase-js
- [ ] Create supabase client

### Schema Phase
- [ ] Convert TypeScript types to SQL
- [ ] Create tables in Supabase
- [ ] Setup triggers (updated_at, etc.)
- [ ] Generate TypeScript types from schema

### Security Phase
- [ ] Enable RLS on all tables
- [ ] Create appropriate policies
- [ ] Setup auth providers (if needed)

### Migration Phase
- [ ] Replace mock API functions with Supabase queries
- [ ] Update Zustand stores to use new API
- [ ] Test all CRUD operations
- [ ] Add real-time subscriptions (optional)

### Verification Phase
- [ ] All pages load with real data
- [ ] Create/Update/Delete works
- [ ] Auth flows work (if applicable)
- [ ] RLS policies work correctly

```

--------------------------------

### Toh Framework Command Line Interface

Source: https://github.com/wasintoh/toh-framework/blob/main/src/commands/toh-connect.md

Examples of how to use the /toh:connect command and its alias /toh:c from the command line. These commands initiate the Supabase backend connection process, with options for specifying services or features.

```bash
# Basic connection
/toh:connect supabase

# Specific tables
/toh:c connect products and orders

# With auth
/toh:connect supabase with auth

# With storage
/toh:c add image upload to Supabase Storage
```

--------------------------------

### Basic Playwright MCP Integration (TypeScript)

Source: https://github.com/wasintoh/toh-framework/blob/main/src/skills/test-engineer/SKILL.md

This TypeScript example demonstrates the initial setup for integrating Playwright's MCP (Multiplexed Communication Protocol) for browser automation tasks like launching a browser and creating a new page.

```typescript
// Example: Using Playwright MCP
const browser = await playwright.chromium.launch()
const page = await browser.newPage()

// MCP handles the rest...
```

--------------------------------

### Toh Framework Command-Line Integrations

Source: https://github.com/wasintoh/toh-framework/blob/main/src/agents/test-runner.md

These are command-line examples demonstrating the integration flow within the Toh Framework. They show how different commands relate to each other in the testing and deployment process, such as testing after UI changes or deploying to production.

```bash
# Test after UI
/toh:ui → /toh:test

# Test after Design
/toh:design → /toh:test visual

# Test before Ship
/toh:test all → /toh:ship
```

--------------------------------

### Add Google Analytics to Toh Framework

Source: https://github.com/wasintoh/toh-framework/blob/main/src/skills/integrations/SKILL.md

Guides users on how to add Google Analytics tracking to their Toh Framework project. It details the files created, setup steps including obtaining a Measurement ID, and how to track events using a helper function. Requires a Google Analytics property.

```tsx
components/GoogleAnalytics.tsx
```

```tsx
app/layout.tsx
```

```ts
lib/analytics.ts
```

```bash
# .env.local
NEXT_PUBLIC_GA_ID=G-XXXXXXXXXX
```

```typescript
trackEvent('button_click', { name: 'buy' })
```

--------------------------------

### Toh Framework Pre-Deploy Checklist

Source: https://github.com/wasintoh/toh-framework/blob/main/src/commands/toh-ship.md

This checklist outlines essential steps to perform before deploying an application using the /toh:ship command. It covers build success, code quality checks (no console logs), environment variable documentation, absence of hardcoded localhost URLs, .gitignore configuration, and Supabase RLS policies. Adhering to this checklist helps ensure a smooth and successful deployment.

```markdown
- [ ] `npm run build` passes
- [ ] No console.log in production code  
- [ ] Environment variables documented
- [ ] No hardcoded localhost URLs
- [ ] .gitignore includes .env.local
- [ ] Supabase RLS policies enabled
```

--------------------------------

### Executing Phase Communication Example (Text)

Source: https://github.com/wasintoh/toh-framework/blob/main/src/agents/plan-orchestrator.md

This text snippet shows the communication style of the Plan Orchestrator agent during the execution phase. It announces the start of a new phase, lists the agents being spawned, reports on individual task progress, and indicates when UI elements are ready for viewing.

```text
"🚀 Starting Phase 1!

[Spawning agents...]

🎨 UI Agent → Creating Landing Page...
✅ Landing Page ready! → http://localhost:3000

🎨 UI Agent → Creating Login Page...
⚙️ Dev Agent → Creating Auth Store..."
```

--------------------------------

### Project Structure Quick Start Template

Source: https://github.com/wasintoh/toh-framework/blob/main/src/skills/premium-experience/SKILL.md

This template outlines a standard project directory structure for a new project using a framework like Next.js. It includes sections for the app, components, libraries, stores, types, and providers.

```treeview
project/
├── app/
│   ├── layout.tsx          # Root layout with providers
│   ├── page.tsx            # Landing/Home
│   ├── loading.tsx         # Global loading
│   ├── error.tsx           # Global error
│   ├── not-found.tsx       # 404 page
│   │
│   ├── dashboard/
│   │   ├── page.tsx        # Dashboard
│   │   └── loading.tsx     # Dashboard skeleton
│   │
│   ├── [feature]/
│   │   ├── page.tsx        # Feature list
│   │   ├── [id]/page.tsx   # Feature detail
│   │   └── loading.tsx     # Feature skeleton
│   │
│   ├── settings/
│   │   └── page.tsx        # Settings
│   │
│   └── auth/
│       ├── login/page.tsx  # Login
│       └── register/page.tsx # Register
│
├── components/
│   ├── layout/             # Layout components
│   ├── motion/             # Animation components
│   ├── feedback/           # Loading, empty, error states
│   ├── features/           # Feature-specific components
│   ├── shared/             # Shared components
│   └── ui/                 # shadcn/ui
│
├── lib/
│   ├── utils.ts            # Utility functions
│   └── mock-data.ts        # Realistic mock data
│
├── stores/
│   └── use-[feature].ts    # Zustand stores
│
├── types/
│   ├── index.ts            # Shared types
│   └── [feature].ts        # Feature types
│
└── providers/
    └── providers.tsx       # All providers wrapped
```

--------------------------------

### Copy Components to Project using Bash

Source: https://github.com/wasintoh/toh-framework/blob/main/src/templates/README.md

This snippet demonstrates how to copy pre-built components and page templates from the 'templates' directory into your project using bash commands. It covers copying motion, feedback components, and a landing page template.

```bash
# Copy motion components
cp -r templates/components/motion/* your-project/components/motion/

# Copy feedback components  
cp -r templates/components/feedback/* your-project/components/feedback/

# Copy page template
cp templates/pages/landing-page.tsx your-project/app/page.tsx
```

--------------------------------

### Responsive Grid Layout Example (Tailwind CSS)

Source: https://github.com/wasintoh/toh-framework/blob/main/src/skills/ui-first-builder/SKILL.md

Illustrates a common responsive pattern for displaying items in a grid layout using Tailwind CSS. It demonstrates how to adjust the number of columns based on screen size for mobile-first design.

```tsx
// Mobile-first, always
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
  {/* Cards */}
</div>
```

--------------------------------

### Install Supabase JS Client

Source: https://github.com/wasintoh/toh-framework/blob/main/src/skills/backend-engineer/SKILL.md

Installs the Supabase JavaScript client library using npm. This is a fundamental dependency for interacting with Supabase from a web application.

```bash
npm install @supabase/supabase-js
```

--------------------------------

### Project Introspection Status Check (TypeScript)

Source: https://context7.com/wasintoh/toh-framework/llms.txt

A TypeScript function to check the status of a Toh Framework installation within a project directory. It verifies the presence of the `.toh` directory, checks for configured IDEs (Claude Code, Cursor), and reads the manifest file to report the installed version, installation date, and status of various components like skills, agents, commands, and memory.

```typescript
// installer/status.js - Implementation
import fs from 'fs-extra'
import { join } from 'path'

export async function status() {
  const cwd = process.cwd()

  // Check for Toh installation
  const tohExists = fs.existsSync(join(cwd, '.toh'))
  const claudeExists = fs.existsSync(join(cwd, '.claude'))
  const cursorExists = fs.existsSync(join(cwd, '.cursor', 'rules'))

  // Read manifest
  const manifest = await fs.readJson(join(cwd, '.toh', 'manifest.json'))

  console.log('Toh Framework Status:')
  console.log('Installation:', tohExists ? '✅ Installed' : '❌ Not installed')
  console.log('Version:', manifest.version)
  console.log('Installed:', new Date(manifest.installedAt).toLocaleString())

  console.log('
Configured IDEs:')
  console.log('Claude Code:', claudeExists ? '✅' : '❌')
  console.log('Cursor:', cursorExists ? '✅' : '❌')

  console.log('
Components:')
  console.log('Skills:', manifest.components.skills ? '✅' : '❌')
  console.log('Agents:', manifest.components.agents ? '✅' : '❌')
  console.log('Commands:', manifest.components.commands ? '✅' : '❌')
  console.log('Memory:', manifest.components.memory ? '✅' : '❌')
}
```

--------------------------------

### Toh Framework Quick Start for Cursor

Source: https://github.com/wasintoh/toh-framework/blob/main/README.md

Commands for interacting with the Toh Framework within the Cursor IDE, including calling general agents and specific commands for UI creation.

```bash
# Call Toh agent
@toh Create a meeting room booking system

# Or use specific command
@toh:ui Create a calendar page for room booking
```

--------------------------------

### React Tauri Invoke Example

Source: https://github.com/wasintoh/toh-framework/blob/main/src/agents/platform-adapter.md

Shows how to call Rust-defined Tauri commands from a React component using the `@tauri-apps/api` library. This example specifically demonstrates invoking the 'greet' command. The `invoke` function from `@tauri-apps/api/tauri` is required.

```typescript
import { invoke } from '@tauri-apps/api/tauri'

async function handleGreet() {
  const message = await invoke('greet', { name: 'User' })
  console.log(message) // "Hello, User!"
}
```

--------------------------------

### Example: Business Context in Toh Framework

Source: https://github.com/wasintoh/toh-framework/blob/main/README.md

Demonstrates how the Toh Framework's AI understands business context. Providing a business type automatically includes relevant standard features.

```bash
/toh:vibe coffee shop

# AI understands this means:
# ✅ POS System
# ✅ Menu Management
# ✅ Order Management
# ✅ Inventory
# ✅ Sales Reports
# No need to specify each feature!
```