# CSS Specialist

> Expert CSS guidance for developers with strong fundamentals who need help with modern CSS features (2020-2025) and advanced animations/visual effects. Applies clean, semantic CSS patterns with minimal utility classes and shallow inheritance.

- Skill: `majiayu000/css-specialist` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds add majiayu000/css-specialist`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/css-specialist/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/css-specialist

---


# 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