skills.rest
cgjen-box
cgjen-boxCOMMUNITY
Explore all skills by this author →
GitHub

breakpoints

Define responsive design systems with CSS variables and breakpoint-driven patterns.

Updated Dec 4, 2025
Search Tags:#a11y#responsive-design#ui-patterns#fluid-typography#brand-guidelines#css-breakpoints
One-click install
npx skills add https://github.com/cgjen-box/evolea-website --skill breakpoints-cgjen-box
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: breakpoints
Source: https://github.com/cgjen-box/evolea-website/tree/main/.claude/skills/breakpoints
Command: npx skills add https://github.com/cgjen-box/evolea-website --skill breakpoints-cgjen-box

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Inconsistent responsive behavior across EVOLEA pages leads to broken layouts, washed-out gradients, and inaccessible components on different devices. This skill provides a single, brand-aligned breakpoint system, fluid typography scales, and reusable patterns to ensure reliable layouts from mobile to ultra-wide screens.

Core Features & Use Cases

  • Establishes a mobile-first foundation with clamp()-based typography and spacing.
  • Defines a scalable container system and prism gradient hero patterns used across pages.
  • Applies responsive patterns to cards, grids, navigation, and components for consistent behavior in design and accessibility across breakpoints.

Quick Start

Apply the EVOLEA breakpoint system to a new component by referencing the documented CSS variables, gradient rules, and responsive patterns to ensure consistent behavior across devices.

Frequently Asked Questions about breakpoints

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

FAQPage Schema
How do I create a responsive design system with fluid typography that scales across mobile and ultra-wide screens?▼

You establish a mobile-first responsive design system by defining clamp()-based CSS variables for typography and spacing, ensuring layouts scale fluidly from mobile to ultra-wide screens without abrupt shifts.

Why does my responsive layout break and gradients wash out on different devices?▼

Responsive layouts break and gradients wash out across devices when pages lack a cohesive breakpoint system. Applying standardized CSS variables, breakpoint-driven patterns, and gradient rules ensures visual integrity across devices.

How do I apply a mobile-first breakpoint system to new UI components?▼

To apply a mobile-first breakpoint system to new UI components, reference documented CSS variables and responsive patterns for cards, grids, and navigation to enforce consistent behavior and accessibility across breakpoints.

Does a fluid typography system support accessibility and brand guidelines?▼

Yes, a fluid typography system supports accessibility and brand guidelines by enforcing CSS variables and breakpoint-driven patterns that maintain visual integrity and accessible component behavior across all devices.

What is the best way to standardize responsive spacing and container widths for ultra-wide screens?▼

The best way to standardize responsive spacing and container widths is defining a scalable container system with clamp()-based spacing variables, ensuring layouts remain proportional on ultra-wide screens.

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
webdriveriowebdriverio
11

Frontend Components

Enforce frontend component coding standards across web UI projects.

Official
Basic
liminal-ailiminal-ai

tailwind-design-system

Centralize design tokens, components, and patterns in Tailwind CSS v4.

Official
Advanced
iButtersiButters
3

responsive-design

Creates mobile-first web layouts with fluid typography, breakpoints, and container queries.

Community
Advanced