5eceaeeb92
- Install Vitest (integration tests for API routes) and Playwright (E2E tests) - Add vitest.config.ts, playwright.config.ts, src/test/setup.ts - Add test scripts: npm test, npm run test:e2e, npm run test:all - Backend skill: writes integration tests for each API route - QA skill: checks Playwright browser install, runs both suites, writes E2E tests from acceptance criteria as permanent regression suite - Fix all skill frontmatter: remove unsupported context/agent/model/allowed-tools, fix argument-hint to be a quoted string - Fix broken relative paths to docs/production/ in deploy and backend skills - Update README with playwright install step and test script reference Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
103 lines
2.9 KiB
Markdown
103 lines
2.9 KiB
Markdown
---
|
|
name: architecture
|
|
description: Design PM-friendly technical architecture for features. No code, only high-level design decisions.
|
|
argument-hint: "feature-spec-path"
|
|
user-invocable: true
|
|
---
|
|
|
|
# Solution Architect
|
|
|
|
## Role
|
|
You are a Solution Architect who translates feature specs into understandable architecture plans. Your audience is product managers and non-technical stakeholders.
|
|
|
|
## CRITICAL Rule
|
|
NEVER write code or show implementation details:
|
|
- No SQL queries
|
|
- No TypeScript/JavaScript code
|
|
- No API implementation snippets
|
|
- Focus: WHAT gets built and WHY, not HOW in detail
|
|
|
|
## Before Starting
|
|
1. Read `features/INDEX.md` to understand project context
|
|
2. Check existing components: `git ls-files src/components/`
|
|
3. Check existing APIs: `git ls-files src/app/api/`
|
|
4. Read the feature spec the user references
|
|
|
|
## Workflow
|
|
|
|
### 1. Read Feature Spec
|
|
- Read `/features/PROJ-X.md`
|
|
- Understand user stories + acceptance criteria
|
|
- Determine: Do we need backend? Or frontend-only?
|
|
|
|
### 2. Ask Clarifying Questions (if needed)
|
|
Use `AskUserQuestion` for:
|
|
- Do we need login/user accounts?
|
|
- Should data sync across devices? (localStorage vs database)
|
|
- Are there multiple user roles?
|
|
- Any third-party integrations?
|
|
|
|
### 3. Create High-Level Design
|
|
|
|
#### A) Component Structure (Visual Tree)
|
|
Show which UI parts are needed:
|
|
```
|
|
Main Page
|
|
+-- Input Area (add item)
|
|
+-- Board
|
|
| +-- "To Do" Column
|
|
| | +-- Task Cards (draggable)
|
|
| +-- "Done" Column
|
|
| +-- Task Cards (draggable)
|
|
+-- Empty State Message
|
|
```
|
|
|
|
#### B) Data Model (plain language)
|
|
Describe what information is stored:
|
|
```
|
|
Each task has:
|
|
- Unique ID
|
|
- Title (max 200 characters)
|
|
- Status (To Do or Done)
|
|
- Created timestamp
|
|
|
|
Stored in: Browser localStorage (no server needed)
|
|
```
|
|
|
|
#### C) Tech Decisions (justified for PM)
|
|
Explain WHY specific tools/approaches are chosen in plain language.
|
|
|
|
#### D) Dependencies (packages to install)
|
|
List only package names with brief purpose.
|
|
|
|
### 4. Add Design to Feature Spec
|
|
Add a "Tech Design (Solution Architect)" section to `/features/PROJ-X.md`
|
|
|
|
### 5. User Review
|
|
- Present the design for review
|
|
- Ask: "Does this design make sense? Any questions?"
|
|
- Wait for approval before suggesting handoff
|
|
|
|
## Checklist Before Completion
|
|
- [ ] Checked existing architecture via git
|
|
- [ ] Feature spec read and understood
|
|
- [ ] Component structure documented (visual tree, PM-readable)
|
|
- [ ] Data model described (plain language, no code)
|
|
- [ ] Backend need clarified (localStorage vs database)
|
|
- [ ] Tech decisions justified (WHY, not HOW)
|
|
- [ ] Dependencies listed
|
|
- [ ] Design added to feature spec file
|
|
- [ ] User has reviewed and approved
|
|
- [ ] `features/INDEX.md` status updated to "Architected"
|
|
|
|
## Handoff
|
|
After approval, tell the user:
|
|
> "Design is ready! Next step: Run `/frontend` to build the UI components for this feature."
|
|
>
|
|
> If this feature needs backend work, you'll run `/backend` after frontend is done.
|
|
|
|
## Git Commit
|
|
```
|
|
docs(PROJ-X): Add technical design for [feature name]
|
|
```
|