What is the primary styling philosophy of this skill?

The skill prioritizes predictability and low specificity. It encourages a flat selector hierarchy (0-1-0) and the use of explicit cascade layers over 'clever' or deeply nested selectors.

Does this skill support SCSS or Sass?

Yes, it includes modern Dart Sass patterns, emphasizing the @use and @forward module system while discouraging the deprecated @import method.

How does it handle responsive layouts?

It uses an 'inside-out' approach, prioritizing intrinsic sizing (clamp, min/max) and Container Queries for components, only using Viewport Media Queries for page-level structural changes.

Why does this skill discourage the use of !important?

!important breaks the natural cascade. This skill teaches you to restructure selectors or use CSS @layer to manage priority safely without resorting to overrides.

When should I use Flexbox versus CSS Grid with this skill?

Use Flexbox for one-dimensional layouts and content-driven sizing; use CSS Grid for two-dimensional layouts and precise, layout-driven structures.

Modern CSS Architecture

Name: Modern CSS Architecture
Author: xobotyi

byxobotyi

•

デザインツール

Implements predictable, low-specificity CSS using modern layout systems and professional architecture patterns.

This skill provides Claude with a comprehensive framework for writing high-quality, maintainable CSS based on modern standards. It emphasizes predictability through low-specificity selectors, explicit cascade control using CSS Layers, and advanced layout techniques with Flexbox and Grid. By integrating modern features like Container Queries, the :has() selector, and logical properties, this skill ensures that styles are responsive, accessible, and future-proof. Whether refactoring legacy code or building new components, it enforces best practices that eliminate common styling headaches like specificity wars and the over-use of !important.

主な機能

01Modern Layout Mastery (Grid, Flexbox, and Subgrid patterns)

02Responsive Design (Container queries, fluid sizing, and user preferences)

03Logical Properties (Direction-agnostic layouts for internationalization)

04Cascade Control (Strategic implementation of CSS @layer)

05Specificity Management (Flat 0-1-0 hierarchy and :where()/:is() usage)

064 GitHub stars

ユースケース

01Implementing accessible design systems with fluid typography and dark mode support

02Refactoring complex legacy stylesheets into clean, modular CSS layers

03Building responsive components that adapt to parent containers rather than viewports

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add xobotyi/cc-foundry css

For use in Claude.ai and ChatGPT

Download Skill