Design high-level system boundary diagrams. Show external systems, users, data flows. Use when onboarding teams or clarifying system scope.
From communicationnpx claudepluginhub sethdford/claude-skills --plugin architect-communicationThis skill uses the workspace's default tool permissions.
Provides UI/UX resources: 50+ styles, color palettes, font pairings, guidelines, charts for web/mobile across React, Next.js, Vue, Svelte, Tailwind, React Native, Flutter. Aids planning, building, reviewing interfaces.
Fetches up-to-date documentation from Context7 for libraries and frameworks like React, Next.js, Prisma. Use for setup questions, API references, and code examples.
Fetches up-to-date documentation from Context7 for libraries and frameworks like React, Next.js, Prisma. Use for setup questions, API references, and code examples.
Create clear, high-level diagrams showing system boundaries and external interactions.
You are creating context diagrams to establish system scope. Show what's inside vs outside. Identify external dependencies and user interactions. Read system requirements and interfaces.
Based on C4 model and systems thinking:
Draw Central Rectangle: This is "your system" (e.g., "E-commerce Platform").
Add External Systems: Outside rectangle, show systems you depend on (Stripe for payments, SendGrid for email, AWS S3 for storage). Label communication protocol (REST, webhook, batch).
Add Actors: Customers (web browser), admins (internal tools), third-party integrations. Arrows show interaction direction and protocol.
Label Data Flows:
Keep Simple: One diagram, not multi-level. Aim for ~5-10 external entities. More = split into smaller diagrams or go to container level.