Frontend CSS

Convert inline styles in JSX components to Tailwind CSS utility classes.

Updated Nov 7, 2025

Search Tags:#frontend #design system #UI #CSS #styling #Tailwind #BEM

One-click install

npx skills add https://github.com/wmeints/symbiosis --skill frontend-css-wmeints

Or copy as Structured Prompt for Agent▼

Please help me install this Agent Skill.
Skill: Frontend CSS
Source: https://github.com/wmeints/symbiosis/tree/main/.claude/skills/frontend-css
Command: npx skills add https://github.com/wmeints/symbiosis --skill frontend-css-wmeints

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you overcome the challenges of inconsistent, unmaintainable, and bloated CSS that slows down UI development and introduces errors, by enforcing consistent styling methodologies.

Core Features & Use Cases

Consistent Styling Methodology: Apply project-chosen CSS frameworks or approaches like Tailwind, BEM, CSS Modules, or styled-components.
UI Component Styling: Efficiently style UI components, create layouts, and define design tokens.
Use Case: Refactor a component's CSS to use Tailwind utility classes, ensuring consistency with the project's design system and reducing custom CSS.

Quick Start

Using the Frontend CSS skill, convert the inline styles in ProductCard.jsx to use Tailwind CSS utility classes.