Which styling formats does it support?

It primarily supports SCSS and CSS, including variables, mixins, custom properties, and standard class-based utility patterns.

Can it detect if I am using Tailwind or Bootstrap?

Yes, it checks for framework-specific configuration files and class usage patterns to ensure Claude suggests framework-compliant styles.

How does this help with BEM naming conventions?

The skill analyzes your existing class structures to identify if you are using BEM or other conventions, then guides Claude to follow that exact pattern for new code.

Does this skill modify my existing CSS files?

No, this skill is strictly for discovery and analysis. It reads your files to summarize patterns but never modifies your codebase.

SCSS Pattern Discovery

Name: SCSS Pattern Discovery
Author: pm7y

bypm7y

디자인 도구

Analyzes existing SCSS and CSS codebases to identify variables, mixins, and utility classes for consistent styling.

소개

The pm7y-scss-patterns skill acts as a style intelligence layer for Claude, scanning your project's stylesheets to catalog design tokens, mixins, and utility classes before you write a single line of new CSS. By mapping out existing variables, naming conventions like BEM, and framework-specific patterns, it ensures that newly generated styles remain consistent with your established design system and avoid redundancy. This is particularly valuable when onboarding to unfamiliar codebases or before initiating a major UI refactor or component creation task.

주요 기능

Automated extraction of SCSS variables and CSS custom properties
Comprehensive inventory of reusable mixins with usage parameters
Generates actionable 'Use These Patterns' summaries for developers
Detection of utility class patterns and framework-specific styles
0 GitHub stars
Analysis of architectural naming conventions like BEM or OOCSS

사용 사례

Maintaining style consistency when creating new UI components
Onboarding to a new project with complex styling architectures
Audit of existing CSS patterns to prevent duplication of design tokens

소개

주요 기능

Automated extraction of SCSS variables and CSS custom properties
Comprehensive inventory of reusable mixins with usage parameters
Generates actionable 'Use These Patterns' summaries for developers
Detection of utility class patterns and framework-specific styles
0 GitHub stars
Analysis of architectural naming conventions like BEM or OOCSS

사용 사례

Maintaining style consistency when creating new UI components
Onboarding to a new project with complex styling architectures
Audit of existing CSS patterns to prevent duplication of design tokens