How do I install the Working On Frontend skill?

Run npx skillmds@latest add misskey-dev/working-on-frontend-2 in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Working On Frontend safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Working On Frontend?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Working On Frontend free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Working On Frontend?

misskey-dev (@misskey-dev) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Working On Frontend by misskey-dev — Agent Skill

Name: Working On Frontend
Author: misskey-dev

Working On Frontend

Use whenever editing or adding code under `packages/frontend/`, or editing `locales/ja-JP.yml` for frontend-facing UI text — including Vue 3 SFCs (`Mk*` components), i18n keys (`i18n.ts.<key>` / `i18n.tsx.<key>()`), SCSS Modules, theme/CSS variables, `os.*` UI helpers, and Storybook stories. Covers `<script setup lang="ts">` conventions, type-only defineProps, `ja-JP.yml`-only locale editing (other locale yml files are Crowdin-managed and must not be edited), and accessibility. Must be consulted before any frontend or UI-locale change to avoid CI failures, lost translations, and reviewer pushback. This is NOT waived by having already invoked brainstorming, writing-plans, or any other upstream skill — invoke this at implementation time regardless of what preceded it.

misskey-dev 69b1e78 9 files · 70.2 KB Updated Sep 17, 2026

File contents

working-on-frontend

packages/frontend/ (Misskey Web クライアント) を編集するとき、最初に参照するスキル。Vue 3 SFC / SCSS Modules / i18n / os.* / Storybook / アクセシビリティの手順と 背景知識 をまとめている。

SKILL.md 本体は references への索引だけ。具体的な手順や規約は該当ファイルを Read すること (progressive disclosure)。

他スキル実行後も免除されない。 brainstorming / writing-plans / その他アップストリームスキルを先に呼んでいても、packages/frontend/ に触れる実装フェーズに入る時点でこのスキルを呼ぶこと。

作業別ワークフロー (tasks)

タスク単位の完結したチェックリスト。新しい何かを足すときに開く。

新規 / 既存 Mk* Vue コンポーネントを追加・改修する → references/tasks/adding-mk-component.md
i18n キーを追加・改修する (locales/ja-JP.yml 編集) → references/tasks/adding-i18n-key.md

共通知識 (knowledge)

タスクに紐付かない参照リファレンス。SFC を 編集する 場面 (新規追加でなくても) で踏みうる規約。

<script setup> / type-only defineProps / defineEmits / generic SFC / v-model 連動など SFC 規約 → references/knowledge/component-conventions.md
i18n.ts.<key> / i18n.tsx.<key>(...) の使い分け / HTML タグ埋め込み / 動的キー切替 / 既存キーのリネーム手順 → references/knowledge/i18n-usage.md
SCSS Modules / --MI_THEME-* --MI-* CSS 変数 / グローバル utility class (_button 等) → references/knowledge/scss-modules.md
os.alert / os.confirm / os.popup 等 UI ヘルパー (ブラウザ標準 alert() 直呼びは禁止) → references/knowledge/os-api.md
*.stories.impl.ts 併設規則 + 複数 story / argTypes / layout / action パターン → references/knowledge/storybook.md
frontend Vitest / Playwright E2E の書き方と前提 → references/knowledge/frontend-testing.md

必ず最後に通る場所

frontend の変更を commit / PR にする前に、必ず shipping-misskey-change の最終チェックリストに従う。

.vue を追加・変更したなら、その出口で vue-component-reviewer agent (この skill の規約を review-mode から機械チェックする専門 reviewer) を Task で起動すると、命名・i18n・SCSS 変数・a11y・Storybook 併設の逸脱を取りこぼしにくい。

---name: working-on-frontend-2description: Use whenever editing or adding code under `packages/frontend/`, or editing `locales/ja-JP.yml` for frontend-facing UI text — including Vue 3 SFCs (`Mk*` components), i18n keys (`i18n.ts.<key>` / `i18n.tsx.<key>()`), SCSS Modules, theme/CSS variables, `os.*` UI helpers, and Storybook stories. Covers `<script setup lang="ts">` conventions, type-only defineProps, `ja-JP.yml`-only locale editing (other locale yml files are Crowdin-managed and must not be edited), and accessibility. Must be consulted before any frontend or UI-locale change to avoid CI failures, lost translations, and reviewer pushback. This is NOT waived by having already invoked brainstorming, writing-plans, or any other upstream skill — invoke this at implementation time regardless of what preceded it.---# working-on-frontend`packages/frontend/` (Misskey Web クライアント) を編集するとき、最初に参照するスキル。Vue 3 SFC / SCSS Modules / i18n / `os.*` / Storybook / アクセシビリティの **手順** と **背景知識** をまとめている。SKILL.md 本体は references への索引だけ。具体的な手順や規約は該当ファイルを Read すること (progressive disclosure)。**他スキル実行後も免除されない。** `brainstorming` / `writing-plans` / その他アップストリームスキルを先に呼んでいても、`packages/frontend/` に触れる実装フェーズに入る時点でこのスキルを呼ぶこと。## 作業別ワークフロー (tasks)タスク単位の完結したチェックリスト。新しい何かを足すときに開く。- 新規 / 既存 `Mk*` Vue コンポーネントを追加・改修する → [references/tasks/adding-mk-component.md](references/tasks/adding-mk-component.md)- i18n キーを追加・改修する (`locales/ja-JP.yml` 編集) → [references/tasks/adding-i18n-key.md](references/tasks/adding-i18n-key.md)## 共通知識 (knowledge)タスクに紐付かない参照リファレンス。SFC を **編集する** 場面 (新規追加でなくても) で踏みうる規約。- `<script setup>` / type-only `defineProps` / `defineEmits` / generic SFC / v-model 連動など SFC 規約 → [references/knowledge/component-conventions.md](references/knowledge/component-conventions.md)- `i18n.ts.<key>` / `i18n.tsx.<key>(...)` の使い分け / HTML タグ埋め込み / 動的キー切替 / 既存キーのリネーム手順 → [references/knowledge/i18n-usage.md](references/knowledge/i18n-usage.md)- SCSS Modules / `--MI_THEME-*` `--MI-*` CSS 変数 / グローバル utility class (`_button` 等) → [references/knowledge/scss-modules.md](references/knowledge/scss-modules.md)- `os.alert` / `os.confirm` / `os.popup` 等 UI ヘルパー (ブラウザ標準 `alert()` 直呼びは禁止) → [references/knowledge/os-api.md](references/knowledge/os-api.md)- `*.stories.impl.ts` 併設規則 + 複数 story / argTypes / layout / action パターン → [references/knowledge/storybook.md](references/knowledge/storybook.md)- frontend Vitest / Playwright E2E の書き方と前提 → [references/knowledge/frontend-testing.md](references/knowledge/frontend-testing.md)## 必ず最後に通る場所frontend の変更を commit / PR にする前に、必ず [shipping-misskey-change](../shipping-misskey-change/SKILL.md) の最終チェックリストに従う。`.vue` を追加・変更したなら、その出口で [vue-component-reviewer](../../agents/vue-component-reviewer.md) agent (この skill の規約を review-mode から機械チェックする専門 reviewer) を Task で起動すると、命名・i18n・SCSS 変数・a11y・Storybook 併設の逸脱を取りこぼしにくい。

Frequently asked questions