Can I use this for CSS-in-JS libraries?

Absolutely. It includes specific best practices and implementation patterns for Styled Components and Emotion, as well as CSS Modules.

Does this skill help with responsive layouts?

Yes, it provides patterns for mobile-first media queries, modern CSS Grid and Flexbox layouts, and the latest CSS container queries.

Does it include accessibility best practices?

Yes, it features guides for focus-visible styles, reduced-motion queries, screen reader utilities, and high-contrast mode support.

What CSS methodologies are supported?

The skill covers major industry-standard conventions including BEM (Block Element Modifier), SMACSS, and utility-first approaches like Tailwind CSS.

CSS Architecture & Styling Guide

Name: CSS Architecture & Styling Guide
Author: bailejl

bybailejl

0•

Design Tools

Provides comprehensive guidance on CSS methodologies, naming conventions, and modern layout patterns for building scalable frontend interfaces.

This skill serves as an authoritative reference for CSS architecture, helping developers implement maintainable styling systems using BEM, SMACSS, or utility-first frameworks like Tailwind CSS. It provides actionable patterns for responsive design, fluid typography, and design tokens, while ensuring accessibility standards like focus-visible and reduced motion are integrated into the workflow. It is particularly useful when auditing existing styles, scaffolding new components, or establishing a consistent design system across a project to ensure long-term code quality and performance.

Key Features

01Modern responsive design strategies featuring container queries and fluid typography.

02Comprehensive design token reference for scalable theme and variable management.

03Accessibility-first styling patterns for focus states, motion, and high contrast.

04Standardized naming conventions including BEM and SMACSS for modular code.

050 GitHub stars

06Implementation guides for CSS Modules, Tailwind CSS, and CSS-in-JS libraries.

Use Cases

01Refactoring legacy styles into a modern, maintainable CSS methodology.

02Scaffolding new UI components with best-practice responsive layout patterns.

03Establishing a robust, themeable design system using CSS custom properties.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add bailejl/dev-plugins css-architecture

For use in Claude.ai and ChatGPT

Key Features

01Modern responsive design strategies featuring container queries and fluid typography.

02Comprehensive design token reference for scalable theme and variable management.

03Accessibility-first styling patterns for focus states, motion, and high contrast.

04Standardized naming conventions including BEM and SMACSS for modular code.

050 GitHub stars

06Implementation guides for CSS Modules, Tailwind CSS, and CSS-in-JS libraries.

Use Cases

01Refactoring legacy styles into a modern, maintainable CSS methodology.

02Scaffolding new UI components with best-practice responsive layout patterns.

03Establishing a robust, themeable design system using CSS custom properties.