pre-commit-review

Review React/TypeScript code changes for design, accessibility, and maintainability issues.

4|1|Updated Oct 13, 2025
One-click install
npx skills add https://github.com/buzzdan/ai-coding-rules --skill pre-commit-review-buzzdan
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: pre-commit-review
Source: https://github.com/buzzdan/ai-coding-rules/tree/main/ts-react-linter-driven-development/skills/pre-commit-review
Command: npx skills add https://github.com/buzzdan/ai-coding-rules --skill pre-commit-review-buzzdan

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Responsible for advisory validation of code against design principles, accessibility, and maintainability practices that linters and tests cannot fully enforce. It is used after linting and tests to validate design quality and to surface issues categorized as Design Debt, Readability Debt, or Polish Opportunities, without blocking commits.

Core Features & Use Cases

  • Advisory evaluation after code changes to verify adherence to domain design, architecture, and accessibility guidelines.
  • Helps teams catch architectural smells, readability issues, and minor polish opportunities before merging.
  • Use case: when implementing a feature, run the pre-commit-review phase to surface potential design debts and improve long-term maintainability.

Quick Start

Run the advisory review phase after lint and tests pass to surface design-quality issues before committing.

Frequently Asked Questions about pre-commit-review

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I review React code for design debt and accessibility before committing?

Run an advisory pre-commit review after lint and tests pass to surface design debt and accessibility gaps in your React code. This evaluates alignment with design principles and flags issues like primitive obsession without blocking the commit.

What is advisory design-quality validation for TypeScript projects?

Advisory design-quality validation is a non-blocking review process that evaluates code changes against maintainability and accessibility guidelines. It surfaces design debt, readability issues, and polish opportunities that linters and tests cannot enforce in TypeScript projects.

Does the pre-commit review block commits if it finds accessibility gaps?

No, the pre-commit review does not block commits when it finds accessibility gaps. It operates in an advisory capacity to surface potential problems categorized as Design Debt or Polish Opportunities before merging.

What's the best way to catch primitive obsession and prop drilling in React components?

Apply a design-quality rubric during an advisory pre-commit review to catch primitive obsession and prop drilling. This evaluates React components against maintainability goals and flags architectural smells as Design Debt without blocking commits.

Can I use this advisory review to improve testability in my React project?

Yes, you can use this advisory review to improve testability in your React project. The evaluation rubric flags testability improvements alongside design debt and accessibility gaps, helping surface architectural changes needed for better maintainability.

When do I need an advisory design review instead of just linting?

You need an advisory design review when linting and tests pass but you want to verify alignment with domain design, architecture, and accessibility guidelines. It catches maintainability issues and readability debt that automated linters cannot fully enforce.