メニュー
Generate a Vue 3 component with script setup, TypeScript props/emits, scoped styles using CSS variables, and data-testid attributes.
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/slashwhy/super-todo --skill generate-componentコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
Implementation plans, README updates, and architectural decisions. Use when planning features or documenting high-level changes.
Express route handlers with Prisma ORM, async error handling, and security patterns. Use when creating API endpoints, handling requests, or implementing CRUD operations.
TSDoc and inline comment patterns. Use when documenting exported functions, Vue components, or complex logic that needs explanation.
SOC 職業分類に基づく
SKILL.md を表示中
| name | generate-component |
| description | Generate a Vue 3 component with script setup, TypeScript props/emits, scoped styles using CSS variables, and data-testid attributes. |
| argument-hint | <ComponentName> [description] |
| disable-model-invocation | true |
| allowed-tools | Read Write |
Scaffold a Vue 3 component following all project conventions.
/generate-component <ComponentName>
/generate-component <ComponentName> — <brief description of purpose>
Provide as much context as helpful:
The generated component will include:
<script setup lang="ts"> block with typed props and emits interfaces<template> with data-testid attributes on interactive elements<style scoped> using only CSS variables from variables.css