원클릭으로 Manus에서 모든 스킬 실행

component-work

스타15

포크7

업데이트2026년 6월 4일 13:28

Create or update Dialtone Vue components and keep package/docs artifacts synchronized. Use when the user asks for component creation, component API changes, stories, docs, or related tests.

설치

Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.

Manus에서 실행

출처

dialpad

dialpad/dialtone

GitHub 저장소 열기 Creator 저장소 보기

다운로드

Manus에서 실행

Dialtone Component Work

Goal

Modify Vue components while keeping tests, stories, docs, exports, and downstream data intentionally in sync.

Trigger

Creating or updating files under packages/dialtone-vue/components/**.
Component prop, event, slot, style, story, or docs changes.

Required Context

Existing component source, constants, tests, stories, MDX, VuePress docs, and exports.
common/components_list.js for component registration.
.agents/resources/rule-map.md
.agents/resources/validation.md
.agents/resources/doc-sync.md

Constraints

New components use Composition API with <script setup lang="ts">.
Existing Options API components stay Options API unless the user explicitly asks to convert them.
Prop value arrays come from constants.
Use validator, never validate.
Prefer data-qa selectors in tests.
Use Dialtone tokens and utility classes; do not hardcode raw color, spacing, or typography values.
Keep changes scoped to the requested component or API.

Workflow

Read the existing component surface before editing.
Check for overlap or naming collisions before new components.
Load matched rules from rule-map.md.
Update the smallest necessary set of artifacts: source, constants, tests, stories/MDX, VuePress docs, exports, docs JSON, MCP/query docs.
Run focused tests first, then broader builds when API or downstream data changed.
Include manual accessibility/keyboard QA notes for interactive components.

Done When

Changed component behavior has tests or an explicit test-gap reason.
Documentation and downstream data impact is checked.
Relevant validation commands are run or explicitly skipped.
New or changed public API is reflected in stories/docs where needed.

Verification

Focused component tests.
Commands from .agents/resources/validation.md.
doc-sync-check when source changes affect AI docs.

References

.agents/resources/rule-map.md
.agents/resources/validation.md
.agents/resources/doc-sync.md
.agents/resources/package-map.md

이 저장소의 다른 Skills

같은 저장소

commit

dialpad/dialtone

Safely stage and commit Dialtone changes. Use when the user asks to stage, commit, or prepare committed work.

2026-06-0415

dialtone-lookup

dialpad/dialtone

Look up Dialtone documentation, components, tokens, utilities, and icons before making design-system decisions. Use when the user asks about Dialtone APIs, docs guidance, component usage, tokens, utilities, icons, or implementation patterns.

2026-06-0415

doc-sync-check

dialpad/dialtone

Check whether source changes need Dialtone AI docs updates. Use before PR prep/create or when source package behavior changes.

2026-06-0415

pr-comments

dialpad/dialtone

Triage and address Dialtone GitHub PR review comments. Use when the user invokes $pr-comments, $address-review, or asks to handle review feedback.

2026-06-0415

pr-complete

dialpad/dialtone

Complete merged Dialtone PR follow-up safely. Use after a PR has merged or when closing out a local PR branch.

2026-06-0415

pr-create

dialpad/dialtone

Prepare, create, or update a Dialtone pull request. Use when the user invokes $pr-create, asks to open a PR, or asks to fill a PR description.

2026-06-0415

name	component-work
description	Create or update Dialtone Vue components and keep package/docs artifacts synchronized. Use when the user asks for component creation, component API changes, stories, docs, or related tests.

Dialtone Component Work

Goal

Modify Vue components while keeping tests, stories, docs, exports, and downstream data intentionally in sync.

Trigger

Creating or updating files under packages/dialtone-vue/components/**.
Component prop, event, slot, style, story, or docs changes.

Required Context

Existing component source, constants, tests, stories, MDX, VuePress docs, and exports.
common/components_list.js for component registration.
.agents/resources/rule-map.md
.agents/resources/validation.md
.agents/resources/doc-sync.md

Constraints

New components use Composition API with <script setup lang="ts">.
Existing Options API components stay Options API unless the user explicitly asks to convert them.
Prop value arrays come from constants.
Use validator, never validate.
Prefer data-qa selectors in tests.
Use Dialtone tokens and utility classes; do not hardcode raw color, spacing, or typography values.
Keep changes scoped to the requested component or API.

Workflow

Read the existing component surface before editing.
Check for overlap or naming collisions before new components.
Load matched rules from rule-map.md.
Update the smallest necessary set of artifacts: source, constants, tests, stories/MDX, VuePress docs, exports, docs JSON, MCP/query docs.
Run focused tests first, then broader builds when API or downstream data changed.
Include manual accessibility/keyboard QA notes for interactive components.

Done When

Changed component behavior has tests or an explicit test-gap reason.
Documentation and downstream data impact is checked.
Relevant validation commands are run or explicitly skipped.
New or changed public API is reflected in stories/docs where needed.

Verification

Focused component tests.
Commands from .agents/resources/validation.md.
doc-sync-check when source changes affect AI docs.

References

.agents/resources/rule-map.md
.agents/resources/validation.md
.agents/resources/doc-sync.md
.agents/resources/package-map.md