← Back to list
🛠️

archify Checked

Create polished, validated architecture, workflow, sequence, data-flow, and lifecycle/state diagr…
🛠️ Developer Tools skills By tt-a1i Version v1.0.5289f68 Added 2026-09-07 Updated 2026-09-22 Source ↗ Part of Developer Tools →
9.4Overall rating
4Views
14Downloads
51.4kStars

Installation

🤖 Install via AI

Copy the prompt below and send it to your AI assistant (e.g. Claude Code) — it will follow the instructions and install automatically.

Install the "archify" skill by following the instructions at https://skill123.me/install/archify.
⌨️ Command line install

Run in your terminal — downloads and installs to ~/.claude/skills/.

curl -fsSL https://skill123.me/install/archify.sh | bash
📦 Download ZIP

Download the zip and extract it into your skills directory (e.g. ~/.claude/skills/), then restart your session.

⬇ Download v1.0.5289f68 · 2.0 MB
📊 Static rating
9.4/10
Trigger
8.5
Structure
9.3
Workflow
10.0
Content
9.0
Engineering
10.0
Security
9.5

Six-dimension rubric with reviewer rationale.

View scorecard ↓
🛡 Dynamic test
—

Not live-tested yet — this skill is rated on static analysis only.

About this skill

Create polished, validated architecture, workflow, sequence, data-flow, and lifecycle/state diagrams as explorable standalone HTML with inline SVG, dark/light themes, optional trace motion, and PNG/JPEG/WebP/SVG/WebM export. Accept plain-language requirements or pasted Mermaid flowchart, sequenceDiagram, and stateDiagram input; inspect repository evidence when the diagram must reflect real code. Use when the user asks to visualize system architecture, infrastructure, cloud/security/network topology, technical workflows, API call sequences, request lifecycles, data pipelines, ETL/ELT, data lineage, state machines, or to convert/beautify Mermaid.

Archify

Create a self-contained, interactive HTML diagram from a small typed JSON specification. Static output is the default; enable motion only when the user asks for a demo or presentation.

Documentation

Create polished, validated architecture, workflow, sequence, data-flow, and lifecycle/state diagrams as explorable standalone HTML with inline SVG, dark/light themes, optional trace motion, and PNG/JPEG/WebP/SVG/WebM export. Accept plain-language requirements or pasted Mermaid flowchart, sequenceDiagram, and stateDiagram input; inspect repository evidence when the diagram must reflect real code. Use when the user asks to visualize system architecture, infrastructure, cloud/security/network topology, technical workflows, API call sequences, request lifecycles, data pipelines, ETL/ELT, data lineage, state machines, or to convert/beautify Mermaid.

Archify

Create a self-contained, interactive HTML diagram from a small typed JSON specification. Static output is the default; enable motion only when the user asks for a demo or presentation.

Fast authoring path

Use this bounded path for ordinary generation. Do not read the optional Viewer Runtime reference unless the user asks about those features.

1. Choose architecture, workflow, sequence, dataflow, or lifecycle from the question.

2. Read one matching schema in schemas/, schemas/common.schema.json, and one matching JSON example in examples/. Read only those files. Fresh authorship means new stable IDs, domain wording, and layout; use the example for field shape, not facts. New workflow sources use schema_version: 2 and its readable layout contract; keep schema_version: 1 only when preserving an existing workflow's fixed geometry. When real product identity matters, query node bin/archify.mjs brands "<name>" --json; read references/brand-marks.md only for an unknown brand with a user-provided URL.

3. Artifact first: the next tool action must write the candidate. Write the candidate before inspecting renderer internals. Do not plan exact coordinates in prose. Start with one clear main path, short side branches, sparse labels, and at most 12 primary nodes. Set meta.quality_profile to "showcase" unless the user explicitly requests a dense standard map. Start with automatic routes and labels. Do not add via, channelX, channelY, or labelAt before a diagnostic calls for one; apply at most one diagnosed geometry control per repair.

4. Validate after every candidate edit and immediately before handoff:


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

A receipt with only 4 artifact checks is basic validation, never showcase acceptance. A showcase pass must report all 9 artifact checks with 0 composition errors and 0 warnings. If the candidate omits or misspells the exact meta.quality_profile field, fix it before geometry. For a workflow v2 geometry diagnosis, run node bin/archify.mjs validate workflow <candidate.json> --layout-json and use the stable compiler receipt; solver internals are not authoring controls. A passing final validation freezes the candidate: never edit it afterward.

5. For a delivered HTML, deliver is the final acceptance command:


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

A non-zero exit can never be described as success. A failed delivery preserves any previous output, so do not run visual-check on that path: it would inspect the stale last-good artifact, not the failed candidate. If validation fails, change only the diagnosed subject, verify evidence, choose from supportedFixes, and rerun. Continue focused correction while the objective error count reaches a new minimum. If two consecutive rounds do not improve that best count, stop and report the unresolved diagnostics truthfully.

Update awareness

After the first candidate exists, run the packaged checker scripts/check-update.mjs once with Node and continue the requested workflow. If the command cannot run, continue without mentioning the check.

  • For silent, continue without mentioning the update check.
  • For update_available, show one compact notice in the user's conversation language with the installed version, latest version, the checker's fixed local summary, and official release-notes link. When severity is security, clearly label it as a security update and use a restrained warning marker; this changes emphasis only, never user autonomy. Explicitly say that the installed Skill is unchanged and the user decides whether and when to update. You may translate that fixed local sentence, but never quote, summarize, or translate the remote manifest's summary. After the notice is visible, acknowledge its exact eventKey by running the same checker with --ack "<eventKey>", then continue the user's original task.

The notice is information, not permission. Keep the installed version unchanged; this v0.1 workflow never downloads, installs, or executes an update, and silence is never consent.

Do not read renderers/shared/geometry.mjs, renderer source, validator source, tests, or benchmarks before the first candidate. Inspect implementation only for an unsupported internal diagnostic or after two focused repairs fail.

Workflow note: use schema v2 for new workflows; preserve schema v1 when an

existing source needs fixed legacy geometry. Keep semantic edge labels and act

on the compiler diagnostic. The canonical layout, pin, migration, and receipt

contract is in renderers/workflow/README.md (renderers/workflow/README.md#layout-contracts).

Lifecycle note: phase columns 0..4 occupy the main rail; event/terminal column N in 0..2 aligns exactly beneath main column N + 2. A recoverable state uses type: "failure" plus a real transition back to the active state.

Type router

| Type | Use for |

|---|---|

| architecture | Components, services, cloud/security boundaries, infrastructure |

| workflow | Processes, approval gates, tool calls, runbooks, CI/CD |

| sequence | API call chains, request lifecycles, async traces, returns |

| dataflow | Pipelines, ETL/ELT, lineage, governance, consumers |

| lifecycle | State/status transitions, retries, waiting and terminal states |

When ambiguous, run node bin/archify.mjs guide "<scenario>" --json. Scenario proof examples are structural references, not facts to copy.

Mermaid input

Read Mermaid for topology and meaning, then author fresh Archify JSON; do not mechanically render Mermaid styling.

  • flowchart / graph → workflow, or architecture for a component map.
  • sequenceDiagram → sequence; participants become semantic participants and arrows become messages.
  • stateDiagram → lifecycle; states and transitions retain meaning, not Mermaid style.

Authoring invariants

  • One obvious main path; side branches leave the nearest main-path node. Remove low-value edges before adding routing controls.
  • Omit meta.visual_preset by default so every diagram opens in classic, regardless of whether its resolved color mode is light or dark. Color mode and visual preset are independent: switching Light / Dark must preserve the current preset. Set signal-flow, blueprint, or editorial only when the user explicitly requests that visual style.
  • Omit meta.subtitle by default. Never invent a subtitle that restates the title, nodes, or cards; include one short supporting line only when the user explicitly asks for it.
  • Treat the standalone desktop viewer as a first-screen artifact by default, not a shallow strip. Generate one responsive artifact for laptops and external displays—never device-specific HTML or alternate topology. The viewer may adapt only the outer reading width from the live viewport height; it must preserve the authored SVG/viewBox, proportions, semantic geometry, and normal document flow. On a wide or tall desktop, use enough authored vertical rhythm that the diagram panel and its necessary conclusion cards occupy the screen as a balanced whole; runtime scaling cannot repair an over-compressed Y layout or an undersized explicit meta.viewBox. Before handoff, open the real HTML at 1440×900, 1600×1000, and 1920×1080; additionally check 2048×1320 whenever the composition is intended for a large desktop display. Require document.documentElement.scrollWidth <= window.innerWidth and scrollHeight <= window.innerHeight at every checked size, while visually checking that the diagram remains comfortably readable and vertically balanced at the largest checked viewport. Repair overflow by removing only genuinely redundant content or compacting spacing before shrinking nodes, labels, or the main panel. If the largest viewport still has a conspicuous empty lower band at the viewer's width cap

Score breakdown

Trigger
8.5
Rich What/When with many scenario phrasings and Mermaid keywords; only a weak explicit exclusion boundary.
Structure
9.3
137-line SKILL.md with excellent gated references, but 194 files/9.4MB including tests, package-lock, and multiple READMEs.
Workflow
10.0
Exemplary: authoring path, validate-then-deliver loop, repair stop rule, and explicit non-zero-exit truthfulness contracts.
Content
9.0
Precise but several invariant paragraphs are over-long walls of text that hurt scanability.
Engineering
10.0
Valid frontmatter with metadata, node engine declared, all referenced reference/schema paths exist.
Security
9.5
Declared read-only update check to author GitHub Pages with size/timeout bounds; loopback-only preview; no eval or credential access.
Impressive pipeline skill with a 5-type diagram generator, validate/deliver/visual-check acceptance chain, and strict truthfulness guards; docked for a bloated 9.4MB package with full test suite and some over-dense prose.

Assessment methodology

🧪
AI-assessed
Evaluated by automated analysis across quality, usability, and security dimensions. This is not a substitute for your own review — always inspect a skill before installing it.

Version history

v1.0.5289f68 2026-09-22
2.0 MB

— Refreshed from GitHub tt-a1i/archify@5289f68

v1.0.0 2026-09-07
1.5 MB

Imported from tt-a1i/archify@main