Llmops-demo-ts 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.

install

source · Clone the upstream repo

git clone https://github.com/yu-iskw/llmops-demo-ts

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/yu-iskw/llmops-demo-ts "$T" && mkdir -p ~/.claude/skills && cp -r "$T/.claude/skills/design-component" ~/.claude/skills/yu-iskw-llmops-demo-ts-design-component && rm -rf "$T"

manifest: .claude/skills/design-component/SKILL.md

source content

Design Component

Design the following UI component:

$ARGUMENTS

Design Deliverables

Component specification with props, states, and layout
Interaction design with user flows and feedback
Accessibility specification (ARIA roles, keyboard navigation, screen reader support)
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