Back to Exercises
Craft intermediate 30 min

Build a Component

Create a component that embodies Canon principles—ready-to-hand, not present-at-hand.

Objectives

  • Design a minimal prop interface
  • Use Svelte 5 runes correctly
  • Apply Canon CSS tokens for aesthetics
  • Ensure the component "recedes into use"

Beads Tasks

Create these tasks in Beads before starting. You learn Beads by using Beads.

bd create "Praxis: Build [component] with Canon principles" --type=feature--labels=learn,craft
bd create "Design minimal prop interface" --type=task--labels=learn
bd create "Implement with Svelte 5 runes" --type=task--labels=learn
bd create "Apply Canon CSS tokens (no Tailwind design utilities)" --type=task--labels=learn
bd create "Verify component recedes into use—test with real usage" --type=task--labels=learn

Claude Code Prompt

Copy this prompt into Claude Code to build YOUR own version:

## Setup: Track this exercise with Beads

```bash
bd create "Praxis: Build [component] with Canon principles" --type=feature --labels=learn,craft
bd create "Design minimal prop interface" --type=task --labels=learn
bd create "Implement with Svelte 5 runes" --type=task --labels=learn
bd create "Apply Canon CSS tokens (no Tailwind design utilities)" --type=task --labels=learn
bd create "Verify component recedes into use—test with real usage" --type=task --labels=learn
```

---

Help me build [COMPONENT_NAME] following MY Canon design principles.

I want a component that "recedes into use"—invisible when working, noticed only when broken.

1. **Design the prop interface**:
   - What's the minimum API needed?
   - What can be inferred vs. explicitly passed?
   - Are there sensible defaults?

2. **Implement with Svelte 5 runes**:
   - Use $props() for inputs
   - Use $state() only when needed
   - Keep reactivity minimal and obvious

3. **Apply MY design tokens**:
   - Use semantic tokens (--color-bg-*, --radius-*, etc.)
   - No raw Tailwind design utilities
   - Keep layout utilities (flex, grid, etc.)

4. **Verify it "recedes"**:
   - Is the API obvious without documentation?
   - Does it compose well with other components?
   - Would a new developer understand it immediately?

Component to build: [YOUR_COMPONENT_NAME]
Purpose: [WHAT_IT_DOES]
My design tokens file: [PATH_TO_YOUR_TOKENS]

Your Solution

Write code that addresses the objectives above. Apply the principles from the Craft path.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Review the lesson