Appearance
Resources
Everything referenced across this site, plus useful links for working in Beacon.
Required reading
| What | Why |
|---|---|
| Why AI is Exposing Design's Craft Crisis | The article behind this whole program. Explains why designers lost strategic influence and how AI provides the way back. |
| Shape Up, Chapter 4: Find the Elements | Where breadboarding comes from. Explains how to sketch what a feature should do before what it looks like. |
| Shape Up (full book) | The methodology Josh adapted for Beacon. Shaping, breadboarding, vertical slices, appetite-based planning. Free online. |
Design process inspiration
| Source | What's useful |
|---|---|
| Resend Handbook | Concept, implementation, and polish as distinct phases. Share from day one with the entire team. |
| Rauno Freiberg (Vercel) | Disposable code during exploration. Share tiny videos and demos immediately. Iterate to greatness. |
| The Craft Crisis | Strategic literacy. Evaluate AI output. Participate in technical decisions. The philosophical backbone. |
Beacon documentation
These live in the beacon-app repo. Claude can read all of them and explain them to you.
| Doc | What's in it |
|---|---|
| README.md | Getting started, setup, how we work, further reading |
| CONTRIBUTING.md | Branch naming, slash commands, pre-commit hooks, feature flags, troubleshooting |
| AGENTS.md | The developer operating manual. 555 lines. Architecture, data layer, TypeScript patterns, components, AI features. |
| CLAUDE.md | Quick reference. Architecture, critical rules, key files, performance targets. |
| docs/development/getting-started.md | Full walkthrough from first ticket to merged PR |
| docs/development/claude-code-guide.md | Complete reference for all commands, agents, skills, rules, and workflows |
| docs/development/engineering-guide-for-designers.md | How Beacon's codebase is organized and why. Code structure, Vue patterns, data storage, Git, PR hygiene. Read it once. |
| docs/development/adding-data-to-beacon.md | Beacon's data layer: schema design, the controller pattern, mock data pipeline. Read before adding any new entity type. |
Josh wrote this for designers working in Beacon. It covers how the code is organized, why things work the way they do, and what to expect when reviewing Claude's output. Read it once. Keep it open whenever something in the code surprises you.
Tools
| Tool | What it does |
|---|---|
| Claude Code | AI pair partner. Describe what you want, it builds. The primary tool for everything. |
| Dialtone | Dialpad's design system. Components, tokens, icons, utilities, content guidelines. |
| Dialtone MCP | Search components, icons, and tokens from within Claude. Claude knows the design system. |
| Figma MCP | Point Claude at a Figma frame URL, get a code starting point. Bridge between Figma and code. |
| Jira MCP / CLI | Pull ticket context, related tickets, acceptance criteria into Claude. Jira CLI setup. |
| Amplitude MCP | User behavior data, funnels, drop-offs directly in Claude conversations. |
| GitHub CLI | Create PRs, manage branches from the terminal. Used by Beacon's /pr-create command. |
| Skill Creator | Build, test, and compare Claude skills without code. Install via /plugin in Claude, find skill-creator under claude-plugins-official. |
Dialtone references
| Resource | Link |
|---|---|
| Components | dialtone.dialpad.com/components |
| Utility CSS | dialtone.dialpad.com/utilities |
| Design tokens | dialtone.dialpad.com/tokens |
| Icons | dialtone.dialpad.com/icons |
| Content guidelines | dialtone.dialpad.com/guides/content |
Claude Code guides (Josh Hynes)
| Guide | What's in it |
|---|---|
| Claude Code: From Zero to Daily Driver | Installation, mental models, session management, CLAUDE.md setup, common failure patterns, daily habits. Written for the Dialpad team. |
| Skills vs Subagents vs Commands | Clears up the most confusing part of Claude Code's extension model. |
Josh also built a daily workflow system — progress tracked automatically, open items surfaced every morning, nothing falling through the cracks. It has three parts:
| Part | What it does |
|---|---|
| Notes system | Three hooks that auto-maintain session notes as you work. No manual logging. Survives context compression. |
| Integrations | Glean (calendar + email), GitHub CLI, Jira CLI, Dialpad MCP. Feed live data into the daily commands. All optional. |
| Daily commands | /day-start (morning briefing), /day-wrap (end of day), /wrap (end of session), /snippet (weekly update), /reflect (extract learnings). |
Install integrations first, then daily commands. The install prompt asks which integrations you have and skips the rest. Start with just the notes system if you want to keep it simple.
Learning resources
| Resource | What it is |
|---|---|
| Shape Up | The methodology behind /shaping and /breadboarding. Free book. |
| Vue 3 + TypeScript Guide | If you want to understand what Claude is writing. Not required. |
| Pinia with TypeScript | State management in Beacon. Again, not required, Claude handles it. |
| WCAG 2.1 Quick Reference | Accessibility standards. Useful for understanding what /pr-prep checks. |
Internal links
- The process for the design workflow
- The toolkit for every command explained for designers
- Getting started for quick reference
- Project IRL for the full arc
- What's new for Beacon toolkit changes
- #ai-coding on Dialpad
- Your facilitator, DM anytime