ワンクリックで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

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

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.