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
1---2name: frontend-css-theophiluschinomona3description: Frontend CSS4---56# Frontend CSS78## When to use this skill:910- When adding styles to React components or UI elements11- When implementing layouts with flexbox or grid using Tailwind12- When creating responsive designs across mobile, tablet, and desktop13- When defining color schemes, typography, or spacing systems in tailwind.config.js14- When working with Tailwind CSS utility classes and organizing them by category15- When creating CSS Module files (PascalCase.module.css) for custom component styles16- When configuring Tailwind (tailwind.config.js) with custom colors, fonts, spacing17- When implementing animations or transitions (animate-* utilities or custom keyframes)18- When adding dark mode support with dark: variant19- When ensuring accessible color contrast (4.5:1) and visible focus states20- When optimizing CSS performance and bundle size (CSS purging)21- When working on component files with styling (*.tsx, *.jsx, *.module.css)22- When centering content, creating grid layouts, or using flexbox patterns23- When deciding between Tailwind, CSS Modules, or custom CSS for specific visual needs2425This Skill provides Claude Code with specific guidance on how to adhere to coding standards as they relate to how it should handle frontend CSS.2627## Instructions2829For details, refer to the information provided in this file:30[frontend CSS](../../../agent-os/standards/frontend/css.md)
Run npx skillmds@latest add diegosouzapw/frontend-css-theophiluschinomona in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.
Frontend CSS It is listed under Web & Frontend on SkillMD.
This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.
This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.
Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.
diegosouzapw (@diegosouzapw) published this skill. Their other Agent Skills are listed on their SkillMD profile.
diegosouzapw