Use Starlight FileTree and Steps components

- Convert scaffold.md and first-spec.md to .mdx format
- Replace plain code block directory tree with interactive FileTree
- Add Steps component for sequential instructions
- Highlight key files (spec-format.md, 00-overview.md) in FileTree

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Author: michellejw

…c/content/docs/get-started/first-spec.md …/content/docs/get-started/first-spec.mdxsrc/content/docs/get-started/first-spec.md renamed to src/content/docs/get-started/first-spec.mdx src/content/docs/get-started/first-spec.md renamed to src/content/docs/get-started/first-spec.mdx

@@ -3,6 +3,8 @@ title: Your First Spec
 description: Write your first specification with AI assistance.
 ---
 
+import { Steps } from '@astrojs/starlight/components';
+
 Let's write a spec for something simple: a function that calculates the moving average of a time series. This walkthrough shows the full cycle—spec, AI collaboration, implementation, verification.
 
 ## Start with what you need
@@ -158,11 +160,29 @@ The tests come directly from the spec. If they pass, the implementation matches
 
 ## The pattern
 
-1. **Write what you know** — Capture requirements, note open questions
-2. **Use AI to fill gaps** — Ask about edge cases, tradeoffs, alternatives
-3. **Update the spec** — Record decisions, add concrete examples
-4. **Implement from the spec** — The spec becomes the prompt
-5. **Test against the spec** — Edge cases become test cases
+<Steps>
+
+1. **Write what you know**
+
+   Capture requirements, note open questions
+
+2. **Use AI to fill gaps**
+
+   Ask about edge cases, tradeoffs, alternatives
+
+3. **Update the spec**
+
+   Record decisions, add concrete examples
+
+4. **Implement from the spec**
+
+   The spec becomes the prompt
+
+5. **Test against the spec**
+
+   Edge cases become test cases
+
+</Steps>
 
 The spec is the source of truth. Code and tests verify that truth is implemented correctly.
 
@@ -172,4 +192,4 @@ You've completed the Get Started path. From here:
 
 - **[The Method](/spec-driven-site/guides/method/)** — Deeper explanation of spec-driven development
 - **[AI Collaboration](/spec-driven-site/guides/ai/)** — How to work effectively with AI assistants
-- **[Examples](/spec-driven-site/guides/examples/)** — More complete examples across project types
+- **[Examples](/spec-driven-site/guides/examples/)** — More complete examples across project types

src/content/docs/get-started/scaffold.md src/content/docs/get-started/scaffold.mdxsrc/content/docs/get-started/scaffold.md renamed to src/content/docs/get-started/scaffold.mdx

@@ -3,6 +3,8 @@ title: Scaffold a Project
 description: Run the scaffolding script to bootstrap a spec-driven project.
 ---
 
+import { FileTree, Steps } from '@astrojs/starlight/components';
+
 The scaffolding script creates a project structure with spec templates ready to go. No dependencies—just Python.
 
 ## Quick start
@@ -29,28 +31,28 @@ The script will ask for:
 
 ## What you get
 
-```
-your-project/
-├── specs/
-│   ├── spec-format.md          # How to write specs (reference this!)
-│   ├── 00-overview.md          # Your project overview (start here)
-│   ├── 01-requirements/
-│   │   └── functional.md       # Requirements template
-│   ├── 02-architecture/
-│   │   └── data-flow.md        # If you chose "Data pipeline"
-│   ├── 03-implementation/
-│   ├── 04-algorithms/          # If you chose "Algorithm implementation"
-│   │   └── algorithm-template.md
-│   ├── 05-validation/          # If you chose "Algorithm implementation"
-│   │   └── validation-plan.md
-│   └── 99-decisions/
-│       └── adr-000-template.md # Decision record template
-├── src/
-├── tests/
-├── .claude/CLAUDE.md           # If you chose Claude Code
-├── CONTRIBUTING.md
-└── README.md
-```
+<FileTree>
+- your-project/
+  - specs/
+    - **spec-format.md** How to write specs (reference this!)
+    - **00-overview.md** Your project overview (start here)
+    - 01-requirements/
+      - functional.md Requirements template
+    - 02-architecture/
+      - data-flow.md If you chose "Data pipeline"
+    - 03-implementation/
+    - 04-algorithms/ If you chose "Algorithm implementation"
+      - algorithm-template.md
+    - 05-validation/ If you chose "Algorithm implementation"
+      - validation-plan.md
+    - 99-decisions/
+      - adr-000-template.md Decision record template
+  - src/
+  - tests/
+  - .claude/CLAUDE.md If you chose Claude Code
+  - CONTRIBUTING.md
+  - README.md
+</FileTree>
 
 ## The templates
 
@@ -75,12 +77,20 @@ Fill in the brackets, delete the comments as you go.
 
 ## After scaffolding
 
+<Steps>
+
 1. `cd your-project`
+
 2. Open `specs/00-overview.md` and describe your project
+
 3. Read `specs/spec-format.md` to understand how specs work here
+
 4. Run `git init` to start version control
+
 5. Start a conversation with your AI assistant about requirements
 
+</Steps>
+
 ## Next step
 
 Once you have a project, [write your first spec](/spec-driven-site/get-started/first-spec/).