SnapDoczilla

Julio Varas のスキル

英語 · スペイン語

実際のプロジェクトで使用しているエージェントスキルです。小規模で読みやすく、簡単にカスタマイズできます。オープンな Agent Skills 形式（SKILL.md）に準拠しているため、まず Claude Code で動作し、Codex、OpenCode、Antigravity、Gemini CLI などのエージェントでも使用できます。

スキル

SnapDoczilla が生成したコンポーネントページ：ビルドのたびにリポジトリから取得した、実際の使用例と実際のソースコードです。

インストール（30 秒でセットアップ）

方法は 2 つあります。Claude Code プラグインは、リリースに合わせて更新される管理対象のバンドルです。skills.sh は編集可能なファイルをプロジェクトにコピーし、あらゆるエージェントで使用できます。どちらかを選んでください。両方をインストールすると、すべてのスキルが重複します。

claude plugin marketplace add julvc/skills
claude plugin install snapdoczilla@juliovc

/plugin marketplace add julvc/skills
/plugin install snapdoczilla@juliovc

npx skills@latest add julvc/skills

npx skills@latest add julvc/skills --skill snapdoczilla -a codex -y

スキルより MCP を優先したい場合、またはお使いのクライアントがスキルに対応していない場合、SnapDoczilla はローカル MCP サーバー（stdio、Python）としても提供されています。エージェントは引き続きコードをもとにドキュメントを作成し、サーバーはインストール、「前回ドキュメント化したコミットからの変更点」の確認、安全なページ書き込み、厳格なビルドなど、決定論的な処理を行います。

claude mcp add snapdoczilla -- uvx snapdoczilla-mcp

Claude Desktop、Cursor、その他の mcpServers クライアントの場合：

{
  "mcpServers": {
    "snapdoczilla": { "command": "uvx", "args": ["snapdoczilla-mcp"] }
  }
}

Codex CLI（~/.codex/config.toml）の場合：

[mcp_servers.snapdoczilla]
command = "uvx"
args = ["snapdoczilla-mcp"]

uv、git、bash が必要です（Windows の場合は Git for Windows）。サーバーはコードを読み取りません。クライアントが独自のファイルツールで読み取ります（Claude Desktop では、ファイルシステムサーバーを追加してください）。エージェントごとに、MCP サーバー または スキルのどちらか一方を使い、両方は使わないでください。

document_project プロンプトも公開されています。「このプロジェクトをドキュメント化して」と依頼するだけです。

SnapDoczilla：手順

得られるもの： リポジトリ内に documentation/ フォルダーが作成されます。誰でも documentation/html/index.html をダブルクリックで開けます。検索と図も含まれており、インストールもインターネット接続も不要です。ビルドのたびに、ページに実際のソースファイルが埋め込まれるため、ドキュメントがコードと食い違うことはありません。examples/shop で完成例をご覧ください（Express API と React アプリ。リポジトリをダウンロードし、examples/shop/documentation/html/index.html を開いてください）。

対象範囲。 あらゆる技術スタックを対象に、リポジトリ内の内容をドキュメント化します。Spring、Node（Express/Nest）、Python（FastAPI/Django/Flask）、.NET、Go、PHP、Ruby、Vue、React、Angular、Svelte に対応しています。

要件。 閲覧にはブラウザーが必要です。生成／更新には Git（bash が必要。Windows の場合は Git for Windows）、Python 3、エージェントが必要です。

1. スキルをインストールする

インストールを参照してください。

2. リポジトリ内でエージェントに依頼する

Document this project

エージェントは領域（例：back=backend/、front=frontend/）を検出し、ひな形をインストールして、実際のコードをもとに最初のページを作成し、サイトをビルドして図を確認します。コミットは行いません。

3. 閲覧する

documentation/html/index.html を開きます。

4. レビューしてコミットする

git diff を確認し、要確認 とされた内容を修正して、documentation/（html/ を含みます。これにより、読む人は何もインストールする必要がありません）をコミットします。

5. 最新の状態に保つ（どの開発者でも、コマンドひとつ）

./documentation/update.sh              # all areas
./documentation/update.sh --front      # one area
./documentation/update.sh --html-only  # rebuild the HTML only, after editing .md by hand

Windows では、documentation\update.cmd をダブルクリックします。前回の同期以降に変更された内容だけがエージェントに送られます。コードが変更されているのにドキュメントが更新されていない場合は、pre-push フックが通知します（処理を止めることはありません）。

デフォルトは Claude Code です。別のエージェントを使う場合は、DOCS_LLM を設定します。

または、セッション中にエージェントに 「ドキュメントを更新して」 と頼みます。Antigravity を含め、すべてのエージェントで使えます。

6. コンポーネントをドキュメント化する

Add a SnapDoczilla page for the Button component

コンポーネントの概要や仕組み、props／events／slots、アプリの実際の使用例、そして実際のソースコードを確認できます。

7. CMMI に準拠した作業を行っていますか？ cmmi プロファイルを使う

Document this project with SnapDoczilla using the CMMI profile

同じワークフローに加えて、CMMI のプラクティス領域（TS、DAR、PI、RDM、VV、PR、CM、PQA、OT、PAD）をリポジトリ内の証拠に対応付けるプロセス証拠ページ、要件 → コード → テスト → ページ のトレーサビリティマトリックス、リリースタグごとのベースライン表を追加します。ADR は DAR（基準＋代替案）に従います。要件 ID は実際のコミット、ブランチ、または Issue からのみ取得します。ドキュメントはアプレイザルを支援しますが、コンプライアンスを主張することはありません。スクリプト：install.sh <repo> "<Name>" <lang> cmmi。MCP：profile: "cmmi" を指定した snapdoczilla_install。

8. ユーザーマニュアルが必要ですか？どのプロファイルにも追加できます

Write the user manual for this app with SnapDoczilla

アプリを使う人向けのユーザーマニュアルセクションを追加します。要件、最初の手順、画面マップに加え、機能ごとに、番号付き手順、ボタンとフィールドの正確なラベル、期待される結果、UI コード内の実際のメッセージをもとに作成した メッセージ → 原因 → 対処方法 の表を掲載したページを用意します。スクリーンショットは、人が撮影できるようプレースホルダー（img/<function>-NN.png）のままにします。cmmi プロファイルでは、マニュアルも OT／VV の証拠として参照されます。スクリプト：add-manual.sh <repo>。MCP：snapdoczilla_add_manual。

アーキテクチャページ。ダークモードで、図はオフラインでレンダリングされます。

SnapDoczilla と Docusaurus の違い

異なる問題を解決するツールです。Docusaurus は、手作業で書いた内容からサイトを構築するエンジンです。SnapDoczilla はワークフローです。エージェントがコードからドキュメントを作成し、コードとの同期を保ちます。

バージョンや多言語に対応した一般公開向けの製品サイトには、Docusaurus を選びましょう。あらゆるコードベースを今日からチームにとって理解しやすくし、その状態を保つには、SnapDoczilla を選びましょう。

Web に公開する（任意）

documentation/html/ は静的サイトです。GitHub Pages で公開するには、リポジトリに .github/workflows/docs.yml を追加し、Settings → Pages → Source を GitHub Actions に設定します。

name: docs
on:
  push:
    branches: [main]
    paths: [documentation/html/**]
permissions: { contents: read, pages: write, id-token: write }
jobs:
  deploy:
    runs-on: ubuntu-latest
    environment: github-pages
    steps:
      - uses: actions/checkout@v4
      - uses: actions/upload-pages-artifact@v3
        with: { path: documentation/html }
      - uses: actions/deploy-pages@v4

リポジトリに追加されるもの

documentation/
├── source/              # editable Markdown (the agent writes here)
│   └── assets/          # local mermaid.min.js + diagrams.js
├── html/                # generated site (committed: zero-setup reading)
├── mkdocs.yml
├── areas.conf           # code areas: name=path
├── AGENT-RULES.md       # rules for the agent (language, never invent, format)
├── AGENT-RULES-<area>.md  # per-area rules (e.g. component pages)
├── update.sh / .cmd     # the only command you need
├── requirements.txt     # mkdocs<2, mkdocs-material<10
└── .last-sync-<area>    # last documented commit per area
.githooks/pre-push       # reminder only, never blocks

このリポジトリに新しいスキルを追加する

1. skills/<skill-name>/SKILL.md を作成し、name と description のフロントマターを記述します（エージェントがスキルをいつ起動するかは description で決まります）。ヘルパーは同じ階層に配置します：scripts/、assets/、references/。
2. Claude Code：.claude-plugin/marketplace.json にプラグインを追加します（スキルごとに1つのプラグインを作成し、すべて juliovc マーケットプレイスに配置します）。プラグインが2つ以上ある場合は、それぞれに .claude-plugin/plugin.json を含む専用フォルダーを用意し、source がそのフォルダーを指すようにします。
3. 確認します：claude plugin validate .、npx skills@latest add . --list、bash tests/smoke.sh を実行します（CI ではプッシュと PR のたびに実行されます）。
4. 両方の言語で、スキル テーブルに行を追加します。

コントリビューション

Issue と PR を歓迎します。PR を作成する前に bash tests/smoke.sh を実行してください。SnapDoczilla のアイデア：Python を使わないオプション、フレームワークごとのコンポーネントテンプレート、ずれた行範囲のスニペットの検出。

ライセンス

LICENSE © Julio Varas

Español

English · Español

実際のプロジェクトで使用しているエージェント向けスキルです。小さく、読みやすく、簡単にカスタマイズできます。オープン形式の Agent Skills（SKILL.md）に準拠しており、まず Claude Code で動作し、Codex、OpenCode、Antigravity、Gemini CLI などのエージェントでも使用できます。

スキル

SnapDoczilla が生成したコンポーネント資料：各ビルドでリポジトリから取得した実際の使用例とコード。

方法は2つあります。Claude Code プラグインは、私が公開すると更新される管理対象パッケージです。skills.shは編集可能なファイルをプロジェクトにコピーし、どのエージェントでも使えます。どちらか1つを選んでください。両方をインストールすると、各スキルが重複します。

claude plugin marketplace add julvc/skills
claude plugin install snapdoczilla@juliovc

/plugin marketplace add julvc/skills
/plugin install snapdoczilla@juliovc

npx skills@latest add julvc/skills

npx skills@latest add julvc/skills --skill snapdoczilla -a codex -y

MCP サーバー（Claude Desktop、Cursor、および任意の MCP クライアント）

スキルより MCP を使いたい場合や、クライアントがスキルに対応していない場合は、SnapDoczilla をローカル MCP サーバー（stdio、Python）としても公開しています。ドキュメントの作成は引き続きエージェントがコードをもとに行い、サーバーはインストール、「最後にドキュメント化したコミット以降の変更」の確認、ページの安全な書き込み、厳格なビルドといった決定論的な処理を担当します。

claude mcp add snapdoczilla -- uvx snapdoczilla-mcp

Claude Desktop、Cursor などの mcpServers を備えたクライアントの場合：

{
  "mcpServers": {
    "snapdoczilla": { "command": "uvx", "args": ["snapdoczilla-mcp"] }
  }
}

Codex CLI（~/.codex/config.toml）の場合：

[mcp_servers.snapdoczilla]
command = "uvx"
args = ["snapdoczilla-mcp"]

uv、git、bash が必要です（Windows の場合：Git for Windows）。サーバーはコードを読み取りません。クライアントが独自のファイルツールで読み取ります（Claude Desktop では、filesystem サーバーを追加してください）。各エージェントでは、MCP サーバーまたはスキルのどちらか一方を使い、両方は使わないでください。

document_project プロンプトも公開しています。その後は「このプロジェクトをドキュメント化して」と頼むだけです。

SnapDoczilla：ステップごとの手順

得られるもの： リポジトリ内の documentation/ フォルダーです。誰でも documentation/html/index.html をダブルクリックで開けます。検索機能と図が含まれており、インストールもインターネット接続も不要です。各ビルドで実際のソースファイルをページに含めるため、ドキュメントがコードと乖離しません。完成例は examples/shop にあります（Express API ＋ React アプリ）。リポジトリをダウンロードして、examples/shop/documentation/html/index.html を開いてください。

対象範囲。 リポジトリにあるものを、どの技術スタックでもドキュメント化します。Spring、Node（Express/Nest）、Python（FastAPI/Django/Flask）、.NET、Go、PHP、Ruby、Vue、React、Angular、Svelte に対応しています。

対応していないこと： スクリーンショットの撮影、ライブデモの実行、サーバーへの公開は行わず、OpenAPI/Swagger を置き換えることもありません。ドキュメントは選択した言語で作成されます（デフォルトは英語。エージェントにスペイン語で話しかけると、スペイン語で作成します）。

必要なもの。 閲覧にはブラウザーが必要です。生成または更新には、Git（bash が必要。Windows では Git for Windows）、Python 3、エージェントが必要です。

1. スキルをインストールする

インストールを参照してください。

2. リポジトリ内でエージェントに依頼する

Documenta este proyecto

エージェントは領域（例：back=backend/、front=frontend/）を検出し、構成をインストールして、実際のコードをもとに最初のページを作成し、サイトをビルドして、図を確認します。コミットは行いません。

3. 読む

documentation/html/index.html を開きます。

4. 確認してコミットする

git diff を確認し、要確認 とマークされた箇所を修正して、documentation/ をコミットします。読む人が何もインストールせずに済むよう、html/ も含めてください。

5. 最新の状態に保つ（どの開発者でも、コマンド 1 つ）

./documentation/update.sh              # todas las áreas
./documentation/update.sh --front      # una sola área
./documentation/update.sh --html-only  # solo regenera el HTML, tras editar los .md a mano

Windows では、documentation\update.cmd をダブルクリックします。エージェントに渡されるのは、前回の同期以降に変更された内容だけです。pre-push フックが、ドキュメント化されていないコードの変更を通知します（ブロックはしません）。

デフォルトでは Claude Code を使用します。別のエージェントを使う場合は、DOCS_LLM を設定してください。

または、セッション内でエージェントに 「ドキュメントを更新して」 と依頼してください。Antigravity を含むすべてのエージェントで動作します。

6. コンポーネントをドキュメント化する

Agrega una ficha de SnapDoczilla para el componente Boton

コンポーネントの概要、仕組み、props／イベント／スロット、アプリでの実際の使用例、および実際のソースコードが得られます。

7. CMMI に取り組んでいますか？cmmi プロファイルを使ってください

Documenta este proyecto con SnapDoczilla usando el perfil CMMI

同じワークフローに加えて、CMMI の実践領域（TS、DAR、PI、RDM、VV、PR、CM、PQA、OT、PAD）をリポジトリ内の証拠に対応付けるプロセス証拠ページ、要件 → コード → テスト → ページ のトレーサビリティマトリクス、リリースタグごとのベースライン表が追加されます。ADR は DAR（基準＋代替案）に沿っています。要件 ID は、実際のコミット、ブランチ、または issue からのみ取得します。このドキュメントはアプレイザルを支援するものであり、適合を宣言するものではありません。スクリプト：install.sh <repo> "<Nombre>" <lang> cmmi。MCP：profile: "cmmi" を指定して snapdoczilla_install。

8. ユーザーマニュアルが必要ですか？どのプロファイルにも追加できます

Escribe el manual de usuario de esta aplicación con SnapDoczilla

アプリを使う人向けに、ユーザーマニュアルのセクションを追加します。要件、使い始める手順、画面マップ、機能ごとのページを含みます。各ページには、番号付きの手順、ボタンとフィールドの正確な名前、期待される結果、インターフェースのコードにある実際のメッセージから作成した「メッセージ → 原因 → 対処方法」の表を記載します。スクリーンショットは、担当者が撮影できるようにプレースホルダー（img/<funcion>-NN.png）として配置されます。cmmiプロファイルでは、マニュアルはOT/VVの証拠としても参照されます。スクリプト：add-manual.sh <repo>。MCP：snapdoczilla_add_manual。

SnapDoczillaとDocusaurusの比較

それぞれ異なる問題を解決します。Docusaurusは、自分で手書きするサイトを構築するためのエンジンです。SnapDoczillaはワークフローです。エージェントがコードをもとにドキュメントを作成し、同期した状態を維持します。

バージョンや複数言語に対応した製品の公開サイトには、Docusaurusを選んでください。あらゆるコードをチームが今日理解でき、その後も理解し続けられるようにするには、SnapDoczillaを選んでください。

Webで公開する（任意）

documentation/html/は静的サイトです。GitHub Pagesで公開するには、Webで公開する（任意）セクションのワークフローを使用し、Settings → Pages → SourceをGitHub Actionsに設定してください。

リポジトリに追加されるもの

documentation/
├── source/              # Markdown editable (aquí escribe el agente)
│   └── assets/          # mermaid.min.js local + diagrams.js
├── html/                # sitio generado (se commitea: se lee sin instalar nada)
├── mkdocs.yml
├── areas.conf           # áreas de código: nombre=ruta
├── AGENT-RULES.md       # reglas para el agente (idioma, no inventar, formato)
├── AGENT-RULES-<area>.md  # reglas por área (p. ej. fichas de componentes)
├── update.sh / .cmd     # el único comando que necesitas
├── requirements.txt     # mkdocs<2, mkdocs-material<10
└── .last-sync-<area>    # último commit documentado por área
.githooks/pre-push       # solo avisa, nunca bloquea

このリポジトリに新しいスキルを追加する

1. skills/<nombre-skill>/SKILL.mdを作成し、nameとdescriptionのフロントマターを記述します（説明によって、エージェントがいつスキルを有効にするかが決まります）。補助ファイルは同じ場所に配置します：scripts/、assets/、references/。
2. Claude Code：.claude-plugin/marketplace.jsonにプラグインを追加します（スキルごとに1つのプラグインを作成し、すべてマーケットプレイスjuliovcの下に配置します）。2つ以上ある場合は、それぞれに専用のフォルダーと.claude-plugin/plugin.jsonを用意し、sourceがそのフォルダーを指すようにします。
3. 検証します：claude plugin validate .、npx skills@latest add . --list、bash tests/smoke.sh（CIはプッシュとPRのたびにこれを実行します）。
4. スキルの表に、2つの言語で行を追加します。

貢献

IssueやPRを歓迎します。PRを開く前にbash tests/smoke.shを実行してください。SnapDoczillaへのアイデア：Pythonを使わないオプション、フレームワークごとの記入シートのテンプレート、行範囲が古くなったスニペットの検出。

ライセンス

LICENSE © Julio Varas