Share
Embed

Slide 1

Slide 1 text

Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene AI-Ready Angular Architectures Architecture as Executable Contract ANGULARarchitects.io

Slide 2

Slide 2 text

Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene 2

Slide 3

Slide 3 text

Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene 3

Slide 4

Slide 4 text

Mastertextformat bearbeiten Agent • Defining Your Architecture • Textmasterformat bearbeiten Enforcing Your Architecture • Zweite Ebene • Guardrails via Stop Hooks • Context On Demand • AFK & Loop Engineering 4

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene Defining Your Architecture Verticals & Feature Slicing

Slide 7

Slide 7 text

Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene Good Fences Make Good Neighbors!

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene 10

Slide 11

Slide 11 text

Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene Describing Architecture

Slide 12

Slide 12 text

Mastertextformat Architecture Rulesbearbeiten • Textmasterformat bearbeiten • Zweite Ebene <> docs/arc-boundaries.md AGENTS.MD <> docs/arc-state.md Claude now supports AGENTS.MD (Sep 2026) 12

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene Enforce Architecture

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

Mastertextformat bearbeiten ArchUnitTS npm i archunit -D • Textmasterformat bearbeiten • Zweite Ebene Unit Tests for Your Architecture 17

Slide 18

Slide 18 text

Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene Stop Hooks

Slide 19

Slide 19 text

Mastertextformat bearbeiten .claude/settings.json […] "hooks": [ • Textmasterformat bearbeiten { • Zweite Ebene"command", "type": "command": "node scripts/hooks/stop-hook.mjs", "timeout": 600 } ] […] 19

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene DEMO 23

Slide 22

Slide 22 text

Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene Show Time

Slide 23

Slide 23 text

Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Test Run #1:Ebene Adding a Feature 25

Slide 24

Slide 24 text

Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene 26

Slide 25

Slide 25 text

Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene 27

Slide 26

Slide 26 text

Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene 28

Slide 27

Slide 27 text

Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene 29

Slide 28

Slide 28 text

Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene 30

Slide 29

Slide 29 text

Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Test Run #2:Ebene Breaking Conventions 31

Slide 30

Slide 30 text

Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene 32

Slide 31

Slide 31 text

Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene 33

Slide 32

Slide 32 text

Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene Context On Demand 34

Slide 33

Slide 33 text

Mastertextformat Progressive Disclosure bearbeiten • Textmasterformat bearbeiten • Zweite Ebene <> …/domainX/CONTEXT.md AGENTS.MD <> …/domainY/CONTEXT.md 35

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

Mastertextformat Official Skills for Angular bearbeiten npx skills add https://github.com/angular/skills • Textmasterformat bearbeiten • Zweite Ebene 37

Slide 36

Slide 36 text

Mastertextformat Where to put them? bearbeiten .agents/skills/ .claude/skills/ • Textmasterformat bearbeiten • Zweite Ebene 38

Slide 37

Slide 37 text

Mastertextformat Agents -> Claude bearbeiten • npx skills • Textmasterformat bearbeiten symlinks • Zweitecopy Ebenescript • custom (npm prepare script) 39

Slide 38

Slide 38 text

Mastertextformat bearbeiten MCP { "mcpServers": { "angular-cli": { "command": "npx", "args": ["-y", "@angular/cli", "mcp"] • Zweite Ebene } • Textmasterformat bearbeiten } 40

Slide 39

Slide 39 text

Mastertextformat bearbeiten MCP { "mcpServers": { "angular-cli": { "command": "npx", "args": ["-y", "@angular/cli", "mcp"] • Zweite Ebene }, "detective": { "url": "http://localhost:3334/mcp" } • Textmasterformat bearbeiten } 41

Slide 40

Slide 40 text

Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene DEMO 42

Slide 41

Slide 41 text

Mastertextformat Validate Domain Boundaries bearbeiten • Textmasterformat bearbeiten • Zweite Ebene 43

Slide 42

Slide 42 text

Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene AFK & Loop Engineering

Slide 43

Slide 43 text

Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene

Slide 44

Slide 44 text

Mastertextformat Handling Questionsbearbeiten in AFK? • Textmasterformat bearbeiten • Zweite Ebene https://www.aihero.dev/skills 46

Slide 45

Slide 45 text

Mastertextformat Implementing the bearbeiten Loop • Textmasterformat bearbeiten • Zweite Ebene https://github.com/mattpocock/sandcastle 47

Slide 46

Slide 46 text

Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene DEMO 48

Slide 47

Slide 47 text

Modern Angular bearbeiten Mastertextformat Architecture, Concepts, Implementation • Textmasterformat bearbeiten 440 pages, PDF, EPUB • Zweite Ebene Regular Updates! angular-book.com 49

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene 51

Slide 50

Slide 50 text

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