pm7y-scss-patterns

# SCSS/CSS Pattern Discovery Skill

Discovers existing styling patterns in a codebase to ensure new styles follow established conventions and reuse existing utilities.

---

## Overview

This skill scans a codebase to build a comprehensive inventory of:

- **Variables** - Colors, spacing, typography, breakpoints
- **Mixins** - Reusable style blocks
- **Utility classes** - Single-purpose helper classes
- **Component patterns** - Naming conventions, file structure, common approaches

**Output:** A "Use These Patterns" summary that provides actionable guidance for writing new styles.

**When to use:**

- Before writing CSS/SCSS for a new component
- Before creating new utility classes or mixins
- When onboarding to an unfamiliar codebase's styles
- Before running pm7y-css-review to understand what patterns exist

---

## Discovery Process

### Step 1: Find All Style Files

Locate CSS/SCSS files in the project:

```
# Search patterns
**/*.scss
**/*.css
**/styles/**/*
**/css/**/*

# Exclude patterns
node_modules/
dist/
build/
.next/
coverage/
```

Record the file structure - note any organizational patterns like:
- `styles/` or `css/` directories
- `_variables.scss`, `_mixins.scss` partial naming
- Component-colocated styles vs centralized stylesheets

### Step 2: Extract Variables

Search for SCSS/CSS variable definitions:

**SCSS variables:**
```
Pattern: $[a-zA-Z][a-zA-Z0-9-_]*:
```

**CSS custom properties:**
```
Pattern: --[a-zA-Z][a-zA-Z0-9-]*:
```

Categorize discovered variables:

| Category | Common Patterns |
|----------|-----------------|
| Colors | `$color-*`, `$primary`, `$secondary`, `--color-*` |
| Spacing | `$spacing-*`, `$gap-*`, `$margin-*`, `$padding-*` |
| Typography | `$font-*`, `$text-*`, `$heading-*`, `--font-*` |
| Breakpoints | `$breakpoint-*`, `$screen-*`, `$bp-*` |
| Sizing | `$width-*`, `$height-*`, `$size-*` |
| Z-index | `$z-*`, `$zindex-*` |
| Shadows | `$shadow-*`, `$box-shadow-*` |
| Borders | `$border-*`, `$radius-*` |

### Step 3: Extra