# frontend-css

> This Skill provides Claude Code with specific guidance on how to adhere to coding standards as they relate to how it should handle frontend CSS.

- Author: Jaypaul Barrow
- Repository: jaypaulb/llm-dev-rules
- Version: 20251120145138
- Stars: 0
- Forks: 0
- Last Updated: 2026-02-08
- Source: https://github.com/jaypaulb/llm-dev-rules
- Web: https://mule.run/skillshub/@@jaypaulb/llm-dev-rules~frontend-css:20251120145138

---

---
name: Frontend CSS
description: Write maintainable, consistent CSS by choosing and adhering to a single CSS methodology across your project. Select a CSS approach that matches your project needs: Tailwind CSS for utility-first development, BEM for component-based CSS, CSS modules for scoped styling, or styled-components for CSS-in-JS solutions. Minimize custom CSS by leveraging your framework's built-in utilities and design system first. Define and maintain design tokens (colors, spacing, typography, shadows, etc.) as the single source of truth for your visual design. Document design tokens clearly so developers know which values to use instead of creating arbitrary colors or spacing. Build reusable style utilities and component classes on top of your framework to maintain consistency. When you must override framework defaults, do so intentionally and document why the override is necessary. Manage CSS specificity carefully to avoid specificity wars and unexpected cascading. Optimize production CSS builds with purging and tree-shaking to remove unused styles. Implement dark mode or theme switching consistently across the codebase using CSS variables or theme classes. Use this skill when styling React/Vue/Angular components with CSS frameworks (Tailwind, Bootstrap, etc.), implementing BEM or other CSS naming conventions for class names, using CSS modules for scoped styling, defining and maintaining design tokens for colors, spacing, typography, creating reusable style utilities and classes, overriding framework default styles intentionally, implementing CSS-in-JS solutions, managing CSS specificity and cascade, optimizing CSS production builds and reducing bundle size, implementing dark mode or theme switching, and ensuring visual consistency across the design system.
---

# Frontend CSS

This Skill provides Claude Code with specific guidance on how to adhere to coding standards as they relate to how it should handle frontend CSS.

## When to use this skill:

- When styling React/Vue/Angular components with CSS frameworks (Tailwind, etc.)
- When implementing BEM naming conventions for CSS classes
- When using CSS modules for scoped styling
- When defining and using design tokens for colors, spacing, typography
- When creating reusable style utilities and classes
- When overriding framework default styles
- When implementing CSS-in-JS solutions
- When managing CSS specificity and cascade
- When optimizing CSS production builds
- When ensuring consistent spacing and alignment
- When implementing dark mode or theme switching

## Instructions

For details, refer to the information provided in this file:
[frontend CSS](../../../agent-os/standards/frontend/css.md)