architecture
Architecture Decision Framework
"Requirements drive architecture. Trade-offs inform decisions. ADRs capture rationale."
🎯 Selective Reading Rule
Read ONLY files relevant to the request! Check the content map, find what you need.
| File | Description | When to Read |
|---|---|---|
context-discovery.md |
Questions to ask, project classification | Starting architecture design |
trade-off-analysis.md |
ADR templates, trade-off framework | Documenting decisions |
pattern-selection.md |
Decision trees, anti-patterns | Choosing patterns |
examples.md |
MVP, SaaS, Enterprise examples | Reference implementations |
patterns-reference.md |
Quick lookup for patterns | Pattern comparison |
🔗 Related Skills
| Skill | Use For |
|---|---|
@[skills/database-design] |
Database schema design |
@[skills/api-patterns] |
API design patterns |
@[skills/deployment-procedures] |
Deployment architecture |
Core Principle
"Simplicity is the ultimate sophistication."
- Start simple
- Add complexity ONLY when proven necessary
- You can always add patterns later
- Removing complexity is MUCH harder than adding it
Validation Checklist
Before finalizing architecture:
- Requirements clearly understood
- Constraints identified
- Each decision has trade-off analysis
- Simpler alternatives considered
- ADRs written for significant decisions
- Team expertise matches chosen patterns
More from xfstudio/skills
baoyu-post-to-wechat
Posts content to WeChat Official Account (微信公众号) via Chrome CDP automation. Supports article posting (文章) with full markdown formatting and image-text posting (图文) with multiple images. Use when user mentions "发布公众号", "post to wechat", "微信公众号", or "图文/文章".
22last30days
Research a topic from the last 30 days on Reddit + X + Web, become an expert, and write copy-paste-ready prompts for the user's target tool.
15ui-ux-pro-max
UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 9 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient. Integrations: shadcn/ui MCP for component search and examples.
133d-web-experience
Expert in building 3D experiences for the web - Three.js, React Three Fiber, Spline, WebGL, and interactive 3D scenes. Covers product configurators, 3D portfolios, immersive websites, and bringing depth to web experiences. Use when: 3D website, three.js, WebGL, react three fiber, 3D experience.
12tailwind-design-system
Build scalable design systems with Tailwind CSS, design tokens, component libraries, and responsive patterns. Use when creating component libraries, implementing design systems, or standardizing UI patterns.
11frontend-design
Create distinctive, production-grade frontend interfaces with intentional aesthetics, high craft, and non-generic visual identity. Use when building or styling web UIs, components, pages, dashboards, or frontend applications.
11