How does it handle dark mode?

The skill utilizes CSS variables and [data-theme] attributes to ensure styles are easily switchable and maintainable across different color schemes.

Where does the skill save the generated files?

By default, it organizes styles within the 'front/public/site/css/' directory, categorized by feature name to match the Symfony StarterKit architecture.

What naming convention does it use?

It strictly follows the BEM (Block Element Modifier) methodology to ensure that your stylesheets remain modular, scalable, and free from specificity issues.

Does this skill support SCSS?

Yes, it provides dedicated templates and logic for both standard CSS and SCSS preprocessor syntax, allowing you to choose the best fit for your project.

Symfony CSS Component Architect

Name: Symfony CSS Component Architect
Author: Swoking

bySwoking

0•

设计工具

Generates modular, BEM-compliant CSS and SCSS styles for UI components within Symfony StarterKit projects.

This skill automates the creation of professional frontend styles following strict BEM (Block Element Modifier) conventions and theming best practices. It streamlines the styling process for Symfony StarterKit users by providing standardized templates for both CSS and SCSS, including pre-configured layouts, spacing, and visual states. By leveraging CSS variables, it ensures high maintainability and easy dark mode integration, allowing developers to focus on component logic while Claude handles the boilerplate styling architecture and ensures consistent file organization.

主要功能

01Theming support using CSS custom properties (variables)

020 GitHub stars

03BEM (Block Element Modifier) naming convention enforcement

04Pre-defined UI states for loading, error, and active interactions

05Optimized file structure integration for Symfony StarterKit projects

06Standardized templates for both vanilla CSS and SCSS syntax

使用场景

01Implementing consistent dark mode support across frontend components

02Refactoring legacy styles into modern, modular BEM structures

03Rapidly scaffolding styles for new UI features in a Symfony project

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add swoking/symfony-sk-plugin css-component

For use in Claude.ai and ChatGPT

主要功能

01Theming support using CSS custom properties (variables)

020 GitHub stars

03BEM (Block Element Modifier) naming convention enforcement

04Pre-defined UI states for loading, error, and active interactions

05Optimized file structure integration for Symfony StarterKit projects

06Standardized templates for both vanilla CSS and SCSS syntax

使用场景

01Implementing consistent dark mode support across frontend components

02Refactoring legacy styles into modern, modular BEM structures

03Rapidly scaffolding styles for new UI features in a Symfony project

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add swoking/symfony-sk-plugin css-component

For use in Claude.ai and ChatGPT