Issue 01 | Project Background and Dual-mode Requirements Overview

⏱ Est. reading time: 4 min Updated on 5/7/2026

This tutorial is based on a real project review, documenting the complete process of developing a "Dual-Mode Web Calculator" (Elderly Mode + Standard Mode) using the Claude Code Teams pattern. It focuses on practical issues such as Teams configuration, pitfalls guide, tmux collaboration, notification mechanisms, and context management.

1.1 Project Overview

1.1.1 Product Requirements

Single-page web calculator, supporting two UI modes:

Mode Target User Button Size Font Size Features
Standard Mode General Users 48Γ—48px 18-20px Full functionality, modern color scheme
Elderly Mode 65+ years old 80Γ—80px 28-36px High contrast WCAG AAA, simplified operations, long-press to clear

Technical Constraints: Pure HTML/CSS/JS, no frameworks, no external dependencies, supports offline.

1.1.2 Team Composition

Agent Responsibility Parallelizable Actual Model
team-lead (You) Planning, Coordination, Acceptance - Glm-5
ui-dev HTML Structure + CSS Theme + Responsive + ARIA βœ… Immediately claude-opus-4-7
logic-dev Calculation Engine + Expression Parsing + Keyboard + DOM Binding βœ… Immediately claude-opus-4-7
qa-engineer Test Framework + Unit/Integration/E2E/Accessibility Testing ❌ After the first two are complete claude-opus-4-7

1.1.3 Final File Structure

teamtest/
β”œβ”€β”€ CLAUDE.md                # Project conventions (Agent behavior rules)
β”œβ”€β”€ requirement.md           # Requirement specifications (Chinese)
β”œβ”€β”€ task_plan.md             # Phased plan
β”œβ”€β”€ progress.md              # Session progress log
β”œβ”€β”€ findings.md              # Technical decision records
β”œβ”€β”€ bugs.md                  # Bug tracking
β”œβ”€β”€ index.html               # Semantic HTML (ARIA tags, button IDs)
β”œβ”€β”€ style.css                # Dual-mode CSS variable theme
β”œβ”€β”€ app.js                   # Shunting-yard calculation engine + DOM binding
β”œβ”€β”€ test-runner.js           # Lightweight test framework
β”œβ”€β”€ test.js                  # Unit tests (48 cases)
β”œβ”€β”€ test-dom.js              # DOM integration tests
β”œβ”€β”€ test-a11y.js             # Accessibility tests
β”œβ”€β”€ test-runner.html         # Browser test runner
β”œβ”€β”€ .claude/
β”‚   └── settings.json        # Permission whitelist (auto-approve)
└── scripts/
    β”œβ”€β”€ setup-team.sh        # tmux environment initialization
    └── start-team.md        # Teams startup steps