Claude Code Plugins

Community-maintained marketplace

Feedback

Frontend CSS

@SpacePlushy/portfolio
0
0

Write Tailwind CSS utility classes and component styles following scoped CSS patterns, design tokens, responsive breakpoints, and dark mode support. Use this skill when styling components, creating layouts, implementing design systems, or writing CSS/Tailwind classes. When working on Astro component style blocks, Tailwind configuration files, global CSS files, CSS custom properties and design tokens, component scoped styles, responsive breakpoints and media queries, dark mode theming, CSS Grid and Flexbox layouts, animation and transition styles, or Tailwind @apply directives and utility composition.

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 Tailwind CSS utility classes and component styles following scoped CSS patterns, design tokens, responsive breakpoints, and dark mode support. Use this skill when styling components, creating layouts, implementing design systems, or writing CSS/Tailwind classes. When working on Astro component style blocks, Tailwind configuration files, global CSS files, CSS custom properties and design tokens, component scoped styles, responsive breakpoints and media queries, dark mode theming, CSS Grid and Flexbox layouts, animation and transition styles, or Tailwind @apply directives and utility composition.

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 Tailwind CSS utility classes in component markup
  • When creating scoped component styles in <style> blocks within .astro files
  • When configuring Tailwind (tailwind.config.mjs) with custom colors, spacing, or breakpoints
  • When defining global styles in CSS files (e.g., src/styles/global.css)
  • When implementing CSS custom properties (CSS variables) for design tokens
  • When creating responsive layouts using CSS Grid or Flexbox
  • When implementing media queries for different screen sizes
  • When setting up dark mode theming with CSS or Tailwind's dark: variant
  • When writing CSS animations, transitions, or keyframe animations
  • When using BEM methodology for class naming in custom CSS
  • When optimizing CSS performance (critical CSS, lazy loading, purging unused styles)

Instructions

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