@codihaus/claude-skills 1.0.0

package/skills/dev-test/SKILL.md

@@ -0,0 +1,364 @@
+---
+name: dev-test
+description: Automated testing after implementation using Playwright
+version: 1.0.0
+---
+
+# /dev-test - Implementation Testing
+
+> **Skill Awareness**: See `skills/_registry.md` for all available skills.
+> - **After**: `/dev-coding` implementation complete
+> - **Auto-triggered**: By `/dev-coding` after implementation
+> - **If fails**: Loop back to fix, then re-test
+
+Automated testing using Playwright to verify implementation works correctly.
+
+## When to Use
+
+- After completing feature implementation
+- After fixing bugs
+- Before code review
+- Before committing changes
+
+## Usage
+
+```
+/dev-test                         # Test current implementation
+/dev-test UC-AUTH-001             # Test specific use case
+/dev-test --url http://...        # Test specific URL
+/dev-test --fix                   # Auto-fix issues found
+```
+
+## What It Tests
+
+| Check | Method | Catches |
+|-------|--------|---------|
+| Console Errors | `browser_console_messages` | JS errors, React errors, warnings |
+| Network Failures | `browser_network_requests` | API 4xx/5xx, failed fetches, timeouts |
+| Visual State | `browser_snapshot` | Render errors, missing elements |
+| Interactions | `browser_click`, `browser_type` | Form failures, broken buttons |
+
+## Workflow
+
+### Phase 1: Prepare Test Context
+
+```
+1. Identify what to test
+   → From UC spec: expected flows, inputs, outputs
+   → From recent changes: modified components/endpoints
+
+2. Determine test URL
+   → From spec or project config
+   → Default: http://localhost:3000
+
+3. Check if dev server running
+   → Look for existing process on port
+   → If not, prompt user to start it
+```
+
+### Phase 2: Navigate and Capture Initial State
+
+```typescript
+// Navigate to the page
+await mcp__playwright__browser_navigate({
+  url: 'http://localhost:3000/login'
+});
+
+// Wait for page to stabilize
+await mcp__playwright__browser_wait_for({ time: 2 });
+
+// Capture accessibility snapshot (better than screenshot for analysis)
+await mcp__playwright__browser_snapshot({});
+```
+
+**Check for immediate errors:**
+- Page loads without errors
+- Expected elements present
+- No console errors on load
+
+### Phase 3: Test User Flows
+
+From the UC spec, execute the happy path:
+
+```typescript
+// Example: Login flow
+// Step 1: Fill form
+await mcp__playwright__browser_type({
+  element: 'email input',
+  ref: 'input-email',  // From snapshot
+  text: 'test@example.com'
+});
+
+await mcp__playwright__browser_type({
+  element: 'password input',
+  ref: 'input-password',
+  text: 'password123'
+});
+
+// Step 2: Submit
+await mcp__playwright__browser_click({
+  element: 'login button',
+  ref: 'btn-login'
+});
+
+// Step 3: Wait for response
+await mcp__playwright__browser_wait_for({
+  text: 'Dashboard'  // Expected after login
+});
+
+// Step 4: Verify result
+await mcp__playwright__browser_snapshot({});
+```
+
+### Phase 4: Collect Errors
+
+```typescript
+// Get console messages (errors, warnings)
+const console = await mcp__playwright__browser_console_messages({
+  level: 'error'
+});
+
+// Get network requests (find failures)
+const network = await mcp__playwright__browser_network_requests({});
+
+// Filter for issues:
+// - Console: Any error level messages
+// - Network: Status >= 400, or failed requests
+```
+
+**Error Categories:**
+
+| Category | Source | Examples |
+|----------|--------|----------|
+| JS Errors | Console | TypeError, ReferenceError, unhandled promise |
+| React Errors | Console | Component errors, hooks violations |
+| API Errors | Network | 400 Bad Request, 401 Unauthorized, 500 Server Error |
+| Network Errors | Network | Failed to fetch, CORS, timeout |
+| Render Errors | Snapshot | Missing elements, wrong state |
+
+### Phase 5: Generate Report
+
+```markdown
+## Test Report
+
+**Target**: UC-AUTH-001 Login
+**URL**: http://localhost:3000/login
+**Status**: ❌ Failed (3 issues)
+
+### Issues Found
+
+#### 🔴 Critical
+
+1. **API Error**: POST /api/auth/login returned 500
+   - Response: `{"error":"Internal server error"}`
+   - Likely cause: Database connection or missing env var
+   - File: Check `src/app/api/auth/login/route.ts`
+
+2. **Console Error**: Unhandled promise rejection
+   - Message: `Cannot read property 'id' of undefined`
+   - Stack: `LoginForm.tsx:45`
+   - Cause: API response handling when login fails
+
+#### 🟡 Warning
+
+3. **Console Warning**: Missing key prop in list
+   - Component: `ErrorMessages.tsx`
+   - Not critical but should fix
+
+### Test Steps Executed
+
+| Step | Action | Result |
+|------|--------|--------|
+| 1 | Navigate to /login | ✓ Page loaded |
+| 2 | Fill email | ✓ Input accepted |
+| 3 | Fill password | ✓ Input accepted |
+| 4 | Click login | ✗ Error occurred |
+| 5 | Verify dashboard | ⏭ Skipped |
+
+### Suggested Fixes
+
+1. Check database connection in backend
+2. Add error handling in LoginForm.tsx:45
+3. Add key prop to ErrorMessages.tsx list items
+```
+
+### Phase 6: Fix Loop (if --fix)
+
+```
+1. For each issue:
+   a. Read the problematic file
+   b. Identify the fix
+   c. Apply the fix
+   d. Re-run failed test step
+
+2. Continue until:
+   - All issues fixed, OR
+   - Max iterations reached (3), OR
+   - Issue requires user input
+
+3. Re-run full test to verify
+```
+
+## Test Patterns
+
+### Form Submission
+
+```typescript
+// 1. Fill form
+await browser_fill_form({
+  fields: [
+    { name: 'Email', type: 'textbox', ref: 'input-email', value: 'test@test.com' },
+    { name: 'Password', type: 'textbox', ref: 'input-password', value: 'password123' }
+  ]
+});
+
+// 2. Submit and wait
+await browser_click({ element: 'Submit button', ref: 'btn-submit' });
+await browser_wait_for({ text: 'Success' });
+
+// 3. Check for errors
+const errors = await browser_console_messages({ level: 'error' });
+```
+
+### Navigation Flow
+
+```typescript
+// 1. Start at page A
+await browser_navigate({ url: '/dashboard' });
+
+// 2. Click to page B
+await browser_click({ element: 'Settings link', ref: 'nav-settings' });
+await browser_wait_for({ text: 'Settings' });
+
+// 3. Verify correct page
+const snapshot = await browser_snapshot({});
+// Check snapshot contains expected elements
+```
+
+### API Response Validation
+
+```typescript
+// 1. Trigger API call (via form submit or button)
+await browser_click({ element: 'Load data', ref: 'btn-load' });
+await browser_wait_for({ time: 2 });
+
+// 2. Check network requests
+const requests = await browser_network_requests({});
+
+// 3. Find the API call
+const apiCall = requests.find(r => r.url.includes('/api/data'));
+
+// 4. Validate
+if (apiCall.status >= 400) {
+  // Report error
+}
+```
+
+### Error State Testing
+
+```typescript
+// Test error handling by submitting invalid data
+await browser_type({
+  element: 'email',
+  ref: 'input-email',
+  text: 'invalid-email'  // No @ symbol
+});
+
+await browser_click({ element: 'Submit', ref: 'btn-submit' });
+
+// Verify error message appears
+const snapshot = await browser_snapshot({});
+// Check for validation error in snapshot
+```
+
+## Test Data
+
+Use predictable test data:
+
+```typescript
+const TEST_DATA = {
+  validEmail: 'test@example.com',
+  validPassword: 'Test123!@#',
+  invalidEmail: 'not-an-email',
+  shortPassword: '123',
+};
+```
+
+For existing data, check spec or use API to fetch valid IDs.
+
+## Common Issues & Solutions
+
+### Issue: Page Not Loading
+
+```
+Symptom: Navigation fails or times out
+Check:
+1. Is dev server running? (npm run dev)
+2. Correct port? (3000, 3001, etc.)
+3. Any build errors?
+```
+
+### Issue: Element Not Found
+
+```
+Symptom: Click/type fails with "element not found"
+Check:
+1. Take snapshot to see current state
+2. Is element conditionally rendered?
+3. Has ref changed since snapshot?
+4. Is page still loading?
+```
+
+### Issue: Intermittent Failures
+
+```
+Symptom: Test passes sometimes, fails sometimes
+Check:
+1. Add wait_for before interactions
+2. Check for race conditions
+3. Increase timeout for slow APIs
+```
+
+## Integration with /dev-coding
+
+When `/dev-coding` completes:
+
+```markdown
+## Implementation Complete
+
+Backend: ✓ API endpoints created
+Frontend: ✓ Components built
+
+**Next Step**: Running /dev-test to verify...
+
+[Auto-triggers /dev-test]
+```
+
+If tests fail, `/dev-test` can:
+1. Report issues for manual fix
+2. Auto-fix with `--fix` flag
+3. Re-run until passing
+
+## Tools Used
+
+| Tool | Purpose |
+|------|---------|
+| `mcp__playwright__browser_navigate` | Go to test URL |
+| `mcp__playwright__browser_snapshot` | Capture page state |
+| `mcp__playwright__browser_type` | Fill form inputs |
+| `mcp__playwright__browser_click` | Click buttons/links |
+| `mcp__playwright__browser_wait_for` | Wait for elements/time |
+| `mcp__playwright__browser_console_messages` | Get JS errors |
+| `mcp__playwright__browser_network_requests` | Get API responses |
+| `Read` | Read spec for expected behavior |
+| `Edit` | Fix issues (with --fix) |
+
+## Output Locations
+
+Test reports are informational and displayed inline. No files created unless requested.
+
+For saved reports:
+```
+plans/features/{feature}/test-reports/
+└── {date}-{UC-ID}.md
+```

package/skills/utils/diagram/SKILL.md

@@ -0,0 +1,205 @@
+---
+name: utils/diagram
+description: Create and validate Mermaid diagrams in markdown files
+version: 1.3.0
+---
+
+# /utils/diagram - Mermaid Diagram Utility
+
+> **Skill Awareness**: See `skills/_registry.md` for all available skills.
+> - **Called by**: `/dev-scout`, `/dev-specs`, `/dev-arch` for diagrams
+> - **Related**: `/utils/docs-graph` for document relationships
+> - **Note**: Utility skill, typically called by other skills
+
+Create, validate, and fix Mermaid diagrams in markdown files.
+
+## Prerequisites
+
+```bash
+npm install -g @mermaid-js/mermaid-cli
+```
+
+Verify: `mmdc --version`
+
+## Usage
+
+```
+/utils/diagram validate path/to/file.md     # Validate diagrams in file
+/utils/diagram validate                      # Validate file from context
+/utils/diagram fix path/to/file.md          # Validate and auto-fix
+```
+
+## Workflow
+
+### Validate Mode
+
+1. Read the markdown file
+2. Extract all mermaid code blocks
+3. For each diagram, run: `mmdc -i <temp-file> -o /tmp/mermaid-out.svg 2>&1`
+4. Report results:
+   - Valid: Confirm with checkmark
+   - Invalid: Show error, location, and what's wrong
+
+### Fix Mode
+
+1. Validate first
+2. For invalid diagrams:
+   - Identify the error type (see `references/common-errors.md`)
+   - Apply fix
+   - Re-validate
+3. Repeat until all diagrams pass
+4. Update the file with fixes
+
+## Supported Diagram Types
+
+### Core Diagrams
+
+| Type | Keyword | Use For |
+|------|---------|---------|
+| Flowchart | `flowchart` | Process flows, decisions |
+| Sequence | `sequenceDiagram` | API flows, interactions |
+| State | `stateDiagram-v2` | Status lifecycle |
+| ER Diagram | `erDiagram` | Database schema |
+| Class | `classDiagram` | Object structures |
+
+### Charts & Visualization
+
+| Type | Keyword | Use For |
+|------|---------|---------|
+| Pie | `pie` | Distribution |
+| XY Chart | `xychart-beta` | Line/bar charts, trends |
+| Quadrant | `quadrantChart` | Priority matrix, effort/impact |
+| Sankey | `sankey-beta` | Flow visualization, funnels |
+
+### Architecture & Systems
+
+| Type | Keyword | Use For |
+|------|---------|---------|
+| **Architecture** | `architecture-beta` | **AWS/Cloud diagrams, CI/CD** |
+| Block | `block-beta` | System blocks, layouts |
+| C4 | `C4Context` / `C4Container` | Software architecture levels |
+| Packet | `packet-beta` | Network protocols |
+
+### Planning & Documentation
+
+| Type | Keyword | Use For |
+|------|---------|---------|
+| Gantt | `gantt` | Project timelines |
+| Timeline | `timeline` | Milestones, phases |
+| Journey | `journey` | User experience mapping |
+| Mindmap | `mindmap` | Feature breakdown |
+| Git Graph | `gitGraph` | Branch strategies |
+| Requirement | `requirementDiagram` | Requirements tracking |
+| Kanban | `kanban` | Task boards |
+
+See `references/diagram-types.md` for complete syntax and examples.
+
+## Architecture Diagrams (AWS/Cloud)
+
+The `architecture-beta` type is specifically designed for cloud infrastructure diagrams.
+
+### Basic Components
+
+```mermaid
+architecture-beta
+    group aws(cloud)[AWS Region]
+
+    group vpc(cloud)[VPC] in aws
+    service alb(server)[Load Balancer] in vpc
+    service ec2(server)[EC2] in vpc
+    service rds(database)[RDS] in vpc
+    service s3(disk)[S3] in aws
+
+    alb:R --> L:ec2
+    ec2:R --> L:rds
+    ec2:B --> T:s3
+```
+
+### Syntax Quick Reference
+
+| Element | Syntax |
+|---------|--------|
+| Group | `group id(icon)[Label]` |
+| Nested group | `group id(icon)[Label] in parent` |
+| Service | `service id(icon)[Label]` |
+| Service in group | `service id(icon)[Label] in group` |
+| Edge | `svc1:R --> L:svc2` |
+| Junction | `junction id` |
+
+### Default Icons
+
+`cloud`, `database`, `disk`, `internet`, `server`
+
+### Edge Directions
+
+`L` (left), `R` (right), `T` (top), `B` (bottom)
+
+### Custom AWS Icons
+
+For actual AWS icons, use Iconify integration:
+```
+service lambda(logos:aws-lambda)[Lambda]
+service s3(logos:aws-s3)[S3]
+```
+
+Note: Custom icons require registering icon packs in the Mermaid config.
+
+## Validation Script
+
+```bash
+# Extract and validate mermaid blocks
+# Save mermaid content to temp file, then:
+mmdc -i /tmp/mermaid-temp.mmd -o /tmp/mermaid-out.svg 2>&1
+
+# Exit code 0 = valid, non-zero = error
+# Stderr contains error details
+```
+
+## Error Handling
+
+When validation fails, the error message indicates:
+- Line number in the diagram
+- Error type (syntax, unknown keyword, etc.)
+- Suggestion for fix
+
+Load `references/common-errors.md` for fix patterns.
+
+## Integration
+
+Other skills can use diagram validation:
+
+```markdown
+<!-- After creating mermaid diagram -->
+1. Write the diagram to file
+2. Run: mmdc -i <file> -o /tmp/validate.svg 2>&1
+3. If error, fix and retry
+4. Continue with skill workflow
+```
+
+## Example
+
+```
+User: /utils/diagram validate plans/billing/brd/flows/FL-MAIN-001-overview.md
+
+Claude: Validating mermaid diagrams in FL-MAIN-001-overview.md...
+
+Found 2 diagrams:
+
+1. Line 5-15: flowchart LR
+   ✓ Valid
+
+2. Line 20-35: sequenceDiagram
+   ✗ Error: Parse error on line 8
+   → "End" is a reserved word, wrap in quotes: "End"
+
+Fixing diagram 2...
+   Applied fix: End → "End"
+   Re-validating... ✓ Valid
+
+Updated file. All diagrams now valid.
+```
+
+## References
+
+- `references/diagram-types.md` - Syntax for each diagram type
+- `references/common-errors.md` - Error patterns and fixes