skills.rest
lexicalninja
lexicalninjaCOMMUNITY
Explore all skills by this author →
GitHub

component-designer

Create standardized UI component specifications with states, variations, and accessibility guidelines.

2|Updated Jan 15, 2026
Search Tags:#design#accessibility#responsive#design-system#style-guide#ui-components#component-specs
One-click install
npx skills add https://github.com/lexicalninja/my-little-scrum-team --skill component-designer
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: component-designer
Source: https://github.com/lexicalninja/my-little-scrum-team/tree/main/skills/component-designer
Command: npx skills add https://github.com/lexicalninja/my-little-scrum-team --skill component-designer

SYSTEM DOCUMENTATION & REQUIREMENTS

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.

Frequently Asked Questions about component-designer

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

FAQPage Schema
How do I create accessible UI component specifications for a design system?▼

To create accessible UI component specifications, define component primitives like buttons and inputs with concrete states, variations, and responsive behavior. Include accessibility guidelines covering color contrast, keyboard navigation, and ARIA attributes to ensure unified design across projects.

What states and variations should I include when designing UI components?▼

When designing UI components, include default, hover, active, disabled, focus, and error states. Specify variations such as sizes, styles, and types, along with responsive behavior for different viewports to ensure comprehensive component specs.

Can I use these component specs to unify design across multiple platforms?▼

Yes, you can use these component specs to unify design across multiple platforms. The specifications deliver structured descriptions and usage guidelines for multiple platforms, enabling designers and engineers to implement consistent visuals and interactions.

What is the best way to document accessibility guidelines for UI components?▼

The best way to document accessibility guidelines for UI components is to include specific notes on color contrast, keyboard navigation, and ARIA attributes within the component specification. This ensures actionable Quick Start guidance for both designers and engineers.

How do I define responsive behavior for UI component primitives like modals and cards?▼

To define responsive behavior for UI component primitives like modals and cards, specify how each component adapts its layout and interaction patterns across different viewports within the structured component specification.

Why do my UI components look inconsistent across different projects?▼

UI components look inconsistent across different projects due to design drift. Establishing standardized, accessible UI component specifications with defined states and variations reduces rework and unifies visuals and interactions across projects.

Related Skills

Explore More Design & Creative Skills→
priyansh19priyansh19
1

design-guide

Establish and enforce CrewSpace UI design system standards across frontend components.

Community
Advanced
chipermanchiperman

baseline-ui

Audit UI components for baseline conformance against Tailwind defaults and design tokens.

Community
Basic
Fire-ants-never-dieFire-ants-never-die

orchestrator-designer

Generate design tokens and component specifications for the Claude Orchestrator UI.

Official
Intermediate
leon30083leon30083
2

ui-designer

Extract design tokens from UI images and generate implementation-ready prompts.

Community
Advanced