Zero to Master: Frontend

⚠️ Early Stage — Outline not finalized

This project is in early development. The roadmap structure, phases, and content are still being defined and may change significantly. Only Phase 00 is written so far.

Want to contribute? We welcome feedback on the outline and structure — open an issue or join us on Slack to discuss before writing content. Please don't start writing phases that aren't confirmed yet.

Frontend learning roadmap from zero to L3 Software Engineer at MirrorStack.

繁體中文版

Philosophy

The employee is the pilot, AI is the copilot. You learn to direct Claude Code to build production software — writing specs, reviewing output, and shipping clean PRs. You don't memorize syntax; you learn to read, review, and specify.

Levels

Level	Title	What you can do
L3	Software Engineer	Write specs, direct Claude, review code, ship components with tests and stories
L4	Senior Engineer	Own features end-to-end, make design decisions, mentor L3s, build immersive experiences

Roadmap

Phase 00 — Environment Setup (Day 0)

Install all development tools.

00-environment-setup.md | 繁體中文

---

Phase 01 — Terminal & Git (Day 1)

Navigate files, branches, and GitHub.

01-terminal-git.md | 繁體中文

---

Phase 02 — Claude Code: Basics (Day 1-2)

Start Claude, ask questions, understand code through conversation.

02-claude-code-basics.md | 繁體中文

---

Phase 03 — Claude Code: Spec-Driven Development (Day 2-3)

Write specs in plain English. Claude implements. You review.

03-claude-code-spec-driven.md | 繁體中文

---

Phase 04 — Claude Code: Team Workflow (Day 3)

start-issue, implement with Claude, /simplify, /commit, open PR.

04-claude-code-workflow.md | 繁體中文

---

Phase 05 — Read & Review (Day 4-5)

Read HTML, CSS, TypeScript, React, Tailwind — understand what Claude outputs, spot bugs.

05-read-and-review.md | 繁體中文

---

Phase 06 — Testing as Specification (Day 6)

Write test descriptions in English. Claude converts to Vitest. TDD with AI.

06-testing-as-spec.md | 繁體中文

---

Phase 07 — Storybook (Day 7)

Document components visually. Write stories, controls, review in browser.

07-storybook.md | 繁體中文

---

Phase 08 — First Component (Day 8-10)

Guided: spec → Claude builds → test → story → PR. Your first real contribution.

08-first-component.md | 繁體中文

---

Phase 09 — L3 Graduation (Day 11-14)

Ship 2-3 real web-ui-kit components independently. Respond to code review.

09-l3-graduation.md | 繁體中文

---

Phase 10 — L4 Path (Post-L3)

Three.js, React Three Fiber, immersive web, UI/UX, experiential design.

10-l4-path.md | 繁體中文

---

How it works

1. Work through each phase in order
2. Each phase builds on the previous one — all work happens in real codebases
3. Your primary output is specifications and reviews, not code
4. Claude writes the code; you direct, review, and ship
5. Phase 09 is L3 graduation — real merged PRs to web-ui-kit

Timeline

Phase	Topic	Day
00	Environment Setup	0
01	Terminal & Git	1
02	Claude Code: Basics	1-2
03	Claude Code: Spec-Driven	2-3
04	Claude Code: Workflow	3
05	Read & Review	4-5
06	Testing as Specification	6
07	Storybook	7
08	First Component (guided)	8-10
09	L3 Graduation	11-14
10	L4 Path	Ongoing

License

MIT