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

0•

Design Tools

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.

Key Features

01Automated extraction of SCSS variables and CSS custom properties

02Comprehensive inventory of reusable mixins with usage parameters

03Generates actionable 'Use These Patterns' summaries for developers

04Detection of utility class patterns and framework-specific styles

050 GitHub stars

06Analysis of architectural naming conventions like BEM or OOCSS

Use Cases

01Maintaining style consistency when creating new UI components

02Onboarding to a new project with complex styling architectures

03Audit of existing CSS patterns to prevent duplication of design tokens

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add pm7y/pm7y-marketplace pm7y-scss-patterns

For use in Claude.ai and ChatGPT

Download Skill