playbooks

home / skills / tlabs-xyz / tbtc-v2-performance / frontend-css

frontend-css skill

/.claude/skills/frontend-css

This skill guides you to write maintainable, performant CSS across frameworks using design tokens, methodologies like BEM, CSS modules, and utility classes.

npx playbooks add skill tlabs-xyz/tbtc-v2-performance --skill frontend-css

Review the files below or copy the command above to add this skill to your agents.

Files (1)
SKILL.md
1.9 KB
---
name: Frontend CSS
description: Write maintainable, consistent CSS following the project's methodology (Tailwind, BEM, CSS modules, utility classes) with design tokens and performance optimization. Use this skill when writing CSS styles, styling UI components, implementing layouts, working with CSS files (.css, .scss, .sass, .less), writing Tailwind utility classes, implementing CSS modules, creating or updating design tokens, working with CSS-in-JS solutions, implementing responsive styles, writing custom CSS when framework utilities are insufficient, optimizing CSS for production, or working with styling in component files (styled-components, emotion, Vue scoped styles). Use when working with any styling approach including Tailwind, Bootstrap, BEM, CSS modules, styled-components, emotion, or traditional CSS.
---

## When to use this skill

- When writing CSS styles or style sheets
- When styling UI components or layouts
- When working with CSS files (.css, .scss, .sass, .less)
- When writing Tailwind utility classes
- When implementing CSS modules or scoped styles
- When creating or updating design tokens (colors, spacing, typography)
- When working with CSS-in-JS solutions (styled-components, emotion)
- When implementing responsive styles or breakpoints
- When writing custom CSS for framework gaps
- When optimizing CSS for production (purging, tree-shaking)
- When working with component styling (Vue scoped styles, Angular component styles)
- When implementing theming or dark mode
- When following BEM, OOCSS, or other CSS methodologies
- When working with any CSS framework (Tailwind, Bootstrap, Bulma, etc.)

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

Overview

This skill guides writing maintainable, consistent frontend CSS across projects using Tailwind, BEM, CSS modules, CSS-in-JS, and traditional stylesheets. It emphasizes design tokens, predictable class naming, and performance optimizations so styles scale with the codebase. Use it to produce clear, testable, and themeable styling for components and layouts.

How this skill works

The skill inspects component markup and project conventions, then recommends class names, structure, and tokenized values that follow the chosen methodology (e.g., Tailwind utilities, BEM, or CSS modules). It suggests responsive rules, accessibility-related visual states, and production optimizations like purging unused styles and minimizing specificity. When necessary it produces snippets for .css/.scss/.less files, Tailwind utility sets, or CSS-in-JS blocks aligned with the project’s token system.

When to use it

  • Writing or refactoring component styles (.css, .scss, .sass, .less, .module.css)
  • Implementing or updating Tailwind utility classes and config
  • Creating or updating design tokens (colors, spacing, typography)
  • Adding responsive rules, themes, or dark mode support
  • Optimizing styles for production (purge, tree-shake, bundle size)

Best practices

  • Prefer design tokens for colors, spacing, and type to keep consistency and enable theming
  • Follow the project methodology (Tailwind, BEM, CSS modules) and avoid mixing patterns in the same component
  • Keep specificity low; use utility classes or single-purpose selectors instead of deep combinators
  • Write responsive rules mobile-first and consolidate breakpoints in tokens or config
  • Purge unused CSS and prefer tree-shakable utilities to reduce bundle size

Example use cases

  • Convert a legacy .css file to tokenized SCSS with variables and component-scoped classes
  • Implement a responsive card component using Tailwind utilities and a theme token for spacing
  • Create CSS modules for a React component to avoid global leakage and simplify testing
  • Add dark mode variants and token overrides for a site-wide theme switch
  • Optimize a large stylesheet by identifying unused selectors and enabling purge in the build

FAQ

Which methodology should I pick for a new project?

Choose based on team skills and long-term maintenance: Tailwind for fast utility-driven builds, BEM for explicit class structure, CSS modules or CSS-in-JS for component isolation and scoped styles.

How do I introduce design tokens into an existing codebase?

Start with core tokens (colors, spacing, type scale), map current values to tokens, update components incrementally, and enforce tokens in reviews and CI linting.