skills.rest
rodrigo-altissimo
rodrigo-altissimoCOMMUNITY
Explore all skills by this author →
GitHub

design-andy-bell

Design and audit browser-first CSS architectures using CUBE CSS and intrinsic layout primitives.

Updated May 6, 2025
Search Tags:#design tokens#utility classes#css architecture#responsive strategy#cube css#intrinsic layout#fluid type
One-click install
npx skills add https://github.com/rodrigo-altissimo/qiartificial --skill design-andy-bell
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-andy-bell
Source: https://github.com/rodrigo-altissimo/qiartificial/tree/main/.claude/skills/design/andy-bell
Command: npx skills add https://github.com/rodrigo-altissimo/qiartificial --skill design-andy-bell

SYSTEM DOCUMENTATION & REQUIREMENTS

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.”

Frequently Asked Questions about design-andy-bell

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

FAQPage Schema
How do I architect CSS to avoid specificity wars and breakpoint-heavy layouts?▼

You can architect CSS using the CUBE CSS methodology, which structures styles into compositions, utilities, blocks, and exceptions to reduce specificity conflicts and maintainability issues.

What is the best way to implement fluid type and space scales without media queries?▼

Implement fluid type and space scales using CSS custom properties driven by intrinsic layout primitives, allowing layouts to respond to container and content rather than arbitrary viewport widths.

How do I map design tokens to utility classes in a CSS architecture?▼

Map design tokens to CSS custom properties to build token-driven utility systems, creating a scalable architecture that links global styles directly to utility classes.

Can I audit existing CSS for cascade issues and migrate it to CUBE CSS?▼

Yes, you can diagnose cascade issues, specificity problems, and bloat in existing CSS, then follow a structured migration path to refactor the architecture into CUBE CSS.

When should I use intrinsic layouts instead of traditional responsive breakpoints?▼

Use intrinsic layouts when you want layouts to adapt to container and content sizes, avoiding media-query sprawl and replacing arbitrary viewport widths with progressive enhancement constraints.

Related Skills

Explore More Design & Creative Skills→
schalkneethlingschalkneethling
7

css-tokens

Generate a tokens.css file with CSS custom properties for theming and dark mode.

Community
Basic
DITEKmaxDITEKmax

baseline-ui

Enforce Tailwind CSS UI and styling constraints for accessibility, animation, typography, and layout.

Community
Intermediate
corey-alixcorey-alix

Atomic CSS

Create atomic CSS utility classes using token-based custom properties.

Official
Intermediate
maxrittermaxritter
1.8k

Frontend CSS Standards

Enforce consistent CSS standards across React, Vue, and Svelte components.

Community
Intermediate