skills.rest
Burburton
BurburtonCOMMUNITY
Explore all skills by this author →
GitHub

component-design

Generate UI component design specifications covering anatomy, variants, props, styling, accessibility, and design system integration.

Updated Mar 29, 2026
Search Tags:#accessibility#a11y#handoff#interaction#ui-design#design-system#component-design
One-click install
npx skills add https://github.com/Burburton/amazing-specialist-face --skill component-design-burburton
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: component-design
Source: https://github.com/Burburton/amazing-specialist-face/tree/main/.opencode/plugins/ui-ux-designer/skills/component-design
Command: npx skills add https://github.com/Burburton/amazing-specialist-face --skill component-design-burburton

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

UI teams often spend excessive time translating visual designs into precise, reusable component specifications that developers can implement, leading to inconsistencies and rework.

Core Features & Use Cases

  • Anatomy: detailed container, header, icon, title, badge, description, footer, and role tags to describe a SkillCard-like component; includes variants default, featured, compact.
  • Variant design: defines multiple variants with distinct styling for different contexts and layouts.
  • Accessibility & responsiveness: ensures keyboard navigation, ARIA labeling, focus outlines, and responsive sizing across breakpoints.

Quick Start

Create a complete component design spec that a developer can implement.

Frequently Asked Questions about component-design

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

FAQPage Schema
How do I create a UI component design specification for developer handoff?▼

A complete UI component design specification covers anatomy, variants, props, styling, and accessibility rules. It provides developers with precise instructions for implementing elements like cards, buttons, and forms within a design system.

What should be included in a design system component spec for accessibility?▼

A design system component spec for accessibility should include keyboard navigation flows, ARIA labeling requirements, and focus outline behaviors. It also defines responsive sizing across breakpoints to ensure usable interactions on all devices.

How do I document UI component variants and props for cross-functional teams?▼

Document UI component variants and props by detailing distinct styling rules for different contexts like default, featured, and compact layouts. This specifies the exact configuration options developers need to render the component correctly across applications.

Can I define responsive breakpoints and ARIA labeling in a component design spec?▼

Yes, you can define responsive breakpoints and ARIA labeling directly in a component design spec. The specification ensures responsive sizing across various screen widths and mandates ARIA attributes for screen reader compatibility.

What is the best way to structure a design-to-code handoff for UI components?▼

The best way to structure a design-to-code handoff is to produce a complete specification covering component anatomy, variant styling, props, and integration guidelines. This minimizes rework by giving developers an exact implementation blueprint.

Related Skills

Explore More Design & Creative Skills→
projectmilujuprojectmiluju

ui

Define UI design system tokens and component specifications for web products.

Community
Intermediate
t-stringst-strings

Frontend Accessibility

Review frontend UI code for HTML semantics, ARIA, keyboard navigation, and contrast.

Official
Basic
marcioaltoemarcioaltoe
14

gesttione-design-system

Applies Gesttione brand colors, typography, and metric tokens to UI components.

Community
Intermediate
lastnight030506lastnight030506

frontend-blueprint

Guide users through structured frontend design discovery and generate code.

Community
Advanced