← All skill packs

UI Design & Frontend Skills

Skill pack
2 skills0 selected
wakwak3125Skills in this pack

Linear チケット ID または自然言語で指定された開発タスクを、軽量(最小差分・過剰設計を避ける)かつ高品質(既存パターンに沿い、型/ビルド/テストが通る)に実装する。フロントエンド UI タスク(React TypeScript + Figma 起点)では、Figma MCP で仕様を抽出し Storybook + Playwright で視覚検証ループを回す。「ABC-123 を実装して」「このチケットお願い」「このバグ直して」「〜の対応を追加して」「動くようにして」「このデザインを実装して」「Figma から作って」「このコンポーネント作って」「ピクセルパーフェクトに」など、リポジトリ内のコード変更を伴う依頼で必ず発火する。plan mode で承認されたプランの実装開始時 (「Implement the following plan」等、スキル外で作られたプランを含む) も必ず発火し、承認済みプランを作業仕様としてフェーズ 4 以降 (担当判断・検証・レビュー・コミット) を適用する。Kotlin バックエンド、React TypeScript フロントエンド、protobuf スキーマ、Node.js…

Japanese

要求・要件・MTG決定(Google Meet / Gemini メモ含む)を取り込んで設計成果物(requirements / design / data-model / requirements-mapping / usecases / open-issues)を新規作成または incremental に改訂し、必要に応じて Notion DB に親ページ + 子ページ構成で同期する。単発 subagent 逐次フロー(architect / modeler / requirements-analyst / critic / scribe を 1 体ごとに呼び出し、critic blocker ゼロまで needs-revise ループ)で設計判断の質を担保し、ステークホルダー向け要求仕様 requirements.md の生成・MTG議事の取り込み・過去比較表現クレンジング・Notion同期までを一気通貫で担当する。Notion 同期が不要なら notion: skip でローカル運用に倒せる。設計を起こす / MTG決定を設計に反映する / Notion…

Japanese

Includes Spec Planner and other workflows.

Install with
Claude CodeCodexCursorGitHub CopilotGemini CLI

Supported by the Atlas install prompt. Skill-specific requirements vary.

Pack stats

Skills2CategoryengineeringStars0

What’s included

Dev Task

Linear チケット ID または自然言語で指定された開発タスクを、軽量(最小差分・過剰設計を避ける)かつ高品質(既存パターンに沿い、型/ビルド/テストが通る)に実装する。フロントエンド UI タスク(React TypeScript + Figma 起点)では、Figma MCP で仕様を抽出し Storybook + Playwright で視覚検証ループを回す。「ABC-123 を実装して」「このチケットお願い」「このバグ直して」「〜の対応を追加して」「動くようにして」「このデザインを実装して」「Figma から作って」「このコンポーネント作って」「ピクセルパーフェクトに」など、リポジトリ内のコード変更を伴う依頼で必ず発火する。plan mode で承認されたプランの実装開始時 (「Implement the following plan」等、スキル外で作られたプランを含む) も必ず発火し、承認済みプランを作業仕様としてフェーズ 4 以降 (担当判断・検証・レビュー・コミット) を適用する。Kotlin バックエンド、React TypeScript フロントエンド、protobuf スキーマ、Node.js サービスを主対象。ユーザーが「実装」と明言しなくても、具体的なコード変更依頼であれば常に使うこと。

Spec Planner

要求・要件・MTG決定(Google Meet / Gemini メモ含む)を取り込んで設計成果物(requirements / design / data-model / requirements-mapping / usecases / open-issues)を新規作成または incremental に改訂し、必要に応じて Notion DB に親ページ + 子ページ構成で同期する。単発 subagent 逐次フロー(architect / modeler / requirements-analyst / critic / scribe を 1 体ごとに呼び出し、critic blocker ゼロまで needs-revise ループ)で設計判断の質を担保し、ステークホルダー向け要求仕様 requirements.md の生成・MTG議事の取り込み・過去比較表現クレンジング・Notion同期までを一気通貫で担当する。Notion 同期が不要なら notion: skip でローカル運用に倒せる。設計を起こす / MTG決定を設計に反映する / Notion に上げる、いずれのユースケースでも本スキル単独で対応可能。

Quick start

  1. Choose your skills. Select individual skills above, or choose the entire pack.
  2. Copy the install prompt. Use Copy install prompt above the list.
  3. Send it to your agent. Paste into your coding agent’s chat. Your agent reviews the source and guides the setup.

Try it with your agent

After installation, start with a request like:

Example request
Use the Dev Task skill to help with my task.
Ask me for the context you need before getting started.

Requirements & license

  • A coding agent that can access your project files and install skills.
  • Your agent checks each skill’s instructions, dependencies, and permissions during setup.
  • License details are not provided in these listings. Check the author’s terms before using the skills.
UI Design & Frontend Skills | Agent Skills Atlas