# Design Component

> Design a UI component with specifications for layout, states, interactions, and accessibility. Use when creating new Vue.js components or redesigning existing ones. Use when this capability is needed.

- Skill: `tomevault-io/design-component` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/design-component`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/design-component/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/design-component

---


# 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

The component will be built with:

- Vue.js 3 Composition API (`<script setup>`)
- CSS (no framework — see packages/frontend/src/style.css for existing styles)
- Pinia for state management if needed

Existing components for reference:

- ChatMessage.vue — individual message display
- MessageInput.vue — user input form
- MessageList.vue — scrollable message list

---
> Converted and distributed by [TomeVault](https://tomevault.io/claim/yu-iskw) — claim your Tome and manage your conversions.
<!-- tomevault:4.0:skill_md:2026-04-11 -->