Codestyle Skill

Purpose

Analyze code files for compliance with project coding standards and consistent patterns used across the codebase.

Key responsibilities:

• Detect naming convention violations
• Check import order and patterns
• Verify Angular patterns
• Check testing compliance
• Verify accessibility standards
• Auto-fix trivial issues (import order, file naming)
• Generate detailed reports

Invocation

Default: Check Git Worktree

/codestyle

Checks all staged and unstaged files (git worktree changes).

Specific Path

/codestyle path/to/file
/codestyle path/to/folder

Checks specific file or all .ts/.tsx files in folder recursively.

Integration Mode (Called by Other Skills)

/codestyle --integration path/to/file

Returns structured results for programmatic use. Used by

/implement

/feature

Categories (All Mandatory)

1. Styling (CRITICAL)

VIOLATION patterns:

// BAD - Hardcoded colors in SCSS
.card { color: #333; background: blue; }

// GOOD - CSS variables
.card { color: var(--color-font-muted); background: var(--color-secondary); }

2. Naming Conventions

Detection patterns:

# File naming - should be kebab-case
BAD:  UserProfile.ts, userProfile.ts
GOOD: user-profile.ts

# Component naming - should be PascalCase
BAD:  export class myComponent
GOOD: export class MyComponent

# Type naming - should be PascalCase
BAD:  type user = {}
GOOD: type User = {}

3. Import Order and Patterns

Correct order:

// 1. Angular and third-party
import { Component, OnInit } from '@angular/core';
import { Observable, Subscription } from 'rxjs';

// 4. Type imports
import type { Place } from '../../models/place';

// 3. Local relative imports
import { ConfigService } from '../../../core/services/config.service';

Auto-fixable: Import order can be auto-fixed.

4. Testing Compliance

Workflow

Step 1: Identify Files to Check

Default (no args):

# Get staged files
git diff --cached --name-only

# Get unstaged modified files
git diff --name-only

# Combine and filter to .ts/.tsx

With path argument:

# If file: check single file
# If directory: glob **/*.{ts,tsx}

Step 2: Run Category Checks

For each file, run checks based on file type:

*.ts

*.scss

*.spec.ts

Step 3: Collect Violations

Group violations by severity:

• CRITICAL: Must fix before merge
• ERROR: Should fix before merge
• WARNING: Best practice, advisory

Step 4: Auto-Fix Trivial Issues

Auto-fixable with confirmation:

• Import order reordering
• File rename to kebab-case (requires updating imports across codebase)

Ask user before applying:

Found 2 auto-fixable issues:
1. Import order in src/app/places/components/place.component.ts
3. Rename UserProfile.ts → user-profile.compoment.ts (will update 5 import statements)

Apply auto-fixes? (y/n)

Step 5: Generate Report

Output file:

docs/code-reviews/{YYYY-MM-DD-HHmmss}-codestyle.md

Also print inline summary:

## Codestyle Check Complete

| Category | Critical | Errors | Warnings |
|----------|----------|--------|----------|
| Naming   | 0        | 1      | 0        |
| Imports  | 0        | 0      | 3        |
| ...      | ...      | ...    | ...      |

**Total: 2 critical, 1 error, 4 warnings**

Full report: docs/code-reviews/2024-01-15-143022-codestyle.md

Integration Mode

When called with

--integration

type CodestyleResult = {
  passed: boolean;           // false if any critical/error
  critical: number;
  errors: number;
  warnings: number;
  violations: Array<{
    file: string;
    line: number;
    category: string;
    severity: 'critical' | 'error' | 'warning';
    message: string;
    autoFixable: boolean;
  }>;
  reportPath: string;
};

Used by:

• /implement

  - After implementing code

• /feature

  - Phase 5 quality gate

Checklist

When running codestyle:

1. Identify files to check (git worktree or specified path)
2. Run all category checks per file type
3. Collect and categorize violations
4. Offer auto-fix for trivial issues
5. Generate markdown report
6. Print inline summary
7. Return structured result if integration mode

Quick Reference: Detection Patterns

File Naming Violation

Glob: **/*.{ts,html,scss}
Check: filename contains uppercase (except index.ts, types.ts)

Missing SCSS file

Check: .ts file in shared/components without corresponding .scss