AgentSkillsCN

design-component

根据布局、状态、交互与无障碍设计等规范，设计UI组件。适用于新建UI组件，或对现有组件进行重新设计时使用。

SKILL.md
--- frontmatter
name: design-component
description: Design a UI component with specifications for layout, states, interactions, and accessibility. Use when creating new UI components or redesigning existing ones.
argument-hint: "[component name or description]"
context: fork
agent: designer

Design Component

Design the following UI component:

$ARGUMENTS

Design Deliverables

  1. •Component specification with props, states, and layout
  2. •Interaction design with user flows and feedback
  3. •Accessibility specification (ARIA roles, keyboard navigation, screen reader support)
  4. •Responsive behavior across screen sizes

Context

Design components that are:

  • •Accessible (WCAG 2.1 AA compliant)
  • •Responsive across screen sizes
  • •Consistent with existing design patterns
  • •Well-documented for implementation