component-designer

Design reusable UI component specifications with props, states, and accessibility.

2|1|Updated May 17, 2026

Search Tags:#ui #accessibility #frontend #specification #design system #components

Ready to run

npx skills add https://github.com/rakibulism/agent-skills-os --skill component-designer-rakibulism

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: component-designer
Source: https://github.com/rakibulism/agent-skills-os/tree/main/skills/component-designer
Command: npx skills add https://github.com/rakibulism/agent-skills-os --skill component-designer-rakibulism

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill turns vague UI ideas into build-ready component specifications, removing ambiguity about states, behavior, accessibility, and edge cases.

Core Features & Use Cases

Component Definition: Clarifies the component's purpose so reusable UI primitives solve one job well.
API and State Specification: Defines props, slots, variants, and every important state such as default, hover, focus-visible, loading, disabled, and error.
Accessibility and Edge Cases: Covers semantic markup, keyboard interactions, screen reader behavior, responsiveness, long text, RTL, and async behavior.
Use Case: A designer asks for a multi-select dropdown, and the Skill produces a complete spec an engineer can implement without follow-up questions.

Quick Start

Ask for a component spec for the UI element you want to build, including its purpose, constraints, and any existing design system context.

Frequently Asked Questions about component-designer

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

FAQPage Schema

How do I create a UI component specification that engineers can implement without follow-up questions?▼

A complete UI component specification defines the element's purpose, props, visual tokens, states, and accessibility behavior. It covers default, hover, focus-visible, loading, disabled, and error states, plus edge cases like long text and RTL, producing build-ready output.

What is the best way to document accessibility and keyboard interactions for design system components?▼

Documenting accessibility for design system components requires specifying semantic markup, keyboard behavior, and screen reader interactions. Your specification should explicitly define focus-visible states, keyboard navigation, and responsive behavior to ensure frontend implementation is inclusive.

How do I define props and state variants for reusable interface primitives?▼

Defining props and state variants for interface primitives involves listing every important state including default, hover, loading, disabled, and error. A clear specification clarifies the component's API, slots, variants, and visual tokens so the primitive solves one job well.

Can I use this approach to design complex elements like a multi-select dropdown menu?▼

Yes, designing complex elements like a multi-select dropdown is a core use case. The specification process clarifies the component's purpose, constraints, async behavior, and edge cases, ensuring engineers receive a complete spec for menus, modals, cards, and inputs.

What should a frontend component specification include to handle edge cases and responsive behavior?▼

A frontend component specification must include edge-case handling for long text, RTL layouts, and async behavior. It should define responsive breakpoints, visual tokens, and implementation-ready output so frontend engineers can ship the interface primitive without ambiguity.

Why does my UI component design system lack clear states and behavior documentation?▼

Your UI component design lacks clear documentation because vague ideas need to be turned into build-ready specifications. Defining explicit component structure, API, states, interactions, and accessibility removes ambiguity about edge cases and visual tokens.