Skills
.Work. You
Rest

component-sizing

Official

Optimize UI component sizing for consistent design and accessibility.

Design & Creative#accessibility#WCAG#design system#UI design#component sizing
Authorthrillmade
Version1.0.0
Installs0

System Documentation

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.

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: component-sizing
Download link: https://github.com/thrillmade/agent-skills/archive/main.zip#component-sizing

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 620,000+ vetted skills library on demand.