archify

โดย tt-a1i

สร้างไดอะแกรมสถาปัตยกรรม เวิร์กโฟลว์ ลำดับเหตุการณ์ การไหลของข้อมูล และวงจรชีวิต/สถานะ ที่ผ่านการตรวจสอบแล้วและดูเป็นมืออาชีพ ในรูปแบบ HTML แบบสแตนด์อโลนที่สำรวจได้ พร้อม SVG แบบอินไลน์ รองรับธีมมืด/สว่าง มีตัวเลือกการเคลื่อนไหวของเส้นทาง และส่งออกเป็น PNG/JPEG/WebP/SVG/WebM รองรับอินพุตเป็นคำอธิบายภาษาธรรมดาหรือโค้ด Mermaid ที่วางมาในรูปแบบ flowchart, sequenceDiagram และ stateDiagram ตรวจสอบหลักฐานในรีโพซิทอรีเมื่อไดอะแกรมต้องสะท้อนโค้ดจริง ใช้เมื่อผู้ใช้ขอให้แสดงภาพสถาปัตยกรรมระบบ โครงสร้างพื้นฐาน คลาวด์/ความปลอดภัย/เครือข่าย...

npx skills add https://github.com/tt-a1i/archify --skill archify

Archify

Create an interactive HTML diagram from typed JSON. Static output is the default; enable motion only when requested.

Run commands from your working directory. Unless the user names another location, give each new diagram request its own folder .archify/<type>-<slug>-<YYYYMMDD-HHMMSS>/ there (local time, chosen once when the request starts): keep candidate.json and <slug>.html in it, set meta.output to that relative HTML path, and reuse the folder for every repair rerun. A later request gets a new folder, so earlier versions stay intact. Replace bin/archify.mjs in the commands below with the installed package's absolute path, or its path relative to your working directory; input and output paths resolve from that working directory.

For a real codebase, read Repository authoring while tracing the requested behavior. A system description uses the steps below; an existing JSON uses the handoff path.

Existing candidate handoff

When the user supplies a frozen candidate, run finalize first as one CLI invocation. Its passing receipt completes the automated gates; follow any visual review recommendation under Delivery before claiming visual quality. For repair, follow step 5.

finalize includes a bounded update check in its delivery receipt; see Update awareness.

Fast authoring path

Use this path for ordinary generation. Read branch references only when their stated trigger applies.

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

  2. Use the exact schema and example paths in the Type router without listing their directories. Read Authoring defaults and the mode's example in a bounded batch separate from project documents and complete schemas so neither is truncated; recover any missing section before writing. For Architecture, use the matching showcase example. For Sequence, Dataflow, and Lifecycle, also read the mode and common schemas. Read the relevant schema definition before choosing any new field, enum, or constrained text, especially boundary kinds. Examples teach shape, not facts. Use fresh IDs, wording, and layout. Go directly to the candidate without preliminary help, doctor, starter validation, temporary diagrams, or output-path listing. Query brands only for an explicitly requested mark; read Brand marks for an unknown mark with a user-provided URL.

  3. Once the requested scope and, for a real codebase, source evidence are covered, write the complete candidate directly without planning coordinates in prose. Choose Architecture abstraction and connected placement using Authoring defaults before coordinates: show the main user journey and necessary branches, preserve control roles and behavior-changing conditions, and leave enough room for actual relationship labels. No node, relationship, source, view, card, or boundary count is a target or ceiling. Use automatic routes first; add explicit routing only for necessary branch, return, supplied geometry, or measured repair. Set meta.quality_profile to "showcase" unless the user requests dense standard.

  4. Once the complete first candidate is written, run finalize directly. Its first gate is showcase validation; successful first drafts need no separate pre-validation. Keep the candidate unchanged while the command runs:

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

    For a repository-backed candidate, include evidence on the first draft and use the complete first command: node bin/archify.mjs finalize <type> <candidate.json> <output.html> --repo-root <repo-root> --quality showcase --json.

    A passing receipt proves the included validate, deliver, strict check, and real-browser browser-check gates passed. Use its compact summary; run standalone commands only for a separate request or focused failure diagnosis.

  5. A non-zero exit is never success. Read compact stdout or evidence.summaryReceipt, then repair the failed gate, including its repair limit. Preserve requested meaning and source evidence. For several tangled Architecture routes, read Architecture layout repair; for measured field or geometry failures, read Authoring contract. Edit the connected neighborhood and rerun the complete finalize command from step 4.

Update awareness

finalize and standalone deliver include update in their receipts. Do not run a separate check for the same delivery. If update.noticeRequired is true, read references/update-awareness.md and keep one update line in your final response to the user, even after a quality gate fails. For a task with several diagrams, mention the update once in the final response. Snooze or ignore a reminder only when the user explicitly asks; never install or update on your own initiative.

Before the first candidate, use the authoring references and relevant repository source, not Archify implementation or tests. Inspect Archify implementation if diagnostics remain unactionable after focused repairs.

Type router

TypeUse forSchemaExample
architectureComponents, services, cloud/security boundaries, infrastructureschemas/architecture.schema.jsonSystem descriptions, services, libraries, and CLI repos: examples/web-app.architecture.json; deployment repos: examples/production-deployment.architecture.json
workflowProcesses, approval gates, tool calls, runbooks, CI/CDschemas/workflow.schema.jsonexamples/agent-tool-call.workflow.json
sequenceAPI call chains, request lifecycles, async traces, returnsschemas/sequence.schema.jsonexamples/cache-miss-request.sequence.json
dataflowPipelines, ETL/ELT, lineage, governance, consumersschemas/dataflow.schema.jsonexamples/product-analytics.dataflow.json
lifecycleState/status transitions, retries, waiting and terminal statesschemas/lifecycle.schema.jsonexamples/deployment-release.lifecycle.json

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.

Delivery

Use the finalize command above for the first candidate and after a repair.

finalize stops at the first non-passing gate. Its compact stdout and <output-stem>.finalize-summary.json are ordinary evidence. A passing run creates no screenshots and reports visualReview: "not-requested".

When a passing Architecture receipt reports visualReviewRecommendation.signals.resolvedCrossovers, copy the candidate aside and apply the hints in one edit that changes only node positions and sizes: every node, relationship (including its from and to), label, and source stays as it was. Rerun the complete finalize once with --out-dir <folder>/review-2, because the previous HTML already owns its browser evidence. If that run fails or reports more crossings, restore the copy and finalize it with --out-dir <folder>/review-3. Do not start a second placement round. Hints about extra bends alone are optional.

When layoutReviewRecommendation.action is inspect-sequence-width, follow Sequence width review before handing off a newly authored Sequence.

Perceptual review is optional for ordinary generation, including a newly positioned Architecture. Use Optional capture evidence, with --out-dir <folder>/visual-check, when the user requests visual review, during development audits, or for a concrete route/browser concern. visualReviewRecommendation is advisory. Inspect captures before claiming visual quality; otherwise report automated checks only.

Read Delivery contract for failed gates, standalone commands, provenance/recovery, repeated delivery, exports, or opening. Recovery follows deliver → strict provenance check → browser-check; captures require strict provenance.

For workflow viewport overflow, read Workflow viewport repair before the next layout edit.

Report artifact checks, browser evidence, captures, and actual perceptual review as distinct results. For an explicitly requested immediate preview or active desktop loop, see Optional opening.

Optional viewer capabilities

meta.animation: "trace" is opt-in.

Read references/viewer-runtime.md only when the user explicitly asks for Share Cards, Route/Reach cards, motion, deep links, presentation, search/focus, or another Viewer Runtime feature.

Setup and fallback

No install is required inside the skill package. For setup diagnosis, verify with:

node bin/archify.mjs doctor
node bin/archify.mjs demo <output-directory>

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

Output

Return the checked HTML as an absolute path, diagram type, validation summary, specification/artifact receipt, browser-evidence status, and truthful visual-review status. Do not claim success for a non-zero command or claim visual inspection you did not perform.

Skills ที่เกี่ยวข้อง

agent-browser
skills-101
การทำงานอัตโนมัติของเบราว์เซอร์สำหรับเอเจนต์ AI ผ่าน inference.sh นำทางหน้าเว็บ โต้ตอบกับองค์ประกอบโดยใช้ @e refs จับภาพหน้าจอ บันทึกวิดีโอ ความสามารถ: การขูดข้อมูลเว็บ การกรอกฟอร์ม การคลิก การพิมพ์ การลากและวาง การอัปโหลดไฟล์ การเรียกใช้ JavaScript ใช้สำหรับ: ระบบอัตโนมัติของเว็บ การแยกข้อมูล การทดสอบ การท่องเว็บของเอเจนต์ การวิจัย ทริกเกอร์: เบราว์เซอร์ ระบบอัตโนมัติของเว็บ ขูดข้อมูล นำทาง คลิก กรอกฟอร์ม จับภาพหน้าจอ ท่องเว็บ playwright เบราว์เซอร์แบบไม่มีหัว เอเจนต์เว็บ ท่องอินเทอร์เน็ต บันทึกวิดีโอ
performance-optimization
addyosmani
ปรับแต่งประสิทธิภาพของแอปพลิเคชันในส่วน frontend, backend, คำสั่ง query และฐานข้อมูล ใช้เมื่อมีข้อกำหนดด้านประสิทธิภาพ เมื่อสงสัยว่าประสิทธิภาพลดลง เมื่อต้องการปรับปรุง Core Web Vitals หรือเวลาโหลด เมื่อต้องแก้ไขรูปแบบคำสั่ง query แบบ N+1 หรือเมื่อการทำ profiling เผยให้เห็นจุดคอขวด
developmentdatabasedata-analysis
convex-migrate
get-convex
ไมเกรต schema และเติมข้อมูลย้อนหลังบนแอป Convex ที่ใช้งานแล้วโดยใช้ @convex-dev/migrations
developmentdatabase
irac-practice
anthropic
ให้คะแนนเรียงความ IRAC ในด้านโครงสร้าง การระบุประเด็น ความถูกต้องของกฎ ความลึกของการวิเคราะห์ และการจัดระเบียบ ไม่เขียนเรียงความใหม่หรือแสดงคำตอบตัวอย่าง ติดตาม…
imagegen-frontend-mobile
leonxlnx
ทักษะการสร้างภาพสำหรับแอปมือถือระดับพรีเมียม เพื่อสร้างแนวคิดและโฟลว์หน้าจอที่ดูเป็นแอปพื้นเมือง ออกแบบมาสำหรับผลิตภัณฑ์มือถือ iOS, Android และข้ามแพลตฟอร์ม เน้นลำดับชั้นที่สะอาดตา ข้อความที่อ่านง่ายสบายตา ความสม่ำเสมอระหว่างหลายหน้าจอ จานสีที่ควบคุมได้ ทิศทางสร้างสรรค์ที่ไม่ซ้ำแบบ พื้นผิวที่มีมิติ การจัดองค์ประกอบที่เน้นภาพ ไอคอนที่ออกแบบอย่างมีรสนิยม และกรอบโทรศัพท์ที่สะอาด โดยค่าเริ่มต้น หน้าจอควรแสดงภายในกรอบ iPhone พรีเมียมที่ดูสุภาพหรือคล้ายกัน...
creativedesign
okx-agent-payments-protocol
okx
ใช้เมื่อเอเจนต์พบ HTTP 402 / payment-required หรือผู้ใช้กล่าวถึง x402, x402Version, X-PAYMENT, PAYMENT-REQUIRED, PAYMENT-SIGNATURE, WWW-Authenticate: Payment, permit2, upto, metered billing, ช่องทางการชำระเงิน / voucher / session, channelId / channel_id, การเปิด / ปิด / เติมเงิน / ชำระบัญชี / คืนเงินช่องทาง, paymentId หรือลิงก์ a2a_, การสร้าง / ตรวจสอบลิงก์ชำระเงิน, A2MCP / ปลายทาง A2MCP, หรือการส่งคำขอ / เรียกปลายทางของเอเจนต์พร้อมปลายทางที่เป็นรูปธรรม...
azure-data-tables-py
microsoft
Azure Tables SDK สำหรับ Python (Storage และ Cosmos DB) ใช้สำหรับการจัดเก็บข้อมูลแบบ NoSQL แบบคีย์-ค่า การดำเนินการ CRUD บนเอนทิตี และการดำเนินการแบบแบตช์ ทริกเกอร์: "table storage", "TableServiceClient", "TableClient", "entities", "PartitionKey", "RowKey
database
verl-rl-training
firecrawl
ให้คำแนะนำสำหรับการฝึกอบรม LLMs ด้วยการเรียนรู้แบบเสริมกำลังโดยใช้ verl (Volcano Engine RL) ใช้เมื่อนำไปใช้กับ RLHF, GRPO, PPO หรืออัลกอริทึม RL อื่นๆ…