Communitygithub.com

Tekton — エージェントと協調設計するための共有アーキテクチャモデル

Tektonは、人間とAIエージェントが1つのYAMLモデルを共有してシステムを共同設計するための基盤です。6つの層(システム/ジャーニー/データ/インフラ/決定/品質)にわたる型付きグラフを提供し、ビューはクエリ、図はモデルのレンダリング結果として扱います。

Tekton — エージェントと協調設計するための共有アーキテクチャモデル とは?

Tektonは、アーキテクチャ設計の共同作業(人間↔エージェント)を可能にする基盤ツールです。従来の手書きHTML/SVG図は読み取り専用で編集やクエリができませんが、TektonはYAMLモデルを一元管理し、そこからMermaid図(エージェント可読、GitHubネイティブ)とタブ付きHTMLビューア(人間可視)を生成します。v0.2では、包含関係(parent/boundary)、ライフサイクル(status)、品質特性(qualities)、フィットネス関数(rules)をサポートし、`tekton lint`でCIゲートが可能です。エージェントは設計セッション中にモデルを直接YAMLで編集し、`validate`、`lint`、`render`、`query`を実行してトレーサビリティを確保します。レンダリングにはカスタムelkjsベースのビューアを使用し、Broomvaデザインシステムのテーマ(OKLCH青色、マットカード、ガラスパネル)を適用します。このスキルは、Claude CodeやCodexなどのAIエージェントとともにアーキテクチャを深く設計・検討する際に使用します。

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/broomva/skills/tree/HEAD/skills/design/tekton

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

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

ドキュメント

Tekton — 1つの共有モデルでアーキテクチャを共同設計する

これは何か

人間↔エージェントのアーキテクチャ協業のための基盤です。設計は1つのYAMLモデルに集約され、両者が編集します。Gitがラウンドトリップを支えます。あなたはそれを見る(HTMLビューア)ことができ、私は同じモデルを読み書きします。私たちは同じコンテキストで思考します。

これが解決する問題: 手書きのHTML/SVGドキュメントは末端のレンダリングであり、トラバース、クエリ、編集ができず、図に意味がありません。Tektonはライブモデルをレンダリングの上流に移動させます。

エンジン

scripts/tekton.py(Python 3、pyyaml)。オントロジーはreferences/ontology.md。

python3 scripts/tekton.py validate <model.arch.yaml>       # 整合性チェック
python3 scripts/tekton.py lint     <model.arch.yaml>       # v0.2 — フィットネス関数; 違反の場合はexit 1
python3 scripts/tekton.py stats    <model.arch.yaml>       # ノード/エッジ/ステータス/ルールのカウント
python3 scripts/tekton.py views                            # 6つのビューを一覧表示
python3 scripts/tekton.py mermaid  <model.arch.yaml> <view> # 生のmermaid(埋め込み/エージェント用)
python3 scripts/tekton.py render   <model.arch.yaml> [-o out.html]  # ブランド準拠のHTMLビューア
python3 scripts/tekton.py query    <model.arch.yaml> <from> <to>    # 層間パス

v0.2 オントロジーのアップグレード(アーキテクチャレビューより)

  • 包含関係 — 任意のノードにparent: + boundaryタイプ。ビューアはネストグループをレンダリングし、ダブルクリックで折りたたみ/展開(C4スタイルのドリルダウン)。
  • ライフサイクル — ノードのstatus:(current|target|deprecated。targetは破線でレンダリング = あるべき姿/現状を1つのモデルで表現)と、決定ノードに完全なNygard ADRフィールド(context、consequences、status、supersedes)。
  • 品質特性 — qualities:ブロック。NFRが要素をconstrains。詳細パネルと専用ビューに表示。
  • フィットネス関数 — rules:ブロック(forbid-dep、no-cycle、layer-order)。tekton lintはCIゲート可能(exit 1)。設計ループの独立検証器。

設計セッションでのエージェントの使い方

  1. モデルの特定/作成: <project>/docs/design/<name>.arch.yaml(またはスケッチ用にexamples/)。
  2. 考えながらモデルを変更 — 会話でコンポーネント、フロー、データ、インフラ、ADRが出てくるたびに、YAML内でノード、エッジ、決定を直接追加・調整。
  3. 各実質的な編集後に**validate + lint**(未解決参照、不正な型、フィットネスルール)。
  4. render を実行し、ビューアを正しいと提示する前に、ジオメトリ監査を実行: bash tests/visual-audit.sh <model.arch.yaml>。これにより全ビューをヘッドレスレンダリングし、ノードの重なりや空のキャプチャがあればFAILします。これなしに「図は正しい」と主張することは、最初のドッグフーディングで実際に発生した障害(in-groupエッジの切断、ノードの重複 — DOMカウントプローブでは見えず、ジオメトリでのみ検出)を引き起こします。URLに#<view>を追加してビューにディープリンク。
  5. query でトレーサビリティの質問(「これは何に触れるのか?」)に答える — 推測は不要。
  6. 方向転換 → 繰り返し。 人間がYAMLまたはビューアの意図を編集。git diffがハンドオフになります。

既知の外観上の残存問題(監査失敗ではない): ジャーニーのループバックエッジはELKが任意のステップでサイクルを切断します(ループはどこかで切断する必要があります)。隣接する並列エッジのラベルが密集したグループ内で近づきすぎることがあります。

規約

  • モデルファイル: *.arch.yaml。レンダリングされたビューア: *.view.html(gitignoreするかコミットするかはお任せ)。
  • 境界のあるシステムごとに1つのモデル。externalノードとusesエッジでシステムをリンク。
  • 決定(ADR)は第一級ノード — それらがgovernするものにピン留め。
  • Category-CのHTMLレポートはモデルの下流エクスポートとなり、情報源ではありません。

レンダリング — Mermaidではない理由

主要なビューアはカスタムレンダラーであり、Mermaidではありません。Mermaidのテーマ設定の制限ではBroomvaデザインシステム(OKLCH青軸、マットカード、獲得されたガラス、彗星グロー)を表現できず、そのdagreレイアウトは密なグラフで劣化します。代わりに: elkjsがブラウザ内でレイアウトを計算します(純粋JS → 出力は単一の自己完結型HTMLファイルのまま)、ノードはBroomvaマットカードとして描画されます(ガラスは浮動詳細パネル用に予約、DSの「ガラスは獲得される」ルールに従います)。デザイントークンはBroomvaデザインシステムからインライン化されます。tekton mermaidは、使い捨ての埋め込み/エージェント可読ターゲットとしてのみ残ります。

ロードマップ(v0 → v2)

  • v0.2(現在): YAMLモデル · validate + lint(フィットネス関数) · 6つのビュー · ブランド準拠のelkjsビューア(包含関係の折りたたみ/展開、あるべき姿/現状、クリックでトレース、ガラス詳細パネル) · 層間クエリ · Mermaidフォールバック埋め込み。
  • v1: 双方向ラウンドトリップ(ビューアでのドラッグ/編集 → YAMLへのシリアライズ)。MCPサーバ(検証済みミューテーションによりエージェントが無効なモデルを出力するのを防止)。React-Flowインタラクティブキャンバスのための完全なBroomvaデザインシステムのベンダリング。
  • v2: CRDT(loro)によるリアルタイムの人間↔エージェント共同編集。Prosoponへのライブ同期。

ステータス

v0ドッグフード — 内部設計ツール。設計ループが3つ以上の実際のシステムで使用されたら(スリーの法則)、スキル化(テスト済み+登録済み)。

Individual skills in this repo

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

broomva/skills

Local TTS, voice cloning, voice design, and video dubbing via the OmniVoice Studio MCP server (open-source ElevenLabs alternative; nothing leaves the machine, runs on MPS/CUDA/CPU). Use when: (1) generating speech from text in any of 646 languages, (2) cloning a voice from a 3-second reference clip, (3) designing a voice by gender/age/accent/pitch/style, (4) dubbing a video into another language, (5) listing voice profiles or personality presets, (6) producing narration where privacy, cost, or absent API keys matter, (7) non-English narration where Edge TTS/kokoro fall short, (8) batch audio for blog posts or content pipelines. Triggers: 'omnivoice', 'voice clone', 'clone this voice', 'tts', 'narrate', 'generate speech', 'voice synthesis', 'dub video', 'voice design', 'local tts', 'multilingual voice', 'narrate this post', 'elevenlabs alternative'.

broomva/skills

>- Speak an explanation out loud while working in any project — tiered text-to-speech with a pluggable backend (ElevenLabs by default and quota-guarded, macOS `say` via `--fast` for free instant local speech, local OmniVoice as an unlimited private tier). Markdown-aware, so code fences, URLs and deep paths collapse to short spoken placeholders instead of being dictated character by character, while snake_case identifiers survive intact so the listener can still search for them. Every utterance is saved to disk for later replay. Also carries a **talk mode** toggle: turn it on and the agent speaks a full readback of every turn, for as long as that session lasts — the whole response, not a summary of it, with `brief` and `marker` levels for when you want less. Talk mode is off by default and scoped to the single session that enabled it, so parallel agents in other worktrees stay silent. Use when the user asks to hear something rather than read it — an explanation of a change, a walkthrough of what just happen...

broomva/skills

Shop Tiendas D1 (Colombia, d1.com.co) from the command line — search the catalogue, resolve your nearest physical store, price a basket against that store's real stock, and quote delivery. D1 runs VTEX IO (account `d1tiendas`), so this drives its public storefront API with no admin key at all — catalogue and cart work fully anonymously, and a one-time emailed code unlocks order history. Handles the two traps that make naive D1 automation wrong — availability is regionalized (an unregioned query reports a national catalogue nobody can actually buy from) and prices arrive in two different units (search reports whole pesos, checkout reports hundredths, a silent 100x). Builds and prices baskets; it deliberately cannot pay, handing a checkout URL to a human instead. USE WHEN the user wants to find D1 products or prices, check whether D1 delivers somewhere, build or cost a D1 grocery basket, compare D1 items, or review their D1 orders. NOT FOR other Colombian retailers (Éxito, Jumbo, Ara, Alkosto), and not for c...

broomva/skills

Stateful, local-first household toxics inventory + swap engine. Identify the items in a home that carry endocrine disruptors and persistent chemicals (BPA/BPS, phthalates, PFAS/PTFE, parabens, flame retardants, VOCs, microplastics), score each by *real* exposure (severity x presence x how it's used x condition), and track the swap to a safer alternative from "flagged" -> "sourced" -> "swapped". Ships a grounded, cited knowledge graph of ~20 hazards, ~40 item-classes, and ~40 alternatives. Hands sourcing off to the `procurer` skill. The skill's state is the source of truth — the agent is the app.

broomva/skills

Generate a polished Remotion video and X thread showcasing the full agent skills inventory. Use when creating social media content about skills, rendering category-based skill visualizations, or producing animated showcases of agent capabilities. Triggers on "skills video", "showcase skills", "skills thread", "render skills", "social content for skills", or requests to visualize the skills inventory.

broomva/skills

OpenCaptions extension for Content Engine — adds intent-driven CWI (Caption With Intent) captions to the post-production pipeline. Hooks into the grade → caption → final stage. Generates captions that understand video intent (pitch, volume, emotion, emphasis) and style themselves accordingly with variable font weight, size, and color. Uses the OpenCaptions CLI or MCP server. Triggers on: 'add captions', 'opencaptions', 'CWI captions', 'intent captions'.

broomva/skills

Produce polished product launch videos using the Liquid Glass aesthetic — dark void backgrounds, 3D perspective floating UI panels, particle effects, spring animations, and cinematic pacing. Built on Remotion with Imagen 4.0 for frames and Veo 3.1 for B-roll. Use when: (1) creating a product demo or launch video, (2) showcasing a UI/app/tool with cinematic polish, (3) building a social-ready video from screenshots and renders, (4) applying the liquid glass floating panel style, (5) composing Remotion videos with 3D transforms and spring animations. Triggers on: 'launch video', 'product video', 'liquid glass video', 'demo video', 'showcase video', 'remotion video', 'floating panel', 'glass aesthetic'.

関連スキル