Profile My skills Saved Collections Edit profile Submit a skill

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.

tomevault-io fc8a6a0 2 files · 1.8 KB Updated
Web & Frontend

File contents

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 — claim your Tome and manage your conversions.

tomevault-io/skills-registry/tree/main/yu-iskw--llmops-demo-ts--design-component commit fc8a6a0d09

Browse category

Frequently asked questions

npx skillmds@latest add tomevault-io/design-component