Claude Code Plugins

Community-maintained marketplace

Feedback

Frontend CSS

@grimmolf/mga-soap-calculator
0
0

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.

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

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