Jeden Skill in Manus ausführen
mit einem Klick

Jeden Skill in Manus mit einem Klick ausführen

design-component

Sterne6

Forks4

Aktualisiert8. Februar 2026 um 22:40

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

Installation

Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.

In Manus ausführen

Quelle

yu-iskw

yu-iskw/llmops-demo-ts

GitHub-Repository öffnen Creator-Repositorys ansehen

Download

In Manus ausführen

Verwandte BerufeSOC

Basierend auf der SOC-Berufsklassifikation

Web- und digitale SchnittstellendesignerInformatik- und Mathematikberufe·SOC 15-1255

SKILL.md

readonly

name	design-component
description	Design a UI component with specifications for layout, states, interactions, and accessibility. Use when creating new Vue.js 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

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

Mehr aus diesem Repository

gleiches Repository

bump-dependencies

yu-iskw/llmops-demo-ts

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.

2026-04-036

compliance-check

yu-iskw/llmops-demo-ts

Check license compatibility, data privacy compliance, and AI ethics. Use when adding dependencies, handling user data, or reviewing regulatory requirements.

2026-02-086

deploy

yu-iskw/llmops-demo-ts

Deploy the application or manage infrastructure. Handles Docker builds, CI/CD, and deployment workflows.

2026-02-086

implement-feature

yu-iskw/llmops-demo-ts

Implement a feature or fix a bug following the project's TypeScript patterns and conventions. Use when code changes are needed.

2026-02-086

orchestrate

yu-iskw/llmops-demo-ts

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.

2026-02-086

plan-task

yu-iskw/llmops-demo-ts

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.

2026-02-086

name	design-component
description	Design a UI component with specifications for layout, states, interactions, and accessibility. Use when creating new Vue.js 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

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