feat(ai-skills): teach multi-tool composition for composite briefs
ab-v3 live sweep showed 0/25 composite-T runs walked the multi-tool path — every model fell back to batch_design or garbage when given a brief like "5 member rows + 1 invite row" or "6 audit log entries". Root cause: elements.md's decision tree opens with "pick first match" (single-tool framing) and the cookbook's chained examples sit ~400 lines deep, so models stop at the lookup and never realize they can emit N <op_tool> blocks. This adds: - top-of-file "MULTI-TOOL OUTPUT IS THE NORM" banner with a concrete 5-call settings example, before the decision tree - decision tree heading rewritten to "(per component — pick first match)" so per-component framing is in scope from the start - 4 new cookbook recipes mirroring the ab-v3 composite prompts: team / members list (rows + invite), audit / activity feed, faceted search filter sidebar, onboarding step cards Markdown-only edit to a single skill file; vite-plugin-skills re-compiles the registry. Banner verified present in the generated registry, all 3750 vitest tests pass. Verifies in next ab-v4 sweep.
This commit is contained in:
Fini
parent
0f22f2dd3e
commit
bac47be301
|
|
@ -29,7 +29,11 @@ ELEMENT TOOLS (schema-constrained alternatives to batch_design):
|
|||
|
||||
These narrow MCP tools emit well-known structures that batch_design frequently gets wrong on non-Claude models (overflow, wrong role, anti-pattern layout). Each is shape-locked — you pick the tool by matching intent, then supply only content. Visual styling (color, font) stays orthogonal: override via a follow-up batch_design U-op if needed.
|
||||
|
||||
## Decision tree (pick first match)
|
||||
**MULTI-TOOL OUTPUT IS THE NORM, NOT THE EXCEPTION.** A brief that names more than one component (a settings panel with 4 toggle rows, a team list with 5 members, a feed with 6 log entries, an onboarding screen with 4 step cards) MUST emit ONE `<op_tool>` block per component. The harness reads every `<op_tool>` tag in your output, so chain as many as the brief implies. Fall back to `batch_design` only when no element tool fits a specific component shape — never as a shortcut to skip the chaining.
|
||||
|
||||
Multi-tool example — a "Notifications" settings section with a header + 4 toggle rows is **5 tool calls** (1× `add_section_header_v0` + 4× `add_setting_row_v0`), NOT 1 batch_design.
|
||||
|
||||
## Decision tree (per component — pick first match)
|
||||
|
||||
Rows (horizontal, in-card or scrolling):
|
||||
|
||||
|
|
@ -456,6 +460,50 @@ add_setting_row_v0({ parent_id: "<page>", title: "Push notifications", leading_i
|
|||
add_setting_row_v0({ parent_id: "<page>", title: "Email digest", leading_icon: "mail", trailing: { kind: "switch", on: false } })
|
||||
```
|
||||
|
||||
### Team / members list (avatars + pending invitations)
|
||||
|
||||
```
|
||||
add_section_header_v0({ parent_id: "<page>", title: "Members", subtitle: "5 people" })
|
||||
add_member_row_v0({ parent_id: "<page>", name: "Sarah Lee", subtitle: "sarah@acme.com", initial: "S", trailing: { kind: "role_badge", value: "Owner" } })
|
||||
add_member_row_v0({ parent_id: "<page>", name: "Marcus Chen", subtitle: "marcus@acme.com", initial: "M", trailing: { kind: "role_badge", value: "Admin" } })
|
||||
add_member_row_v0({ parent_id: "<page>", name: "Aiko Tanaka", subtitle: "aiko@acme.com", initial: "A", trailing: { kind: "role_badge", value: "Editor" } })
|
||||
add_member_row_v0({ parent_id: "<page>", name: "Raj Patel", subtitle: "raj@acme.com", initial: "R", trailing: { kind: "role_badge", value: "Editor" } })
|
||||
add_member_row_v0({ parent_id: "<page>", name: "Jordan Kim", subtitle: "jordan@acme.com", initial: "J", trailing: { kind: "role_badge", value: "Viewer" } })
|
||||
add_divider_v0({ parent_id: "<page>" })
|
||||
add_section_header_v0({ parent_id: "<page>", title: "Pending invitations" })
|
||||
add_invite_row_v0({ parent_id: "<page>", email: "leon@acme.com", role: "Editor", status: "pending", action_label: "Resend" })
|
||||
```
|
||||
|
||||
### Audit / activity feed (N log entries under a header)
|
||||
|
||||
```
|
||||
add_section_header_v0({ parent_id: "<panel>", title: "Recent activity", subtitle: "Last 24 hours" })
|
||||
add_activity_log_v0({ parent_id: "<panel>", actor: "Sarah Lee", action: "approved the production deploy", timestamp: "2h ago", icon: "check", tone: "success" })
|
||||
add_activity_log_v0({ parent_id: "<panel>", actor: "Marcus Chen", action: "uploaded final-mockups.zip", timestamp: "3h ago", icon: "upload", tone: "info" })
|
||||
add_activity_log_v0({ parent_id: "<panel>", actor: "Aiko Tanaka", action: "invited jordan@acme.com to the workspace", timestamp: "5h ago", icon: "user-plus", tone: "info" })
|
||||
add_activity_log_v0({ parent_id: "<panel>", actor: "System", action: "rate-limited an IP after 50 failed sign-ins", timestamp: "8h ago", icon: "alert-triangle", tone: "warning" })
|
||||
add_activity_log_v0({ parent_id: "<panel>", actor: "Raj Patel", action: "updated billing details", timestamp: "yesterday", icon: "settings", tone: "neutral" })
|
||||
add_activity_log_v0({ parent_id: "<panel>", actor: "Sarah Lee", action: "deleted archive-2024.zip", timestamp: "yesterday", icon: "trash", tone: "danger" })
|
||||
```
|
||||
|
||||
### Faceted search filter sidebar (N filter groups stacked)
|
||||
|
||||
```
|
||||
add_filter_group_v0({ parent_id: "<sidebar>", title: "Category", options: [{ label: "Apparel", count: 124, selected: true }, { label: "Footwear", count: 86 }, { label: "Bags", count: 41 }, { label: "Accessories", count: 67 }] })
|
||||
add_filter_group_v0({ parent_id: "<sidebar>", title: "Brand", options: [{ label: "Nike", count: 32 }, { label: "Adidas", count: 28 }, { label: "Patagonia", count: 15, selected: true }, { label: "Arc'teryx", count: 9 }] })
|
||||
```
|
||||
|
||||
### Onboarding "How it works" (N step cards)
|
||||
|
||||
```
|
||||
add_heading_v0({ parent_id: "<page>", content: "Get started in minutes" })
|
||||
add_body_text_v0({ parent_id: "<page>", content: "Three steps to a smarter wallet." })
|
||||
add_step_card_v0({ parent_id: "<page>", number: 1, title: "Create your account", description: "Use your email and a strong password to sign up. No credit card required." })
|
||||
add_step_card_v0({ parent_id: "<page>", number: 2, title: "Connect your bank", description: "Link your account in seconds. We use 256-bit encryption to keep your data safe." })
|
||||
add_step_card_v0({ parent_id: "<page>", number: 3, title: "Set your goals", description: "Tell us what you want to save for — we'll do the rest." })
|
||||
add_step_card_v0({ parent_id: "<page>", title: "You're all set", description: "You're ready to use the app. Tap below to continue.", completed: true })
|
||||
```
|
||||
|
||||
### Pricing section (3 tiers, middle one featured)
|
||||
|
||||
```
|
||||
|
|
|
|||
Loading…
Reference in a new issue