Skills

A collection of agent skills for frontend development. Install with a single command to enhance your AI agent's code review capabilities.

Available Skills

frontend-code-reviewer

Expert code reviewer for React + TypeScript + CSS/SCSS frontend applications. Covers 40+ anti-patterns across 10 review dimensions with prioritized, actionable feedback.

Use when:

• Reviewing frontend code or PRs
• Evaluating React component architecture
• Identifying TypeScript type safety issues
• Auditing CSS/SCSS quality and maintainability
• Checking async patterns, error handling, and performance

Review dimensions:

• React patterns & Hooks correctness (Critical)
• TypeScript type safety (Critical)
• Security — XSS, unsanitized input (Critical)
• Async — race conditions, submission guards (High)
• Server-state consistency — cache invalidation, optimistic updates (High)
• CSS/SCSS — specificity, tokens, naming (High)
• Forms — validation, unsaved changes (High)
• Observability — error reporting, diagnostics (Medium)
• Routing & authorization — URL state, permission gates (Medium)
• Performance — memoization, bundle impact (Medium)

Includes reference documents:

• Full code review checklist organized by category
• React + TypeScript anti-pattern catalog with fixes
• CSS/SCSS anti-pattern catalog with fixes

Installation

npx skills add coderwang/skills

Usage

Skills are automatically available once installed. Your AI agent will use them when relevant tasks are detected.

Examples:

Review this React component for anti-patterns

Check this PR for TypeScript type safety issues

Audit the CSS in this file

Skill Structure

skills/
└── frontend-code-reviewer/
    ├── SKILL.md                          # Main skill instructions
    └── references/
        ├── checklist.md                  # Full code review checklist
        ├── antipatterns.md               # React + TypeScript anti-patterns
        └── css-antipatterns.md           # CSS/SCSS anti-patterns

License

MIT