Skills
.Work. You
Rest

component-designer

Community

Create reusable UI components with accessibility.

Design & Creative#design#accessibility#responsive#design-system#style-guide#ui-components#component-specs
Authorlexicalninja
Version1.0.0
Installs0

System Documentation

What problem does it solve?

Establishes standardized, accessible UI component specifications to unify design and development across projects, reducing drift and rework.

Core Features & Use Cases

  • Define component primitives (buttons, inputs, cards, modals, and other UI elements) with concrete states: default, hover, active, disabled, focus, and error.
  • Specify variations (sizes, styles, types) and responsive behavior for different viewports.
  • Include accessibility guidelines (color contrast, keyboard navigation, ARIA attributes) and practical usage recommendations.
  • Use Case: Create a cohesive design system kit for a new product, enabling designers and engineers to implement components with consistent visuals and interactions.

Quick Start

Design a Button component with primary and secondary variants, including defined states and accessibility guidelines.

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-designer
Download link: https://github.com/lexicalninja/my-little-scrum-team/archive/main.zip#component-designer

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