본문으로 건너뛰기
cccskills
무료GitHub에 공개

architecture-diagram

Diagram a system or technical architecture — services, data stores, and how they connect. Use when asked to draw an architecture, show how components fit together, map a system/data flow, or visualize services and dependencies. Produces a ready-to-render Mermaid diagram with grouped subgraphs (renders live, exportable as PNG/SVG) plus a component legend and notes.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

실행 점수 미검증

설치 방법 보기

포함된 파일(1)

  • SKILL.md3.3 KB

SKILL.md(원문)

설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.

Architecture Diagram Skill

"How does the system fit together?" is best answered with a picture. This skill turns a described system into a clean Mermaid architecture diagram — clients, services, data stores, and third parties, grouped into logical layers with labelled connections (sync vs async, protocols) — not an undifferentiated blob of boxes.

Required Inputs

Ask for these only if they aren't already provided:

  • The components — services, apps, databases, queues, external APIs.
  • How they connect — who calls whom; sync (HTTP/gRPC) vs async (queue/event); data flow direction.
  • Logical groupings — frontend / backend / data / third-party, or by team/domain.
  • Focus — the whole system or one slice (e.g. just the checkout path).

Output Format

[System name] — architecture

One line on what the diagram covers and its boundary.

flowchart LR
    subgraph Client
        Web[Web app]
        Mobile[Mobile app]
    end
    subgraph Backend
        API[API gateway]
        Svc[Order service]
    end
    subgraph Data
        DB[(Postgres)]
        Cache[(Redis)]
    end
    Web --> API
    Mobile --> API
    API --> Svc
    Svc --> DB
    Svc -.async.-> Queue[[Event bus]]
    Svc --> Cache

Component legend — one line per non-obvious component (what it is, why it's there).

Notes — trust boundaries, single points of failure, sync vs async (-.-> = async), anything to revisit.

Mermaid Rules (so it renders)

  • Use flowchart LR (or TD) with subgraph Name ... end for logical layers.
  • Databases/stores read well as [(name)]; queues/buses as [[name]].
  • Solid arrows --> for synchronous calls, dotted -.label.-> for async/events.
  • Short node labels; keep IDs unique and simple. No parentheses/quotes inside labels.

Quality Checks

  • Components are grouped into meaningful layers (subgraphs), not one flat pile
  • Connection direction reflects who calls whom; async vs sync is distinguished
  • Data stores and external/third-party systems are visually distinct from services
  • The legend explains anything non-obvious; trust boundaries / SPOFs are noted
  • The Mermaid block renders without edits

Anti-Patterns

  • Do not draw every box the same with undifferentiated arrows — show layers and connection types
  • Do not omit data stores or external dependencies — they're usually where the risk lives
  • Do not blur sync and async — they have very different failure modes
  • Do not cram the entire system when the ask is one slice — match the requested focus
  • Do not break Mermaid with special characters in labels

Based On

Architecture diagramming (C4-style grouping, logical layers, sync/async edges), expressed as renderable Mermaid.

Example Trigger Phrases

  • "Draw an architecture."
  • "Show how components fit together."
  • "Map a system/data flow."
  • "Visualize services and dependencies."

리뷰

아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.

댓글

로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.

보내면 바로 공개됩니다. 이메일 주소나 전화번호 같은 개인 정보는 쓰지 마세요. URL은 2개까지입니다.

0 / 1,000자

이 양식은 reCAPTCHA로 보호되며 Google 개인정보처리방침 및 서비스 약관이 적용됩니다.

같은 저장소의 스킬

Design a 360-degree feedback survey or write a structured 360 feedback report. Use when asked to build a 360 feedback process, write 360 feedback for a colleague, design a feedback survey, or produce a feedback report. Produces either a complete survey instrument with rating scales and open-ended questions, or a structured narrative feedback report with themes, strengths, and development areas.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

mohitagw15856/pm-claude-skills1.5천2026년 10월 23일 업데이트

Decode a 401k or workplace retirement plan — the real cost of its funds, the match's fine print, vesting math, and the plan features worth using or avoiding. Use when someone asks 'is my 401k any good', 'decode my 401k plan', 'which funds should I look at', or 'what fees am I paying'. Produces a fee decode in dollars-over-time, match and vesting math, a fund-lineup triage by cost, and the questions for HR or the plan administrator.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

mohitagw15856/pm-claude-skills1.5천2026년 10월 23일 업데이트

Design statistically rigorous A/B tests for product features, UI changes, onboarding flows, and pricing experiments. Use when asked to set up an experiment, design an A/B test, calculate sample size, or interpret test results. Produces a complete test plan with hypothesis, variant definitions, sample size, duration estimate, guardrail metrics, and a results interpretation guide.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

mohitagw15856/pm-claude-skills1.5천2026년 10월 23일 업데이트

Analyse a finished A/B test and write the readout — the result, whether it's statistically and practically significant, what it means, and the ship/no-ship call. Use when asked to analyse experiment results, write an A/B test readout, interpret test data, or decide whether to ship a variant. Produces a clear verdict with the lift and confidence, segment cuts, the risks (peeking, novelty, sample), and a recommendation. Distinct from planning a test — this reads results.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

mohitagw15856/pm-claude-skills1.5천2026년 10월 23일 업데이트

Build or tailor an academic CV for faculty, postdoc, research or fellowship applications: publications, grants, teaching, supervision and service in the order the field expects, with consistent citations. Use when asked to write my academic CV, update my CV for a lectureship, tenure-track or postdoc application, format my publications list, or adapt my academic CV for an industry research role. Produces the full academic CV, a field-appropriate section order, a clean publications list in one citation style, and a two-page summary version when asked.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

mohitagw15856/pm-claude-skills1.5천2026년 10월 23일 업데이트

Generate a WCAG 2.2 accessibility audit checklist and remediation suggestions for any UI or design. Use when asked to audit for accessibility, check WCAG compliance, review a design for a11y issues, or create an accessibility remediation plan. Produces a prioritised checklist with pass/fail assessments and specific fixes.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

mohitagw15856/pm-claude-skills1.5천2026년 10월 23일 업데이트

mohitagw15856의 스킬 모두 보기

이 스킬의 문제 신고