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.
Best use case
design-component is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Design a UI component with specifications for layout, states, interactions, and accessibility. Use when creating new Vue.js components or redesigning existing ones.
Teams using design-component should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/design-component/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How design-component Compares
| Feature / Agent | design-component | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Design a UI component with specifications for layout, states, interactions, and accessibility. Use when creating new Vue.js components or redesigning existing ones.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# 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
Related Skills
write-tests
Write unit tests, integration tests, or E2E tests for code. Use after implementing a feature or when test coverage is needed.
write-requirements
Write user stories, acceptance criteria, and technical requirements for a feature or change. Use when defining what needs to be built.
security-audit
Perform a security audit of the codebase. Checks for OWASP Top 10, AI-specific vulnerabilities, dependency issues, and configuration problems.
review-code
Review code changes for quality, security, and adherence to project conventions. Use after making code changes or when reviewing a pull request.
research
Research and gather reliable information about libraries, APIs, specifications, and best practices. Use when you need to understand external documentation before planning or implementing a feature.
plan-task
Create a structured implementation plan for a feature, refactoring, or multi-step task. Use as the first step in the pipeline before /orchestrate. Produces a plan that the orchestrator can turn into a delegation plan.
orchestrate
Produce a structured delegation plan for parallel agent execution. Takes a task description or plan output, analyzes dependencies, assigns agents, and groups tasks for parallel execution. Use after /plan-task or when you need to plan how to delegate work across agents.
implement-feature
Implement a feature or fix a bug following the project's TypeScript patterns and conventions. Use when code changes are needed.
deploy
Deploy the application or manage infrastructure. Handles Docker builds, CI/CD, and deployment workflows.
compliance-check
Check license compatibility, data privacy compliance, and AI ethics. Use when adding dependencies, handling user data, or reviewing regulatory requirements.
bump-dependencies
Bump or upgrade declared dependency versions in this pnpm workspace (root and packages/* package.json), with supply-chain checks before and after install. Use when the user asks to upgrade, bump, or refresh npm dependencies in manifests—not only the lockfile.
design-system
Use this skill to generate or audit design systems, check visual consistency, and review PRs that touch styling.