# Frontend Code Audit Skill

Perform systematic code audits on Vue/TypeScript/Phaser frontend code to find anti-patterns, hidden errors, security issues, and architecture violations.

## Usage

```
/frontend-code-audit [category] [path]
```

**Categories:**
- `errors` - Unhandled errors, silent failures, missing error states
- `security` - XSS risks, data exposure, auth token handling
- `architecture` - Vue/Pinia patterns, Phaser integration, component design
- `all` - Run all audit categories (default)

**Path:** Optional path to audit (defaults to `frontend/src/`)

## Examples

```
/frontend-code-audit                     # Full audit of frontend/src/
/frontend-code-audit errors              # Just error handling patterns
/frontend-code-audit security stores/    # Security audit of stores/
/frontend-code-audit architecture game/  # Architecture audit of Phaser code
```

## Instructions

When this skill is invoked:

1. **Load Pattern Definitions**
   Read the YAML files in `patterns/` directory for the requested category.

2. **Search Codebase**
   For each pattern, use Grep with the specified regex to find matches.
   Focus on production code (skip test files unless pattern specifies otherwise).

3. **Analyze Context**
   For each match, read surrounding code to determine verdict:
   - **ISSUE**: Code should be changed (explain why)
   - **WARNING**: Potential problem, needs review
   - **OK**: Pattern detected but implementation is correct (explain why)

4. **Generate Report**
   Output structured report with:
   - Summary stats (issues/warnings/ok by category)
   - Detailed findings with file:line references
   - Recommendations for each issue

## Verdict Guidelines

### Error Handling

**ISSUE** when:
- Promise rejection unhandled (no `.catch()` or try/catch)
- Fetch error caught but UI shows no feedback
- Error logged but component renders as if success
- Empty catch block swallows error

**OK** when:
- Error caught and user notified (toast, error state)
- Error boundary catches and displays fallback
- Retry logic with eventual user feedback
- Graceful degradation documented

### Security

**ISSUE** when:
- `v-html` used with any user-provided data
- Auth token stored in localStorage without httpOnly consideration
- Sensitive data (passwords, tokens) in console.log
- Query params contain auth tokens

**OK** when:
- `v-html` only used with sanitized/trusted content
- Token storage follows project auth pattern
- Logging excludes sensitive fields
- Auth handled via httpOnly cookies or secure headers

### Architecture

**ISSUE** when:
- Game logic (damage calc, turn state) in Phaser scene
- API calls made directly in component (not via composable/store)
- Phaser scene imports from stores without bridge pattern
- Component has >200 lines (should split)

**OK** when:
- Phaser only handles rendering/animation
- API access through typed composables
- Vue-Phaser communication via event bridge
- Large component is page-level layout

## Pattern File Format

```yaml
name: Category Name
description: What this category audits

patterns:
  - id: unique-pattern-id
    description: Human-readable description
    grep_pattern: 'regex pattern for Grep tool'
    file_glob: '*.vue'          # Optional, defaults to *.{vue,ts}
    exclude_tests: true         # Optional, defaults to true
    multiline: false            # Optional, for cross-line patterns
    context_lines: 3            # Lines to read around match
    verdict_hints:
      ISSUE_IF: "condition that makes this an issue"
      OK_IF: "condition that makes this acceptable"
```

## Output Format

```markdown
# Frontend Code Audit Report

**Scope:** frontend/src/
**Categories:** errors, security, architecture
**Date:** YYYY-MM-DD

## Summary

| Category | Issues | Warnings | OK |
|----------|--------|----------|-----|
| Errors | 2 | 1 | 5 |
| Security | 0 | 2 | 3 |
| Architecture | 1 | 0 | 4 |

## Issues (Fix Required)

### [ISSUE] security.v-html-user-data
**File:** src/components/CardDescription.vue:42
**Pattern:** v-html with potentially unsafe content

```vue
<div v-html="card.description" />
```

**Problem:** Card description from API could contain malicious scripts.
**Recommendation:** Use text interpolation or sanitize with DOMPurify.

---

## Warnings (Review Needed)

...

## OK (Verified Correct)

...
```
