skills.rest
dylantarre
dylantarreCOMMUNITY
Explore all skills by this author →
Website𝕏@beatthetarGitHub

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
One-click install
npx skills add https://github.com/dylantarre/design-system-skills --skill breakpoints
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
Tsin418Tsin418

okx-wallet-portfolio

Resolve a wallet address into cross-chain portfolio totals and token holdings.

Community
Advanced
somachaksomachak

modern-css-architecture

Standardize design tokens and component styling patterns for Tailwind-based React projects.

Community
Intermediate
0xDarkMatter0xDarkMatter
29

tailwind-patterns

Generate Tailwind CSS v3+ utility patterns with responsive breakpoints and dark mode configuration.

Community
Basic
wredziowredzio

using-tailwind-design-tokens

Enforce Tailwind design tokens from globals.css in TSX/CSS files.

Community
Basic