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

radius-scale

Generate scalable border-radius tokens for CSS, Tailwind, and JSON outputs.

38|3|Updated Dec 29, 2025
Search Tags:#css#json#tailwind#generate#design-system#border-radius#radius-tokens
One-click install
npx skills add https://github.com/dylantarre/design-system-skills --skill radius-scale
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: radius-scale
Source: https://github.com/dylantarre/design-system-skills/tree/main/skills/tokens/radius-scale
Command: npx skills add https://github.com/dylantarre/design-system-skills --skill radius-scale

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Radius-scale generation provides a consistent set of border-radius tokens to standardize component rounding across a design system, reducing manual tweaks and visual drift.

Core Features & Use Cases

  • Generate scalable radius tokens with a base, ratio, and steps for CSS, Tailwind, and JSON outputs.
  • Apply tokens to common components like buttons, cards, inputs, modals, and containers to maintain visual harmony.
  • Use case: when starting a new design system or updating an existing one, export a complete radius scale for immediate integration.

Quick Start

Run the radius-scale generator to produce CSS variables, a Tailwind radius scale, or a JSON token set based on your project needs.

Frequently Asked Questions about radius-scale

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

FAQPage Schema
How do I generate border-radius tokens for a design system?▼

To generate border-radius tokens for a design system, configure a base, ratio, and steps. This produces scalable radius tokens as CSS variables, Tailwind scales, or JSON sets to standardize UI component rounding.

Can I export radius tokens for Tailwind and CSS variables?▼

Yes, you can export radius tokens for Tailwind and CSS variables. The generator outputs complete radius scales directly as CSS variables, a Tailwind radius scale, or JSON token sets based on your project configuration.

What are scalable radius tokens and when do I need them?▼

Scalable radius tokens are standardized border-radius values generated from a base, ratio, and steps. You need them when starting or updating a design system to reduce manual tweaks and prevent visual drift across components.

How do I standardize UI rounding across buttons and cards?▼

You standardize UI rounding across buttons and cards by applying generated radius tokens. These tokens provide a consistent set of border-radius values that maintain visual harmony across common components like inputs and modals.

Does this radius token generator support JSON output?▼

Yes, this radius token generator supports JSON output. It delivers complete JSON token sets alongside CSS variables and Tailwind radius scales, allowing immediate integration into your design system workflow.

Related Skills

Explore More Design & Creative Skills→
dylantarredylantarre
38

spacing-scale

Generate centered exponential spacing scales for CSS, Tailwind, and JSON tokens.

Community
Intermediate
dylantarredylantarre
38

z-index-scale

Generate semantic z-index token scales for CSS, Tailwind, and JSON.

Community
Basic
PrimadetaautomationPrimadetaautomation
5

ui-design-system

Generate design tokens from a brand color with multi-format exports.

Community
Advanced
runkidsrunkids
11

web-design-guidelines

Audit UI code against Web Interface Guidelines and report violations.

Community
Basic