Communitygithub.com

Tekton — Co-design d'architecture sur un modèle partagé

Substrat pour la co-conception d'architecture entre humain et agent, basé sur un modèle YAML unique, diff-friendly, traversable et rendu en HTML/Mermaid.

Qu'est-ce que Tekton — Co-design d'architecture sur un modèle partagé ?

Tekton est un substrat de **partenariat architecture humain↔agent** qui résout le problème des diagrammes statiques (HTML/SVG) que l'on ne peut ni traverser, ni interroger, ni éditer. Le design vit dans un seul fichier YAML que l'humain et l'agent lisent et écrivent ; `git` assure le round-trip. Le modèle est validé, linté (fonctions de fitness), rendu en visualisation HTML avec `elkjs` (nœuds imbriqués, as-is/to-be, panneau détaillé) et peut être exporté en Mermaid pour les agents ou les diagrammes jetables. Six vues (système, parcours, données, infrastructure, décisions, qualités) et une commande de requête cross-couche (`tekton query <from> <to>`) permettent de répondre à des questions de traçabilité comme « quelle infrastructure ce parcours utilisateur touche-t-il ? ». Tekton est conçu pour les sessions de design profond où le dialogue agent nécessite une représentation partagée, éditable et vérifiable. Il est utilisé via `scripts/tekton.py`, s'appuie sur une ontologie documentée (`references/ontology.md`) et impose un audit géométrique (`tests/visual-audit.sh`) avant de déclarer un diagramme correct.

Compatible avec~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/broomva/skills/tree/HEAD/skills/design/tekton
Voir l'original→Voir toutes les compétences

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentation

Tekton — co-concevoir l'architecture sur un modèle partagé

Ce que c'est

Un substrat pour un partenariat humain↔agent en architecture. Le design vit dans un modèle YAML que nous éditons tous les deux ; git est le round-trip. Vous voyez (visualiseur HTML) ; je lis et écris le même modèle. Nous réfléchissons sur le même contexte.

Le problème qu'il résout : un document HTML/SVG fait à la main est un rendu terminal — vous ne pouvez pas traverser, interroger ou le modifier en retour, et ses diagrammes ne portent aucun sens. Tekton place le modèle vivant en amont du rendu.

Moteur

scripts/tekton.py (Python 3, pyyaml). Ontologie dans references/ontology.md.

python3 scripts/tekton.py validate <model.arch.yaml>       # vérification d'intégrité
python3 scripts/tekton.py lint     <model.arch.yaml>       # v0.2 — fonctions de fitness ; code de sortie 1 en cas de violation
python3 scripts/tekton.py stats    <model.arch.yaml>       # compteurs nœuds/arcs/statut/règles
python3 scripts/tekton.py views                            # liste les 6 vues
python3 scripts/tekton.py mermaid  <model.arch.yaml> <view># mermaid brut (intégration/agent)
python3 scripts/tekton.py render   <model.arch.yaml> [-o out.html]  # visualiseur HTML aux couleurs de la marque
python3 scripts/tekton.py query    <model.arch.yaml> <from> <to>    # chemin cross-couche

Évolutions de l'ontologie v0.2 (issues de la revue d'architecture)

  • Contenants — parent: sur tout nœud + type boundary ; le visualiseur affiche des groupes imbriqués, double-clic pour réduire/déplier (exploration à la C4).
  • Cycle de vie — status: sur les nœuds (current|target|deprecated ; target rendu en pointillé = as-is/to-be dans un seul modèle) et champs ADR complets de Nygard sur les décisions (context, consequences, status, supersedes).
  • Qualités — bloc qualities: ; les exigences non fonctionnelles contraint des éléments ; affichées dans le panneau de détail + vue dédiée.
  • Fonctions de fitness — bloc rules: (forbid-dep, no-cycle, layer-order) ; tekton lint est intégrable en CI (code de sortie 1). Le vérificateur indépendant de la boucle de conception.

Comment l'agent l'utilise dans une session de design

  1. Localiser/créer le modèle : <projet>/docs/design/<nom>.arch.yaml (ou examples/ pour du brouillon).
  2. Muter pendant la réflexion — ajouter/ajuster des nœuds, des arcs, des décisions directement dans le YAML au fur et à mesure que la conversation fait émerger des composants, des flux, des données, de l'infrastructure et des ADR.
  3. validate + lint après chaque modification substantielle (références pendantes, mauvais types, règles de fitness).
  4. render, puis — AVANT de présenter le visualiseur comme correct — exécuter l'audit géométrique : bash tests/visual-audit.sh <model.arch.yaml>. Il effectue un rendu sans tête de chaque vue et ÉCHOUE en cas de chevauchement de nœuds ou de captures vides. Déclarer « le diagramme est correct » sans cela est exactement l'échec que le premier dogfood a détecté (arcs déconnectés dans un groupe, nœuds doublons — invisibles pour les sondes DOM-count, détectés uniquement par la géométrie). Lien profond vers une vue avec #<vue> dans l'URL.
  5. query pour répondre aux questions de traçabilité (« qu'est-ce que cela touche ? ») plutôt que de deviner.
  6. Piloter → répéter. L'humain édite le YAML ou le visualiseur ; le diff git est la transmission.

Résidus cosmétiques connus (pas des échecs d'audit) : les arcs de boucle de parcours font que ELK casse la boucle à une étape arbitraire (une boucle doit se casser quelque part) ; les étiquettes d'arcs parallèles adjacents peuvent être proches dans les groupes denses.

Conventions

  • Fichiers modèles : *.arch.yaml. Visualiseur rendu : *.view.html (à ignorer ou à versionner — à vous de choisir).
  • Un modèle par système délimité ; lier les systèmes avec des nœuds external + arcs uses.
  • Les décisions (ADR) sont des nœuds de première classe — les attacher à ce qu'elles gouvernent.
  • Les rapports HTML de catégorie C deviennent une exportation en aval du modèle, pas la source de vérité.

Rendu — pourquoi pas Mermaid

Le visualiseur principal est un rendu personnalisé, pas Mermaid. Le plafond thématique de Mermaid ne peut pas exprimer le système de design Broomva (axe bleu OKLCH, cartes mates, verre mérité, lueur comète) et sa disposition dagre se dégrade sur les graphes denses. À la place : elkjs calcule la disposition dans le navigateur (JS pur → la sortie reste un seul fichier HTML autonome), et les nœuds sont dessinés comme des cartes mates Broomva (verre réservé au panneau de détail flottant, conformément à la règle « le verre se mérite » du système de design). Les jetons de design sont intégrés depuis le système de design Broomva. tekton mermaid reste UNIQUEMENT comme une cible jetable d'intégration/agent.

Feuille de route (v0 → v2)

  • v0.2 (maintenant) : Modèle YAML · validate + lint (fonctions de fitness) · 6 vues · visualiseur elkjs aux couleurs de la marque (réduction/dépliage des contenants, as-is/to-be, clic pour tracer, panneau de détail en verre) · requête cross-couche · intégration Mermaid de repli.
  • v1 : round-trip bidirectionnel (glisser/éditer dans le visualiseur → sérialiser vers YAML) ; serveur MCP (mutations validées pour que l'agent ne puisse pas émettre un modèle invalide) ; intégrer le système de design Broomva complet pour un canvas interactif React-Flow.
  • v2 : CRDT (loro) co-édition temps réel humain↔agent ; synchronisation en direct vers Prosopon en tant que surface.

Statut

v0 dogfood — outil de design interne. Skillifed (testé + enregistré) une fois que la boucle de conception a été utilisée sur ≥3 systèmes réels (règle des trois).

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'.

Skills associés

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