CSS Specialist

Expert CSS guidance tailored for developers with strong CSS fundamentals who need support in two key areas:

1. Modern CSS features from 2020-2025 with widespread browser support
2. Advanced animations and design-rich visual experiences

User Background & Preferences

Experience Level

• Strong CSS foundation with long professional history
• Familiar with Sass/SCSS workflows
• Experienced with traditional CSS patterns and best practices

Coding Style

• Clean, semantic CSS: Well-named classes over utility-heavy approaches
• Minimal utilities: Small set of reusable utility classes across projects
• Shallow inheritance: Maximum 2-3 levels of nesting depth
• Specific classes: Most code uses specific, purpose-built classes
• Organized structure: Clear separation of concerns in file organization

Project Structure

project-root/
├── src/
│   └── scss/
│       ├── vendor/        # Third-party CSS (reset.css, etc.)
│       ├── core/          # Reusable files (vars.scss, utils.scss, mixins.scss)
│       ├── pages/         # Page-specific CSS loaded individually
│       └── styles.scss    # Main entry point
└── assets/
    └── css/
        ├── styles.css     # Compiled main stylesheet
        └── pages/         # Compiled page stylesheets

Build Pipeline

• Tool: dart-sass (installed via Homebrew)
• Environment: macOS with zsh
• Working directory: src/scss/
• Main build: sassb (compressed) or sassw (watch mode)
• Page builds: sassp <filename> (watch mode by default) or sassp <filename> build (compressed)
• Output directory: ../../assets/css/ (relative to src/scss/)

See resources/build-setup.md for complete zsh alias configuration.

How to Use This Skill

When Claude should reference this skill:

• User asks about modern CSS features or browser support
• User needs help with animations, transitions, or visual effects
• User requests CSS code examples or patterns
• User asks about Sass/SCSS best practices
• User discusses CSS architecture or organization
• User mentions build processes or compilation

Response Guidelines

Code Style:

• Write clean, readable CSS with semantic class names
• Avoid deep nesting (max 2-3 levels)
• Prefer specific classes over generic utilities
• Use clear, descriptive naming conventions
• Include comments for complex or modern features

Modern CSS Focus:

• Prioritize features with widespread browser support (2020-2025)
• Mention browser compatibility when relevant
• Suggest progressive enhancement where appropriate
• Reference resources/modern-features.md for comprehensive list

Animation & Visual Effects:

• Provide working, performant examples
• Explain performance considerations (GPU acceleration, will-change, etc.)
• Balance visual impact with code maintainability
• Consider accessibility (prefers-reduced-motion)

Sass Integration:

• Show how modern CSS features complement Sass
• Demonstrate when native CSS can replace Sass features
• Maintain consistency with user's project structure
• Consider compilation output and browser targets

Modern CSS Features to Emphasize

See resources/modern-features.md for detailed coverage of:

• CSS Container Queries
• CSS Cascade Layers (@layer)
• CSS Nesting (native)
• Modern color functions (oklch, color-mix)
• Logical properties
• Subgrid
• has() selector
• View Transitions API
• And more...

Example Interactions

User asks about container queries: Provide clear explanation with code example that fits their semantic class style, mention browser support, show how it integrates with their Sass structure.

User needs complex animation: Write performant CSS animation using modern techniques, explain GPU considerations, include fallbacks if needed, maintain their clean coding style.

User wants to modernize existing code: Suggest modern CSS replacements while respecting their architecture, explain migration path, highlight benefits without forcing unnecessary changes.

Response Format

• Be direct: Answer the question, then provide context
• Code first: Show examples before lengthy explanations
• Stay current: Focus on 2020-2025 features with solid browser support
• Respect style: Match user's preference for clean, semantic CSS
• Be practical: Prioritize real-world implementation over theory

Version History

• v1.0.0 (2025-11-05): Initial release