Awesome-omni-skill Frontend CSS

Write and structure CSS using Tailwind CSS v4.0+ utility classes as the default approach, with CSS Modules (camelCase class names) or custom CSS when Tailwind doesn't achieve the desired visual result. Use this skill when styling UI components, implementing layouts, adding responsive breakpoints, creating animations, defining design tokens, or handling dark mode. Apply when working on component files with className attributes, CSS Module files (*.module.css with PascalCase filenames), Tailwind configuration (tailwind.config.js), global stylesheets (globals.css), or any styling-related code. This skill ensures Tailwind CSS as the primary styling method with organized utility classes (layout → spacing → typography → colors → borders → responsive), mobile-first responsive design (sm: 640px, md: 768px, lg: 1024px, xl: 1280px), consistent design tokens defined in tailwind.config.js, CSS Modules with camelCase for custom styles when needed, accessible focus states (focus:ring-2 focus:ring-offset-2) and color contrast (4.5:1 minimum), dark mode support (darkMode: 'class'), custom keyframe animations in config, performance optimizations through CSS purging, and no inline styles.

install

source · Clone the upstream repo

git clone https://github.com/diegosouzapw/awesome-omni-skill

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/diegosouzapw/awesome-omni-skill "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/development/frontend-css-theophiluschinomona" ~/.claude/skills/diegosouzapw-awesome-omni-skill-frontend-css-afb8b2 && rm -rf "$T"

manifest: skills/development/frontend-css-theophiluschinomona/SKILL.md

source content

Frontend CSS

When to use this skill:

When adding styles to React components or UI elements
When implementing layouts with flexbox or grid using Tailwind
When creating responsive designs across mobile, tablet, and desktop
When defining color schemes, typography, or spacing systems in tailwind.config.js
When working with Tailwind CSS utility classes and organizing them by category
When creating CSS Module files (PascalCase.module.css) for custom component styles
When configuring Tailwind (tailwind.config.js) with custom colors, fonts, spacing
When implementing animations or transitions (animate-* utilities or custom keyframes)
When adding dark mode support with dark: variant
When ensuring accessible color contrast (4.5:1) and visible focus states
When optimizing CSS performance and bundle size (CSS purging)
When working on component files with styling (*.tsx, *.jsx, *.module.css)
When centering content, creating grid layouts, or using flexbox patterns
When deciding between Tailwind, CSS Modules, or custom CSS for specific visual needs

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