Reviews CSS/SCSS changes in the current branch for over-specificity, missed reuse opportunities, and over-engineered abstractions. Outputs prioritized tasks to STYLE_TASKS.md. Use when reviewing CSS changes before commit or PR, or to audit existing styles. Supports @file syntax to target specific files.
Reviews CSS/SCSS changes for over-specificity, missed reuse, and over-engineered abstractions.
/plugin marketplace add pm7y/pm7y-marketplace/plugin install pm7y-pm7y-claude-code@pm7y/pm7y-marketplaceThis skill is limited to using the following tools:
Reviews CSS/SCSS changes for unnecessary complexity and missed reuse opportunities.
This skill analyzes CSS/SCSS files for three categories of issues:
When to use:
/pm7y-css-review # Review all CSS/SCSS changes in branch
/pm7y-css-review @path/to/file.scss # Review specific file only
Parse arguments to determine which files to review:
If @file argument provided:
If no arguments (default):
git diff main...HEAD --name-only to find files changed in branchgit diff --name-only for staged/unstaged changes.css and .scss filesScan the project to understand existing styles:
Find all style files:
# Find all CSS and SCSS files in project (exclude node_modules, dist, build)
find . -type f \( -name "*.css" -o -name "*.scss" \) \
-not -path "*/node_modules/*" \
-not -path "*/dist/*" \
-not -path "*/build/*" \
-not -path "*/.next/*"
Extract existing patterns:
For each style file, identify and record:
.class-name selectors$variable-name definitions@mixin mixin-name definitionsStore this inventory mentally for comparison during analysis.
Check for CSS frameworks to understand available utilities:
Tailwind CSS:
tailwind.config.js or tailwind.config.ts@tailwind directives in CSS filesBootstrap:
package.json dependenciesCustom utility systems:
utilities.css, helpers.scss, _utils.scssFor each file in scope, read the content and check for issues:
| Issue | Pattern | Severity |
|---|---|---|
| Deep nesting | Selectors with > 3 levels (e.g., .a .b .c .d) | Medium |
| ID selectors | #id in selectors | Medium |
!important | Any !important declaration | Medium |
| Qualified selectors | Element + class (e.g., div.button) | Low |
| Over-qualified | Multiple classes chained (e.g., .btn.btn-primary.btn-large) | Low |
| Issue | Pattern | Severity |
|---|---|---|
| Duplicate utility | Declaration matches existing utility class | High |
| Framework duplicate | Declaration available as framework utility | High |
| Repeated values | Magic numbers used instead of variables | Medium |
| Similar blocks | Near-identical declaration blocks elsewhere | Medium |
| Issue | Pattern | Severity |
|---|---|---|
| Single-use mixin | @mixin with only one @include | Medium |
| Single-use variable | $variable used only once (except colors) | Medium |
@extend usage | Any use of @extend | Low |
| Deep SCSS nesting | > 3 levels of SCSS nesting | Low |
Create the output file with this exact format:
# CSS/SCSS Review Tasks
*Generated: [YYYY-MM-DD]*
*Branch: [current branch name]*
*Files reviewed: [count]*
---
## [filepath]
### High Priority
- [ ] **#N** (Line X): [Issue description]. [Recommendation].
### Medium Priority
- [ ] **#N** (Line X): [Issue description]. [Recommendation].
### Low Priority
- [ ] **#N** (Line X): [Issue description]. [Recommendation].
---
## [next filepath]
...
Formatting rules:
After writing STYLE_TASKS.md, output a brief summary:
CSS Review Complete
Files reviewed: N
Issues found: X (Y high, Z medium, W low)
Tasks written to STYLE_TASKS.md
Then STOP. Do not attempt to fix any issues.
Deep nesting:
// Bad - 4 levels
.header .nav .menu .item a { color: blue; }
// Recommendation: Simplify to
.header-nav-link { color: blue; }
ID selector:
// Bad
#main-content .sidebar { width: 300px; }
// Recommendation: Use class instead
.main-content .sidebar { width: 300px; }
!important:
// Bad
.modal { z-index: 1000 !important; }
// Recommendation: Fix specificity issue at source
Duplicate utility:
// Bad - if .flex-center exists
.card { display: flex; justify-content: center; align-items: center; }
// Recommendation: Use existing .flex-center class
Framework duplicate (Tailwind):
// Bad - when using Tailwind
.button { margin-left: auto; margin-right: auto; }
// Recommendation: Use Tailwind's mx-auto class
Single-use mixin:
// Bad
@mixin card-shadow {
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.card { @include card-shadow; }
// Recommendation: Inline the styles
.card { box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
Single-use variable:
// Bad
$card-padding: 16px;
.card { padding: $card-padding; }
// Recommendation: Use value directly or existing spacing variable
ALWAYS build the style inventory before analyzing changed files. Without knowing what exists, you cannot identify reuse opportunities.
ALWAYS check for CSS frameworks. Tailwind and Bootstrap provide extensive utilities that should be preferred over custom CSS.
EVERY issue MUST include specific line number(s). Vague references like "in this file" are not acceptable.
EVERY issue MUST include a concrete recommendation. Name specific existing classes, variables, or utility names when suggesting reuse.
After writing STYLE_TASKS.md, STOP. Do not modify any CSS files. Do not attempt to fix issues. The user will decide what to fix.
Before finalizing:
This skill should be used when the user asks to "create a hookify rule", "write a hook rule", "configure hookify", "add a hookify rule", or needs guidance on hookify rule syntax and patterns.
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.