[{"_1":2,"_471":-5,"_472":-5},"loaderData",{"_3":4,"_8":9,"_23":24},"root",{"_5":-5,"_6":7},"user","countable",false,"routes/_main",{"_5":-5,"_10":11},"recentPosts",[12,17,20],{"_13":14,"_15":16},"slug","claude-code-agent-teams","title","What Claude Code's Agent Teams Feature Does",{"_13":18,"_15":19},"claude-code-goal-command","How Claude Code's /goal Command Works",{"_13":21,"_15":22},"claude-code-routines-vs-loop","Claude Code Routines vs /loop: What's the Difference?","routes/creators.$handle",{"_25":26,"_27":26,"_28":29,"_30":7,"_31":32,"_469":7,"_470":111},"handle","tt-a1i","displayName","profileUrl","https://github.com/tt-a1i","verified","skills",[33],{"_34":35,"_13":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":46,"_47":48,"_49":50,"_51":52,"_54":55,"_61":62,"_63":64,"_65":66,"_81":82,"_83":-5,"_84":85,"_86":87,"_88":89,"_90":91,"_92":93,"_94":-5,"_95":96,"_97":26,"_30":7,"_98":7,"_99":87,"_100":101,"_102":87,"_103":87,"_104":105,"_106":107,"_135":136,"_171":172,"_222":223,"_441":442,"_453":454,"_465":466,"_467":468},"id","gh__tt-a1i__archify__archify","archify-tt-a1i","name","Archify","canonicalName","archify","tagline","Visualize and validate system architectures with ease.","description","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.","longDescription","Archify is a powerful tool designed for developers and designers who need to create interactive, polished diagrams representing system architectures, workflows, sequences, data flows, and lifecycles. By accepting plain-language requirements or Mermaid syntax, Archify allows users to visualize complex technical concepts in a clear and engaging manner. The output is a self-contained HTML document that includes inline SVG graphics, which can be customized with dark or light themes and even animated for presentations.\n\nThe skill operates through a straightforward authoring process that guides users in generating diagrams based on specific schemas. Users can choose from a variety of diagram types including architecture, workflow, sequence, dataflow, or lifecycle. Archify emphasizes validation, ensuring that each diagram is accurate and adheres to quality standards before final delivery. This focus on quality is crucial for professionals who rely on precise representations of their systems for communication and documentation.\n\nArchify is particularly beneficial for teams involved in software development, system design, and project management. It aids in the visualization of API call sequences, data pipelines, and infrastructure layouts, making it easier to understand and communicate complex systems. The ability to export diagrams in multiple formats (PNG, JPEG, WebP, SVG, WebM) adds versatility, allowing users to integrate these visuals into various documentation and presentation materials.\n\nOverall, Archify streamlines the process of creating technical diagrams, making it an essential tool for anyone looking to enhance their documentation and improve stakeholder communication. Its interactive HTML output and validation features ensure that users can produce high-quality diagrams efficiently.","primaryCategory","development","subcategory","documentation","secondaryCategories",[53],"design","tags",[56,57,58,59,60],"architecture","workflow","dataflow","lifecycle","visualization","skillType","tool-wrapper","complexity","intermediate","platforms",[67,68,69,70,71,72,73,74,75,76,77,78,79,80],"claude-code","claude-api","codex-cli","cursor","antigravity","github-copilot","windsurf","opencode","cline","roo-code","goose","kiro","continue","trae","delivery","source-link","skillFileUrl","pricing","free","price",0,"thumbnailType","icon","thumbnailIcon","chart-bar","thumbnailColor","blue","thumbnailImageUrl","sellerId","gh__tt-a1i","sellerName","featured","downloads","views",14,"rating","reviewCount","status","active","metrics",{"_108":109,"_110":111,"_112":111,"_113":109,"_114":115,"_116":117,"_118":119,"_120":121,"_122":123,"_124":125,"_126":127,"_128":129,"_130":87,"_131":132,"_133":134},"freshnessScore",100,"mirrorCount",1,"skillCountInRepo","qualityScore","popularityScore",82,"trustScore",60,"repoOpenIssues",11,"repoStars",11219,"repoWatchers",74,"repoContributors",4,"overallScore",88,"repoCreatedAt","2026-04-15T05:27:37Z","daysSinceUpdate","repoForks",858,"repoPushedAt","2026-08-10T12:13:52Z","source",{"_137":26,"_138":139,"_140":141,"_146":40,"_147":-5,"_144":148,"_149":150,"_151":7,"_152":40,"_153":154,"_160":161,"_162":163,"_164":165,"_166":167,"_168":169,"_170":169},"owner","repoUrl","https://github.com/tt-a1i/archify","author",{"_28":29,"_142":143,"_37":26,"_25":26,"_144":145},"avatarUrl","https://github.com/tt-a1i.png","type","User","repo","commitSha","github","branch","main","isOfficial","path","license",{"_37":155,"_156":157,"_158":159},"MIT License","spdxId","MIT","url","https://github.com/tt-a1i/archify/blob/main/LICENSE","sourceUpdatedAt","2026-08-06T02:35:06.000Z","redistributable",true,"permalink","https://github.com/tt-a1i/archify/blob/main/archify/SKILL.md","repoFullName","tt-a1i/archify","lastSyncedAt","2026-08-11T01:20:53.268Z","firstSeenAt","seo",{"_173":174,"_185":186,"_187":188,"_206":-5,"_207":208,"_214":215,"_216":217,"_218":219,"_220":221},"useCases",[175,179,182],{"_15":176,"_177":178},"Visualizing API Call Sequences","body","Use Archify to create clear diagrams that depict the flow of API calls in your application, helping teams understand interactions.",{"_15":180,"_177":181},"Documenting System Architecture","Generate detailed architecture diagrams that illustrate components and services within your system, facilitating better communication among stakeholders.",{"_15":183,"_177":184},"Mapping Data Pipelines","Create dataflow diagrams that visualize ETL processes and data lineage, ensuring clarity in data governance and management.","whenNotToUse","This tool may not be suitable for simple diagrams or when a quick sketch is needed, as it emphasizes validation and quality over speed.","faqs",[189,194,197,200,203],{"_190":191,"_192":193},"q","What types of diagrams can I create with Archify?","a","Archify supports the creation of architecture, workflow, sequence, dataflow, and lifecycle diagrams, allowing you to visualize various aspects of your system.",{"_190":195,"_192":196},"Can I use Mermaid syntax with Archify?","Yes, Archify accepts Mermaid flowchart, sequenceDiagram, and stateDiagram inputs, which you can then convert into Archify's JSON format for further customization.",{"_190":198,"_192":199},"What output formats does Archify support?","You can export your diagrams in multiple formats including PNG, JPEG, WebP, SVG, and WebM, making it easy to integrate them into your documentation.",{"_190":201,"_192":202},"How does Archify ensure the quality of the diagrams?","Archify includes a validation step that checks for errors and adherence to quality standards before finalizing and delivering the diagrams.",{"_190":204,"_192":205},"Is Archify suitable for quick sketches?","Archify is designed for creating polished, validated diagrams, so it may not be the best choice for quick, informal sketches or drafts.","ogImageUrl","keywords",[209,210,211,212,213],"system architecture visualization","workflow diagrams","data flow diagrams","lifecycle diagrams","interactive HTML diagrams","whenToUse","Use Archify when you need to visualize system architectures, workflows, or data flows in a clear, interactive format, especially when collaborating with teams or stakeholders.","metaTitle","Archify - Visualize System Architectures Easily","problemSolved","Archify removes the complexity of creating and validating technical diagrams, ensuring clarity in system architecture communication.","metaDescription","Create interactive diagrams for architecture, workflows, and data flows with Archify. Click to learn more!","content",{"_224":225,"_226":227,"_424":425,"_434":435,"_436":7,"_437":438,"_439":440},"bundledFiles",62,"fileTree",[228,233,238,242,246,249,252,255,259,262,265,268,271,274,277,280,283,286,289,292,295,298,301,304,307,310,313,316,319,322,325,328,331,334,337,340,343,346,349,352,355,358,361,364,367,370,373,376,379,382,385,388,391,394,397,400,403,406,409,412,415,418,421],{"_152":229,"_230":231,"_144":232},"LICENSE","size",1146,"file",{"_152":234,"_230":235,"_144":232,"_236":237},"SKILL.md",7929,"language","markdown",{"_152":239,"_230":240,"_144":232,"_236":241},"assets/template.html",600083,"html",{"_152":243,"_230":244,"_144":232,"_236":245},"bin/archify.mjs",54402,"javascript",{"_152":247,"_230":248,"_144":232,"_236":245},"bin/open-artifact.mjs",2225,{"_152":250,"_230":251,"_144":232,"_236":245},"bin/preview.mjs",23578,{"_152":253,"_230":254,"_144":232,"_236":245},"delta/architecture-delta.mjs",70463,{"_152":256,"_230":257,"_144":232,"_236":258},"examples/agent-run.lifecycle.json",4527,"json",{"_152":260,"_230":261,"_144":232,"_236":258},"examples/agent-tool-call.workflow.json",6470,{"_152":263,"_230":264,"_144":232,"_236":258},"examples/async-job-roundtrip.sequence.json",4483,{"_152":266,"_230":267,"_144":232,"_236":258},"examples/cache-miss-request.sequence.json",4442,{"_152":269,"_230":270,"_144":232,"_236":258},"examples/checkout-platform.base.architecture.json",2304,{"_152":272,"_230":273,"_144":232,"_236":258},"examples/checkout-platform.head.architecture.json",2434,{"_152":275,"_230":276,"_144":232,"_236":241},"examples/dataflow-product-analytics.html",618131,{"_152":278,"_230":279,"_144":232,"_236":258},"examples/deployment-release.lifecycle.json",4394,{"_152":281,"_230":282,"_144":232,"_236":258},"examples/event-stream.dataflow.json",5543,{"_152":284,"_230":285,"_144":232,"_236":258},"examples/incident-response.workflow.json",5471,{"_152":287,"_230":288,"_144":232,"_236":241},"examples/lifecycle-agent-run.html",611784,{"_152":290,"_230":291,"_144":232,"_236":258},"examples/product-analytics.dataflow.json",5719,{"_152":293,"_230":294,"_144":232,"_236":258},"examples/production-deployment.architecture.json",5546,{"_152":296,"_230":297,"_144":232,"_236":258},"examples/release-delivery.workflow.json",5256,{"_152":299,"_230":300,"_144":232,"_236":241},"examples/sequence-cache-miss-request.html",614556,{"_152":302,"_230":303,"_144":232,"_236":241},"examples/web-app-rendered.html",611896,{"_152":305,"_230":306,"_144":232,"_236":258},"examples/web-app.architecture.json",3863,{"_152":308,"_230":309,"_144":232,"_236":241},"examples/workflow-agent-tool-call-rendered.html",620972,{"_152":311,"_230":312,"_144":232,"_236":258},"package-lock.json",2562,{"_152":314,"_230":315,"_144":232,"_236":258},"package.json",1128,{"_152":317,"_230":318,"_144":232,"_236":245},"recipes/scenarios.mjs",27853,{"_152":320,"_230":321,"_144":232,"_236":237},"references/authoring-contract.md",6111,{"_152":323,"_230":324,"_144":232,"_236":237},"references/delivery-contract.md",3563,{"_152":326,"_230":327,"_144":232,"_236":237},"references/viewer-runtime.md",4243,{"_152":329,"_230":330,"_144":232,"_236":245},"renderers/architecture/grid.mjs",2071,{"_152":332,"_230":333,"_144":232,"_236":245},"renderers/architecture/render-architecture.mjs",30577,{"_152":335,"_230":336,"_144":232,"_236":237},"renderers/dataflow/README.md",4283,{"_152":338,"_230":339,"_144":232,"_236":245},"renderers/dataflow/render-dataflow.mjs",20019,{"_152":341,"_230":342,"_144":232,"_236":237},"renderers/lifecycle/README.md",5035,{"_152":344,"_230":345,"_144":232,"_236":245},"renderers/lifecycle/render-lifecycle.mjs",22782,{"_152":347,"_230":348,"_144":232,"_236":237},"renderers/sequence/README.md",4198,{"_152":350,"_230":351,"_144":232,"_236":245},"renderers/sequence/render-sequence.mjs",20568,{"_152":353,"_230":354,"_144":232,"_236":245},"renderers/shared/cli.mjs",10116,{"_152":356,"_230":357,"_144":232,"_236":245},"renderers/shared/diagnostics.mjs",4113,{"_152":359,"_230":360,"_144":232,"_236":245},"renderers/shared/engineering-profiles.mjs",6936,{"_152":362,"_230":363,"_144":232,"_236":245},"renderers/shared/generated-validators.mjs",382681,{"_152":365,"_230":366,"_144":232,"_236":245},"renderers/shared/geometry.mjs",52614,{"_152":368,"_230":369,"_144":232,"_236":245},"renderers/shared/layout-report.mjs",1015,{"_152":371,"_230":372,"_144":232,"_236":245},"renderers/shared/legend.mjs",8428,{"_152":374,"_230":375,"_144":232,"_236":245},"renderers/shared/output-path.mjs",10618,{"_152":377,"_230":378,"_144":232,"_236":245},"renderers/shared/repository-evidence.mjs",11445,{"_152":380,"_230":381,"_144":232,"_236":245},"renderers/shared/text-fit.mjs",2191,{"_152":383,"_230":384,"_144":232,"_236":245},"renderers/shared/utils.mjs",8276,{"_152":386,"_230":387,"_144":232,"_236":245},"renderers/shared/validator.mjs",3508,{"_152":389,"_230":390,"_144":232,"_236":237},"renderers/workflow/README.md",5425,{"_152":392,"_230":393,"_144":232,"_236":245},"renderers/workflow/render-workflow.mjs",27491,{"_152":395,"_230":396,"_144":232,"_236":237},"schemas/README.md",9138,{"_152":398,"_230":399,"_144":232,"_236":258},"schemas/architecture.schema.json",6523,{"_152":401,"_230":402,"_144":232,"_236":258},"schemas/common.schema.json",2041,{"_152":404,"_230":405,"_144":232,"_236":258},"schemas/dataflow.schema.json",5972,{"_152":407,"_230":408,"_144":232,"_236":258},"schemas/lifecycle.schema.json",6662,{"_152":410,"_230":411,"_144":232,"_236":258},"schemas/sequence.schema.json",5132,{"_152":413,"_230":414,"_144":232,"_236":258},"schemas/workflow.schema.json",8476,{"_152":416,"_230":417,"_144":232,"_236":245},"scripts/check-render-output.mjs",29622,{"_152":419,"_230":420,"_144":232,"_236":245},"scripts/generate-validators.mjs",2400,{"_152":422,"_230":423,"_144":232,"_236":245},"scripts/render-examples.mjs",1178,"codeExamples",[426,430,432],{"_236":427,"_428":429},"bash","snippet","node bin/archify.mjs validate --quality showcase --json",{"_236":427,"_428":431},"node bin/archify.mjs deliver --quality showcase --json",{"_236":427,"_428":433},"node bin/archify.mjs preview .json .html --quality showcase","skillMd","# Archify\n\nCreate 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.\n\n## Fast authoring path\n\nUse this bounded path for ordinary generation. Do not read the optional Viewer Runtime reference unless the user asks about those features.\n\n1. Choose `architecture`, `workflow`, `sequence`, `dataflow`, or `lifecycle` from the question.\n2. 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.\n3. 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.\n4. Validate after every candidate edit and immediately before handoff:\n\n ```bash\n node bin/archify.mjs validate --quality showcase --json\n ```\n\n 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. A passing final validation freezes the candidate: never edit it afterward.\n5. For a delivered HTML, `deliver` is the final acceptance command:\n\n ```bash\n node bin/archify.mjs deliver --quality showcase --json\n ```\n\n A non-zero exit can never be described as success. 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.\n\nDo 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.\n\nLifecycle note: phase columns `0..4` occupy the main rail; event/outcome columns `0..2` align beneath later phases. A recoverable state uses `type: \"failure\"` plus a real transition back to the active state.\n\n## Type router\n\n| Type | Use for |\n|---|---|\n| `architecture` | Components, services, cloud/security boundaries, infrastructure |\n| `workflow` | Processes, approval gates, tool calls, runbooks, CI/CD |\n| `sequence` | API call chains, request lifecycles, async traces, returns |\n| `dataflow` | Pipelines, ETL/ELT, lineage, governance, consumers |\n| `lifecycle` | State/status transitions, retries, waiting and terminal states |\n\nWhen ambiguous, run `node bin/archify.mjs guide \"\" --json`. Scenario proof examples are structural references, not facts to copy.\n\n## Mermaid input\n\nRead Mermaid for topology and meaning, then author fresh Archify JSON; do not mechanically render Mermaid styling.\n\n- `flowchart` / `graph` → `workflow`, or `architecture` for a component map.\n- `sequenceDiagram` → `sequence`; participants become semantic participants and arrows become messages.\n- `stateDiagram` → `lifecycle`; states and transitions retain meaning, not Mermaid style.\n\n## Authoring invariants\n\n- One obvious main path; side branches leave the nearest main-path node. Remove low-value edges before adding routing controls.\n- Omit `meta.legend` for the truthful `auto` default. When needed, use only `mode: auto|all|hidden` and renderer-supported `entries..label|visible`; labels never change semantics.\n- Component types are `frontend`, `backend`, `database`, `cloud`, `security`, `messagebus`, and `external`; variants are `default`, `emphasis`, `security`, and `dashed`.\n- Spacing means clear gap, not center distance. For a relationship label, clear gap must exceed its measured mask width; otherwise omit the label or move it deliberately.\n- Automatic routes own their endpoint sides. A side is a direction contract: the first and final segment must leave/enter perpendicular to that side.\n- Automatic Port Spread is a default renderer behavior for architecture, workflow, data-flow, and lifecycle. It skips single relationships and explicit `via`, `channelX`, `channelY`, `labelAt`, or non-`auto` routes. Near parallel ports use an outside bridge so automatic routing cannot create a sub-8px segment or sub-16px interior turn.\n- Never accept an edge crossing an unrelated opaque node, an ambiguous shared corridor, or a relationship label masking another route.\n\nRead `references/authoring-contract.md` only when you need field enums, spacing math, geometry repair rules, repository evidence, or mode-specific placement.\n\n## Delivery\n\nUse `validate` during repair and `deliver` once for final acceptance. Delivery freezes the exact specification bytes into a private same-directory snapshot, renders and checks that snapshot, atomically commits the HTML, and reports SHA-256 plus byte counts for both specification and artifact.\n\nAdd `--open` only when the user wants an immediate local preview. For an active desktop authoring loop, the optional command is:\n\n```bash\nnode bin/archify.mjs preview .json .html --quality showcase\n```\n\nNever start preview by default. Read `references/delivery-contract.md` when using preview, repository evidence, export receipts, visual review, or post-commit opening.\n\n## Optional viewer capabilities\n\nGenerated HTML already contains theme switching, pan/zoom, search, focus, relationship tracing, semantic views, presentation, and truthful exports. These are reader capabilities, not extra authoring work. `meta.animation: \"trace\"` is opt-in; `meta.views` is optional and should contain at most five curated chapters.\n\nRead `references/viewer-runtime.md` only when the user explicitly asks for Share Cards, Route/Reach cards, motion, guided stories, deep links, presentation, search/focus, or another Viewer Runtime feature.\n\n## Setup and fallback\n\nNo install is required inside the skill package. Verify with:\n\n```bash\nnode bin/archify.mjs doctor\nnode bin/archify.mjs demo \n```\n\nWhen shell access is unavailable, hand-place architecture SVG into `assets/template.html`, use CSS semantic classes rather than inline colors, and follow the visual review contract in `references/delivery-contract.md`.\n\n## Output\n\nReturn the checked HTML path, diagram type, validation summary, specification/artifact receipt, and truthful visual-review status. Do not claim success for a non-zero command or claim visual inspection you did not perform.","skillMdTruncated","frontmatter",{"_153":157,"_37":40,"_43":44},"totalSizeBytes",4664611,"runtime",{"_443":163,"_444":7,"_445":-5,"_446":163,"_447":7,"_448":7,"_449":450,"_451":452},"requiresBash","requiresMcp","model","requiresNode","requiresNetwork","requiresPython","allowedTools",[],"dependencies",[],"install",{"_455":456,"_457":458,"_459":460,"_461":462,"_463":464},"cli","npx skills add tt-a1i/archify/archify","coordinate","tt-a1i/archify/archify","browseUrl","https://github.com/tt-a1i/archify/tree/main/archify","downloadUrl","https://github.com/tt-a1i/archify/archive/refs/heads/main.zip","gitUrl","https://github.com/tt-a1i/archify.git","createdAt","2026-08-11T01:21:01.087Z","updatedAt","2026-08-18T06:05:45.584Z","hasNext","page","actionData","errors"]