Skill Audit

**Next Steps:**

I found [N] issues during the audit.

Would you like me to:
1. Fix all critical issues now (estimated [time])
2. Fix issues one category at a time (critical → major → minor)
3. Let you review findings first, then decide what to fix
4. Create detailed tickets/todos for each issue

What's your preference?

User: "Create a process to audit and check the entire app for things that might be broken"

Implementation:

**Phase 1: Scope**
- Audit all user-facing features
- Check for runtime errors
- Verify expected behavior

**Phase 2: Discovery**
- List all features (from routes, components, docs)
- Create comprehensive checklist

**Phase 3: Execute**
- Test each feature systematically
- Document working vs broken

**Phase 4: Report**
- Critical: Features that crash
- Major: Features that work incorrectly
- Minor: Features with UX issues

**Phase 5: Fix**
- Prioritized remediation plan

User: "Find all instances of direct DOM manipulation and check if they should use React state"

Implementation:

**Phase 1: Scope**
- Audit: Direct DOM manipulation patterns
- Goal: Identify React anti-patterns

**Phase 2: Discovery**
- Grep for: document.querySelector, getElementById, etc.
- Found: [N] instances

**Phase 3: Execute**
- Check each instance:
  - Is there a good reason for direct DOM?
  - Should it use React state instead?
  - Is it causing bugs?

**Phase 4: Report**
- List instances that should migrate to React
- List instances that are fine as-is

**Phase 5: Fix**
- Refactor problematic instances

User: "Audit the app for button style consistency"

Implementation:

**Phase 1: Scope**
- Audit: All button elements
- Goal: Ensure consistent styling

**Phase 2: Discovery**
- Find all buttons in codebase
- Identify button component(s)

**Phase 3: Execute**
- Check each button against style guide
- Document inconsistencies

**Phase 4: Report**
- Buttons using correct component: [N]
- Buttons with inconsistent styles: [N]
- Buttons using deprecated patterns: [N]

**Phase 5: Fix**
- Standardize all buttons to design system

Audit found a broken feature?
→ Use skill-debug to investigate root cause
→ Use systematic debugging to fix

Audit found UI inconsistencies?
→ Use skill-visual-feedback to fix visual issues
→ Ensure consistency across app

Large audit with many items?
→ Use skill-iterative-loop to process in batches
→ Loop through sections of the app

Audit includes security concerns?
→ Delegate security-specific checks to skill-security-audit
→ Use skill-audit for functional checks

Auditing all form submissions:
1. Login form
2. Registration form
3. Password reset form
4. Contact form
5. Newsletter signup
...
(Methodical, complete)

Checking some forms:
- Login form
- Maybe that contact thing
- Whatever else I find
(Random, incomplete)

Issue: Registration form submit button doesn't work
Location: src/components/RegisterForm.tsx:45
Root cause: onClick handler missing
Fix: Add onClick={handleSubmit}
Effort: 5 minutes

Issue: Some button broken somewhere
Fix: Fix it

**Feature:** [Name]
**Location:** [file:line]

**Tests:**
- [ ] Feature loads without errors
- [ ] Feature responds to user input
- [ ] Feature displays correct data
- [ ] Feature handles errors gracefully
- [ ] Feature works on mobile
- [ ] Feature is accessible

**Result:** ✓ Pass / ⚠️ Issues / ❌ Broken
**Issues:** [if any]

**Pattern:** [What to check]
**Instance:** [file:line]

**Checks:**
- [ ] Follows current best practices
- [ ] Consistent with codebase
- [ ] No deprecated APIs used
- [ ] Properly typed/documented
- [ ] No obvious bugs

**Result:** ✓ Good / ⚠️ Needs update / ❌ Problematic
**Notes:** [any observations]

**Component:** [Name]
**Location:** [file:line]

**Checks:**
- [ ] Uses design system components
- [ ] Follows spacing guidelines
- [ ] Uses correct colors
- [ ] Typography consistent
- [ ] Responsive design works
- [ ] States handled (hover, active, disabled)

**Result:** ✓ Consistent / ⚠️ Minor issues / ❌ Inconsistent
**Issues:** [if any]

Systematic audit → Complete checklist + Methodical execution + Prioritized findings
Otherwise → Missed issues + Duplicate work + No clear action plan