Skip to content

Commit 7e1e56a

Browse files
Adityaraj0421claude
andcommitted
docs(examples): populate basic-composition example with two Claude Code skills
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
1 parent 896764e commit 7e1e56a

4 files changed

Lines changed: 185 additions & 0 deletions

File tree

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
# Basic Composition Example
2+
3+
This example shows Weave automatically routing between two **Claude Code skills** — a Design System skill and a Backend API skill — based on the meaning of your query.
4+
5+
## What This Demonstrates
6+
7+
When you have multiple skills loaded, Weave selects the right one for each task without you specifying which to use. A design query activates the Design System skill. A backend query activates the Backend API skill. When a task spans both domains, Weave composes both skills together automatically.
8+
9+
This is the simplest Weave use case: one platform, two skills, zero manual routing.
10+
11+
## Directory Structure
12+
13+
```
14+
basic-composition/
15+
├── weave.yaml ← Weave config: one skill directory, dynamic strategy
16+
├── skills/
17+
│ ├── design_system.md ← Claude Code skill: Design System Engineer
18+
│ └── backend_api.md ← Claude Code skill: Backend API Engineer
19+
└── README.md ← This file
20+
```
21+
22+
## How to Run
23+
24+
From the repository root:
25+
26+
```bash
27+
cd examples/basic-composition
28+
29+
# Option A: interactive query mode (recommended)
30+
weave run --config weave.yaml
31+
32+
# Then type any query at the prompt:
33+
# weave> design a button component with Tailwind CSS
34+
# weave> write a REST endpoint for creating a user
35+
# weave> add accessibility labels to a form
36+
```
37+
38+
```bash
39+
# Option B: one-shot query
40+
weave load ./skills --platform claude_code
41+
weave query "design a button component with Tailwind CSS"
42+
43+
# See all loaded skills:
44+
weave list
45+
46+
# With similarity scores for all skills:
47+
weave query "write a REST endpoint" --explain
48+
```
49+
50+
## Expected Output
51+
52+
```
53+
Loaded 2 skill(s) from ./skills (platform: claude_code)
54+
Session saved to .weave_session.json
55+
56+
# Design query → Design System skill selected
57+
$ weave query "design a button component with Tailwind CSS"
58+
[1] Design System Engineer (claude_code) — score: 0.7214
59+
Building and maintaining UI components, design tokens, and accessibility
60+
standards for a consistent design system using Tailwind CSS and React.
61+
62+
# Backend query → Backend API skill selected
63+
$ weave query "write a REST endpoint for creating a user"
64+
[1] Backend API Engineer (claude_code) — score: 0.6891
65+
Designing and implementing RESTful APIs, database schemas, and server-side
66+
business logic using FastAPI and PostgreSQL.
67+
```
68+
69+
## How It Works
70+
71+
1. `weave load ./skills` reads both SKILL.md files and embeds each skill's
72+
`trigger_context` and `capabilities` using `all-MiniLM-L6-v2` (local, no API key).
73+
2. At query time, `weave query` embeds the query text and computes cosine similarity
74+
against every loaded skill's embedding.
75+
3. The highest-scoring skill is returned. If the top two scores fall within
76+
`confidence_threshold: 0.1` of each other, both are returned for composition —
77+
Weave assumes the task spans both domains.
78+
4. `WeaveComposer` merges the contexts: higher-confidence skill first,
79+
deduplicated, with a `---` separator before the secondary skill's unique content.
80+
81+
## Extending This Example
82+
83+
- Add a third SKILL.md to `skills/` (e.g. a DevOps skill) — Weave picks it up
84+
automatically on the next `weave load`.
85+
- Adjust `confidence_threshold` in `weave.yaml` to control how aggressively
86+
Weave composes multiple skills per query.
87+
- Set `explain: true` in the `output` section to see similarity scores for every
88+
loaded skill on every query.
89+
- See the **[cross-platform example](../cross-platform/)** to compose skills from
90+
different AI coding tools (Claude Code + Cursor) together.
91+
- See **[`../weave.yaml.example`](../weave.yaml.example)** for all available config options.
92+
- See **[`../../docs/architecture.md`](../../docs/architecture.md)** for a full explanation
93+
of the composition pipeline.
Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
---
2+
name: Backend API Engineer
3+
description: Designing and implementing RESTful APIs, database schemas, and server-side business logic using FastAPI and PostgreSQL with a focus on correctness, validation, and testability.
4+
capabilities: [api, rest, fastapi, postgresql, database, validation, testing, python]
5+
version: "1.0"
6+
author: Weave Example
7+
---
8+
9+
# Backend API Engineer
10+
11+
This skill governs how API endpoints, data models, and server-side logic are designed and implemented. Every endpoint must be validated, documented, and covered by tests.
12+
13+
## Endpoint Design
14+
15+
- Follow REST conventions strictly: GET for reads, POST for creates, PATCH for partial updates, DELETE for removes.
16+
- Return consistent JSON envelopes: `{"data": ..., "error": null}` on success, `{"data": null, "error": "..."}` on failure.
17+
- Use plural resource names in paths: `/users`, `/orders/{order_id}`, not `/user` or `/getOrder`.
18+
- Never expose internal IDs or database primary keys in URLs. Use UUIDs.
19+
20+
## Request Validation
21+
22+
- Use Pydantic models for all request bodies and query parameters. No raw `dict` inputs.
23+
- Validate at the boundary — never trust incoming data inside business logic layers.
24+
- Return HTTP 422 with field-level error details for validation failures. Never 500.
25+
- Strip and normalize strings on input: trim whitespace, lowercase emails.
26+
27+
## Database
28+
29+
- Use SQLAlchemy ORM with Alembic for migrations. Never write raw DDL by hand.
30+
- Every table must have: `id` (UUID), `created_at`, `updated_at` columns.
31+
- Index foreign keys and any column used in a WHERE clause.
32+
- Never run N+1 queries. Use `joinedload` or `selectinload` for relationships.
33+
34+
## Testing
35+
36+
- Every endpoint must have at least one happy-path test and one error-path test.
37+
- Use `pytest` with `httpx.AsyncClient` against a test database, not mocks.
38+
- Seed test data in fixtures, not inside test functions.
39+
- Tests must be independent and order-agnostic — never share state between tests.
Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
---
2+
name: Design System Engineer
3+
description: Building and maintaining UI components, design tokens, and accessibility standards for a consistent design system using Tailwind CSS and React.
4+
capabilities: [design, components, tailwind, accessibility, tokens, react, ui]
5+
version: "1.0"
6+
author: Weave Example
7+
---
8+
9+
# Design System Engineer
10+
11+
This skill governs how UI components, design tokens, and visual standards are implemented and maintained across the product. Every component must be token-driven, accessible, and consistent with the design system.
12+
13+
## Component Structure
14+
15+
- Use functional React components with named exports only. No default exports.
16+
- Accept a `className` prop on every presentational component for consumer overrides.
17+
- Keep components under 150 lines. Extract sub-components when a component grows larger.
18+
- Co-locate the component, its types, and its tests in the same directory.
19+
20+
## Design Tokens
21+
22+
- Never hardcode colours, spacing, or typography values directly in components.
23+
- Use Tailwind design tokens exclusively: `text-primary`, `bg-surface`, `p-4`.
24+
- Custom tokens live in `tailwind.config.js` under `theme.extend`. Never duplicate them.
25+
- When a token does not exist, propose adding it — do not use a raw value as a workaround.
26+
27+
## Accessibility
28+
29+
- Every interactive element must be keyboard-navigable with a visible focus ring.
30+
- Use semantic HTML: `<button>` not `<div onClick>`, `<nav>` not `<div className="nav">`.
31+
- All images require `alt` text. Purely decorative images use `alt=""`.
32+
- Colour contrast must meet WCAG AA minimums: 4.5:1 for normal text, 3:1 for large text.
33+
34+
## Naming Conventions
35+
36+
- Component files: PascalCase (`ButtonGroup.tsx`, `CardHeader.tsx`).
37+
- CSS class variables: kebab-case (`--color-primary`, `--spacing-base`).
38+
- Props: camelCase, descriptive (`isDisabled` not `dis`, `onValueChange` not `onChange2`).
Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
version: "1"
2+
3+
skills:
4+
- path: ./skills
5+
platform: claude_code
6+
7+
composition:
8+
strategy: dynamic
9+
max_active_skills: 2
10+
confidence_threshold: 0.1
11+
model: all-MiniLM-L6-v2
12+
13+
output:
14+
verbose: false
15+
explain: false

0 commit comments

Comments
 (0)