breakpoints

Generate CSS, Tailwind, and JSON responsive breakpoint tokens from presets or custom values.

38|3|Updated Dec 29, 2025

Search Tags:#css #json #responsive #tailwind #tokens #breakpoints #design-tokens

Ready to run

npx skills add https://github.com/dylantarre/design-system-skills --skill breakpoints

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: breakpoints
Source: https://github.com/dylantarre/design-system-skills/tree/main/skills/tokens/breakpoints
Command: npx skills add https://github.com/dylantarre/design-system-skills --skill breakpoints

SYSTEM DOCUMENTATION & REQUIREMENTS

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.

Frequently Asked Questions about breakpoints

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

FAQPage Schema

How do I generate responsive breakpoint tokens for CSS and Tailwind?▼

To generate responsive breakpoint tokens, provide a baseline of 4-6 breakpoints and choose your desired output formats. The tool outputs corresponding CSS variables, Tailwind config, or JSON tokens for cross-platform usage.

Can I use custom breakpoint values instead of standard framework presets?▼

Yes, you can use custom breakpoint values instead of standard presets. The tool supports common presets like Tailwind, Bootstrap, and Material, or allows you to define custom values to match specific project standards.

What is the best way to migrate an existing CSS breakpoint system to design tokens?▼

The best way to migrate an existing breakpoint system to design tokens is to input your current 4-6 breakpoints. The tool converts them into deterministic token outputs across CSS variables, Tailwind config, and JSON formats.

Does this tool support container query breakpoints for component-level layouts?▼

Yes, the tool supports container query breakpoints for component-level responsiveness. It includes container-query breakpoints alongside standard media queries to enable modern layout responsiveness in design systems.

What formats are available for exporting design tokens from breakpoints?▼

Available formats for exporting breakpoint design tokens include CSS variables, Tailwind config, and JSON tokens. These format-specific outputs ensure the generated tokens match your project standards and cross-platform requirements.