Match task bundles

6 min · For agents

After loading rules.compact.md, resolve user intent to a task bundle. Each bundle lists components, gotchas, gold examples, and Pro blocks — your blueprint for production-quality output.

Why task bundles exist

Full component docs are 10–50KB each. Task bundles are ~1KB intent maps that tell you exactly what to load for a given UI type. Entry point: packages/core/ai/manifest.json → "resolve": "tasks/index.json"

The seven bundles

User says…	Bundle	Gold example	Primary blocks
"landing page", "hero"	marketing-hero.json	examples/marketing-hero.tsx	Hero1, Header1
"pricing", "plans"	pricing.json	examples/pricing.tsx	Pricing1, Pricing2
"settings", "preferences"	settings.json	examples/settings.tsx	Settings1, Sidebar2
"dashboard", "analytics"	dashboard.json	examples/dashboard.tsx	Dashboard1, Table1
"chat", "messaging"	chat.json	examples/chat.tsx	Chat1, Feed3, Sidebar4
"login", "signup", "auth"	auth.json	examples/auth.tsx	Auth1, Auth2
"roadmap", "kanban"	roadmap.json	examples/roadmap.tsx	Roadmap1

Resolution workflow

1. Load rules.compact.md + catalog.json        (always, ~6KB)
2. Read tasks/index.json                        (match intent)
3. Open the matched task/*.json                 (~1KB)
4. Fetch component slices from components/      (on demand)
5. Read gold example + Pro block                (structure)
6. Load gotchas.json entries listed in bundle   (avoid traps)
7. Generate TSX
8. Run: pnpm validate-ai-code path/to/file.tsx

What each bundle contains

Every tasks/*.json file has the same shape:

{
  "id": "dashboard",
  "title": "Analytics dashboard",
  "description": "KPI stat cards, charts area, recent-activity list",
  "components": ["Column", "Grid", "Table", ...],
  "recipes": ["reveal-stagger"],
  "example": "examples/dashboard.tsx",
  "blocks": {
    "primary": ["Dashboard1", "Table1"],
    "compose": ["Header1", "Sidebar1"]
  },
  "gotchas": ["Card.interactive", "CountFx.trigger", ...],
  "quality": {
    "statCard": "Column surface recipe — not Card"
  }
}

Field	Use it for
components	Which components/{Name}.json slices to fetch
recipes	Sections in recipes.md for composition patterns
example	Gold TSX — copy structure, not verbatim
blocks.primary	Main Pro blocks to install or reference
blocks.compose	App shell blocks (header, sidebar)
gotchas	Keys to look up in gotchas.json
quality	Non-negotiable rules for this UI type

6 min · For agents

After loading rules.compact.md, resolve user intent to a task bundle. Each bundle lists components, gotchas, gold examples, and Pro blocks — your blueprint for production-quality output.

Why task bundles exist

The seven bundles

User says…	Bundle	Gold example	Primary blocks
"landing page", "hero"	marketing-hero.json	examples/marketing-hero.tsx	Hero1, Header1
"pricing", "plans"	pricing.json	examples/pricing.tsx	Pricing1, Pricing2
"settings", "preferences"	settings.json	examples/settings.tsx	Settings1, Sidebar2
"dashboard", "analytics"	dashboard.json	examples/dashboard.tsx	Dashboard1, Table1
"chat", "messaging"	chat.json	examples/chat.tsx	Chat1, Feed3, Sidebar4
"login", "signup", "auth"	auth.json	examples/auth.tsx	Auth1, Auth2
"roadmap", "kanban"	roadmap.json	examples/roadmap.tsx	Roadmap1

Resolution workflow

1. Load rules.compact.md + catalog.json        (always, ~6KB)
2. Read tasks/index.json                        (match intent)
3. Open the matched task/*.json                 (~1KB)
4. Fetch component slices from components/      (on demand)
5. Read gold example + Pro block                (structure)
6. Load gotchas.json entries listed in bundle   (avoid traps)
7. Generate TSX
8. Run: pnpm validate-ai-code path/to/file.tsx

What each bundle contains

Every tasks/*.json file has the same shape:

{
  "id": "dashboard",
  "title": "Analytics dashboard",
  "description": "KPI stat cards, charts area, recent-activity list",
  "components": ["Column", "Grid", "Table", ...],
  "recipes": ["reveal-stagger"],
  "example": "examples/dashboard.tsx",
  "blocks": {
    "primary": ["Dashboard1", "Table1"],
    "compose": ["Header1", "Sidebar1"]
  },
  "gotchas": ["Card.interactive", "CountFx.trigger", ...],
  "quality": {
    "statCard": "Column surface recipe — not Card"
  }
}

Field	Use it for
components	Which components/{Name}.json slices to fetch
recipes	Sections in recipes.md for composition patterns
example	Gold TSX — copy structure, not verbatim
blocks.primary	Main Pro blocks to install or reference
blocks.compose	App shell blocks (header, sidebar)
gotchas	Keys to look up in gotchas.json
quality	Non-negotiable rules for this UI type

Request	Primary bundle	Compose from
"Dashboard with chat"	dashboard.json	chat.json blocks for a chat widget
"Pricing landing page"	marketing-hero.json	pricing.json for the plans section
"Settings with auth gate"	auth.json	settings.json for the panel

Artifact	Size	Load when
rules.compact.md	~2KB	Always
catalog.json	~4KB	Component selection
Task bundle	~1KB	Intent matched
Component slice	~0.5KB each	Listed in bundle
Gold example	2–5KB	Before generating
Pro block	5–15KB	When blocks.primary listed
Full doc page	10–50KB	Never for codegen

Question	Answer
"How should I think about this pattern?"	Once UI Learn (this site)
"What props does a component accept?"	docs.once-ui.com reference
"Build me a dashboard"	Task bundle + gold example

Why task bundles exist

The seven bundles

Resolution workflow

What each bundle contains

Why task bundles exist

The seven bundles

Resolution workflow

What each bundle contains

Pro block registry

Ambiguous intent

Context budget

Validation

Humans vs agents

Match task bundles

Why task bundles exist

The seven bundles

Resolution workflow

What each bundle contains

Why task bundles exist

The seven bundles

Resolution workflow

What each bundle contains

Pro block registry

Ambiguous intent

Context budget

Validation

Humans vs agents

Related