diff --git a/ASG_Framework.md b/ASG_Framework.md index 54eae27..aba319b 100644 --- a/ASG_Framework.md +++ b/ASG_Framework.md @@ -4,11 +4,12 @@ This document defines the documentation framework for a software project. It est --- -## The ASG Framework: Eight Pillars of Documentation +## The ASG Framework: Nine Pillars of Documentation | Document | Purpose | Primary Audience | Format / Content | Example (SaaS Context) | Measurement (KPI) | |----------|---------|-----------------|------------------|------------------------|-------------------| | **Requirements** | Capture the **business intent** — why we're building this and what success looks like. Defines boundaries and user-visible outcomes. | Stakeholders, Product Owners, Lead Developers | User stories, PRDs, acceptance criteria, non-functional constraints. | "System must process tabular data from Julia to SvelteKit UI with <200ms latency for 5-member teams." | 95% of requests complete <200ms (synthetic monitoring). | +| **Solution Design** | Translate requirements into an **imaginable solution** — how the system solves the user problem. Defines approach, components, and trade-offs before technical details. | Product Owners, Architects, Developers | Problem decomposition, solution approach, alternatives considered, high-level component diagram, decision rationale. | "Problem: Users need to compare wines. Solution: Build a comparison table with filtering, sorting, and visual comparison. Components: Data layer (Wine API), UI layer (Table component), Logic layer (Filter/Sort engine)." | 100% of user problems mapped to solution components before spec writing. | | **Specification** | The **technical contract** — precise rules for inputs, outputs, and data shape. Ensures consistency across dev and test. | Developers, QA Engineers, CI/CD pipelines | OpenAPI, Protobuf, AsyncAPI. Endpoint definitions, schemas, error codes. | `contract.yaml` defining a NATS subject that accepts Arrow streams with snake_case headers. | 100% of messages validated against spec (CI block rate). | | **UI Specification** | The **design contract** — precise rules for UI components, interactions, and visual patterns. Ensures consistency across design and implementation. | Product Designers, Frontend Developers, QA Engineers | Component libraries, style guides, interaction specs, design tokens. | Atomic design system with Figma tokens synced to CSS variables. | 100% of UI components match design spec (visual regression tests). | | **Walkthrough** | The **end-to-end trace** — maps the entire system flow from startup to cycle completion. Provides a "big picture" view that aligns users and developers, exposing architectural gaps before coding begins. | Product Owners, Architects, Developers | End-to-end user journey, sequence diagrams, state machine diagrams. Explicitly links to specification.md and ui-specification.md. | "User logs in → selects wine → edits details → saves → backend validates against spec → UI updates with error states." | 100% of user journeys traced across all layers before implementation starts. | @@ -49,7 +50,42 @@ This document defines the documentation framework for a software project. It est --- -### 2. Specification +### 2. Solution Design +`solution-design.md` + +**Purpose**: Translate requirements into an *imaginable solution* — how the system solves the user problem. Defines approach, components, and trade-offs before technical details. + +**Why It Matters**: +- Prevents technical-first thinking that skips design decisions +- Ensures the solution addresses the actual user problem, not just requirements +- Enables architects to evaluate alternatives before committing to technical details +- Creates alignment between product, design, and engineering on the approach +- Provides a reference for evaluating specification choices against intended solution + +**Content Guidelines**: +- Problem decomposition: Break down the user problem into smaller, solvable pieces +- Solution approach: Describe the high-level approach (e.g., "Use event sourcing for audit trail", "Implement caching layer for performance") +- Alternatives considered: Document at least 2-3 alternative approaches with rationale for why they were rejected +- High-level component diagram: Show major components and their relationships (not technical details, just the big picture) +- Decision rationale: Explain why each major decision was made (e.g., "Chose NATS over Kafka for simpler ops", "Used server-side rendering for SEO") +- Risk assessment: Identify potential risks and how they will be mitigated +- Traceability: Link each solution component to specific requirement ID(s) (e.g., FR-001, NFR-201) that it addresses + +**Best Practices**: +- Write solution design from the user's perspective first, then justify technical choices +- Keep it high-level—avoid technical specifics (API endpoints, data schemas, etc.) +- Use diagrams that are easy to update (Mermaid.js) +- Document trade-off decisions explicitly +- Review solution design against requirements to verify completeness +- Get sign-off from product, architecture, and engineering before moving to specification + +**Gap-Check Question**: Does the Solution Design clearly explain how the system solves the user problem, not just what it does? + +**Example Gap**: Requirements say "users can compare wines", but solution design only mentions "wine comparison API" without explaining how users will actually use the comparison feature. + +--- + +### 3. Specification `specification.md` **Purpose**: The *technical contract* — precise rules for inputs, outputs, and data shape. Ensures consistency across dev and test. @@ -77,7 +113,7 @@ This document defines the documentation framework for a software project. It est --- -### 3. UI Specification +### 4. UI Specification `ui-specification.md` **Purpose**: The *design contract* — precise rules for UI components, interactions, and visual patterns. Ensures consistency across design and implementation. @@ -108,7 +144,7 @@ This document defines the documentation framework for a software project. It est --- -### 4. Walkthrough +### 5. Walkthrough `walkthrough.md` **Purpose**: The *end-to-end trace* — maps the entire system flow from startup to cycle completion, incorporating both internal logic and external interactions. Provides a "big picture" view that aligns users and developers, exposing architectural gaps before coding begins. @@ -139,7 +175,7 @@ This document defines the documentation framework for a software project. It est --- -### 5. Architecture +### 6. Architecture `architecture.md` **Purpose**: The *blueprint* — how components fit together, interact, and scale. Guides system structure and trade-offs. @@ -169,7 +205,7 @@ This document defines the documentation framework for a software project. It est --- -### 6. Implementation +### 7. Implementation **Purpose**: The *real code* — business logic, helpers, tests, configs. Where design becomes executable. @@ -196,7 +232,7 @@ This document defines the documentation framework for a software project. It est --- -### 7. Validation +### 8. Validation `validation.md` **Purpose**: The *enforcer* — ensures implementation matches the spec. Blocks drift and human error. @@ -225,7 +261,7 @@ This document defines the documentation framework for a software project. It est --- -### 8. Runbook +### 9. Runbook `runbook.md` **Purpose**: The *operational manual* — how the system lives in production, scales, and recovers. Guides on-call engineers. @@ -243,8 +279,8 @@ This document defines the documentation framework for a software project. It est - Troubleshooting guides for common issues - Runbook entries for specific error codes - Contact information and escalation paths -- Explicit references to [`specification.md`](specification.md) (API contracts, data schemas, specification.md sections 3.1, 4.2) -- Explicit references to [`ui-specification.md`](ui-specification.md) (components, interactions, visual states, ui-specification.md sections 15.1, 15.3) +- Explicit references to [`specification.md`](specification.md) (API contracts, data schemas, specific endpoint sections) +- Explicit references to [`ui-specification.md`](ui-specification.md) (components, interactions, visual states, specific component sections) **Best Practices**: - Write runbooks for every P1/P2 incident @@ -266,43 +302,49 @@ Before writing any code or documentation, establish clear requirements. Ask: **Action**: Create a `docs/requirements/` directory and start with `PRD.md` and `KPIs.md`. -### 2. Define the Specification First +### 2. Define Solution Design -Once requirements are stable, define the technical specification. This becomes the contract for implementation. +Once requirements are stable, translate them into an imaginable solution. This ensures the technical approach solves the user problem, not just requirements. + +**Action**: Create `docs/solution-design/` with `solution-design.md`, problem decomposition, alternatives considered, high-level component diagram, and decision rationale. + +### 3. Define the Specification + +With solution design in place, define the technical specification. This becomes the contract for implementation. **Action**: Create `docs/specification/` with `contract.yaml` (or appropriate format) and `error-codes.md`. -### 3. Define UI Specification Early +### 4. Define UI Specification Early Create UI specifications before implementing frontend components. This ensures design consistency and provides a contract for implementation. **Action**: Create `docs/ui-specification/` with `component-library.md`, `style-guide.md`, and `design-tokens.json`. -### 4. Create Walkthroughs Early +### 5. Create Walkthroughs Early As soon as the UI specification is defined, create walkthroughs. This helps identify gaps in the flow and provides onboarding material. The walkthrough should be a single source of truth that explicitly links to specification.md and ui-specification.md. **Action**: Create `docs/walkthrough/` with `TOUR.md`, sequence diagrams, and cross-references to specification and UI spec sections. -### 5. Design the Architecture +### 6. Design the Architecture -With requirements, specification, UI spec, and walkthrough in place, design the architecture. Document trade-off decisions explicitly. +With requirements, solution design, specification, UI spec, and walkthrough in place, design the architecture. Document trade-off decisions explicitly. **Action**: Create `docs/architecture/` with Mermaid diagrams and `trade-offs.md`. -### 6. Implement with Validation in Mind +### 7. Implement with Validation in Mind Write implementation code that adheres to the specification. Build validation into the CI pipeline from day one. **Action**: Ensure test files are co-located with implementation and run on every commit. -### 7. Automate Validation +### 8. Automate Validation Build automated validation that runs in CI/CD. This ensures spec compliance and prevents drift. **Action**: Configure CI jobs to validate against specification and block PRs on violations. -### 8. Document Operations from Day One +### 9. Document Operations from Day One Create runbook entries as soon as deployment procedures are established. Update them when incidents occur. @@ -316,7 +358,8 @@ Since all docs defined in the ASG Framework are **living documents** that evolve | Stage Transition | Goal | Gap-Check Question | Example Gap | Result | |------------------|------|-------------------|-------------|--------| -| **Requirements → Specification** | Turn a "Wish" into a "Rule" | Does the Specification define all edge cases and conflict scenarios from the Requirements? | Requirement says "invite a teammate" but Specification doesn't define what happens if the teammate already has an account | Add a `UserConflict` rule to the Specification | +| **Requirements → Solution Design** | Turn a "Wish" into a "Solution" | Does the Solution Design clearly explain how the system solves the user problem, not just what it does? | Requirements say "users can compare wines", but solution design only mentions "wine comparison API" without explaining how users will actually use the comparison feature | Add UI flow and user interaction patterns to the solution design | +| **Solution Design → Specification** | Turn a "Solution" into a "Contract" | Does the Specification define all technical details that the solution approach requires? | Solution design says "use caching for performance", but Specification doesn't define cache invalidation strategy | Add cache TTL, invalidation rules, and error handling to Specification | | **Specification → UI Specification** | Turn a "Rule" into a "Button" | Does the UI Specification expose all the data and states defined in the Specification? | Specification says device must "Handshake" within 5 seconds, but UI Specification has no connection status indicator | Add a `Connection Status` component to UI Specification | | **UI Specification → Walkthrough** | Turn "Screens" into a "Story" | Does the Walkthrough reflect the complete flow including error states and timing? | Walkthrough shows "Success" screen, but Specification says backend process takes 2 minutes | Add a `Processing` state to UI Specification and `JobStatus` field to Specification | | **Walkthrough → Architecture** | Turn the "Story" into "Steel" | Does the Architecture support the performance and integration requirements defined in the Walkthrough? | Walkthrough shows 10 IoT sensors sending real-time updates, but Architecture uses REST API | Switch to NATS/MQTT for high-frequency data flow | @@ -331,10 +374,11 @@ Since all docs defined in the ASG Framework are **living documents** that evolve ### How to Run Gap-Checks 1. **Requirements Review**: After writing requirements, ask "What happens if X?" for each user story -2. **Specification Review**: After writing the spec, verify every requirement has at least one rule with a corresponding requirement ID reference -3. **UI Specification Review**: After writing UI Specification, verify every spec rule has at least one UI representation with a corresponding requirement ID reference -4. **Walkthrough Review**: After writing walkthrough, verify every UI step has a corresponding backend flow -5. **Architecture Review**: After designing architecture, verify every walkthrough flow is technically feasible and every architecture decision references specification and UI specification sections +2. **Solution Design Review**: After writing solution design, verify every requirement is addressed by at least one solution component with a corresponding requirement ID reference +3. **Specification Review**: After writing the spec, verify every requirement has at least one rule with a corresponding requirement ID reference +4. **UI Specification Review**: After writing UI Specification, verify every spec rule has at least one UI representation with a corresponding requirement ID reference +5. **Walkthrough Review**: After writing walkthrough, verify every UI step has a corresponding backend flow +6. **Architecture Review**: After designing architecture, verify every walkthrough flow is technically feasible and every architecture decision references specification and UI specification sections --- @@ -345,6 +389,7 @@ This habit ensures that each documentation stage is complete and validated befor | Stage | Debug Checklist | Why It Matters | |-------|-----------------|----------------| | **Requirements** | If I can't state the Value, I'm building a feature nobody needs. | Clarifies the business impact before technical discussion begins | +| **Solution Design** | If I can't Imagine the solution, I'm building without a compass. | Ensures the technical approach solves the user problem before spec writing | | **Specification** | If I can't write a Rule with a requirement ID reference, I haven't thought the logic through. | Ensures traceability from technical rules to business requirements | | **UI Specification** | If I can't See it with a requirement ID reference, the user has no way to trigger the logic. | Ensures traceability from UI elements to business requirements | | **Walkthrough** | If I can't Trace the full flow, the system has a 'broken bridge'. | Identifies gaps between components before implementation begins | @@ -381,6 +426,7 @@ Each documentation artifact has associated KPIs. Track these to ensure quality: | Document | KPI | Target | |----------|-----|--------| | Requirements | Requirement coverage | 100% of features have associated requirements | +| Solution Design | Solution completeness | 100% of user problems mapped to solution components before spec writing | | Specification | Specification compliance rate | 100% of messages validate against spec | | UI Specification | UI spec compliance | 100% of components match design spec (visual regression tests) | | Architecture | Decision documentation | 100% of major decisions logged with trade-offs | @@ -443,6 +489,91 @@ Each documentation artifact has associated KPIs. Track these to ensure quality: - [List verifiable conditions for sign-off, including validation gates] ``` +### Solution Design Template + +```markdown +# Solution Design: Feature Name + +## 1. Problem Decomposition + +Break down the user problem into smaller, solvable pieces. + +| Problem | Description | User Impact | +|---------|-------------|-------------| +| [Problem ID] | Brief description of the problem | How this affects the user | + +**Example**: +- **P-001**: Users cannot compare multiple wines side-by-side → They must navigate between wine pages, losing context and making comparisons difficult + +## 2. Solution Approach + +Describe the high-level approach to solving the problem. + +**Approach**: [e.g., "Implement a comparison table with filtering, sorting, and visual comparison features"] + +**Key Principles**: +- [e.g., "Keep comparison data in memory for instant updates"] +- [e.g., "Use server-side rendering for SEO"] +- [e.g., "Support unlimited wine comparisons for power users"] + +## 3. Alternatives Considered + +Document at least 2-3 alternative approaches with rationale. + +| Alternative | Pros | Cons | Decision | +|-------------|------|------|----------| +| Client-side comparison | Fast updates, no server load | Memory-intensive, no sharing | Rejected - memory constraints on mobile | +| Server-side comparison | Centralized, scalable | Latency, complex state sync | Accepted - matches performance requirements | +| Hybrid approach | Best of both worlds | Complex, hard to maintain | Rejected - over-engineering | + +## 4. High-Level Component Diagram + +```mermaid +%%{init: {'theme': 'base', 'themeVariables': {'primaryColor': '#3b82f6'}}}%% +flowchart TD + A[User] --> B[Comparison UI] + B --> C[Comparison State] + B --> D[Wine API] + C --> D +``` + +**Component Descriptions**: +- **[Component Name]**: [Brief description of responsibilities and how it solves part of the problem] + - Links to requirements: FR-001, NFR-201 + +## 5. Decision Rationale + +Explain why each major decision was made. + +| Decision | Rationale | Alternatives Rejected | +|----------|-----------|----------------------| +| Use WebSockets for real-time updates | Required for <100ms feedback | REST polling - too slow, too many requests | +| Store comparison list in localStorage | Allows offline comparison editing | Redux - overkill for this feature | +| Server-side rendering for comparison export | SEO for shared comparisons | Client-side rendering - no SEO benefit | + +## 6. Risk Assessment + +Identify potential risks and mitigation strategies. + +| Risk | Impact | Probability | Mitigation | +|------|--------|-------------|------------| +| Performance degradation with >5 wines | High | Medium | Implement performance profiling, limit to 10 wines max | +| Race conditions in real-time updates | Medium | Low | Use optimistic updates with rollback | +| Memory leaks from comparison state | Medium | Medium | Implement cleanup on unmount, use weak references | + +## 7. Requirements Traceability + +Link each solution component to specific requirements. + +| Solution Component | Requirement ID | Description | +|-------------------|----------------|-------------| +| Comparison table UI | FR-101 | Display wines in table format | +| Filtering | FR-102 | Filter wines by criteria | +| Sorting | FR-103 | Sort wines by any column | +| Real-time updates | NFR-201 | Updates appear within 100ms | +| Export comparison | FR-201 | Export comparison to PDF/CSV | + + ### Specification Template ```yaml @@ -590,7 +721,7 @@ flowchart TD ## Conclusion This ASG Documentation Framework ensures that documentation is: -- **Structured**: Eight distinct artifacts with clear purposes +- **Structured**: Nine distinct artifacts with clear purposes - **Automated**: Validation and CI/CD integration - **Versioned**: All documentation in git with history - **Measurable**: KPIs for quality and effectiveness