skills.rest
Swoking
SwokingCOMMUNITY
Explore all skills by this author →
GitHub

symfony-sk:css-component

Standardize CSS/SCSS component styling with BEM naming and CSS variables.

Updated Jan 15, 2026
Search Tags:#theming#frontend#css#ui-design#scss#bem#component-styles
One-click install
npx skills add https://github.com/Swoking/symfony-sk-plugin --skill symfony-sk-css-component
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: symfony-sk:css-component
Source: https://github.com/Swoking/symfony-sk-plugin/tree/main/plugins/symfony-sk/skills/css-component
Command: npx skills add https://github.com/Swoking/symfony-sk-plugin --skill symfony-sk-css-component

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill standardizes and accelerates the creation of consistent CSS/SCSS styles for UI components, reducing drift and design debt.

Core Features & Use Cases

  • CSS/SCSS templating: provides reusable component styles following BEM conventions.
  • Theming with CSS variables: supports light/dark themes and custom brand colors.
  • Quick-start scaffolding: guides developers to add a new component stylesheet in front/public/site/css.

Quick Start

Create a new component stylesheet at front/public/site/css/<feature>/<name>.css or .scss following the provided templates and BEM naming conventions.

Frequently Asked Questions about symfony-sk:css-component

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I standardize CSS and SCSS styling for UI components?▼

To standardize CSS and SCSS styling for UI components, you can use reusable templates that enforce BEM naming conventions, ensuring consistent visuals across themes, breakpoints, and component states while reducing design debt.

How does BEM naming work for frontend component styles?▼

BEM naming structures frontend component styles into block, element, and modifier classes. This convention is applied to reusable CSS and SCSS templates to maintain consistent styling and prevent visual drift across the repository.

What is the best way to manage light and dark themes with CSS variables?▼

The best way to manage light and dark themes is by using CSS variables for theming. This approach allows you to define custom brand colors once and toggle themes dynamically without rewriting individual component styles.

How do I scaffold a new component stylesheet in my repository?▼

To scaffold a new component stylesheet, you create a file at the path front/public/site/css/<feature>/<name>.css or .scss. This quick-start structure guides you to add styles following predefined templates and BEM conventions.

Can I use SCSS for component styling while supporting multiple breakpoints?▼

Yes, you can use SCSS for component styling while supporting multiple breakpoints. The styling templates enforce consistent visuals across responsive states by combining SCSS capabilities with standardized BEM naming.

Why does my frontend UI design drift across different components?▼

Frontend UI design drifts across different components when there are no standardized styling conventions. Applying reusable CSS/SCSS templates with BEM naming and CSS variables for theming eliminates this drift and reduces design debt.

Related Skills

Explore More Design & Creative Skills→
gitdukgitduk

ui-design-system

Generate design system tokens from brand colors and style variants.

Community
Advanced
xobotyixobotyi
19

css

Enforce modern CSS conventions with low specificity and explicit cascade control.

Community
Intermediate
FAeN399FAeN399

ui-component-design

Design reusable HTML, CSS, and JavaScript UI components with BEM patterns.

Community
Advanced
spencerpaulyspencerpauly
672

converting-css-to-tailwind

Convert plain CSS stylesheets into Tailwind utility classes in markup.

Community
Intermediate