Claude Code Plugins

Community-maintained marketplace

Feedback

Frontend CSS

@TheophilusChinomona/blackeaglegroup
0
0

Apply consistent CSS methodology (Tailwind, BEM, CSS Modules) across the project while maintaining design systems, avoiding framework overrides, and optimizing for production with proper purging and tree-shaking. Use this skill when writing or modifying CSS styles, when using CSS frameworks like Tailwind CSS, when implementing design system tokens (colors, spacing, typography), when writing custom CSS that extends framework utilities, when optimizing CSS bundle size with purging, when deciding on CSS architecture (utility-first, BEM, CSS Modules), when ensuring consistent styling patterns across components, when avoiding excessive framework overrides, or when setting up CSS preprocessing or PostCSS configurations.

Install Skill

1Download skill
2Enable skills in Claude

Open claude.ai/settings/capabilities and find the "Skills" section

3Upload to Claude

Click "Upload skill" and select the downloaded ZIP file

Note: Please verify skill by going through its instructions before using it.

SKILL.md

name Frontend CSS
description Apply consistent CSS methodology (Tailwind, BEM, CSS Modules) across the project while maintaining design systems, avoiding framework overrides, and optimizing for production with proper purging and tree-shaking. Use this skill when writing or modifying CSS styles, when using CSS frameworks like Tailwind CSS, when implementing design system tokens (colors, spacing, typography), when writing custom CSS that extends framework utilities, when optimizing CSS bundle size with purging, when deciding on CSS architecture (utility-first, BEM, CSS Modules), when ensuring consistent styling patterns across components, when avoiding excessive framework overrides, or when setting up CSS preprocessing or PostCSS configurations.

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 writing or modifying CSS styles in any format
  • When using CSS frameworks like Tailwind CSS, Bootstrap, or Material-UI
  • When implementing design system tokens (colors, spacing, typography, shadows)
  • When writing custom CSS classes or utility classes
  • When optimizing CSS bundle size with purging or tree-shaking
  • When choosing CSS architecture methodology (Tailwind utility-first, BEM, CSS Modules)
  • When ensuring consistent styling patterns across components
  • When avoiding excessive framework style overrides
  • When setting up CSS preprocessing (Sass, Less) or PostCSS
  • When creating reusable CSS utilities or mixins
  • When documenting design system guidelines
  • When refactoring CSS to reduce duplication
  • When ensuring CSS follows project conventions

Instructions

For details, refer to the information provided in this file: frontend CSS