Skills
.Work. You
Rest

breakpoints

Community

Generate responsive breakpoint tokens.

Design & Creative#css#json#responsive#tailwind#tokens#breakpoints#design-tokens
Authordylantarre
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This skill generates a consistent set of responsive breakpoint tokens for CSS, Tailwind, and JSON, enabling predictable, scalable responsive design.

Core Features & Use Cases

  • Preset support: Use common breakpoint presets (Tailwind, Bootstrap, Material) or define custom values.
  • Versatile formats: Output as CSS variables, Tailwind config, or JSON tokens for cross-platform usage.
  • Container-query readiness: Include container-query breakpoints for component-level responsiveness in modern layouts.
  • Use Case: Migrate an existing 4-6 breakpoint system into a token-driven approach to ensure consistent styling across an app.

Quick Start

  • Provide a baseline of 4-6 breakpoints (e.g., 0, 640px, 768px, 1024px, 1280px, 1536px) and choose output formats (CSS variables, Tailwind config, JSON).
  • The tool will output the corresponding tokens for each format.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: breakpoints
Download link: https://github.com/dylantarre/design-system-skills/archive/main.zip#breakpoints

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.