Prototypes

ui-demo は、Playwright を使って洗練されたWebアプリのデモ動画を収録するのに役立ちます。カーソルの動きが見え、自然なテンポで進むので、操作手順の紹介、オンボーディング動画、機能ツアー、チュートリアル風の収録に向いています。安定した結果を出すには、まず discover、次に rehearse、最後に record という流れで進めてください。特に、プロトタイプや変化の速い UI で効果的です。

frontend-slidesは、ゼロからアニメーション豊かなHTMLプレゼンテーションを作成したり、PowerPointファイルを変換したりするのに役立ちます。講演、ピッチデック、ワークショップ、社内デモ、そしてUI Design向けのfrontend-slidesで、見た目の検討を重視したいとき、ブラウザ出力をゼロ依存で使いたいとき、1つのビューポートに収まるスライドが必要なときに、このfrontend-slidesスキルを使ってください。

algorithmic-artは、p5.jsでオリジナルの生成アートを作るためのスキルです。まずアルゴリズムの思想を書き出し、その後 seeded randomness、パラメータ操作、インタラクティブビューア付きの実行可能な .html と .js を組み立てる2段階ワークフローを提供します。

ux-designer は、リサーチ、アクセシビリティ、情報設計、インタラクションフロー、ワイヤーフレームの指針、UX ライティングに対応した構造化 UX デザイン skill です。AGENTS.md と用途別のルールファイルを使い、粗いプロダクト案を、判断基準が明確な設計意思決定へ落とし込むのに役立ちます。

prototype skill は、本実装に進む前に、ひとつの具体的な疑問に答えるための使い捨てコードを作るのに役立ちます。ロジック、状態遷移、データ構造、UI の方向性を、リポジトリの規約に沿った実行可能なプロトタイプで検証したいときに使います。完成版の機能ではなく、すばやいプロトタイプの指針が必要な場面に最適です。

figma を使って Figma MCP server からデザインの文脈、スクリーンショット、変数、アセットを取得し、Figma node を実装可能な UI 判断へ落とし込みます。Figma URL または node ID があり、デザインからコードへの作業、セットアップ、トラブルシューティングに適した正確な figma の使い方を知りたい場合に最適です。

brandkit は、ロゴシステム、アイデンティティデッキ、ビジュアルガイドラインボード、アートディレクションされたブランドプレゼンテーションなど、ブランディング業務向けのプレミアムなブランドキット画像生成スキルです。スタートアップ、開発者向けツール、セキュリティ、ゲーム、コンシューマーアプリ、ラグジュアリー系コンセプトまで、一貫性のあるスタジオ品質の仕上がりを狙えるよう設計されています。ありきたりな AI ムードボードではなく、洗練されたブランド世界観を作りたいときに使うスキルです。

shader-dev は、ShaderToy 風のリアルタイム表現に使える実用的な GLSL シェーダースキルです。ray marching、SDF シーン、ライティング、パーティクル、流体表現、ポストプロセス、そして UI Design 向けの shader-dev を、汎用的なプロンプトよりも少ない試行錯誤で構築・デバッグしたいときに役立ちます。

Remotion スキルを使って、Stitch プロジェクトの画面を、トランジション、ズーム、テキストオーバーレイ付きの洗練されたウォークスルー動画に変換できます。導入手順、サンプルファイル、そして動画編集やレンダー向けのコンポジションを再現しやすくする Remotion ガイドが含まれています。

pol-probe-advisorは、プロダクトマネージャーが仮説・リスク・リソース水準に応じて、適切なProof of Life（PoL）プローブを選ぶのを支援します。pol-probe-advisorスキルを使えば、作り込み過ぎを避けつつ、実際の学習目的に対して最も低コストで有効な検証手法を選べます。Product Management向けのpol-probe-advisorとして、実務で使いやすいガイドと活用の指針を備えています。

storyboard skill は、製品アイデアを問題提起から解決策までつなぐ6コマのナラティブに変換します。ステークホルダーとの認識合わせ、コンセプトレビュー、デモ、そして Prototypes 向けの storyboard に使えば、アイデアが本当に響くかを素早く、人間中心の視点で確かめられます。

pol-probe は、実際のプロダクトを作る前に、リスクの高い仮説を低コストで検証するための Proof of Life プローブを定義できるようにします。pol-probe スキルを使えば、見せかけのプロトタイピングを減らし、厳しめの成功基準を設定し、適切なプローブの種類を選び、学びを得た後の廃棄計画まで立てられます。

hyperframes-registry は、再利用可能な HyperFrames の registry アイテムを、迷いを減らしながらインストールして接続するのに役立ちます。`hyperframes add` の実行、blocks と components の見分け、スニペットの統合、`index.html` への block の接続、そしてデザイン実装や registry 検出のための `hyperframes.json` の path マッピング確認に使えます。

gsapは、HyperFramesのコンポジション向けの実用的なアニメーションリファレンスです。gsap.to()、from()、fromTo()、gsap.timeline()のどれを使うべきかを判断し、適切なvars、easing、stagger、transform、パフォーマンス最適化のパターンを適用するのに役立ちます。入場アニメーション、画面遷移、再利用可能なデザイン演出を、実装にそのまま使える形でまとめたいときに、このgsapガイドを使ってください。

excalidraw-diagram は、単に箱や矢印を並べるだけでなく、視覚的に論旨が伝わる Excalidraw JSON 図を作成する skill です。ワークフロー、アーキテクチャ、シーケンスフロー、意思決定の分岐、概念図など、構造・読みやすさ・実際の関係性が重要な場面に向いています。インストール手順、レンダリングを意識したチェック、よりよい図作成のための実践的なワークフローも含まれています。

infocardは、HTMLとCSSをページ内に直接埋め込むことで、Markdownで編集記事風の情報カードを作成できるスキルです。要約、トピックのスナップショット、ハイライトパネル、イベントカード、比較ブロックなど、意図的にデザインされた見た目が求められるUI Design向けコンテンツに適しています。図解やデータ可視化向けではないため、その用途には専用の図表スキルを使ってください。

canvas は、自由配置と明示的な x/y 座標を使って JSON Canvas ダイアグラムを作成します。マインドマップ、ナレッジグラフ、コンセプトマップ、計画ボードなど、順序よりも空間配置が重要なダイアグラム作成ワークフローに適しています。フロー図やデータチャートには適しません。編集可能なノード、リンク、構造化レイアウトが必要な場合に canvas skill を使ってください。

imagegen-frontend-mobile は、プレミアムなモバイルアプリ画面や複数画面のフロー向けの画像指示スキルです。iOS、Android、クロスプラットフォームのコンセプトに対して、整理された階層、読みやすいテキスト、制御された配色、控えめなスマホモックアップを備えた、アプリらしいビジュアルの作成を支援します。用途は画像生成に限られ、コード、Webサイト、デスクトップ UI には向きません。

gpt-taste は、洗練されたUIページを作るためのデザイン重視のスキルです。編集的なアートディレクション、間隔設計の規律、GSAPモーションを活かして、見栄えのよいページを構築できます。マーケティングページ、ランディングページ、ショーケースサイトで、レイアウトのバリエーションを増やし、タイポグラフィの制御を高め、ありきたりなフロントエンドのパターンを減らしたいときに gpt-taste を使ってください。実装に役立つインストール手順と使い方のメモも含まれています。

hand-drawn-diagramsは、自然言語の指示を手描き風のExcalidraw図、フロー、解説図、ワイヤーフレーム、ページモックアップに変換するスキルです。出力の検証にも対応しており、編集用URLとエクスポート可能な画像を返せます。洗練されたベクターアートではなく、スケッチ風の見た目で素早く図解したいときに最適です。

world-builder は、Dorothy のポケモン風オーバーワールドにおける生成型ゲームゾーンの作成と管理に特化した、デザイン重視のスキルです。world-builder スキルを使うと、テーマ、前提、ロケーションのアイデアを、ムード、レイアウト、地形、NPC 配置、空間ロジックを備えたプレイ可能なマップへと落とし込み、Design Implementation に活用できます。

gif-sticker-maker は、MiniMax Image Generation、MiniMax Video Generation、ffmpeg を使って、写真を Funko Pop / Pop Mart 風のアニメーション GIF ステッカー4枚に変換する skill です。この gif-sticker-maker skill では、導入前提、プロンプトテンプレート、キャプション、画像からGIFまでの一連のワークフローを扱います。

figma-create-new-file は、ドラフトに新しい空の Figma または FigJam ファイルを作成し、エディタ種別とファイル名の既定値を設定します。この figma-create-new-file スキルは、デザイン実装、迅速なプロトタイピング、use_figma を使う前に新しいキャンバスを用意する作業に役立ちます。必要に応じて whoami を使った planKey の解決も行います。

figma-use は、Figma Plugin API のワークフローで安全に `use_figma` を呼び出すために必須のスキルです。Figmaファイルを JavaScript で作成・更新・確認・構成する前に、この figma-use スキルをインストールして読み込んでください。特に、Design Implementation、コンポーネント作業、変数、オートレイアウト、プログラムによるファイル読み取りで役立ちます。