# Frontend CSS

> Apply consistent CSS styling following project methodology (Tailwind, BEM, CSS Modules, utility classes) with minimal custom CSS, design system tokens, and performance optimization. Use this skill when writing styles in .css, .scss, .module.css files, applying Tailwind classes, maintaining design tokens, or working with any styling approach. Applies when styling components, creating layouts, implementing responsive designs, or ensuring visual consistency through established patterns and avoiding framework overrides.

- Skill: `majiayu000/frontend-css-5` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add majiayu000/frontend-css-5`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/frontend-css-5/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/frontend-css-5

---


# Frontend CSS

## When to use this skill

- When creating or modifying CSS files like `styles.css`, `App.module.css`, `components.scss`, or `tailwind.css`
- When applying CSS classes in JSX/HTML templates using Tailwind utility classes or BEM methodology
- When working in style directories like `styles/`, `css/`, `scss/`, or `theme/`
- When defining design system tokens for colors, spacing, typography, shadows, or other visual properties
- When choosing between Tailwind utility classes and custom CSS for component styling
- When avoiding excessive framework overrides that fight against library defaults
- When implementing responsive designs using CSS media queries or Tailwind responsive modifiers
- When optimizing CSS for production through purging/tree-shaking unused styles
- When maintaining consistent spacing, colors, and typography across the application
- When deciding on CSS methodology (CSS Modules for scoping, BEM for naming, utility-first with Tailwind)
- When creating theme configurations or customizing framework defaults in `tailwind.config.js` or similar
- When ensuring CSS performance by minimizing custom styles and leveraging framework utilities

# 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.

## Instructions

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