eng-system-architecture
System Architecture Designer
Generate complete system architecture from product specifications before writing code. Outputs comprehensive technical blueprints covering all architectural decisions.
Two Modes of Operation
Mode 1: Tech Stack Already Chosen
User provides tech stack upfront. Focus on architecture, file structure, and implementation details.
Mode 2: Need Tech Stack Recommendations
User needs help choosing stack. Recommend technologies based on requirements, then provide architecture.
Core Workflow
Step 1: Gather Context
Ask these questions if not already provided:
Product Understanding:
- What is the product and core value proposition?
- Who are the primary users?
- What are the critical user flows?
- What data needs to be stored?
Technical Context:
- Do you already have a tech stack in mind?
- Scale expectations? (users, requests, data volume)
- Specific integrations needed? (Stripe, SendGrid, etc.)
- Performance requirements? (real-time, complex queries)
- Security/compliance needs?
Step 2: Generate Architecture Document
Create a comprehensive markdown document with these sections:
Output Sections (Quick Reference)
1. SYSTEM OVERVIEW
- High-level architecture pattern (monolith, microservices, serverless)
- How pieces connect (client → API → database → services)
- Key architectural decisions and rationale
- Text-based architecture diagram
2. TECH STACK
Complete stack with WHY for each choice. See references/tech-stack-patterns.md for common recommendations.
3. FILE & FOLDER STRUCTURE
Complete project structure with purpose of each directory. See references/file-structure-patterns.md for stack-specific examples.
4. DATABASE SCHEMA
Complete schema with relationships, indexes, and key queries. See references/database-patterns.md.
5. API ARCHITECTURE
All endpoints with purpose, auth, request/response formats. See references/api-patterns.md.
6. STATE MANAGEMENT & DATA FLOW
Where state lives (server, client, component), data flow diagrams.
7. SERVICE CONNECTIONS
How services connect (frontend → API → DB → external services), webhook handling.
8. AUTHENTICATION & AUTHORIZATION
Auth flow, implementation patterns, permission model.
9. KEY FEATURES IMPLEMENTATION
For each major feature: components, API calls, state, edge cases.
10. DEPLOYMENT & INFRASTRUCTURE
Environment variables, deployment steps, CI/CD configuration.
11. MONITORING & DEBUGGING
Error tracking, logging strategy, performance monitoring.
12. SECURITY CHECKLIST
Input validation, auth, secrets, HTTPS, headers, dependencies.
Critical Principles
Be Pragmatic:
- Start simple, scale when needed
- Choose boring, proven tech
- Optimize for developer velocity first
- Clear upgrade path when you grow
Be Specific:
- Exact package names and versions
- Real code examples
- Actual file paths
- Named services (not "some auth provider")
Be Complete:
- Every file explained
- Every API endpoint documented
- All states accounted for
- Edge cases identified
Be Production-Ready:
- Error handling included
- Monitoring planned
- Security considered
- Deployment automated
Quick Stack Recommendations
| Use Case | Recommended Stack |
|---|---|
| MVP/Startup | Next.js + Supabase + Vercel |
| Enterprise SaaS | Next.js + PostgreSQL + Clerk + Stripe |
| Real-time App | Next.js + Supabase Realtime + Redis |
| API-first | Express/Fastify + PostgreSQL + Docker |
| Mobile App | React Native + Supabase + Expo |
Reference Files
For detailed patterns and examples, consult:
references/tech-stack-patterns.md- Tech choice comparisons and recommendationsreferences/file-structure-patterns.md- Directory structures by frameworkreferences/database-patterns.md- Common schemas and query patternsreferences/api-patterns.md- REST best practices and endpoint examplesreferences/auth-patterns.md- Authentication implementationsreferences/deployment-patterns.md- CI/CD and infrastructure patterns
More from hungv47/agent-skills
design-user-flow
This skill should be used when the user asks to "create a user flow", "map navigation", "design user journey", "create wireflow", "plan screen transitions", "map the app flow", "design navigation", or mentions user flow, wireflow, navigation map, user journey, screen transitions, or pre-interface design research. Creates user flow diagrams and wireflows for digital products.
14mkt-diagnosis
This skill should be used when the user asks to "diagnose the problem", "break down the issue", "build a logic tree", "what's causing this", or mentions problem diagnosis, logic trees, MECE decomposition, or structured problem solving. This is the ENTRY POINT for problem analysis — use when no diagnosis exists yet.
13mkt-lp-optimization
This skill should be used when the user asks to "optimize a landing page", "improve conversion rates", "review my landing page", "create a high-converting landing page", "audit my LP", "reduce bounce rate", or mentions landing page design, conversion optimization, A/B testing strategy, or CTA optimization.
13mkt-imc
This skill should be used when the user asks to "create an IMC plan", "develop integrated marketing", "build a campaign strategy", "plan a product launch", or mentions IMC, integrated marketing, multi-channel marketing, or campaign planning.
13design-brand-system-generation
This skill should be used when the user asks to "create a design system", "build brand identity", "create brand guidelines", "define brand voice", "define design tokens", "create typography system", "define color palette", "create component patterns", "design UI system", "generate style guide", "brand strategy", "brand personality", "brand archetype", "render brand guidelines", "visual brand guideline", "brand guideline artboards", "design in Paper", or mentions design system, brand identity, brand guidelines, brand voice, brand personality, design tokens, typography, color palette, component specifications, or visual design standards. Transforms product documentation into comprehensive brand identity and design systems — from strategy and personality to visual identity, design tokens, and component specifications — with optional visual brand guideline artboards rendered in Paper MCP.
12eng-security-audit
This skill should be used when the user asks to "audit security", "check for vulnerabilities", "security review", "find security issues", "pentest the code", "check for SQL injection", "review auth security", or mentions security audit, vulnerability assessment, OWASP, security hardening, or penetration testing. Comprehensive security vulnerability assessment covering OWASP Top 10 and beyond.
12