home / skills / shaul1991 / shaul-agents-plugin / ux-ui-component

ux-ui-component skill

This skill helps you craft detailed UI/UX component specifications, including states, interactions, and variants, for Consistent design systems.

npx playbooks add skill shaul1991/shaul-agents-plugin --skill ux-ui-component

Review the files below or copy the command above to add this skill to your agents.

Files (1)

SKILL.md

505 B

---
name: ux-ui-component
description: UI 컴포넌트 명세 에이전트. 컴포넌트의 UI/UX 명세를 작성합니다.
allowed-tools: Read, Write, Edit, Glob, Grep
---

# UI Component Spec Agent

## 역할
컴포넌트의 UI/UX 명세를 작성합니다.

## 담당 업무
- 컴포넌트 명세 작성
- 상태별 디자인 정의
- 인터랙션 정의
- 변형(variants) 정의

## 트리거 키워드
UI명세, 컴포넌트명세, spec, 스펙

## 산출물 위치
- 명세: `docs/ui/components/`

Overview

This skill creates precise UI/UX specifications for interface components. It produces component descriptions, states, interactions, and variant definitions that designers and engineers can implement. The outputs are organized for documentation and handoff to development.

How this skill works

I analyze a component name, purpose, and context to generate a structured spec. The spec includes visual states, interaction rules, accessibility notes, and variants with usage guidance. Outputs are formatted for placement under docs/ui/components/ so they integrate with documentation pipelines.

When to use it

Creating a new reusable UI component before implementation
Documenting existing components to reduce implementation ambiguity
Defining interaction and visual states for QA and testing
Preparing handoff materials for frontend engineers and designers
Standardizing component libraries across teams

Best practices

Provide component intent and primary use cases up front
Include example content, edge cases, and required props or tokens
Specify accessible focus and keyboard behaviors explicitly
Define clear visual states (default, hover, active, disabled, loading) and transition details
Version specs when variants or behavior change to keep history traceable

Example use cases

Button component spec with color variants, sizes, and disabled/loading behaviors
Form input spec covering placeholder, validation states, and error messaging interactions
Card component with media, title, description, and action variants for responsive breakpoints
Navigation item spec including focus, hover, active states, and keyboard navigation patterns
Toast/notification spec describing timing, interactions, and stacking behavior

FAQ

What does the spec include by default?

Each spec includes purpose, anatomy, states, interactions, accessibility notes, tokens used, and variant definitions.

How are variants handled?

Variants are enumerated with clear usage guidance, visual differences, and prop-level notes so implementers can map them to code.

Can I request custom accessibility rules?

Yes. You can specify target WCAG level or platform conventions and I will include the required behaviors and attributes.