AI-Ready Angular Architectures Architecture as Executable Contract

Transcript

1. Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene AI-Ready Angular Architectures Architecture as Executable Contract ANGULARarchitects.io
2. Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene 2
3. Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene 3
4. Mastertextformat bearbeiten Agent • Defining Your Architecture • Textmasterformat bearbeiten Enforcing Your Architecture • Zweite Ebene • Guardrails via Stop Hooks • Context On Demand • AFK & Loop Engineering 4
5. Mastertextformat About Me bearbeiten Manfred Steyer, ANGULARarchitects.io • Textmasterformat bearbeiten • Zweite Ebene (Remote) Angular Workshops and Consulting Google Developer Expert for Angular & AI Blog, Books, Articles, and Talks about Angular 5
6. Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene Defining Your Architecture Verticals & Feature Slicing
7. Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene Good Fences Make Good Neighbors!
8. Mastertextformat Vertical Architectures bearbeiten Vertical 1 Vertical 2 • Textmasterformat bearbeiten Vertical 3 Minimal Dependencies • Zweite Ebene Feature Feature Feature Feature Feature Feature Feature Feature Feature 8
9. Smart Comp. Mastertextformat bearbeiten Booking Boarding Shared Dumb Comp. Feature Feature Feature • Textmasterformat bearbeiten Feature Feature • Zweite Ebene UI UI UI UI UI UI UI UI UI Data Data Data Data Data Data Util Util Util Util Util Util 9 Enterprise Monorepo Patterns, Nrwl 2018: https://tinyurl.com/y2jjxld7
10. Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene 10
11. Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene Describing Architecture
12. Mastertextformat Architecture Rulesbearbeiten • Textmasterformat bearbeiten • Zweite Ebene <<on demand>> docs/arc-boundaries.md AGENTS.MD <<on demand>> docs/arc-state.md Claude now supports AGENTS.MD (Sep 2026) 12
13. Mastertextformat Progressive Disclosure bearbeiten ## Architecture • Textmasterformat bearbeiten Before adding components, data access services or • Zweite Ebene helpers, read `docs/architecture-boundaries.md` and apply the architecture rules defined there. […] 13
14. Mastertextformat Progressive Disclosure bearbeiten ## Architecture • Textmasterformat bearbeiten Before adding components, data access services or • Zweite Ebene helpers, read `docs/architecture-boundaries.md` and apply the architecture rules defined there. […] Never change and never propose a change to the architecture rules. 14
15. Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene Enforce Architecture
16. Mastertextformat bearbeiten Sheriff npm i @softarc/eslint-plugin-sheriff –D • Textmasterformat bearbeiten • Zweite Ebene Enforce Boundaries on a Per-Folder Basis Works With the Angular CLI and With Nx 16
17. Mastertextformat bearbeiten ArchUnitTS npm i archunit -D • Textmasterformat bearbeiten • Zweite Ebene Unit Tests for Your Architecture 17
18. Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene Stop Hooks
19. Mastertextformat bearbeiten .claude/settings.json […] "hooks": [ • Textmasterformat bearbeiten { • Zweite Ebene"command", "type": "command": "node scripts/hooks/stop-hook.mjs", "timeout": 600 } ] […] 19
20. Mastertextformat Solution: Slim Adapter bearbeiten .claude/settings.json • Textmasterformat bearbeiten stop-hook.mjs Claude Code • Zweite Ebene .codex/hooks.json run-checks.mjs Codex .agents/hooks.json Antigravity « shared / general » antigravity-stop-hook.mjs 22
21. Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene DEMO 23
22. Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene Show Time
23. Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Test Run #1:Ebene Adding a Feature 25
24. Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene 26
25. Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene 27
26. Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene 28
27. Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene 29
28. Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene 30
29. Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Test Run #2:Ebene Breaking Conventions 31
30. Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene 32
31. Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene 33
32. Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene Context On Demand 34
33. Mastertextformat Progressive Disclosure bearbeiten • Textmasterformat bearbeiten • Zweite Ebene <<on demand>> …/domainX/CONTEXT.md AGENTS.MD <<on demand>> …/domainY/CONTEXT.md 35
34. Mastertextformat Simple Skill for Review bearbeiten --name: domain-boundaries-review description: Reviews the domain […] --- • Textmasterformat bearbeiten • Zweite Ebene # Domain Boundaries Review Give feedback on how well the codebase is split into domains contexts. ## Step 1 […] ## Step 2 […] 36
35. Mastertextformat Official Skills for Angular bearbeiten npx skills add https://github.com/angular/skills • Textmasterformat bearbeiten • Zweite Ebene 37
36. Mastertextformat Where to put them? bearbeiten .agents/skills/<skill-name> .claude/skills/<skill-name> • Textmasterformat bearbeiten • Zweite Ebene 38
37. Mastertextformat Agents -> Claude bearbeiten • npx skills • Textmasterformat bearbeiten symlinks • Zweitecopy Ebenescript • custom (npm prepare script) 39
38. Mastertextformat bearbeiten MCP { "mcpServers": { "angular-cli": { "command": "npx", "args": ["-y", "@angular/cli", "mcp"] • Zweite Ebene } • Textmasterformat bearbeiten } 40
39. Mastertextformat bearbeiten MCP { "mcpServers": { "angular-cli": { "command": "npx", "args": ["-y", "@angular/cli", "mcp"] • Zweite Ebene }, "detective": { "url": "http://localhost:3334/mcp" } • Textmasterformat bearbeiten } 41
40. Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene DEMO 42
41. Mastertextformat Validate Domain Boundaries bearbeiten • Textmasterformat bearbeiten • Zweite Ebene 43
42. Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene AFK & Loop Engineering
43. Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene
44. Mastertextformat Handling Questionsbearbeiten in AFK? • Textmasterformat bearbeiten • Zweite Ebene https://www.aihero.dev/skills 46
45. Mastertextformat Implementing the bearbeiten Loop • Textmasterformat bearbeiten • Zweite Ebene https://github.com/mattpocock/sandcastle 47
46. Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene DEMO 48
47. Modern Angular bearbeiten Mastertextformat Architecture, Concepts, Implementation • Textmasterformat bearbeiten 440 pages, PDF, EPUB • Zweite Ebene Regular Updates! angular-book.com 49
48. Mastertextformat bearbeiten Conclusion • Textmasterformat bearbeiten Architecture Context on Demand • Rules • Hooks • Sheriff, ArchUnitTS • Progressive Disclosure • Skills • MCP • Zweite Ebene Loop Engineering • grille-me • refine-ticket • Sandcastle 50
49. Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene 51
50. Mastertextformat bearbeiten Manfred Steyer [LinkedIn, Twitter, Facebook] Manfred Steyer • Textmasterformat bearbeiten [web] ANGULARarchitects.io • Zweite Ebene Slides, Examples, Book Remote Company Workshops and Consulting http://angulararchitects.io @ Manfred Steyer 52