Communitygithub.com

cubxxw/archify

洗練された検証済みのアーキテクチャ、ワークフロー、シーケンス、データフロー、ライフサイクル/状態図を、インタラクティブなスタンドアロンHTML（インラインSVG、ダーク/ライトテーマ、オプションのトレースモーション、PNG/JPEG/WebP/SVG/WebMエクスポート対応）として作成します。プレーンな要件または貼り付けられたMermaidフローチャート、シーケンス図、状態図の入力を受け付けます。図が実際のコードを反映する必要がある場合は、リポジトリの証拠を検査します。システムアーキテクチャ、インフラストラクチャ、クラウド/セキュリティ/ネットワークトポロジの可視化をユーザーが要求した場合に使用します。

archify とは？

Archifyは、開発者やAIエージェントがシステムアーキテクチャ、ワークフロー、シーケンス図、データフロー、ライフサイクル図を迅速かつ正確に作成するためのスキルです。小さな型付きJSON仕様から自己完結型のインタラクティブHTMLを生成し、インラインSVG、ダーク/ライトテーマの切り替え、パン/ズーム、検索、フォーカス、リレーションシップトレース、セマンティックビュー、プレゼンテーションモード、PNG/JPEG/WebP/SVG/WebMへのエクスポートをサポートします。Mermaid入力（フローチャート、シーケンス図、状態図）からトポロジと意味を読み取り、新鮮なArchify JSONを作成します。品質プロファイル「showcase」と「standard」をサポートし、検証（validate）と配信（deliver）コマンドで品質を保証します。特に、自動ルーティングとラベル、ポートの自動分散、幾何学的修復ルールに従い、エッジの交差や不明瞭なラベルを回避します。主にClaude CodeなどのAIエージェント環境で使用することを想定しています。

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/cubxxw/agent-kit/tree/HEAD/skills/archify
オリジナルを見る→すべてのスキルを見る

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

ドキュメント

archify は何をしますか？

小さな型付きJSON仕様から自己完結型のインタラクティブHTML図を作成します。静的出力がデフォルトです。ユーザーがデモやプレゼンテーションを要求した場合にのみモーションを有効にします。

高速オーサリングパス

通常の生成にはこの限定されたパスを使用します。ユーザーがそれらの機能について質問しない限り、オプションのビューアランタイムリファレンスを読まないでください。

  1. 質問からarchitecture、workflow、sequence、dataflow、またはlifecycleを選択します。

  2. schemas/内の一致するスキーマ1つ、schemas/common.schema.json、およびexamples/内の一致するJSON例1つを読みます。それらのファイルのみを読んでください。新しいオーサリングとは、新しい安定したID、ドメイン用語、レイアウトを意味します。例はフィールドの形状のために使用し、事実として使用しないでください。

  3. 最初にアーティファクトを作成します。次のツールアクションは候補を書き込む必要があります。レンダラーの内部を検査する前に候補を書いてください。散文で正確な座標を計画しないでください。1つの明確なメインパス、短いサイドブランチ、疎なラベル、最大12個のプライマリノードから始めます。ユーザーが明示的に密集したstandardマップを要求しない限り、meta.quality_profileを"showcase"に設定します。自動ルートとラベルから始めます。診断が必要になるまで via、channelX、channelY、またはlabelAt を追加しないでください。修復ごとに診断されたジオメトリ制御を最大1つ適用します。

  4. 候補を編集するたび、および引き渡しの直前に検証します：

    node bin/archify.mjs validate <type> <candidate.json> --quality showcase --json

    4つのアーティファクトチェックのみのレシートは基本検証であり、showcaseの受け入れではありません。showcaseパスは、9つすべてのアーティファクトチェックを0件の構成エラーと0件の警告で報告する必要があります。候補が正確なmeta.quality_profileフィールドを省略または誤ってスペルした場合、ジオメトリの前に修正してください。検証に合格した最終候補は固定されます。その後は決して編集しないでください。

  5. 配信されたHTMLの場合、deliverが最終的な受け入れコマンドです：

    node bin/archify.mjs deliver <type> <candidate.json> <output.html> --quality showcase --json

    ゼロ以外の終了コードは決して成功として説明できません。検証が失敗した場合、診断されたsubjectのみを変更し、evidenceを確認し、supportedFixesから選択して再実行します。目的のエラー数が新しい最小値に達するまで、集中的な修正を続けます。2回連続のラウンドでその最良の数が改善されない場合は、停止し、未解決の診断を正直に報告します。

最初の候補の前に renderers/shared/geometry.mjs、レンダラーソース、バリデーターソース、テスト、またはベンチマークを読まないでください。サポートされていない内部診断のため、または2回の集中的な修復が失敗した後にのみ、実装を検査します。

ライフサイクルに関する注意：フェーズ列0..4はメインレールを占めます。イベント/結果列0..2は後のフェーズの下に整列します。回復可能な状態はtype: "failure"とアクティブ状態に戻る実際の遷移を使用します。

タイプルーター

タイプ使用目的
architectureコンポーネント、サービス、クラウド/セキュリティ境界、インフラストラクチャ
workflowプロセス、承認ゲート、ツールコール、ランブック、CI/CD
sequenceAPIコールチェーン、リクエストライフサイクル、非同期トレース、リターン
dataflowパイプライン、ETL/ELT、系列、ガバナンス、コンシューマー
lifecycle状態/ステータス遷移、リトライ、待機および終了状態

あいまいな場合は、node bin/archify.mjs guide "<scenario>" --json を実行します。シナリオの証明例は構造的な参照であり、コピーする事実ではありません。

Mermaid入力

トポロジと意味のためにMermaidを読み、その後新しいArchify JSONを作成します。Mermaidのスタイリングを機械的にレンダリングしないでください。

  • flowchart / graph → workflow、またはコンポーネントマップの場合はarchitecture。
  • sequenceDiagram → sequence。参加者はセマンティックな参加者になり、矢印はメッセージになります。
  • stateDiagram → lifecycle。状態と遷移は意味を保持し、Mermaidスタイルは保持しません。

オーサリングの不変条件

  • 1つの明白なメインパス。サイドブランチは最も近いメインパスノードから分岐します。ルーティング制御を追加する前に、価値の低いエッジを削除します。
  • 真実のautoデフォルトにはmeta.legendを省略します。必要な場合のみ、mode: auto|all|hiddenとレンダラーがサポートするentries.<kind>.label|visibleを使用します。ラベルがセマンティクスを変更することはありません。
  • コンポーネントタイプはfrontend、backend、database、cloud、security、messagebus、externalです。バリアントはdefault、emphasis、security、dashedです。
  • 間隔は中心距離ではなく、明確なギャップを意味します。リレーションシップラベルの場合、明確なギャップは測定されたマスク幅を超える必要があります。そうでない場合はラベルを省略するか、意図的に移動します。
  • 自動ルートはそれらのエンドポイント側を所有します。側は方向契約です。最初と最後のセグメントはその側に垂直に出入りする必要があります。
  • 自動ポート分散は、アーキテクチャ、ワークフロー、データフロー、ライフサイクルのデフォルトのレンダラーの動作です。単一のリレーションシップと明示的なvia、channelX、channelY、labelAt、または非autoルートをスキップします。ニアパラレルポートは外部ブリッジを使用するため、自動ルーティングで8px未満のセグメントや16px未満の内部ターンを作成できません。
  • 無関係な不透明ノード、あいまいな共有コリドー、または別のルートをマスクするリレーションシップラベルとエッジが交差することを決して許可してはなりません。

フィールド列挙型、間隔の計算、ジオメトリ修復ルール、リポジトリの証拠、またはモード固有の配置が必要な場合にのみreferences/authoring-contract.mdを読んでください。

配信

修復中はvalidateを使用し、最終的な受け入れのためにdeliverを一度使用します。配信は、正確な仕様バイトをプライベートな同一ディレクトリのスナップショットに固定し、そのスナップショットをレンダリングしてチェックし、HTMLをアトミックにコミットし、仕様とアーティファクトの両方のSHA-256とバイト数を報告します。

ユーザーが即時のローカルプレビューを希望する場合にのみ--openを追加します。アクティブなデスクトップオーサリングループの場合、オプションのコマンドは次のとおりです：

node bin/archify.mjs preview <type> <input>.json <output>.html --quality showcase

デフォルトではプレビューを開始しないでください。プレビュー、リポジトリの証拠、エクスポートレシート、ビジュアルレビュー、またはコミット後のオープンを使用する場合はreferences/delivery-contract.mdを読んでください。

オプションのビューア機能

生成されたHTMLには、テーマ切り替え、パン/ズーム、検索、フォーカス、リレーションシップトレース、セマンティックビュー、プレゼンテーション、真実のエクスポートがすでに含まれています。これらはリーダーの機能であり、追加のオーサリング作業ではありません。meta.animation: "trace"はオプトインです。meta.viewsはオプションであり、最大5つのキュレーションされたチャプターを含める必要があります。

ユーザーが共有カード、ルート/リーチカード、モーション、ガイド付きストーリー、ディープリンク、プレゼンテーション、検索/フォーカス、またはその他のビューアランタイム機能を明示的に要求した場合にのみreferences/viewer-runtime.mdを読んでください。

セットアップとフォールバック

スキルパッケージ内ではインストールは不要です。以下で確認してください：

node bin/archify.mjs doctor
node bin/archify.mjs demo <output-directory>

シェルアクセスが利用できない場合は、アーキテクチャSVGをassets/template.htmlに手動で配置し、インラインカラーではなくCSSセマンティッククラスを使用し、references/delivery-contract.mdのビジュアルレビュー契約に従ってください。

出力

チェック済みのHTMLパス、図のタイプ、検証サマリー、仕様/アーティファクトのレシート、および真実のビジュアルレビューステータスを返します。ゼロ以外のコマンドに対して成功を主張したり、実行していないビジュアル検査を主張したりしないでください。

Individual skills in this repo

This repo contains 2 individual skills — each has its own dedicated page.

cubxxw/deepen-design

Recursively turn generic or polished-but-forgettable landing pages, portfolios, and product-marketing surfaces into ownable design directions. Use when the user says a design is boring, generic, mediocre, shallow, templated, lacks taste or depth, asks for top-tier repeated refinement, or when a high-stakes design task needs divergent concepts before implementation. Orchestrates binary direction branching, visual evidence, pairwise critique, backtracking, and staged implementation; treats design-

cubxxw/youtube-script-writer

Write a high-retention YouTube script — explainer, tutorial, video essay, review, or talking head — on the packaging then cold-open then value-stack then retention structure that holds watch time past the drop-off cliffs. Use when asked to write a YouTube script, script a long-form or explainer video, draft a video hook, outline a video essay, or turn a blog post or talk into a video. Produces title and thumbnail concepts, multiple hook options, a beat-by-beat body with retention devices, and cl

関連スキル

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community