菜单
Vue 3 コンポーネント・composable を書く / レビューするときのコーディング規約。 *.vue ファイルの作成・編集、「Vueコンポーネントを作って」「composableを書いて」 「Vueのコードをレビューして」などのリクエストで使用する。 Slidev テーマのレイアウト実装にも適用する (Slidev 固有 API は slidev スキル参照)。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Slidev スライドを変更した PR に、変更スライドのスクリーンショットを PR コメントとして残す。Playwright MCP でログイン済みブラウザから GitHub の Web UI に画像を添付する (トークン不要)。「スライドの画像を PR に貼って」「表示確認の画像を PR コメントに残して」などのリクエスト、またはスライド変更 PR の作成直後に使用する。
Control Herdr, a terminal multiplexer for coding agents. Use only when the user explicitly mentions Herdr or asks to use Herdr to inspect or control panes, tabs, workspaces, terminals, commands, or communication with another agent. Do not use merely because a task could benefit from a background terminal, delegation, or parallel work. Requires HERDR_ENV=1.
Slidev (sli.dev) でスライドの作成・編集、テーマ・アドオンの自作を行う。 「スライドを作って」「Slidevで発表資料を作りたい」「LT資料を作って」 「Slidevのテーマを作って」「レイアウトを追加して」「スライドをエクスポートして」 などのリクエスト、または slides.md や slidev-theme-* / slidev-addon-* を扱う作業で使用する。
Playwright MCP を CDP (Chrome DevTools Protocol) 経由で既存の Arc ブラウザに接続し、 ログイン済みセッションのまま画面操作・スクレイピングを行う。 claude-in-chrome 拡張が応答しない場合や、Arc で開いている認証済みタブ (社内SaaS・管理画面等)をそのまま自動操作したいときに使う。 「Arcで開いて」「Arcブラウザを操作して」「ログイン済みのタブを使って調べて」 「利用履歴を取得して」などのリクエストで使用する。
Stage meaningful diffs and create commits with WHY-focused messages. 「コミットして」「変更をコミットして」「commit these changes」などのリクエスト、 またはエージェントが作業成果をコミットする必要があるときに使用する。
日本語の技術文書・書籍原稿の文章規範。整形（一文一行、引用ブロック、脚注、コラム記法）、段落と論証の構成（パラグラフライティング）、論証の厳密さ（ツッコミどころの除去）、読み手の負荷の管理、視点と語り、演出の抑制、LLM っぽい空句の禁止、冗長の排除を定める。日本語で技術書の章、草稿、記事、解説文を書くとき、または推敲・リライトするときに使用する。
| name | vue-conventions |
| description | Vue 3 コンポーネント・composable を書く / レビューするときのコーディング規約。 *.vue ファイルの作成・編集、「Vueコンポーネントを作って」「composableを書いて」 「Vueのコードをレビューして」などのリクエストで使用する。 Slidev テーマのレイアウト実装にも適用する (Slidev 固有 API は slidev スキル参照)。 |
Vue 公式スタイルガイド (https://vuejs.org/style-guide/) をベースにした個人規約。 API の解説ではなく「こう書く」の列挙。API の詳細は docs-researcher / context7 で最新を引くこと。
<script setup lang="ts"> で統一。Options API は書かない<script> → <template> → <style>ref() を第一選択にする (reactive() はプリミティブ不可・
再代入不可・分割代入で喪失の制限があるため使わない)TodoItem ○ / Todo ×)。ファイル名も PascalCaseBase プレフィックス (BaseButton)TodoListItem)SearchButtonClear ○ / ClearSearchButton ×)。略語禁止<MyComponent />)props は type-based 宣言 + Reactive Props Destructure でデフォルト値 (Vue 3.5+):
const { msg = 'hello', count } = defineProps<{ msg?: string; count: number }>()
withDefaults は 3.4 以前のレガシー。runtime 宣言と型宣言の混在は不可
emits は named tuple 構文 (3.3+)。call signature 構文は使わない:
const emit = defineEmits<{ change: [id: number] }>()
v-model は defineModel() (3.4+)。modelValue prop + emit の手動実装はしない
props の直接変更は禁止 (props down, events up)
defineOptions() (別 <script> ブロックを作らない)defineExpose()useTemplateRef() (3.5+)。ref(null) + 同名変数の旧パターンは使わないInjectionKey<T> で型付けするuse + camelCase (useMouse)。composables/ ディレクトリに置くtoValue() で正規化するreactive() で包まない)onMounted() 内 + onUnmounted() で必ずクリーンアップ<script setup> / ライフサイクルフック内で同期的に行うv-for には必ず一意な keyv-if と v-for を同一要素に併用しない (computed でフィルタ or <template> でラップ)v-html は使わない (XSS)。改行入りテキストの描画は行分割した配列を v-for で回す: @ #) で統一。属性値は常にクォートscoped にする (ルートレイアウトは例外)scoped 内で要素セレクタを使わない (class セレクタを使う)