design-andy-bell

What problem does it solve?

This Skill helps you replace breakpoint-heavy, cascade-fighting CSS with resilient, browser-first CSS architecture using CUBE CSS principles and intrinsic layout methods.

Core Features & Use Cases

• CUBE CSS architecture planning: Generate a layered approach (global CSS, compositions, utilities, blocks, exceptions) that reduces specificity wars and keeps styling maintainable.
• Intrinsic layout design: Produce layout structures using Every Layout primitives so layouts respond to container and content rather than arbitrary viewport widths.
• Fluid token-to-CSS implementation guidance: Translate token concepts into CSS custom properties and fluid type/space scales, then map them to utility systems.
• CSS audit and remediation: Diagnose cascade issues, specificity problems, and bloat, then outline a migration path toward CUBE CSS.

Use case: You’re starting a new design system or refactoring an existing one—this Skill guides you from global styles and tokenized utilities through block conventions and exception patterns, while using intrinsic layouts to avoid media-query sprawl.

Quick Start

Ask an AI to: “Use design-andy-bell to propose a CUBE CSS architecture for my new design system, including compositions, a token-driven utility plan, and an intrinsic responsive layout approach.”