npm - flowbook - Versions diffs - 0.1.4 → 0.1.6 - Mend

flowbook 0.1.4 → 0.1.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (10) hide show

package/README.md CHANGED Viewed

@@ -1,6 +1,6 @@
 # Flowbook
-> **English** | [한국어](./README.ko.md) | [简体中文](./README.zh-CN.md) | [日本語](./README.ja.md) | [Español](./README.es.md) | [Português (BR)](./README.pt-BR.md) | [Français](./README.fr.md) | [Русский](./README.ru.md) | [Deutsch](./README.de.md)
+> **English** | [한국어](./docs/README.ko.md) | [简体中文](./docs/README.zh-CN.md) | [日本語](./docs/README.ja.md) | [Español](./docs/README.es.md) | [Português (BR)](./docs/README.pt-BR.md) | [Français](./docs/README.fr.md) | [Русский](./docs/README.ru.md) | [Deutsch](./docs/README.de.md)
 Storybook for flowcharts. Auto-discovers Mermaid diagram files from your codebase, organizes them by category, and renders them in a browsable viewer.
@@ -109,6 +109,16 @@ npx skills add Epsilondelta-ai/flowbook
 This auto-detects your installed coding agents and installs the skill to the correct directories.
+### Global Installation
+To install the skill globally (available across all projects):
+```bash
+npx skills add -g Epsilondelta-ai/flowbook
+```
+This installs the skill to each agent's global directory (e.g., `~/.claude/skills/`, `~/.config/opencode/skills/`, etc.).
 ### Compatible Agents
 | Agent | Skill Location |

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "flowbook",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "type": "module",
   "bin": {
     "flowbook": "./dist/cli.js"

package/README.de.md DELETED Viewed

@@ -1,219 +0,0 @@
-# Flowbook
-> [English](./README.md) | [한국어](./README.ko.md) | [简体中文](./README.zh-CN.md) | [日本語](./README.ja.md) | [Español](./README.es.md) | [Português (BR)](./README.pt-BR.md) | [Français](./README.fr.md) | [Русский](./README.ru.md) | **Deutsch**
-Storybook für Flussdiagramme. Erkennt automatisch Mermaid-Diagrammdateien in Ihrer Codebasis, organisiert sie nach Kategorien und rendert sie in einem browserbaren Viewer.
-![Vite](https://img.shields.io/badge/vite-6.x-646CFF?logo=vite&logoColor=white)
-![React](https://img.shields.io/badge/react-19.x-61DAFB?logo=react&logoColor=white)
-![Mermaid](https://img.shields.io/badge/mermaid-11.x-FF3670?logo=mermaid&logoColor=white)
-![TypeScript](https://img.shields.io/badge/typescript-5.x-3178C6?logo=typescript&logoColor=white)
-## Schnellstart
-```bash
-# Initialisieren — fügt Skripte + Beispieldatei hinzu
-npx flowbook@latest init
-# Entwicklungsserver starten
-npm run flowbook
-# → http://localhost:6200
-# Statische Seite erstellen
-npm run build-flowbook
-# → flowbook-static/
-```
-## CLI
-```
-flowbook init                Flowbook im Projekt einrichten
-flowbook dev  [--port 6200]  Entwicklungsserver starten
-flowbook build [--out-dir d] Statische Seite erstellen
-```
-### `flowbook init`
-- Fügt die Skripte `"flowbook"` und `"build-flowbook"` zu Ihrer `package.json` hinzu
-- Erstellt `flows/example.flow.md` als Startvorlage
-### `flowbook dev`
-Startet einen Vite-Entwicklungsserver unter `http://localhost:6200` mit HMR. Änderungen an `.flow.md`- oder `.flowchart.md`-Dateien werden sofort übernommen.
-### `flowbook build`
-Erstellt eine statische Seite in `flowbook-static/` (konfigurierbar über `--out-dir`). Überall deploybar.
-## Flow-Dateien Erstellen
-Erstellen Sie eine `.flow.md`- (oder `.flowchart.md`-) Datei an beliebiger Stelle in Ihrem Projekt:
-````markdown
----
-title: Login-Ablauf
-category: Authentifizierung
-tags: [auth, login, oauth]
-order: 1
-description: Benutzer-Authentifizierungsablauf mit OAuth2
----
-```mermaid
-flowchart TD
-    A[Benutzer] --> B{Authentifiziert?}
-    B -->|Ja| C[Dashboard]
-    B -->|Nein| D[Login-Seite]
-```
-````
-Flowbook erkennt die Datei automatisch und fügt sie dem Viewer hinzu.
-## Frontmatter-Schema
-| Feld          | Typ        | Erforderlich | Beschreibung                          |
-|---------------|------------|--------------|---------------------------------------|
-| `title`       | `string`   | Nein         | Angezeigter Titel (Standard: Dateiname) |
-| `category`    | `string`   | Nein         | Kategorie in der Seitenleiste (Standard: "Uncategorized") |
-| `tags`        | `string[]` | Nein         | Filterbare Tags                       |
-| `order`       | `number`   | Nein         | Sortierreihenfolge innerhalb der Kategorie (Standard: 999) |
-| `description` | `string`   | Nein         | Beschreibung in der Detailansicht     |
-## Datei-Erkennung
-Flowbook durchsucht standardmäßig folgende Muster:
-```
-**/*.flow.md
-**/*.flowchart.md
-```
-Ignoriert `node_modules/`, `.git/` und `dist/`.
-## KI-Agent-Fähigkeit
-`flowbook init` installiert automatisch KI-Agent-Fähigkeiten in alle unterstützten Codierungs-Agent-Verzeichnisse.
-Wenn ein Codierungs-Agent (Claude Code, OpenAI Codex, VS Code Copilot, Cursor, Gemini CLI usw.) das Schlüsselwort **"flowbook"** in Ihrer Eingabeaufforderung erkennt, wird er:
-1. Ihre Codebasis auf logische Abläufe analysieren (API-Routen, Authentifizierung, Zustandsverwaltung, Geschäftslogik usw.)
-2. Flowbook einrichten, falls noch nicht initialisiert
-3. `.flow.md`-Dateien mit Mermaid-Diagrammen für jeden bedeutenden Ablauf generieren
-4. Den Build überprüfen
-### Fähigkeit über CLI installieren
-Sie können die Fähigkeit auch eigenständig über [skills.sh](https://skills.sh) installieren:
-```bash
-npx skills add Epsilondelta-ai/flowbook
-```
-Erkennt automatisch Ihre installierten Codierungs-Agenten und installiert die Fähigkeit in die richtigen Verzeichnisse.
-### Kompatible Agenten
-| Agent | Fähigkeitsort |
-|-------|---------------|
-| Claude Code | `.claude/skills/flowbook/SKILL.md` |
-| OpenAI Codex | `.agents/skills/flowbook/SKILL.md` |
-| VS Code / GitHub Copilot | `.github/skills/flowbook/SKILL.md` |
-| Google Antigravity | `.agent/skills/flowbook/SKILL.md` |
-| Gemini CLI | `.gemini/skills/flowbook/SKILL.md` |
-| Cursor | `.cursor/skills/flowbook/SKILL.md` |
-| Windsurf (Codeium) | `.windsurf/skills/flowbook/SKILL.md` |
-| AmpCode | `.amp/skills/flowbook/SKILL.md` |
-| OpenCode / oh-my-opencode | `.opencode/skills/flowbook/SKILL.md` |
-<details>
-<summary>Manuelle Fähigkeitsinstallation</summary>
-Wenn Sie `flowbook init` oder `npx skills add` nicht verwendet haben, kopieren Sie die Fähigkeit manuell:
-```bash
-# Beispiel: Claude Code
-mkdir -p .claude/skills/flowbook
-cp node_modules/flowbook/src/skills/flowbook/SKILL.md .claude/skills/flowbook/
-# Beispiel: Cursor
-mkdir -p .cursor/skills/flowbook
-cp node_modules/flowbook/src/skills/flowbook/SKILL.md .cursor/skills/flowbook/
-```
-Ersetzen Sie das Verzeichnis durch den entsprechenden Pfad aus der Tabelle der kompatiblen Agenten.
-</details>
-## Funktionsweise
-```
-.flow.md-Dateien ──→ Vite-Plugin ──→ Virtuelles Modul ──→ React-Viewer
-                       │                    │
-                       ├─ fast-glob-Scan    ├─ export default { flows: [...] }
-                       ├─ gray-matter       │
-                       │  Parsing           └─ HMR bei Dateiänderung
-                       └─ Mermaid-Block
-                          Extraktion
-```
-1. **Erkennung** — `fast-glob` durchsucht das Projekt nach `*.flow.md` / `*.flowchart.md`
-2. **Parsing** — `gray-matter` extrahiert YAML-Frontmatter; Regex extrahiert `` ```mermaid ``-Blöcke
-3. **Virtuelles Modul** — Vite-Plugin stellt geparste Daten als `virtual:flowbook-data` bereit
-4. **Rendering** — React-App rendert Mermaid-Diagramme über `mermaid.render()`
-5. **HMR** — Dateiänderungen invalidieren das virtuelle Modul und lösen ein Neuladen aus
-## Projektstruktur
-```
-src/
-├── types.ts                    # Gemeinsame Typen (FlowEntry, FlowbookData)
-├── node/
-│   ├── cli.ts                  # CLI-Einstiegspunkt (init, dev, build)
-│   ├── server.ts               # Programmatischer Vite-Server & Build
-│   ├── init.ts                 # Projekt-Initialisierungslogik
-│   ├── discovery.ts            # Datei-Scanner (fast-glob)
-│   ├── parser.ts               # Frontmatter + Mermaid-Extraktion
-│   └── plugin.ts               # Vite-Plugin für virtuelles Modul
-└── client/
-    ├── index.html              # Einstiegs-HTML
-    ├── main.tsx                # React-Einstiegspunkt
-    ├── App.tsx                 # Layout mit Suche + Seitenleiste + Viewer
-    ├── vite-env.d.ts           # Typdeklarationen für virtuelles Modul
-    ├── styles/globals.css      # Tailwind v4 + benutzerdefinierte Stile
-    └── components/
-        ├── Header.tsx          # Logo, Suchleiste, Flow-Anzahl
-        ├── Sidebar.tsx         # Einklappbarer Kategoriebaum
-        ├── MermaidRenderer.tsx # Mermaid-Diagramm-Rendering
-        ├── FlowView.tsx        # Einzelne Flow-Detailansicht
-        └── EmptyState.tsx      # Leerzustand mit Anleitung
-```
-## Entwicklung (Beitragen)
-```bash
-git clone https://github.com/Epsilondelta-ai/flowbook.git
-cd flowbook
-npm install
-# Lokale Entwicklung (verwendet die Root-vite.config.ts)
-npm run dev
-# CLI erstellen
-npm run build
-# CLI lokal testen
-node dist/cli.js dev
-node dist/cli.js build
-```
-## Technologie-Stack
-- **Vite** — Entwicklungsserver mit HMR
-- **React 19** — Benutzeroberfläche
-- **Mermaid 11** — Diagramm-Rendering
-- **Tailwind CSS v4** — Styling
-- **gray-matter** — YAML-Frontmatter-Parsing
-- **fast-glob** — Datei-Erkennung
-- **tsup** — CLI-Bundler
-- **TypeScript** — Typsicherheit
-## Lizenz
-MIT

package/README.es.md DELETED Viewed

@@ -1,219 +0,0 @@
-# Flowbook
-> [English](./README.md) | [한국어](./README.ko.md) | [简体中文](./README.zh-CN.md) | [日本語](./README.ja.md) | **Español** | [Português (BR)](./README.pt-BR.md) | [Français](./README.fr.md) | [Русский](./README.ru.md) | [Deutsch](./README.de.md)
-Storybook para diagramas de flujo. Descubre automáticamente archivos de diagramas Mermaid en tu código, los organiza por categoría y los renderiza en un visor navegable.
-![Vite](https://img.shields.io/badge/vite-6.x-646CFF?logo=vite&logoColor=white)
-![React](https://img.shields.io/badge/react-19.x-61DAFB?logo=react&logoColor=white)
-![Mermaid](https://img.shields.io/badge/mermaid-11.x-FF3670?logo=mermaid&logoColor=white)
-![TypeScript](https://img.shields.io/badge/typescript-5.x-3178C6?logo=typescript&logoColor=white)
-## Inicio Rápido
-```bash
-# Inicializar — agrega scripts + archivo de ejemplo
-npx flowbook@latest init
-# Iniciar servidor de desarrollo
-npm run flowbook
-# → http://localhost:6200
-# Construir sitio estático
-npm run build-flowbook
-# → flowbook-static/
-```
-## CLI
-```
-flowbook init                Configurar Flowbook en tu proyecto
-flowbook dev  [--port 6200]  Iniciar el servidor de desarrollo
-flowbook build [--out-dir d] Construir un sitio estático
-```
-### `flowbook init`
-- Agrega los scripts `"flowbook"` y `"build-flowbook"` a tu `package.json`
-- Crea `flows/example.flow.md` como plantilla inicial
-### `flowbook dev`
-Inicia un servidor de desarrollo Vite en `http://localhost:6200` con HMR. Cualquier cambio en archivos `.flow.md` o `.flowchart.md` se refleja instantáneamente.
-### `flowbook build`
-Construye un sitio estático en `flowbook-static/` (configurable con `--out-dir`). Despliégalo en cualquier lugar.
-## Escribir Archivos de Flujo
-Crea un archivo `.flow.md` (o `.flowchart.md`) en cualquier lugar de tu proyecto:
-````markdown
----
-title: Flujo de Login
-category: Autenticación
-tags: [auth, login, oauth]
-order: 1
-description: Flujo de autenticación de usuario con OAuth2
----
-```mermaid
-flowchart TD
-    A[Usuario] --> B{¿Autenticado?}
-    B -->|Sí| C[Dashboard]
-    B -->|No| D[Página de Login]
-```
-````
-Flowbook descubre automáticamente el archivo y lo agrega al visor.
-## Esquema de Frontmatter
-| Campo         | Tipo       | Requerido | Descripción                           |
-|---------------|------------|-----------|---------------------------------------|
-| `title`       | `string`   | No        | Título a mostrar (por defecto: nombre del archivo) |
-| `category`    | `string`   | No        | Categoría en la barra lateral (por defecto: "Uncategorized") |
-| `tags`        | `string[]` | No        | Etiquetas filtrables                  |
-| `order`       | `number`   | No        | Orden dentro de la categoría (por defecto: 999) |
-| `description` | `string`   | No        | Descripción en la vista detallada     |
-## Descubrimiento de Archivos
-Flowbook escanea estos patrones por defecto:
-```
-**/*.flow.md
-**/*.flowchart.md
-```
-Ignora `node_modules/`, `.git/` y `dist/`.
-## Habilidad de Agente IA
-`flowbook init` instala automáticamente habilidades de agente IA en todos los directorios de agentes de codificación soportados.
-Cuando un agente de codificación (Claude Code, OpenAI Codex, VS Code Copilot, Cursor, Gemini CLI, etc.) detecta la palabra clave **"flowbook"** en tu indicación, hará:
-1. Analizar tu base de código en busca de flujos lógicos (rutas API, autenticación, gestión de estado, lógica empresarial, etc.)
-2. Configurar Flowbook si aún no está inicializado
-3. Generar archivos `.flow.md` con diagramas Mermaid para cada flujo significativo
-4. Verificar la compilación
-### Instalar Habilidad via CLI
-También puedes instalar la habilidad de forma independiente usando [skills.sh](https://skills.sh):
-```bash
-npx skills add Epsilondelta-ai/flowbook
-```
-Detecta automáticamente tus agentes de codificación instalados e instala la habilidad en los directorios correctos.
-### Agentes Compatibles
-| Agente | Ubicación de Habilidad |
-|-------|---------------|
-| Claude Code | `.claude/skills/flowbook/SKILL.md` |
-| OpenAI Codex | `.agents/skills/flowbook/SKILL.md` |
-| VS Code / GitHub Copilot | `.github/skills/flowbook/SKILL.md` |
-| Google Antigravity | `.agent/skills/flowbook/SKILL.md` |
-| Gemini CLI | `.gemini/skills/flowbook/SKILL.md` |
-| Cursor | `.cursor/skills/flowbook/SKILL.md` |
-| Windsurf (Codeium) | `.windsurf/skills/flowbook/SKILL.md` |
-| AmpCode | `.amp/skills/flowbook/SKILL.md` |
-| OpenCode / oh-my-opencode | `.opencode/skills/flowbook/SKILL.md` |
-<details>
-<summary>Instalación Manual de Habilidad</summary>
-Si no usaste `flowbook init` ni `npx skills add`, copia la habilidad manualmente:
-```bash
-# Ejemplo: Claude Code
-mkdir -p .claude/skills/flowbook
-cp node_modules/flowbook/src/skills/flowbook/SKILL.md .claude/skills/flowbook/
-# Ejemplo: Cursor
-mkdir -p .cursor/skills/flowbook
-cp node_modules/flowbook/src/skills/flowbook/SKILL.md .cursor/skills/flowbook/
-```
-Reemplaza el directorio con la ruta apropiada de la tabla de Agentes Compatibles.
-</details>
-## Cómo Funciona
-```
-archivos .flow.md ──→ Plugin Vite ──→ Módulo Virtual ──→ Visor React
-                        │                   │
-                        ├─ escaneo fast-glob ├─ export default { flows: [...] }
-                        ├─ gray-matter       │
-                        │  parseo            └─ HMR en cambio de archivo
-                        └─ bloque mermaid
-                           extracción
-```
-1. **Descubrimiento** — `fast-glob` escanea el proyecto buscando `*.flow.md` / `*.flowchart.md`
-2. **Parseo** — `gray-matter` extrae el frontmatter YAML; regex extrae bloques `` ```mermaid ``
-3. **Módulo Virtual** — El plugin de Vite sirve los datos parseados como `virtual:flowbook-data`
-4. **Renderizado** — La app React renderiza diagramas Mermaid via `mermaid.render()`
-5. **HMR** — Los cambios en archivos invalidan el módulo virtual, disparando una recarga
-## Estructura del Proyecto
-```
-src/
-├── types.ts                    # Tipos compartidos (FlowEntry, FlowbookData)
-├── node/
-│   ├── cli.ts                  # Punto de entrada CLI (init, dev, build)
-│   ├── server.ts               # Servidor Vite programático y build
-│   ├── init.ts                 # Lógica de inicialización del proyecto
-│   ├── discovery.ts            # Escáner de archivos (fast-glob)
-│   ├── parser.ts               # Extracción de frontmatter + mermaid
-│   └── plugin.ts               # Plugin de módulo virtual de Vite
-└── client/
-    ├── index.html              # HTML de entrada
-    ├── main.tsx                # Entrada React
-    ├── App.tsx                 # Layout con búsqueda + barra lateral + visor
-    ├── vite-env.d.ts           # Declaraciones de tipo del módulo virtual
-    ├── styles/globals.css      # Tailwind v4 + estilos personalizados
-    └── components/
-        ├── Header.tsx          # Logo, barra de búsqueda, conteo de flujos
-        ├── Sidebar.tsx         # Árbol de categorías colapsable
-        ├── MermaidRenderer.tsx # Renderizado de diagramas Mermaid
-        ├── FlowView.tsx        # Vista detallada de flujo individual
-        └── EmptyState.tsx      # Estado vacío con guía
-```
-## Desarrollo (Contribución)
-```bash
-git clone https://github.com/Epsilondelta-ai/flowbook.git
-cd flowbook
-npm install
-# Desarrollo local (usa el vite.config.ts raíz)
-npm run dev
-# Construir CLI
-npm run build
-# Probar CLI localmente
-node dist/cli.js dev
-node dist/cli.js build
-```
-## Stack Tecnológico
-- **Vite** — Servidor de desarrollo con HMR
-- **React 19** — UI
-- **Mermaid 11** — Renderizado de diagramas
-- **Tailwind CSS v4** — Estilos
-- **gray-matter** — Parseo de frontmatter YAML
-- **fast-glob** — Descubrimiento de archivos
-- **tsup** — Bundler de CLI
-- **TypeScript** — Seguridad de tipos
-## Licencia
-MIT

package/README.fr.md DELETED Viewed

@@ -1,219 +0,0 @@
-# Flowbook
-> [English](./README.md) | [한국어](./README.ko.md) | [简体中文](./README.zh-CN.md) | [日本語](./README.ja.md) | [Español](./README.es.md) | [Português (BR)](./README.pt-BR.md) | **Français** | [Русский](./README.ru.md) | [Deutsch](./README.de.md)
-Storybook pour les diagrammes de flux. Découvre automatiquement les fichiers de diagrammes Mermaid dans votre code, les organise par catégorie et les affiche dans un visualiseur navigable.
-![Vite](https://img.shields.io/badge/vite-6.x-646CFF?logo=vite&logoColor=white)
-![React](https://img.shields.io/badge/react-19.x-61DAFB?logo=react&logoColor=white)
-![Mermaid](https://img.shields.io/badge/mermaid-11.x-FF3670?logo=mermaid&logoColor=white)
-![TypeScript](https://img.shields.io/badge/typescript-5.x-3178C6?logo=typescript&logoColor=white)
-## Démarrage Rapide
-```bash
-# Initialiser — ajoute les scripts + fichier d'exemple
-npx flowbook@latest init
-# Démarrer le serveur de développement
-npm run flowbook
-# → http://localhost:6200
-# Construire le site statique
-npm run build-flowbook
-# → flowbook-static/
-```
-## CLI
-```
-flowbook init                Configurer Flowbook dans votre projet
-flowbook dev  [--port 6200]  Démarrer le serveur de développement
-flowbook build [--out-dir d] Construire un site statique
-```
-### `flowbook init`
-- Ajoute les scripts `"flowbook"` et `"build-flowbook"` à votre `package.json`
-- Crée `flows/example.flow.md` comme modèle de départ
-### `flowbook dev`
-Démarre un serveur de développement Vite sur `http://localhost:6200` avec HMR. Toute modification de fichiers `.flow.md` ou `.flowchart.md` est prise en compte instantanément.
-### `flowbook build`
-Construit un site statique dans `flowbook-static/` (configurable via `--out-dir`). Déployez-le n'importe où.
-## Écrire des Fichiers de Flux
-Créez un fichier `.flow.md` (ou `.flowchart.md`) n'importe où dans votre projet :
-````markdown
----
-title: Flux de Connexion
-category: Authentification
-tags: [auth, login, oauth]
-order: 1
-description: Flux d'authentification utilisateur avec OAuth2
----
-```mermaid
-flowchart TD
-    A[Utilisateur] --> B{Authentifié ?}
-    B -->|Oui| C[Tableau de bord]
-    B -->|Non| D[Page de connexion]
-```
-````
-Flowbook découvre automatiquement le fichier et l'ajoute au visualiseur.
-## Schéma du Frontmatter
-| Champ         | Type       | Requis | Description                            |
-|---------------|------------|--------|----------------------------------------|
-| `title`       | `string`   | Non    | Titre affiché (par défaut : nom du fichier) |
-| `category`    | `string`   | Non    | Catégorie dans la barre latérale (par défaut : "Uncategorized") |
-| `tags`        | `string[]` | Non    | Tags filtrables                        |
-| `order`       | `number`   | Non    | Ordre de tri dans la catégorie (par défaut : 999) |
-| `description` | `string`   | Non    | Description affichée dans la vue détaillée |
-## Découverte des Fichiers
-Flowbook analyse ces motifs par défaut :
-```
-**/*.flow.md
-**/*.flowchart.md
-```
-Ignore `node_modules/`, `.git/` et `dist/`.
-## Compétence Agent IA
-`flowbook init` installe automatiquement les compétences d'agent IA dans tous les répertoires d'agents de codage supportés.
-Lorsqu'un agent de codage (Claude Code, OpenAI Codex, VS Code Copilot, Cursor, Gemini CLI, etc.) détecte le mot-clé **"flowbook"** dans votre invite, il :
-1. Analyse votre base de code pour les flux logiques (routes API, authentification, gestion d'état, logique métier, etc.)
-2. Configure Flowbook s'il n'est pas déjà initialisé
-3. Génère des fichiers `.flow.md` avec des diagrammes Mermaid pour chaque flux significatif
-4. Vérifie la compilation
-### Installer la Compétence via CLI
-Vous pouvez aussi installer la compétence indépendamment avec [skills.sh](https://skills.sh) :
-```bash
-npx skills add Epsilondelta-ai/flowbook
-```
-Détecte automatiquement vos agents de codage installés et installe la compétence dans les bons répertoires.
-### Agents Compatibles
-| Agent | Emplacement de Compétence |
-|-------|---------------|
-| Claude Code | `.claude/skills/flowbook/SKILL.md` |
-| OpenAI Codex | `.agents/skills/flowbook/SKILL.md` |
-| VS Code / GitHub Copilot | `.github/skills/flowbook/SKILL.md` |
-| Google Antigravity | `.agent/skills/flowbook/SKILL.md` |
-| Gemini CLI | `.gemini/skills/flowbook/SKILL.md` |
-| Cursor | `.cursor/skills/flowbook/SKILL.md` |
-| Windsurf (Codeium) | `.windsurf/skills/flowbook/SKILL.md` |
-| AmpCode | `.amp/skills/flowbook/SKILL.md` |
-| OpenCode / oh-my-opencode | `.opencode/skills/flowbook/SKILL.md` |
-<details>
-<summary>Installation Manuelle de Compétence</summary>
-Si vous n'avez pas utilisé `flowbook init` ni `npx skills add`, copiez la compétence manuellement :
-```bash
-# Exemple : Claude Code
-mkdir -p .claude/skills/flowbook
-cp node_modules/flowbook/src/skills/flowbook/SKILL.md .claude/skills/flowbook/
-# Exemple : Cursor
-mkdir -p .cursor/skills/flowbook
-cp node_modules/flowbook/src/skills/flowbook/SKILL.md .cursor/skills/flowbook/
-```
-Remplacez le répertoire par le chemin approprié du tableau des Agents Compatibles.
-</details>
-## Fonctionnement
-```
-fichiers .flow.md ──→ Plugin Vite ──→ Module Virtuel ──→ Visualiseur React
-                        │                   │
-                        ├─ scan fast-glob   ├─ export default { flows: [...] }
-                        ├─ gray-matter      │
-                        │  parsing          └─ HMR sur modification de fichier
-                        └─ bloc mermaid
-                           extraction
-```
-1. **Découverte** — `fast-glob` analyse le projet à la recherche de `*.flow.md` / `*.flowchart.md`
-2. **Parsing** — `gray-matter` extrait le frontmatter YAML ; regex extrait les blocs `` ```mermaid ``
-3. **Module Virtuel** — Le plugin Vite sert les données parsées comme `virtual:flowbook-data`
-4. **Rendu** — L'application React rend les diagrammes Mermaid via `mermaid.render()`
-5. **HMR** — Les modifications de fichiers invalident le module virtuel, déclenchant un rechargement
-## Structure du Projet
-```
-src/
-├── types.ts                    # Types partagés (FlowEntry, FlowbookData)
-├── node/
-│   ├── cli.ts                  # Point d'entrée CLI (init, dev, build)
-│   ├── server.ts               # Serveur Vite programmatique et build
-│   ├── init.ts                 # Logique d'initialisation du projet
-│   ├── discovery.ts            # Scanner de fichiers (fast-glob)
-│   ├── parser.ts               # Extraction frontmatter + mermaid
-│   └── plugin.ts               # Plugin de module virtuel Vite
-└── client/
-    ├── index.html              # HTML d'entrée
-    ├── main.tsx                # Entrée React
-    ├── App.tsx                 # Layout avec recherche + barre latérale + visualiseur
-    ├── vite-env.d.ts           # Déclarations de type du module virtuel
-    ├── styles/globals.css      # Tailwind v4 + styles personnalisés
-    └── components/
-        ├── Header.tsx          # Logo, barre de recherche, nombre de flux
-        ├── Sidebar.tsx         # Arbre de catégories repliable
-        ├── MermaidRenderer.tsx # Rendu des diagrammes Mermaid
-        ├── FlowView.tsx        # Vue détaillée d'un flux individuel
-        └── EmptyState.tsx      # État vide avec guide
-```
-## Développement (Contribution)
-```bash
-git clone https://github.com/Epsilondelta-ai/flowbook.git
-cd flowbook
-npm install
-# Développement local (utilise le vite.config.ts racine)
-npm run dev
-# Construire le CLI
-npm run build
-# Tester le CLI localement
-node dist/cli.js dev
-node dist/cli.js build
-```
-## Stack Technique
-- **Vite** — Serveur de développement avec HMR
-- **React 19** — Interface utilisateur
-- **Mermaid 11** — Rendu de diagrammes
-- **Tailwind CSS v4** — Stylisation
-- **gray-matter** — Parsing de frontmatter YAML
-- **fast-glob** — Découverte de fichiers
-- **tsup** — Bundler CLI
-- **TypeScript** — Sûreté de type
-## Licence
-MIT