「claude-code」の検索結果

5つの異なるUIデザインバリエーションを並列エージェントチームで生成し、Pencil(.pen)で比較するスキル。 各バリエーションに デザイナー + レビュアー + コピーライター の3人チーム（計15エージェント）。 デザイナーが直接 Pencil に構築するため、5画面が同時並行で出来上がる。 固定プリセットは使わず、現在のアプリのコードベース・ドメイン・ペルソナ・トンマナ・競合を分析し、 そのアプリに最適な5つのスタイル方向を毎回ゼロから生成する。 Use when: UIのバリエーションを比較したい、複数のデザイン案を出したい、 デザインの方向性を探りたい、A/Bテスト用のデザインが欲しい。 Triggers: "UIバリエーション", "デザイン比較", "デザイン案", "5案出して", "バリエーション", "デザインパターン", "UI variations", "design alternatives", "複数案", "A/Bテスト", "デザイン探索", "スタイル比較"

動画・画像のフレーム抽出、Remotion レンダリング、仕様チェック、目視検証を行う汎用ビデオツールキット。 ffmpeg / ffprobe / remotion still / remotion render を統一シェルスクリプト (video-tool.sh) で操作し、 Read ツール（マルチモーダル対応）で実際の見た目を確認して品質レポートを出す。 Use when: 動画のフレームを確認したい、レンダリング結果を検証したい、 画像の品質を目視チェックしたい、Remotion プロジェクトを MP4 に出力したい、 動画の仕様（解像度・fps・長さ）をチェックしたい。 Triggers: "フレーム確認", "フレーム検証", "動画チェック", "frame inspect", "フレーム抽出", "動画の中身を見たい", "レンダリング確認", "動画検証", "MP4 確認", "動画のスクショ", "frame check", "動画を出力", "Remotion render", "動画レンダリング", "仕様チェック", "spec check", "video render"

Pressure-test and freeze a tiny iOS MVP in seven minutes using one persona, one explicit devil's-advocate round, scope cuts, and a three-screen flow. Use when an audience supplies an app idea, when requirements must be settled live, or when a concept needs a fast implementation-risk check before Claude Design or Claude Code.

日本語の概要は準備中です。原文の説明を表示しています。

5つの専門エージェント（UXデザイナー・ビジュアルデザイナー・アクセシビリティ専門家・ モバイルUI専門家・コピーデザイナー）がチームでUIを添削・改善するスキル。 Pencil(.pen)で画面デザインを作成・修正しながら、リアルタイムで議論する。 新規画面デザインの作成と既存UIのレビュー・改善の両方に対応。 iOS / Web / 汎用プラットフォームに対応。 Use when: UIを添削したい、画面デザインをレビューしたい、UIを改善したい、 デザインの品質を上げたい、UIのフィードバックがほしい、画面を作りたい。 Triggers: "UIレビュー", "UI添削", "デザインレビュー", "画面レビュー", "UIを見て", "デザインチェック", "UI改善", "画面デザイン", "ui review", "design review", "UI作成", "画面作成", "UIフィードバック"

HyperFrames (HTML + GSAP → MP4) でアプリのプロモ動画を決定論的に生成するスキル。 HyperFrames 公式スキル（19本）を土台として前提にし、素材の橋渡し・検証ゲート・ 納品仕様・誇張表現の禁止という「公式が扱わない層」だけを担当する。 SNS リール、LP ヒーロー動画、リリース告知、機能デモが対象。 Use when: プロモ動画を作りたい、告知動画を作りたい、HTML から動画を作りたい、 HyperFrames で動画を作りたい、リリース動画を作りたい、SNS 用の縦動画を作りたい。 Triggers: "HyperFrames", "hyperframes", "プロモ動画", "告知動画", "宣伝動画", "HTML から動画", "html to video", "リリース動画", "SNS動画", "縦動画", "リール"

機能要件から画面構成・ワイヤーフレームまでを段階的に落とし込むスキル。 design-discussion や feature-discussion の成果物を入力として、 2ステップ（アクションフロー → ワイヤーフレーム + 画面設計ノート）で画面設計を行う。 ワイヤーフレームを見ながらユーザーと一緒に必要な機能・画面要素を詰めていく。 成果物は PlantUML Salt による視覚的なワイヤーフレーム。 Use when: 機能から画面に落としたい、画面構成を考えたい、 ワイヤーフレームを作りたい、画面設計をしたい、画面フローを整理したい。 design-discussion の後に使うと効果的。 Triggers: "画面構成", "画面設計", "ワイヤーフレーム", "画面に落とす", "ui flow design", "UIフロー設計", "wireframe", "画面を考えたい", "UIフロー", "画面遷移", "screen design", "画面フロー", "screen flow"

App Store / Google Play 用のプロモーションスクリーンショットを Pencil (.pen) で生成する Agent Team スキル。creative-director が戦略を立て、screenshot-designer が Pencil で デザインを構築し、copy-writer がコピーを提供し、spec-validator が技術仕様を数値検証し、 quality-reviewer が最終品質を確認する。5エージェント体制で高品質なスクリーンショットを生成。 Use when: App Store スクリーンショットを作りたい、プロモーション画像を作成したい、 スクショのデザインをしたい。 Triggers: "スクリーンショット作成", "App Store 画像", "プロモーションスクショ", "screenshot creator", "スクショ作って", "App Store 素材"

仕様書・要件定義からソフトウェアアーキテクチャを設計するスキル。 5人の専門エージェント（Architecture Lead・Module Designer・Dependency Analyst・ Platform Expert・Devil's Advocate）が協議しながら、 モジュール分割・依存関係・データフロー・インターフェース設計を行う。 成果物は構造化されたアーキテクチャ設計書（Markdown）。 Use when: 仕様書からどう設計するか迷っている時、モジュール分割の方針を決めたい時、 技術スタックに合ったアーキテクチャパターンを選びたい時、 設計書を作成したい時。 Triggers: "アーキテクチャ設計", "arch design", "仕様書から設計", "モジュール分割", "設計書を作りたい", "アーキテクチャを考えて", "コンポーネント設計", "依存関係を設計", "どう設計する", "design the architecture", "design from spec"

Design and build runnable iOS UI mockups in SwiftUI, including UI direction, multiple visual or interaction variants, realistic sample data, state switching, Xcode Previews, and Simulator validation. Use when the user wants to explore what an iOS screen should look like, compare SwiftUI UI ideas, create a clickable native prototype, validate an app flow before production implementation, or asks for a SwiftUI mock, iOS mockup, native prototype, 画面モック, UI案, SwiftUIで動くモック, or 実際に触れるiOSモック.

Convert SVG files to high-quality PNG images with precise control over dimensions, background color, and CSS rendering (including mix-blend-mode, filters, gradients). Use this skill when the user wants to: (1) convert SVG to PNG, (2) generate app icons or splash screens from SVG source, (3) batch-generate multiple PNG sizes from a single SVG, (4) render SVG with advanced CSS features like mix-blend-mode or filters to PNG. Triggers: "SVG to PNG", "SVG変換", "PNG変換", "アイコン生成", "スプラッシュ生成", "app icon from SVG", "favicon generation", "splash screen generation".

Chrome で表示中の Web 画面を Pencil (.pen) ファイルに高精度で再現する Agent Team スキル。 3つの専門エージェント（screen-analyzer, design-builder, quality-reviewer）が 分析→構築→品質検証のサイクルを回し、忠実な画面再現を実現する。 Use when: Pencil で再現して、画面を Pencil に写して、Chrome を Pencil にコピー、 pencil-replicate、デザインをキャプチャ、UI を Pencil に

「こんな機能を作りたい」「この設計どうしよう」という技術的な意思決定を、 5人の専門エージェントチームで壁打ちするスキル。 実装アプローチの比較・技術設計の選択・アーキテクチャの意思決定に特化。 Use when: 複数の実装方法があって迷っている時、設計の良し悪しを議論したい時、 技術的トレードオフを整理したい時。 Triggers: "設計壁打ち", "design discussion", "どう設計すべき", "実装アプローチを比較", "アーキテクチャ相談", "設計どうしよう", "技術選定したい", "ADR を作りたい", "設計の議論", "技術的トレードオフ"

PDCAサイクルでロゴを反復改善するスキル。 5つの専門エージェントが毎ラウンド議論し、SVGを生成。 ユーザーフィードバックを取り込んで何度でも改善を回す。 各ステップの議論・ロゴ・メモが全て履歴として残る。 Use when: ロゴを作りたい、アプリアイコンを作りたい、ブランドロゴをデザインしたい、 ロゴを変更したい、アイコンを作り直したい。 Triggers: "ロゴ", "logo", "アイコン作成", "アプリアイコン", "ブランドロゴ", "ロゴデザイン", "シンボルマーク", "ワードマーク", "icon design", "ロゴ作成", "ロゴ変更", "アイコン変更"

機能検討・プロダクト機能設計の壁打ちスキル。Mode A「壁打ち開始：〇〇機能」で1機能を深掘り、Mode B「アプリの機能を考えたい」でアプリ全体の機能セットを設計。ペルソナ・競合分析・トンマナを統合して議論。

Apple Human Interface Guidelines (HIG) に準拠した iOS アプリの UI を、 単一 HTML ファイルの「実際に動くインタラクティブプロトタイプ」として生成するスキル。 iPhone 15 Pro 相当のデバイスフレーム、ステータスバー、ナビゲーションバー、タブバー、 Inset Grouped リスト、モーダル/シート、アラートを iOS 純正の見た目で再現し、 タップ・スワイプ・入力・画面遷移がすべて動作する状態で出力する。 Claude Design / Artifact でそのまま開ける形式。 Use when: iOS アプリの UI を作りたい、アプリのモック画面が欲しい、 HIG 準拠のデザインを作りたい、iPhone 風のプロトタイプを作りたい、 アプリのデザイン案を可視化したい、App Store 提出用アプリの画面イメージを作りたい。 Triggers: "iOS アプリ UI", "iOS デザイン", "HIG", "Human Interface Guidelines", "iPhone モック", "アプリのモック", "iOS プロトタイプ", "アプリ画面を作って", "iOS UI プロトタイプ", "Claude Design", "ネイティブアプリ風", "アプリのデザイン"

アプリのトーン&マナー（トンマナ）を8名のエージェントチームで設計するスキル。 ブランドアーキタイプ・パーソナリティ定義から、カラー・タイポグラフィ・ビジュアルスタイル・ トーン・オブ・ボイスまでを一貫設計し、Pencil (.pen) + Markdown で成果物を出力する。 「デザインテンション」（矛盾ペア）を核に、AIっぽくない独自のブランドアイデンティティを生成する。

Claude Code の SubAgent（agents/*.md）を正しく定義するためのベストプラクティスガイド。 YAML frontmatter、ツール選択、3-Phase 構造、コンテキスト受け渡し、アンチパターンを網羅。 Use when: agents/*.md を書く、SubAgent 定義を改善する、エージェントの動作が想定外、 コンテキストが渡らない、ツール選択に迷う。 Triggers: "subagent", "agent definition", "agents/*.md", "エージェント定義", "サブエージェント", "3-Phase", "context passing", "コンテキスト渡し", "tool selection", "ツール選択", "subagent_type", "bypassPermissions"

実装計画・設計書からタスクを分解し、ファイル単位の依存関係を分析して 並列実行可能な Wave に自動グルーピングするスキル。 編集ファイルが被らないタスクは全て同時並列にし、 Mermaid 依存関係図 + ディレクトリ分割された TODO ファイル群を出力する。 team-plan の後工程、team-implement の前工程として使える。 Use when: 実装計画を並列タスクに分解したい、Wave 実行順序を設計したい、 タスクの依存関係を可視化したい、分業できる部分を洗い出したい。 Triggers: "タスク分解", "並列タスク", "parallel task", "Wave 設計", "依存関係を整理", "分業", "タスクリスト作成", "並列計画", "task breakdown", "parallel plan", "wave planning", "同時に進められる"

4つの専門エージェントチームで高品質なスキルを設計・作成するスキル。 アーキテクト、ドメインリサーチャー、スキルライター、品質レビュアーが 議論・フィードバックし合い、ベストプラクティスに準拠したスキルを生成する。 既存の skill-creator のリファレンスと既存スキルのパターンを直接参照して品質を担保する。 Use when: 新しいスキルを作りたい、スキルを高品質に作成したい、 チームでスキルを設計したい、既存スキルを改善したい。 Triggers: "スキル作成", "スキルを作りたい", "skill create", "新しいスキル", "create skill", "スキル設計", "skill design", "高品質スキル", "チームでスキル", "スキル改善", "skill improve"

承認済みの実装計画（Plan）を Agent Team で並列に実装するスキル。 Plan をタスクに分割 → 依存関係を設定 → Wave ごとに並列エージェントを起動 → 完了を待って次の Wave → 最後にビルド＆テスト検証。 team-plan スキル（調査→計画）の後に使う「実装実行フェーズ」。 Use when: 計画を並列に実装したい、チームで実装を進めたい、 Wave 実行で効率よくコードを書きたい。 Triggers: "team implement", "チームで実装", "並列実装", "plan を実装して", "wave 実行", "team-implement", "エージェントで実装", "実装フェーズ", "implement the plan"

8つの専門エージェント（市場規模分析・トレンド調査・競合インテリジェンス・投資シグナル・日本市場・ユーザー需要分析・規制調査・データ検証）が ディスカッション型でアプリ/デジタルプロダクトの市場調査を実施するスキル。 エージェント同士が対話・批判し合い、data-critic がライブモデレーターとして矛盾を検出・収束を判定する。 トライアンギュレーション（データ・方法論・調査者・理論の4種類）をディスカッションに組み込み、 確証バイアスを排除した信頼度付きレポートを出力する。 Gate 1（全員参加の合意形成）→ Gate 2（最終検証 + Devil's Advocate）の2段階ゲートで品質を担保。 コンテキストファイルで過去のセッションを引き継げる。 Use when: 市場調査をしたい、TAM/SAM/SOMを算出したい、市場の成長性を調べたい、 参入タイミングを判断したい、競合市場を分析したい、規制リスクを調べたい。 Triggers: "市場調査", "market research", "TAM", "SAM", "SOM", "市場規模", "市場分析", "market analysis", "参入", "market entry", "市場性", "market viability", "市場トレンド", "market trend"

Drizzle ORM を使ったデータベーススキーマの管理とマイグレーションの実行方法

This skill should be used when the user asks to "create a team", "spawn agents", "parallel execution", "delegate tasks to agents", "use a swarm", "team workflow", "split work across agents", "run tasks in parallel", or mentions wanting multiple agents to collaborate on a complex task.

日本語の概要は準備中です。原文の説明を表示しています。

実装タスクを受け取ったとき、5つの専門エージェントチームでコードベースを調査・議論し、 AI 間の合意形成を経て Plan Mode で実装計画を作成する。 不明点はユーザーに質問し、完璧な計画を立ててから実装する。 バグ修正・新機能・リファクタリング・設定変更など、あらゆる実装タスクに対応。 Use when: 実装を始める前に調査が必要なとき、影響範囲が不明なとき、 複数ファイルにまたがる変更をするとき、慎重に計画を立ててから実装したいとき。 Triggers: "調査してから実装", "team plan", "まず調査", "影響範囲を調べて", "計画を立ててから", "plan before implement", "コードベースを調査して実装", "research first", "調査→計画→実装"