skills.rest
thrillmade
thrillmadeOFFICIAL
Explore all skills by this author →
GitHub

component-sizing

Select UI component heights using predefined ladders and WCAG 2.5.8 guidelines.

1|Updated May 15, 2026
Search Tags:#accessibility#WCAG#design system#UI design#component sizing
One-click install
npx skills add https://github.com/thrillmade/agent-skills --skill component-sizing
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: component-sizing
Source: https://github.com/thrillmade/agent-skills/tree/main/skills/component-sizing
Command: npx skills add https://github.com/thrillmade/agent-skills --skill component-sizing

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps ensure that button, input, and badge heights are consistent across your design system, meeting accessibility guidelines and maintaining a cohesive user experience.

Core Features & Use Cases

  • Consistent Heights: Provides predefined height ladders for buttons, inputs, chips, and badges.
  • Density Adaptation: Offers height ladders for balanced, dense, and spacious density modes.
  • Accessibility: Ensures component sizes meet WCAG 2.5.8 guidelines for interactive controls.
  • Use Case: When creating a new UI component, use this Skill to determine the correct height for buttons, inputs, and badges, ensuring they meet design standards and are accessible to all users.

Quick Start

Determine the component height for your design using the 'component-sizing' Skill.

Frequently Asked Questions about component-sizing

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

FAQPage Schema
How do I ensure UI component sizing meets WCAG 2.5.8 accessibility guidelines?▼

UI component sizing meets WCAG 2.5.8 guidelines by selecting interactive control heights from predefined ladders that ensure accessible target sizes. This approach guarantees buttons, inputs, and badges maintain compliant dimensions for all users.

Can I use different density modes for consistent UI design heights?▼

Yes, consistent UI design heights support balanced, dense, and spacious density modes. Each mode provides specific predefined height ladders, allowing you to adapt component sizing based on your interface's required visual density.

What is the best way to standardize button and input heights in a design system?▼

The best way to standardize button and input heights in a design system is applying a predefined height ladder. This ensures cohesive sizing across all interactive elements, preventing arbitrary dimensions and maintaining visual consistency.

How do component sizes adapt for dense interfaces without losing accessibility?▼

Component sizes adapt for dense interfaces using the dense density mode height ladder. This mode provides specific component dimensions that reduce visual footprint while still adhering to WCAG 2.5.8 accessibility requirements for interactive controls.

Does this component sizing approach work for badges and chips?▼

Yes, the component sizing approach works for badges and chips by providing predefined height ladders specifically for these elements. This ensures they match the height consistency of buttons and inputs across the design system.

Related Skills

Explore More Design & Creative Skills→
nkurunziza-saddynkurunziza-saddy

typography-system

Define modular type scales, font pairings, and responsive typography rules.

Community
Advanced
daffy0208daffy0208
34

UX Designer

Create information architecture, user flows, wireframes, and prototypes for digital products.

Community
Intermediate
FldicoahkiinFldicoahkiin
1

arrange

Assess and improve UI layout, spacing, and visual rhythm.

Community
Advanced
tsuji-tomonoritsuji-tomonori

a11y-pointer-targets

Implements WCAG 2.2 AA pointer target size and drag-operation accessibility standards.

Community
Intermediate