skills.rest
kanopi
kanopiOFFICIAL
Explore all skills by this author →
WebsiteGitHub

responsive-styling

Generate mobile-first CSS/SCSS with WCAG AA accessibility and breakpoints.

16|4|Updated Oct 13, 2025
Search Tags:#accessibility#mobile-first#css#responsive#breakpoints#scss
One-click install
npx skills add https://github.com/kanopi/cms-cultivator --skill responsive-styling
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: responsive-styling
Source: https://github.com/kanopi/cms-cultivator/tree/main/skills/responsive-styling
Command: npx skills add https://github.com/kanopi/cms-cultivator --skill responsive-styling

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Automatically generate mobile-first responsive CSS/SCSS when creating component styles or mentioning responsive design. Ensures accessibility best practices are followed and styles scale cleanly across breakpoints.

Core Features & Use Cases

  • Generates mobile-first CSS/SCSS for new components and design tokens.
  • Enforces standard breakpoints (768px, 1024px) and WCAG AA color contrast, focus indicators, and reduced motion.
  • Provides typography and spacing guidance to ensure consistent, accessible UI across devices.

Quick Start

Ask CMS Cultivator to generate responsive styles for a Button component with mobile-first defaults.

Frequently Asked Questions about responsive-styling

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

FAQPage Schema
How do I generate mobile-first responsive CSS for UI components?▼

Generate mobile-first responsive CSS by applying standard breakpoints at 768px and 1024px. This approach ensures UI components scale cleanly across devices while enforcing accessible typography and spacing guidelines.

What accessibility standards are enforced when generating responsive SCSS?▼

Generating responsive SCSS enforces WCAG AA color contrast, 44px touch targets, visible focus indicators, and reduced motion support. These standards ensure components remain accessible across all viewport sizes.

Does this approach enforce specific breakpoints for responsive design?▼

Yes, this approach enforces specific breakpoints at 768px and 1024px for responsive design. These standard viewport widths ensure consistent layout transitions from mobile to desktop screens.

How do I convert design tokens into accessible CSS?▼

Convert design tokens into accessible CSS by mapping them to mobile-first SCSS variables. This process enforces WCAG AA contrast, typography scaling, and precise spacing guidelines automatically.

What is the best way to handle typography scaling and spacing in mobile-first CSS?▼

Handle typography scaling and spacing in mobile-first CSS by enforcing precise guidelines and standard breakpoints. This ensures consistent, accessible UI across devices without manual calculations for each viewport.

Can I use this method to update existing component styles for mobile-first experiences?▼

Yes, you can use this method to update existing component styles for mobile-first experiences. It automatically applies standard breakpoints, accessibility focus indicators, and reduced motion preferences during the conversion.

Related Skills

Explore More Design & Creative Skills→
T1nker-1220T1nker-1220

mobile-ui-standards

Enforce mobile-first UI standards with compact spacing and touch-friendly targets.

Community
Basic
VKirillVKirill
15

frontend-craft

Enforces WCAG AA accessibility and BEM naming in frontend UI markup and stylesheets.

Community
Intermediate
nicolaiprodromovnicolaiprodromov
20

normalize

Normalizes Puree UI designs to match SCSS variables and component conventions.

Community
Advanced
mustafazeydanimustafazeydani

tailwind-css-patterns

Generate utility-first Tailwind CSS classes for responsive web design.

Community
Intermediate