skills.rest
dpietersz
dpieterszCOMMUNITY
Explore all skills by this author →
GitHub

Frontend CSS

Standardize CSS practices across projects using Tailwind, BEM, and design tokens.

Updated Jan 15, 2026
Search Tags:#frontend#css#tailwind#tokens#design-systems#css-modules#bem
One-click install
npx skills add https://github.com/dpietersz/pietersz.me --skill frontend-css-dpietersz
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Frontend CSS
Source: https://github.com/dpietersz/pietersz.me/tree/main/.claude/skills/frontend-css
Command: npx skills add https://github.com/dpietersz/pietersz.me --skill frontend-css-dpietersz

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Write and maintain CSS using consistent methodology (Tailwind, BEM, CSS modules, utility classes) while following the project's design system and avoiding framework overrides. Use this skill when writing CSS styles, applying CSS classes, working with CSS frameworks, or implementing visual designs. When editing CSS files (.css, .scss, .sass), applying Tailwind utility classes, using CSS modules, or styling components. When maintaining design tokens, creating design systems, or ensuring visual consistency. When working with colors, spacing, typography, or any visual styling in stylesheets or component files.

Core Features & Use Cases

  • Consistent CSS methodologies: Tailwind, BEM, CSS modules, and utility-first approaches aligned to the design system.
  • Design tokens and design systems: maintain color, spacing, typography tokens and ensure cross-component visual coherence.
  • Framework integration and component styling: apply styling to React, Vue, or other frameworks without overrides; optimize for production when purging or tree-shaking CSS.

Quick Start

Audit a CSS file and apply the project's design system rules to ensure consistent styling across components.

Frequently Asked Questions about Frontend CSS

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I maintain consistent CSS styling across components using different methodologies?▼

Consistent CSS styling is maintained by standardizing practices across projects using methodologies like Tailwind, BEM, and CSS modules. This ensures visual coherence by defining requirements for design tokens, naming conventions, and framework integration.

How do I use design tokens to standardize colors and spacing in a CSS design system?▼

Design tokens standardize colors, spacing, and typography by defining reusable variables within your CSS design system. This ensures cross-component visual coherence and prevents framework overrides when styling frontend components.

Does this approach work with both Tailwind utility classes and BEM naming conventions?▼

Yes, this approach works with both Tailwind utility classes and BEM naming conventions. It standardizes CSS practices by applying consistent methodology across utility-first and block-element-modifier approaches aligned to the project's design system.

What's the best way to apply CSS modules to framework components without overrides?▼

The best way to apply CSS modules without overrides is to integrate styling directly into framework components like React or Vue while following the project's design system. This maintains visual coherence and avoids conflicting framework style overrides.

When should I not use utility classes when editing CSS stylesheets?▼

You should avoid using utility classes when editing CSS stylesheets if they conflict with the existing design tokens or naming conventions. Maintaining visual coherence requires adhering to the established BEM or CSS modules methodology already present in the project.

How do I audit an existing CSS file for design system compliance?▼

Auditing a CSS file for design system compliance involves checking the styles against the project's rules for tokens, naming conventions, and framework integration. This process ensures consistent styling and identifies areas needing alignment.

Related Skills

Explore More Software Engineering Skills→
vidzzavidzza

css-tokens

Provide foundational CSS design tokens as custom properties for web projects.

Community
Basic
mahg-esmahg-es
3

performance

Measure Core Web Vitals and audit frontend performance bottlenecks.

Official
Intermediate
wshobsonwshobson
38.6k

web-component-design

Design reusable web UI components with patterns and styling approaches.

Community
Intermediate
EIS-ITSEIS-ITS

Frontend CSS

Apply design tokens and CSS methodologies to style components and optimize production builds.

Official
Intermediate