Awesome-omni-skill Frontend CSS

Write maintainable CSS and styling code using Tailwind CSS, CSS Modules, or other CSS methodologies. Use this skill when styling components, defining design tokens, or working with any CSS-related code. Apply when working on files like *.css, *.scss, *.module.css, tailwind.config.js, components with className props, or any styling code. Essential for following consistent CSS methodologies (Tailwind utilities, BEM, CSS-in-JS), avoiding framework style overrides, maintaining design system tokens (colors, spacing, typography), minimizing custom CSS in favor of framework utilities, and optimizing CSS for production with purging/tree-shaking.

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-mahmoud9-dev" ~/.claude/skills/diegosouzapw-awesome-omni-skill-frontend-css-957c53 && rm -rf "$T"

manifest: skills/development/frontend-css-mahmoud9-dev/SKILL.md

source content

When to use this skill:

When writing Tailwind CSS utility classes in components
When editing CSS, SCSS, or CSS Module files
When configuring tailwind.config.js or design tokens
When applying consistent spacing, colors, and typography
When styling React/Vue/Angular components
When deciding between utility classes vs custom CSS
When implementing design system patterns
When optimizing CSS bundle size for production
When refactoring to reduce CSS overrides and conflicts
When working with CSS variables and theming
When ensuring consistent methodology across the codebase

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