skills.rest
xvawl
xvawlCOMMUNITY
Explore all skills by this author →
GitHub

system-architecture

Define system architecture decisions for Python/FastAPI and React projects using ADR templates.

1|Updated Feb 7, 2026
Search Tags:#architecture#documentation#react#fastapi#adr#design-patterns
One-click install
npx skills add https://github.com/xvawl/template-nextjs --skill system-architecture-xvawl
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: system-architecture
Source: https://github.com/xvawl/template-nextjs/tree/main/.agents/skills/system-architecture
Command: npx skills add https://github.com/xvawl/template-nextjs --skill system-architecture-xvawl

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Provide a structured blueprint for designing Python/FastAPI + React architectures, including layer guidance and ADR templates.

Core Features & Use Cases

  • Architecture layering guidance for backend and frontend
  • ADR templates and references for architecture decisions
  • Layer responsibilities and cross-cutting concerns (auth, logging, error handling)
  • Documentation outputs such as architecture.md and docs/adr/

Quick Start

Create architecture.md and ADRs for a new project, following the prescribed templates and folder structure.

Frequently Asked Questions about system-architecture

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I document system architecture decisions for a FastAPI and React project?▼

Documenting system architecture decisions for FastAPI and React projects involves generating an architecture.md file alongside Architecture Decision Records in docs/adr/. This approach uses structured ADR templates to capture module boundaries, layering, and cross-cutting concerns.

What is an ADR template and when do I need it for system design?▼

An ADR template is a structured document for recording architectural decisions during the system design phase. You need it when defining module boundaries, layer responsibilities, or cross-cutting concerns like auth and logging to ensure architecture decisions are traceable.

How to structure architecture layering for backend and frontend applications?▼

Structuring architecture layering for backend and frontend applications requires defining layer responsibilities and cross-cutting concerns like auth, logging, and error handling. This Skill provides layering guidance specifically for Python/FastAPI backends and React frontends.

Can I use this ADR-guided system design approach for non-React or non-FastAPI stacks?▼

This ADR-guided system design approach is specifically tailored for Python/FastAPI and React projects. While the ADR templates and folder structure conventions are technology-agnostic, the layering guidance and cross-cutting concerns target this specific stack.

What's the best way to start creating architecture documentation for a new project?▼

The best way to start creating architecture documentation for a new project is to initialize the prescribed folder structure. This involves creating architecture.md for the system blueprint and adding ADRs in docs/adr/ using the provided templates for design decisions.

Related Skills

Explore More Software Engineering Skills→
Rafael-RuedaRafael-Rueda

Project Folder Structure and Organization Understanding Capabillity

Diagnose codebase architecture by mapping folder structures and module boundaries.

Community
Intermediate
Dijjo10Dijjo10

architect-service

Generate service-level architecture documents from project PDR and contract constraints.

Community
Intermediate
toobuttatoobutta

ai-pipeline

Automate construction of 5-layer AI property analysis pipelines.

Community
Advanced
AnthonyCongHieuAnthonyCongHieu

architecture

Standardize architecture decisions with ADR templates and trade-off guidance.

Community
Advanced