Claude Code Plugins

Community-maintained marketplace

Feedback

Frontend CSS

@overtimepog/AgentTheo
0
0

Write maintainable, performant CSS using modern methodologies including Tailwind CSS utility classes, CSS modules, CSS-in-JS, or design system tokens. Use this skill when styling components, creating layouts, implementing design systems, or working with CSS files (.css, .scss, .module.css), Tailwind configuration, styled-components, or CSS-in-JS solutions. Apply this skill when implementing utility-first patterns with Tailwind, using CSS custom properties for theming, creating responsive layouts with flexbox/grid, managing design tokens (colors, spacing, typography), or optimizing CSS for production with purging and tree-shaking. This skill ensures consistent styling methodology across the project, minimizes custom CSS when framework utilities exist, maintains design system coherence, and follows modern CSS best practices including container queries, CSS variables, and performance optimization.

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 maintainable, performant CSS using modern methodologies including Tailwind CSS utility classes, CSS modules, CSS-in-JS, or design system tokens. Use this skill when styling components, creating layouts, implementing design systems, or working with CSS files (.css, .scss, .module.css), Tailwind configuration, styled-components, or CSS-in-JS solutions. Apply this skill when implementing utility-first patterns with Tailwind, using CSS custom properties for theming, creating responsive layouts with flexbox/grid, managing design tokens (colors, spacing, typography), or optimizing CSS for production with purging and tree-shaking. This skill ensures consistent styling methodology across the project, minimizes custom CSS when framework utilities exist, maintains design system coherence, and follows modern CSS best practices including container queries, CSS variables, and performance optimization.

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 CSS styles in .css, .scss, .module.css, or styled-components files
  • When applying Tailwind CSS utility classes to components (className="flex justify-center...")
  • When configuring Tailwind design tokens in tailwind.config.js (colors, spacing, breakpoints)
  • When implementing CSS modules for scoped component styling
  • When using CSS-in-JS solutions (styled-components, Emotion, CSS modules)
  • When creating or maintaining design system tokens (CSS custom properties/variables)
  • When implementing theming systems with CSS variables or Tailwind's dark mode
  • When styling layouts using modern CSS (flexbox, grid, container queries)
  • When ensuring consistent methodology (BEM, utility-first, CSS modules) across the project
  • When optimizing CSS bundle size with purging, tree-shaking, or critical CSS extraction
  • When implementing responsive utilities or custom responsive breakpoints
  • When working with CSS preprocessors (Sass, Less) or PostCSS configurations
  • When avoiding framework style overrides and working with the chosen CSS methodology
  • When ensuring CSS performance and avoiding specificity conflicts

Instructions

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