Claude Code Plugins

Community-maintained marketplace

Feedback

Frontend CSS

@overtimepog/rpg-mcp
1
0

Write and organize CSS code following the project's chosen methodology (Tailwind, BEM, CSS Modules, styled-components, etc.) with consistent design tokens and minimal custom styles. Use this skill when writing or modifying styles for UI elements, layouts, or visual design. Apply when working with CSS files, Sass/SCSS files, Tailwind utility classes, CSS-in-JS files, styled-components, CSS Modules, or any styling code. Use when implementing design systems, defining design tokens (colors, spacing, typography), applying utility-first CSS methodologies, or maintaining visual consistency. Apply when optimizing CSS for production, removing unused styles, avoiding framework override conflicts, or establishing consistent styling patterns. Use when implementing theme systems, dark mode, or maintaining CSS performance and maintainability.

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 Write and organize CSS code following the project's chosen methodology (Tailwind, BEM, CSS Modules, styled-components, etc.) with consistent design tokens and minimal custom styles. Use this skill when writing or modifying styles for UI elements, layouts, or visual design. Apply when working with CSS files, Sass/SCSS files, Tailwind utility classes, CSS-in-JS files, styled-components, CSS Modules, or any styling code. Use when implementing design systems, defining design tokens (colors, spacing, typography), applying utility-first CSS methodologies, or maintaining visual consistency. Apply when optimizing CSS for production, removing unused styles, avoiding framework override conflicts, or establishing consistent styling patterns. Use when implementing theme systems, dark mode, or maintaining CSS performance and maintainability.

When to use this skill:

  • When writing or modifying CSS, Sass, SCSS, or styling code
  • When applying Tailwind CSS utility classes or other utility-first frameworks
  • When working with CSS-in-JS, styled-components, or CSS Modules
  • When implementing design tokens for colors, spacing, typography, or other design values
  • When ensuring consistency with the project's CSS methodology (BEM, utility-first, etc.)
  • When avoiding or minimizing custom CSS in favor of framework utilities
  • When optimizing CSS for production with purging or tree-shaking
  • When implementing design systems or component styling patterns
  • When creating theme systems, dark mode, or style variations
  • When refactoring styles to follow project conventions
  • When maintaining CSS performance and reducing stylesheet size

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