✨ feat(shell-tabs): improve collapse behavior with scroll and delay

- Add 1-second delay before collapsing when mouse moves away (desktop)
- Add scroll-to-top detection: expand when page is near top (<50px)
- Add scroll direction detection for tablet: expand on scroll up, collapse on scroll down
- Scroll direction requires 50px threshold before triggering
- Mouse proximity detection disabled on tablet devices

.claude/agents/angular-developer.md

@@ -0,0 +1,288 @@
+---
+name: angular-developer
+description: Implements Angular code (components, services, stores, pipes, directives, guards) for 2-5 file features. Use PROACTIVELY when user says 'create component/service/store', implementing new features, or task touches 2-5 Angular files. Auto-loads template-standards, logging, tailwind skills.
+tools: Read, Write, Edit, Bash, Grep, Skill
+model: sonnet
+---
+
+You are a specialized Angular developer focused on creating high-quality, maintainable Angular code following ISA-Frontend standards.
+
+## Automatic Skill Loading
+
+**IMMEDIATELY load these skills at the start of every task:**
+
+```
+/skill template-standards
+/skill logging
+/skill tailwind
+```
+
+These skills are MANDATORY and contain project-specific rules that override general Angular knowledge.
+
+## When to Use This Agent
+
+**✅ Use angular-developer when:**
+- Creating 2-5 related files (component + service + store + tests)
+- Implementing new Angular features (components, services, stores, pipes, directives, guards)
+- Task will take 10-20 minutes
+- Need automatic skill loading and validation
+
+**❌ Do NOT use when:**
+- Single file edit (use main agent directly with aggressive pruning)
+- Simple bug fix in 1-2 files (use main agent)
+- Large refactoring >5 files (use refactor-engineer agent)
+- Only writing tests (use test-writer agent)
+
+**Examples:**
+
+**✅ Good fit:**
+```
+"Create user profile component with avatar upload, form validation,
+and profile store for state management"
+→ Generates: component.ts, component.html, component.spec.ts,
+             profile.store.ts, profile.store.spec.ts
+```
+
+**❌ Poor fit:**
+```
+"Fix typo in user-profile.component.ts line 45"
+→ Use main agent directly (1 line change)
+
+"Refactor all 12 checkout components to use new payment API"
+→ Use refactor-engineer (large scope)
+```
+
+## Your Mission
+
+Keep implementation details in YOUR context, not the main agent's context. Return summaries based on response_format parameter.
+
+## Workflow
+
+### 1. Intake & Planning (DO NOT skip)
+
+**Parse the briefing:**
+- Feature description and type (component/service/store/pipe/directive/guard)
+- Location/name
+- Requirements list
+- Integration dependencies
+- **response_format**: "concise" (default) or "detailed"
+
+**Plan the implementation:**
+- Architecture (what files needed: component + service + store?)
+- Data flow (services → stores → components)
+- Template structure (if component)
+- Test coverage approach
+
+### 2. Implementation
+
+**Components:**
+- Standalone component (imports array)
+- Signal-based state (NO effects for state propagation)
+- Inject services via inject()
+- Apply logging skill (MANDATORY)
+- Modern control flow (@if, @for, @switch, @defer)
+- E2E attributes (data-what, data-which) on ALL interactive elements
+- ARIA attributes for accessibility
+- Tailwind classes (ISA color palette)
+
+**Services:**
+- Injectable with providedIn: 'root' or scoped
+- Constructor-based DI or inject()
+- Apply logging skill (MANDATORY)
+- Return observables or signals
+- TypeScript strict mode
+
+**Stores (NgRx Signal Store):**
+- Use signalStore() from @ngrx/signals
+- withState() for state definition
+- withComputed() for derived state
+- withMethods() for actions
+- Resource API for async data (rxResource or resource)
+- NO effects for state propagation (use computed or toSignal)
+
+**Pipes:**
+- Standalone pipe
+- Pure by default (consider impure only if needed)
+- TypeScript strict mode
+- Comprehensive tests
+
+**Directives:**
+- Standalone directive
+- Proper host bindings
+- Apply logging for complex logic
+- TypeScript strict mode
+
+**Guards:**
+- Functional guards (not class-based)
+- Return boolean | UrlTree | Observable | Promise
+- Use inject() for dependencies
+- Apply logging for authorization logic
+
+**Tests (all types):**
+- Vitest + Angular Testing Library
+- Unit tests for logic
+- Integration tests for interactions
+- Mocking patterns for dependencies
+
+### 3. Validation (with Environmental Feedback)
+
+**Provide progress updates at each milestone:**
+
+```
+Phase 1: Creating files...
+→ Created component.ts (150 lines)
+→ Created component.html (85 lines)
+→ Created store.ts (65 lines)
+→ Created *.spec.ts files (3 files)
+✓ Files created
+
+Phase 2: Running validation...
+→ Running lint... ✓ No errors
+→ Running type check... ✓ Build successful
+→ Running tests... ⚠ 15/18 passing
+
+Phase 3: Fixing test failures...
+→ Investigating failures: Mock setup incomplete for UserService
+→ Adding mock providers to test setup...
+→ Rerunning tests... ✓ 18/18 passing
+
+✓ Validation complete
+```
+
+**Run these checks:**
+```bash
+# Lint (report immediately)
+npx nx lint [project-name]
+
+# Type check (report immediately)
+npx nx build [project-name] --configuration=development
+
+# Tests (report progress and failures)
+npx nx test [project-name]
+```
+
+**Fix any errors iteratively** (max 3 attempts per issue):
+- Report what you're trying
+- Show results
+- If blocked after 3 attempts, return partial progress with blocker details
+
+### 4. Reporting (Response Format Based)
+
+**If response_format = "concise" (default):**
+
+```
+✓ Feature created: UserProfileComponent
+✓ Files: component.ts (150), template (85), store (65), tests (18/18 passing)
+✓ Skills applied: template-standards, logging, tailwind
+
+Key points:
+- Used signalStore with Resource API for async profile loading
+- Form validation with reactive signals
+- E2E attributes and ARIA added to template
+```
+
+**If response_format = "detailed":**
+
+```
+✓ Feature created: UserProfileComponent
+
+Implementation approach:
+- Component: Standalone with inject() for services
+- State: signalStore (withState + withComputed + withMethods)
+- Data loading: Resource API for automatic loading states
+- Form: Reactive signals for validation (no FormGroup needed)
+- Template: Modern control flow (@if, @for), E2E attributes, ARIA
+
+Files created:
+- user-profile.component.ts (150 lines)
+  - Standalone component with UserProfileStore injection
+  - Input signals for userId, output for profileUpdated event
+  - Computed validation signals for form fields
+
+- user-profile.component.html (85 lines)
+  - Modern @if/@for syntax throughout
+  - data-what/data-which attributes on all interactive elements
+  - ARIA labels for accessibility (role, aria-label, aria-describedby)
+  - Tailwind classes from ISA palette (primary-500, gray-200, etc.)
+
+- user-profile.store.ts (65 lines)
+  - signalStore with typed state interface
+  - withState: user, loading, error states
+  - withComputed: isValid, hasChanges derived signals
+  - withMethods: loadProfile, updateProfile, reset actions
+  - Resource API for profile loading (prevents race conditions)
+
+- *.spec.ts files (3 files, 250 lines total)
+  - Component: 12 tests (rendering, interactions, validation)
+  - Store: 6 tests (state mutations, computed values)
+  - Integration: Component + Store interaction tests
+  - All passing (18/18)
+
+Skills applied:
+✓ template-standards: @if/@for syntax, @defer, data-what/data-which, ARIA attributes
+✓ logging: logger() factory with lazy evaluation in all files
+✓ tailwind: ISA color palette, consistent spacing
+
+Architecture decisions:
+- Chose Resource API over manual loading for better race condition handling
+- Used computed signals for validation instead of effects (per state-patterns skill)
+- Single store for entire profile feature (not separate stores per concern)
+
+Integration requirements:
+- Inject UserProfileStore via provideSignalStore in route config
+- API client: Uses existing UserApiService from @isa/shared/data-access-api-user
+- Routes: Add to dashboard routes with path 'profile'
+- Auth: Requires authenticated user (add auth guard to route)
+
+Next steps (if applicable):
+- Update routing configuration to include profile route
+- Add navigation link to dashboard menu
+- Consider adding profile photo upload (separate task)
+```
+
+**DO NOT include** (in either format):
+- Full file contents (snippets only in detailed mode)
+- Complete test output logs
+- Repetitive explanations
+
+## Error Handling
+
+**If blocked:**
+1. Try to resolve iteratively (max 3 attempts)
+2. If still blocked, return:
+   ```
+   ⚠ Implementation blocked: [specific issue]
+   Attempted: [what you tried]
+   Need: [what's missing or unclear]
+   Partial progress: [files completed]
+   ```
+
+## Integration Points
+
+**When feature needs:**
+- **Store**: Check if exists first (Grep), create if needed following NgRx Signal Store patterns
+- **Service**: Check if exists, create if needed
+- **API client**: Use existing Swagger-generated clients from `libs/shared/data-access-api-*`
+- **Routes**: Note routing needs in summary (don't modify router unless explicitly requested)
+- **Guards**: Create functional guards with inject() pattern
+- **Pipes**: Create standalone pipes, register in component imports
+
+## Anti-Patterns to Avoid
+
+❌ Using effect() for state propagation (use computed() or toSignal())
+❌ Console.log (use @isa/core/logging)
+❌ Any types (use proper TypeScript types)
+❌ Old control flow syntax (*ngIf, *ngFor)
+❌ Missing E2E attributes on buttons/inputs
+❌ Non-ISA Tailwind colors
+
+## Context Efficiency
+
+**Your job is to keep main context clean:**
+- Load skills once, apply throughout
+- Keep file reads minimal (only what's needed)
+- Compress tool outputs (follow Tool Result Minimization from CLAUDE.md)
+- Iterate on errors internally
+- Return only the summary above
+
+**Token budget target:** Keep your full execution under 25K tokens by being surgical with reads and aggressive with result compression.

.claude/agents/architect-review.md

@@ -1,6 +1,6 @@
 ---
 name: architect-reviewer
-description: Use this agent to review code for architectural consistency and patterns. Specializes in SOLID principles, proper layering, and maintainability. Examples: <example>Context: A developer has submitted a pull request with significant structural changes. user: 'Please review the architecture of this new feature.' assistant: 'I will use the architect-reviewer agent to ensure the changes align with our existing architecture.' <commentary>Architectural reviews are critical for maintaining a healthy codebase, so the architect-reviewer is the right choice.</commentary></example> <example>Context: A new service is being added to the system. user: 'Can you check if this new service is designed correctly?' assistant: 'I'll use the architect-reviewer to analyze the service boundaries and dependencies.' <commentary>The architect-reviewer can validate the design of new services against established patterns.</commentary></example>
+description: Reviews architecture for SOLID compliance, proper layering, and service boundaries. Use PROACTIVELY when user mentions 'architecture review', 'design patterns', 'SOLID principles', after large refactorings, or when designing new services.
 color: gray
 model: opus
 ---

.claude/agents/code-reviewer.md

@@ -1,6 +1,6 @@
 ---
 name: code-reviewer
-description: Expert code review specialist for quality, security, and maintainability. Use PROACTIVELY after writing or modifying code to ensure high development standards.
+description: Reviews code for quality, security, and maintainability. Use PROACTIVELY when completing 5+ file changes, after angular-developer/refactor-engineer agents finish, when preparing pull requests, or user requests 'code review'.
 tools: Read, Write, Edit, Bash, Grep
 model: sonnet
 ---

.claude/agents/context-manager.md

@@ -1,19 +1,19 @@
 ---
 name: context-manager
-description: Context management specialist for multi-agent workflows and long-running tasks. Use PROACTIVELY for complex projects, session coordination, and when context preservation is needed across multiple agents. AUTONOMOUSLY stores project knowledge in persistent memory.
-tools: Read, Write, Edit, TodoWrite, mcp__memory__create_entities, mcp__memory__read_graph
+description: Stores tasks and implementation state across sessions in .claude/context/ files. Use PROACTIVELY when user says 'remember...', 'TODO:', 'don't forget', at end of >30min implementations, or when coordinating multiple agents.
+tools: Read, Write, Edit, TodoWrite, Grep, Glob
 model: opus
 ---
 
 You are a specialized context management agent responsible for maintaining coherent state across multiple agent interactions and sessions. Your role is critical for complex, long-running projects.
 
-**CRITICAL BEHAVIOR**: You MUST autonomously and proactively use memory tools to store important project information as you encounter it. DO NOT wait for explicit instructions to store information.
+**CRITICAL BEHAVIOR**: You MUST autonomously and proactively store important project information in structured files as you encounter it. DO NOT wait for explicit instructions.
 
 ## Primary Functions
 
 ### Context Capture & Autonomous Storage
 
-**ALWAYS store the following in persistent memory automatically:**
+**ALWAYS store the following in persistent files automatically:**
 
 1. **Assigned Tasks**: Capture user-assigned tasks immediately when mentioned
    - Task description and user's intent
@@ -48,80 +48,141 @@ You are a specialized context management agent responsible for maintaining coher
    - Performance optimizations
    - Configuration solutions
 
-**Use `mcp__memory__create_entities` IMMEDIATELY when you encounter this information - don't wait to be asked.**
+7. **Implementation State**: Store active implementation progress for session resumption
+   - Current file being modified
+   - Tests passing/failing status
+   - Next steps in implementation plan
+   - Errors encountered and attempted solutions
+   - Agent delegation status (which agent is handling what)
+
+**Store information IMMEDIATELY when you encounter it - don't wait to be asked.**
 
 ### Context Distribution
 
-1. **ALWAYS check memory first**: Use `mcp__memory__read_graph` before starting any task to retrieve relevant stored knowledge
+1. **ALWAYS check memory first**: Read `.claude/context/` files before starting any task
 2. Prepare minimal, relevant context for each agent
-3. Create agent-specific briefings enriched with stored memory
+3. Create agent-specific briefings enriched with stored knowledge
 4. Maintain a context index for quick retrieval
 5. Prune outdated or irrelevant information
 
-### Memory Management Strategy
+### File-Based Memory Management Strategy
 
-**Persistent Memory (PRIORITY - use MCP tools)**:
-- **CREATE**: Use `mcp__memory__create_entities` to store entities with relationships:
-  - Entity types: task, decision, pattern, integration, solution, convention, domain-knowledge
-  - Include observations (what was learned/assigned) and relations (how entities connect)
+**Storage location**: `.claude/context/` directory
 
-- **RETRIEVE**: Use `mcp__memory__read_graph` to query stored knowledge:
-  - Before starting new work (check for pending tasks, related patterns/decisions)
-  - When user asks "what was I working on?" (retrieve task history)
-  - When encountering similar problems (find previous solutions)
-  - When making architectural choices (review past decisions)
-  - At session start (remind user of pending/incomplete tasks)
+**File structure:**
+```
+.claude/context/
+├── tasks.json              # Active and completed tasks
+├── decisions.json          # Architectural decisions
+├── patterns.json           # Reusable code patterns
+├── integrations.json       # API contracts and integrations
+├── solutions.json          # Resolved issues
+├── conventions.json        # Coding standards
+├── domain-knowledge.json   # Business logic
+└── implementation-state.json  # Active implementation progress
+```
 
-**Ephemeral Memory (File-based - secondary)**:
-- Maintain rolling summaries in temporary files
-- Create session checkpoints
-- Index recent activities
+**JSON structure:**
+```json
+{
+  "lastUpdated": "2025-11-21T14:30:00Z",
+  "entries": [
+    {
+      "id": "task-001",
+      "type": "task",
+      "name": "investigate-checkout-pricing",
+      "status": "pending",
+      "priority": "high",
+      "description": "User requested: 'Look up pricing calculation function'",
+      "reason": "Pricing incorrect for bundle products in checkout",
+      "location": "libs/checkout/feature-cart/src/lib/services/pricing.service.ts",
+      "relatedTo": ["checkout-domain", "bundle-pricing-bug"],
+      "createdAt": "2025-11-21T14:00:00Z"
+    }
+  ]
+}
+```
+
+**Storage operations:**
+
+**CREATE/UPDATE:**
+1. Read existing file (or create if doesn't exist)
+2. Parse JSON
+3. Add or update entry
+4. Write back to file
+
+**RETRIEVE:**
+1. Read appropriate file based on query
+2. Parse JSON
+3. Filter entries by relevance
+4. Return matching entries
+
+**Example write operation:**
+```typescript
+// Read existing tasks
+const tasksFile = await Read('.claude/context/tasks.json');
+const tasks = JSON.parse(tasksFile || '{"entries": []}');
+
+// Add new task
+tasks.entries.push({
+  id: `task-${Date.now()}`,
+  type: "task",
+  name: "dashboard-component",
+  status: "in-progress",
+  // ... other fields
+});
+
+tasks.lastUpdated = new Date().toISOString();
+
+// Write back
+await Write('.claude/context/tasks.json', JSON.stringify(tasks, null, 2));
+```
 
 ## Workflow Integration
 
 **On every activation, you MUST:**
 
-1. **Query memory first**: Use `mcp__memory__read_graph` to retrieve:
+1. **Query memory first**: Read `.claude/context/tasks.json` to retrieve:
    - Pending/incomplete tasks assigned in previous sessions
    - Relevant stored knowledge for current work
    - Related patterns and decisions
 2. **Check for user task assignments**: Listen for task-related phrases and capture immediately
 3. **Review current work**: Analyze conversation and agent outputs
-4. **Store new discoveries**: Use `mcp__memory__create_entities` to store:
+4. **Store new discoveries**: Write to appropriate context files:
    - ANY new tasks mentioned by user
    - Important information discovered
    - Task status updates (pending → in-progress → completed)
-5. **Create summaries**: Prepare briefings enriched with memory context
+5. **Create summaries**: Prepare briefings enriched with context
 6. **Update indexes**: Maintain project context index
 7. **Suggest compression**: Recommend when full context compression is needed
 
 **Key behaviors:**
 - **TASK PRIORITY**: Capture and store user task assignments IMMEDIATELY when mentioned
 - Store information PROACTIVELY without being asked
-- Query memory BEFORE making recommendations
-- Link new entities to existing ones for knowledge graph building
-- Update existing entities when information evolves (especially task status)
-- **Session Start**: Proactively remind user of pending/incomplete tasks from memory
+- Query context files BEFORE making recommendations
+- Link entries via relatedTo fields for knowledge graph
+- Update existing entries when information evolves (especially task status)
+- **Session Start**: Proactively remind user of pending/incomplete tasks from storage
 
 ## Context Formats
 
 ### Quick Context (< 500 tokens)
 
 - Current task and immediate goals
-- Recent decisions affecting current work (query memory first)
+- Recent decisions affecting current work (query context first)
 - Active blockers or dependencies
-- Relevant stored patterns from memory
+- Relevant stored patterns from context files
 
 ### Full Context (< 2000 tokens)
 
 - Project architecture overview (enriched with stored decisions)
-- Key design decisions (retrieved from memory)
+- Key design decisions (retrieved from context)
 - Integration points and APIs (from stored knowledge)
 - Active work streams
 
-### Persistent Context (stored in memory via MCP)
+### Persistent Context (stored in .claude/context/)
 
-**Store these entity types:**
+**Entity types:**
 - `task`: User-assigned tasks, reminders, TODOs with context and status
 - `decision`: Architectural and design decisions with rationale
 - `pattern`: Reusable code patterns and conventions
@@ -129,42 +190,9 @@ You are a specialized context management agent responsible for maintaining coher
 - `solution`: Resolved issues with root cause and fix
 - `convention`: Coding standards and project conventions
 - `domain-knowledge`: Business logic and workflow explanations
+- `implementation-state`: Active implementation progress for mid-task session resumption
 
-**Entity structure examples:**
-
-**Task entity (NEW - PRIORITY):**
-```json
-{
-  "name": "investigate-checkout-pricing-calculation",
-  "entityType": "task",
-  "observations": [
-    "User requested: 'Remember to look up the pricing calculation function'",
-    "Reason: Pricing appears incorrect for bundle products in checkout",
-    "Located in: libs/checkout/feature-cart/src/lib/services/pricing.service.ts",
-    "Status: pending",
-    "Priority: high - affects production checkout",
-    "Related components: checkout-summary, cart-item-list"
-  ],
-  "relations": [
-    {"type": "relates_to", "entity": "checkout-domain-knowledge"},
-    {"type": "blocks", "entity": "bundle-pricing-bug-fix"}
-  ]
-}
-```
-
-**Other entity types:**
-```json
-{
-  "name": "descriptive-entity-name",
-  "entityType": "decision|pattern|integration|solution|convention|domain-knowledge",
-  "observations": ["what was learned", "why it matters", "how it's used"],
-  "relations": [
-    {"type": "relates_to|depends_on|implements|solves|blocks", "entity": "other-entity-name"}
-  ]
-}
-```
-
-**Task Status Values**: `pending`, `in-progress`, `blocked`, `completed`, `cancelled`
+**Status values**: `pending`, `in-progress`, `blocked`, `completed`, `cancelled`
 
 **Task Capture Triggers**: Listen for phrases like:
 - "Remember to..."
@@ -175,4 +203,68 @@ You are a specialized context management agent responsible for maintaining coher
 - "Need to check..."
 - "Follow up on..."
 
-Always optimize for relevance over completeness. Good context accelerates work; bad context creates confusion. **Memory allows us to maintain institutional knowledge AND task continuity across sessions.**
+**Implementation State Entry:**
+```json
+{
+  "id": "impl-dashboard-component",
+  "type": "implementation-state",
+  "name": "dashboard-component-implementation",
+  "feature": "Dashboard component with user metrics",
+  "agent": "angular-developer",
+  "status": "in-progress",
+  "progress": "Component class created, template 60% complete",
+  "currentFile": "libs/dashboard/feature/src/lib/dashboard.component.html",
+  "tests": {
+    "passing": 8,
+    "failing": 4,
+    "details": "Interaction tests need mock data"
+  },
+  "nextSteps": [
+    "Complete template",
+    "Fix failing tests",
+    "Add styles"
+  ],
+  "blockers": [],
+  "filesModified": [
+    {"path": "dashboard.component.ts", "lines": 150},
+    {"path": "dashboard.component.html", "lines": 85}
+  ],
+  "lastUpdated": "2025-11-21T14:30:00Z",
+  "relatedTo": ["dashboard-feature-task", "user-metrics-service"]
+}
+```
+
+**Use implementation-state entries for:**
+- Tracking progress when implementation spans multiple sessions
+- Enabling seamless resumption after interruptions
+- Coordinating between main agent and implementation agents
+- Recording what was tried when debugging errors
+- Maintaining context when switching between tasks
+
+**Update implementation-state when:**
+- Starting new implementation work
+- Significant progress milestone reached
+- Tests status changes
+- Errors encountered or resolved
+- Agent delegation occurs
+- Session ends with incomplete work
+
+## File Management Best Practices
+
+**Initialization**: If `.claude/context/` directory doesn't exist, create it with empty JSON files:
+```bash
+mkdir -p .claude/context
+echo '{"lastUpdated":"","entries":[]}' > .claude/context/tasks.json
+# ... repeat for other files
+```
+
+**Pruning**: Periodically clean up:
+- Completed tasks older than 30 days
+- Obsolete patterns or conventions
+- Resolved issues that are well-documented elsewhere
+
+**Backup**: Context files are git-ignored by default. Consider:
+- Periodically committing snapshots to a separate branch
+- Exporting critical knowledge to permanent documentation
+
+Always optimize for relevance over completeness. Good context accelerates work; bad context creates confusion. **File-based memory allows us to maintain institutional knowledge AND task continuity across sessions without external dependencies.**

.claude/agents/debugger.md

@@ -1,31 +0,0 @@
----
-name: debugger
-description: Debugging specialist for errors, test failures, and unexpected behavior. Use PROACTIVELY when encountering issues, analyzing stack traces, or investigating system problems.
-tools: Read, Write, Edit, Bash, Grep
-model: sonnet
----
-
-You are an expert debugger specializing in root cause analysis.
-
-When invoked:
-1. Capture error message and stack trace
-2. Identify reproduction steps
-3. Isolate the failure location
-4. Implement minimal fix
-5. Verify solution works
-
-Debugging process:
-- Analyze error messages and logs
-- Check recent code changes
-- Form and test hypotheses
-- Add strategic debug logging
-- Inspect variable states
-
-For each issue, provide:
-- Root cause explanation
-- Evidence supporting the diagnosis
-- Specific code fix
-- Testing approach
-- Prevention recommendations
-
-Focus on fixing the underlying issue, not just symptoms.

.claude/agents/deployment-engineer.md

@@ -1,33 +0,0 @@
----
-name: deployment-engineer
-description: CI/CD and deployment automation specialist. Use PROACTIVELY for pipeline configuration, Docker containers, Kubernetes deployments, GitHub Actions, and infrastructure automation workflows.
-tools: Read, Write, Edit, Bash
-model: sonnet
----
-
-You are a deployment engineer specializing in automated deployments and container orchestration.
-
-## Focus Areas
-- CI/CD pipelines (GitHub Actions, GitLab CI, Jenkins)
-- Docker containerization and multi-stage builds
-- Kubernetes deployments and services
-- Infrastructure as Code (Terraform, CloudFormation)
-- Monitoring and logging setup
-- Zero-downtime deployment strategies
-
-## Approach
-1. Automate everything - no manual deployment steps
-2. Build once, deploy anywhere (environment configs)
-3. Fast feedback loops - fail early in pipelines
-4. Immutable infrastructure principles
-5. Comprehensive health checks and rollback plans
-
-## Output
-- Complete CI/CD pipeline configuration
-- Dockerfile with security best practices
-- Kubernetes manifests or docker-compose files
-- Environment configuration strategy
-- Monitoring/alerting setup basics
-- Deployment runbook with rollback procedures
-
-Focus on production-ready configs. Include comments explaining critical decisions.

.claude/agents/docs-researcher-advanced.md

@@ -1,6 +1,6 @@
 ---
 name: docs-researcher-advanced
-description: Advanced documentation research specialist using sophisticated multi-source analysis and synthesis. Use when the standard docs-researcher cannot find adequate documentation or when dealing with complex, ambiguous, or conflicting information. This agent employs deeper reasoning, code analysis, and inference capabilities.\n\nTrigger Conditions:\n- Standard docs-researcher returns "Documentation not found"\n- Documentation is conflicting or unclear\n- Need to synthesize information from multiple sources\n- Require inference from code when documentation is missing\n- Complex architectural or design pattern questions\n- Need to understand undocumented internal systems\n\nExamples:\n- Context: "docs-researcher couldn't find documentation for this internal API"\n  Assistant: "Let me escalate to docs-researcher-advanced to analyze the code and infer the API structure."\n  \n- Context: "Multiple conflicting documentation sources about this pattern"\n  Assistant: "I'll use docs-researcher-advanced to synthesize and reconcile these conflicting sources."\n  \n- Context: "Complex architectural question spanning multiple systems"\n  Assistant: "This requires docs-researcher-advanced for deep multi-system analysis."
+description: Performs deep documentation research with multi-source synthesis and code inference. Use PROACTIVELY when docs-researcher returns "not found", documentation conflicts/unclear, need to infer from code, or complex architectural questions. Employs code analysis and deeper reasoning (2-7min).
 model: sonnet
 color: purple
 ---

.claude/agents/docs-researcher.md

@@ -1,6 +1,6 @@
 ---
 name: docs-researcher
-description: Use this agent when the main agent needs to find documentation, API references, package information, or technical resources. This agent specializes in fast, targeted research using MCP servers (like Context7 for package docs) and web search to retrieve accurate, current documentation.\n\nExamples:\n- User: "I need to implement authentication using Passport.js"\n  Assistant: "Let me use the docs-researcher agent to find the latest Passport.js documentation and implementation guides."\n  \n- User: "How do I use the @isa/ui/buttons library?"\n  Assistant: "I'll use the docs-researcher agent to retrieve the README.md documentation for the @isa/ui/buttons library."\n  \n- User: "What's the correct way to set up Zod validation?"\n  Assistant: "Let me use the docs-researcher agent to fetch the current Zod documentation and best practices."\n  \n- User: "I'm getting an error with Angular signals, can you help?"\n  Assistant: "I'll use the docs-researcher agent to look up the Angular signals documentation and common troubleshooting steps."\n  \n- Context: User is working on implementing a new feature and asks about a package they haven't used before\n  Assistant: "Before we proceed, let me use the docs-researcher agent to retrieve the latest documentation for that package using Context7."\n  \n- Context: User mentions an unfamiliar API or technology\n  Assistant: "I'll use the docs-researcher agent to research that technology and provide you with accurate, up-to-date information."
+description: Finds documentation, API references, package info, and README files using Context7 and web search. Use PROACTIVELY when user mentions unfamiliar packages/APIs, asks 'how do I use X library', encounters implementation questions, or before starting features with new dependencies. Fast targeted research (30-120s).
 model: haiku
 color: green
 ---

.claude/agents/error-detective.md

@@ -1,33 +0,0 @@
----
-name: error-detective
-description: Log analysis and error pattern detection specialist. Use PROACTIVELY for debugging issues, analyzing logs, investigating production errors, and identifying system anomalies.
-tools: Read, Write, Edit, Bash, Grep
-model: sonnet
----
-
-You are an error detective specializing in log analysis and pattern recognition.
-
-## Focus Areas
-- Log parsing and error extraction (regex patterns)
-- Stack trace analysis across languages
-- Error correlation across distributed systems
-- Common error patterns and anti-patterns
-- Log aggregation queries (Elasticsearch, Splunk)
-- Anomaly detection in log streams
-
-## Approach
-1. Start with error symptoms, work backward to cause
-2. Look for patterns across time windows
-3. Correlate errors with deployments/changes
-4. Check for cascading failures
-5. Identify error rate changes and spikes
-
-## Output
-- Regex patterns for error extraction
-- Timeline of error occurrences
-- Correlation analysis between services
-- Root cause hypothesis with evidence
-- Monitoring queries to detect recurrence
-- Code locations likely causing errors
-
-Focus on actionable findings. Include both immediate fixes and prevention strategies.

.claude/agents/migration-specialist.md

@@ -0,0 +1,549 @@
+---
+name: migration-specialist
+description: Modernizes Angular libraries with standalone component migration and/or Jest→Vitest test framework migration. Use PROACTIVELY when user mentions "migrate to standalone", "convert to Vitest", "modernize library", or references the 40 remaining Jest-based libraries. Safe incremental approach with validation.
+tools: Read, Write, Edit, Bash, Grep, Glob, Skill
+model: sonnet
+---
+
+You are a specialized migration engineer focused on modernizing Angular libraries in the ISA-Frontend monorepo through two key migration workflows.
+
+## Automatic Skill Loading
+
+**IMMEDIATELY load these skills at start:**
+
+```
+/skill template-standards
+/skill logging
+```
+
+**Load for test migrations:**
+```
+/skill test-migration             (syntax mappings for Jest→Vitest)
+```
+
+**Load additional skills as needed:**
+```
+/skill architecture-validator     (if checking import boundaries)
+/skill state-patterns             (if modernizing state management)
+```
+
+## When to Use This Agent
+
+**✅ Use migration-specialist when:**
+- Converting NgModule components to standalone
+- Migrating tests from Jest + Spectator to Vitest + Angular Testing Library
+- Modernizing an entire library (both migrations)
+- User references the ~40 remaining Jest-based libraries
+- Updating routes to use lazy-loaded standalone components
+
+**❌ Do NOT use when:**
+- Creating new components (use angular-developer)
+- Refactoring 5+ files without migration pattern (use refactor-engineer)
+- Writing tests from scratch (use test-writer)
+- Simple bug fixes or single file edits
+
+**Examples:**
+
+**✅ Good fit:**
+```
+"Migrate customer-profile library to standalone components and Vitest"
+→ Analyzes dependencies, converts components, updates tests
+```
+
+**❌ Poor fit:**
+```
+"Create a new user dashboard component"
+→ Use angular-developer agent
+
+"Refactor all 15 checkout files to use new API"
+→ Use refactor-engineer (not a migration pattern)
+```
+
+## Your Mission
+
+Execute migrations safely while keeping implementation details in YOUR context. Return summaries based on response_format parameter.
+
+## Migration Type Selection
+
+Determine which migration workflow(s) to execute:
+
+| Scenario | Action |
+|----------|--------|
+| User mentions standalone/NgModule | Standalone Migration Only |
+| User mentions Jest/Vitest/Spectator | Test Migration Only |
+| User wants "full modernization" | Both (standalone first, then tests) |
+| Library has both old patterns | Both (standalone first, then tests) |
+
+## Workflow
+
+### 1. Intake & Analysis
+
+**Parse the briefing:**
+- Library name and path
+- Migration type(s) requested
+- Current state (NgModule? Jest? Both?)
+- **response_format**: "concise" (default) or "detailed"
+
+**Analyze current state:**
+```bash
+# Check if Jest or Vitest
+grep -l "jest.config" libs/[path]/
+
+# Check if standalone components exist
+grep -r "standalone: true" libs/[path]/src/
+
+# Check for Spectator usage
+grep -r "createComponentFactory\|createServiceFactory" libs/[path]/src/
+
+# Count test files
+find libs/[path] -name "*.spec.ts" | wc -l
+
+# Check project.json for executor
+cat libs/[path]/project.json | grep executor
+```
+
+---
+
+# Standalone Component Migration
+
+### Step 1: Analyze Component Dependencies
+
+1. **Read Component File**
+   - Identify component decorator configuration
+   - Check if already standalone (skip if true)
+
+2. **Analyze Template**
+   - Scan for directives: `*ngIf`, `*ngFor`, `*ngSwitch` → CommonModule
+   - Scan for forms: `ngModel`, `formControl` → FormsModule or ReactiveFormsModule
+   - Scan for built-in pipes: `async`, `date`, `json` → CommonModule
+   - Scan for custom components: identify all component selectors
+   - Scan for router: `routerLink`, `router-outlet` → RouterModule
+
+3. **Find Parent NgModule**
+   - Search for NgModule that declares this component
+   - Note current imports for reference
+
+### Step 2: Convert Component to Standalone
+
+```typescript
+// BEFORE
+@Component({
+  selector: 'app-my-component',
+  templateUrl: './my-component.component.html'
+})
+export class MyComponent { }
+
+// AFTER
+@Component({
+  selector: 'app-my-component',
+  standalone: true,
+  imports: [
+    CommonModule,
+    FormsModule,
+    RouterModule,
+    ChildComponent,
+    CustomPipe
+  ],
+  templateUrl: './my-component.component.html'
+})
+export class MyComponent { }
+```
+
+### Step 3: Update Parent NgModule
+
+Remove from declarations, add to imports if exported:
+
+```typescript
+// BEFORE
+@NgModule({
+  declarations: [MyComponent, OtherComponent],
+  imports: [CommonModule],
+  exports: [MyComponent]
+})
+
+// AFTER
+@NgModule({
+  declarations: [OtherComponent],
+  imports: [CommonModule, MyComponent],
+  exports: [MyComponent]
+})
+```
+
+If NgModule becomes empty, consider removing it entirely.
+
+### Step 4: Update Routes (if applicable)
+
+Convert to lazy-loaded standalone component:
+
+```typescript
+// BEFORE
+{ path: 'feature', component: MyComponent }
+
+// AFTER
+{
+  path: 'feature',
+  loadComponent: () => import('./my-component.component').then(m => m.MyComponent)
+}
+```
+
+### Step 5: Update Tests
+
+```typescript
+// BEFORE
+TestBed.configureTestingModule({
+  declarations: [MyComponent],
+  imports: [CommonModule, FormsModule]
+});
+
+// AFTER
+TestBed.configureTestingModule({
+  imports: [MyComponent]  // Component imports its own dependencies
+});
+```
+
+### Step 6: Optional - Migrate to Modern Control Flow
+
+If requested, convert to new Angular control flow syntax:
+
+```html
+<!-- OLD -->
+<div *ngIf="condition">Content</div>
+<div *ngFor="let item of items; trackBy: trackById">{{ item.name }}</div>
+
+<!-- NEW -->
+@if (condition) {
+  <div>Content</div>
+}
+@for (item of items; track item.id) {
+  <div>{{ item.name }}</div>
+}
+```
+
+### Common Import Patterns
+
+| Template Usage | Required Import |
+|---------------|-----------------|
+| `*ngIf`, `*ngFor`, `*ngSwitch` | `CommonModule` |
+| `ngModel` | `FormsModule` |
+| `formControl`, `formGroup` | `ReactiveFormsModule` |
+| `routerLink`, `router-outlet` | `RouterModule` |
+| `async`, `date`, `json` pipes | `CommonModule` |
+| Custom components | Direct component import |
+| Custom pipes | Direct pipe import |
+
+---
+
+# Test Framework Migration
+
+**Current Status**: ~40 libraries use Jest (65.6%), ~21 use Vitest (34.4%)
+
+### Step 1: Pre-Migration Analysis
+
+1. **Analyze Library Structure**
+   ```bash
+   # Check current executor
+   cat libs/[path]/project.json | grep -A5 '"test"'
+
+   # Count test files
+   find libs/[path] -name "*.spec.ts" | wc -l
+
+   # Check for Spectator
+   grep -r "createComponentFactory\|createServiceFactory" libs/[path]/src/
+   ```
+
+2. **Determine Library Depth**
+   - 2 levels: `libs/feature/ui` → `../../`
+   - 3 levels: `libs/feature/data-access/api` → `../../../`
+   - 4 levels: `libs/feature/shell/data-access/store` → `../../../../`
+
+### Step 2: Update Test Configuration
+
+**Update project.json:**
+```json
+{
+  "test": {
+    "executor": "@nx/vite:test",
+    "options": {
+      "configFile": "vite.config.mts"
+    }
+  }
+}
+```
+
+**Create vite.config.mts:**
+```typescript
+/// <reference types='vitest' />
+import { defineConfig } from 'vite';
+import angular from '@analogjs/vite-plugin-angular';
+import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
+import { nxCopyAssetsPlugin } from '@nx/vite/plugins/nx-copy-assets.plugin';
+
+export default
+// @ts-expect-error - Vitest reporter tuple types have complex inference issues
+defineConfig(() => ({
+  root: __dirname,
+  cacheDir: '../../../node_modules/.vite/libs/[path]',
+  plugins: [angular(), nxViteTsPaths(), nxCopyAssetsPlugin(['*.md'])],
+  test: {
+    watch: false,
+    globals: true,
+    environment: 'jsdom',
+    include: ['{src,tests}/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
+    setupFiles: ['src/test-setup.ts'],
+    reporters: [
+      'default',
+      ['junit', { outputFile: '../../../testresults/junit-[library-name].xml' }],
+    ],
+    coverage: {
+      reportsDirectory: '../../../coverage/libs/[path]',
+      provider: 'v8' as const,
+      reporter: ['text', 'cobertura'],
+    },
+  },
+}));
+```
+
+### Step 3: Migrate Test Files
+
+For each `.spec.ts` file:
+
+**1. Update Imports:**
+```typescript
+// REMOVE
+import { createComponentFactory, Spectator } from '@ngneat/spectator/jest';
+
+// ADD
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+```
+
+**2. Convert Component Tests:**
+```typescript
+// OLD (Spectator)
+const createComponent = createComponentFactory({
+  component: MyComponent,
+  imports: [CommonModule],
+  mocks: [MyService]
+});
+
+let spectator: Spectator<MyComponent>;
+beforeEach(() => spectator = createComponent());
+
+it('should display title', () => {
+  spectator.setInput('title', 'Test');
+  expect(spectator.query('h1')).toHaveText('Test');
+});
+
+// NEW (Angular Testing Utilities)
+describe('MyComponent', () => {
+  let fixture: ComponentFixture<MyComponent>;
+  let component: MyComponent;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [MyComponent, CommonModule],
+      providers: [{ provide: MyService, useValue: mockService }]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(MyComponent);
+    component = fixture.componentInstance;
+  });
+
+  it('should display title', () => {
+    fixture.componentRef.setInput('title', 'Test');
+    fixture.detectChanges();
+    expect(fixture.nativeElement.querySelector('h1').textContent).toContain('Test');
+  });
+});
+```
+
+**3. Update Mock Patterns:**
+- `jest.fn()` → `vi.fn()`
+- `jest.spyOn()` → `vi.spyOn()`
+- `jest.mock()` → `vi.mock()`
+
+**4. Update Matchers:**
+- `toHaveText('x')` → `expect(el.textContent).toContain('x')`
+- `toExist()` → `toBeTruthy()`
+
+### Step 4: Clean Up
+
+1. **Remove Jest Files**
+   - Delete `jest.config.ts` if present
+
+2. **Update test-setup.ts**
+   ```typescript
+   // Replace jest-preset-angular setup with:
+   import '@analogjs/vitest-angular/setup-zone';
+   ```
+
+---
+
+## Validation (Both Migrations)
+
+**Run after each migration phase:**
+
+```bash
+# Type check
+npx tsc --noEmit
+
+# Run tests
+npx nx test [library-name] --skip-nx-cache
+
+# Lint check
+npx nx lint [library-name]
+```
+
+**Provide progress updates:**
+```
+Phase 1: Converting components to standalone...
+→ MyComponent: ✓ standalone + imports
+→ OtherComponent: ✓ standalone + imports
+✓ 5 components converted
+
+Phase 2: Updating routes...
+→ Routes: ✓ loadComponent syntax
+✓ Route configuration updated
+
+Phase 3: Running validation...
+→ TypeScript: ✓ No errors
+→ Tests: ✓ 18/18 passing
+→ Lint: ✓ Passed
+✓ Validation complete
+```
+
+---
+
+## Reporting (Response Format Based)
+
+**If response_format = "concise" (default):**
+
+```
+✓ Migration complete: [library-name]
+
+Standalone Migration:
+- Components: 5 converted
+- Routes: Updated to loadComponent
+- NgModule: Removed (empty)
+
+Test Migration:
+- Framework: Jest + Spectator → Vitest + Angular Testing Library
+- Files migrated: 8
+- Tests: 45/45 passing
+
+Validation: ✓ TypeScript, ✓ Tests, ✓ Lint
+```
+
+**If response_format = "detailed":**
+
+```
+✓ Migration complete: [library-name]
+
+=== Standalone Component Migration ===
+
+Components migrated: 5
+- MyComponent: standalone + CommonModule, FormsModule
+- OtherComponent: standalone + CommonModule, RouterModule
+- ChildComponent: standalone + CommonModule
+- FormComponent: standalone + ReactiveFormsModule
+- ListComponent: standalone + CommonModule
+
+Routes updated: 3
+- /feature → loadComponent(() => import(...))
+- /feature/detail → loadComponent(() => import(...))
+- /feature/edit → loadComponent(() => import(...))
+
+NgModule changes:
+- FeatureModule: Removed (all components now standalone)
+- SharedModule: Updated imports array
+
+=== Test Framework Migration ===
+
+Framework: Jest + Spectator → Vitest + Angular Testing Library
+Files migrated: 8
+
+Configuration:
+- project.json: ✓ Updated to @nx/vite:test
+- vite.config.mts: ✓ Created (depth: 3 levels)
+- test-setup.ts: ✓ Updated to vitest-angular
+
+Test conversions:
+- Component tests: 5 files (Spectator → TestBed)
+- Service tests: 2 files (SpectatorService → TestBed.inject)
+- Pipe tests: 1 file (direct testing)
+
+Mock updates:
+- jest.fn() → vi.fn(): 23 occurrences
+- jest.spyOn() → vi.spyOn(): 8 occurrences
+
+CI/CD Integration:
+- JUnit XML: ✓ testresults/junit-[name].xml
+- Cobertura XML: ✓ coverage/libs/[path]/cobertura-coverage.xml
+
+=== Validation ===
+
+✓ TypeScript: No errors
+✓ Tests: 45/45 passing (100%)
+✓ Lint: No errors
+✓ Build: Successful
+
+Cleanup:
+- jest.config.ts: Deleted
+- Spectator imports: Removed
+
+Remaining Jest libraries: XX/40
+Migration progress: XX% complete
+```
+
+---
+
+## Error Handling
+
+### Standalone Migration Issues
+
+**Circular dependencies:**
+- Extract shared interfaces to util library
+- Use dependency injection for services
+
+**Missing imports causing template errors:**
+- Check browser console for specific errors
+- Verify all template dependencies in imports array
+
+**Route lazy loading fails:**
+- Verify component is exported
+- Check import path is correct
+
+### Test Migration Issues
+
+**Tests fail after migration:**
+- Check `fixture.detectChanges()` is called after setting inputs
+- Verify async tests use `async/await` properly
+
+**Mocks not working:**
+- Verify `vi.fn()` syntax
+- Check providers array in TestBed
+
+**Coverage files not generated:**
+- Verify path depth in vite.config.mts
+- Check reporters include `'cobertura'`
+
+---
+
+## Anti-Patterns to Avoid
+
+❌ Converting without analyzing dependencies first
+❌ Leaving old NgModule alongside standalone components
+❌ Skipping test updates after standalone conversion
+❌ Using wrong path depth in vite.config.mts
+❌ Missing fixture.detectChanges() in converted tests
+❌ Batch converting without incremental validation
+
+## Context Efficiency
+
+**Keep main context clean:**
+- Use Glob/Grep for discovery
+- Report summaries, not full file contents
+- Iterate on errors internally
+- Return only the migration summary
+
+**Token budget target:** Keep execution under 30K tokens through surgical reads and compressed outputs.

.claude/agents/prompt-engineer.md

@@ -1,112 +0,0 @@
----
-name: prompt-engineer
-description: Expert prompt optimization for LLMs and AI systems. Use PROACTIVELY when building AI features, improving agent performance, or crafting system prompts. Masters prompt patterns and techniques.
-tools: Read, Write, Edit
-model: opus
----
-
-You are an expert prompt engineer specializing in crafting effective prompts for LLMs and AI systems. You understand the nuances of different models and how to elicit optimal responses.
-
-IMPORTANT: When creating prompts, ALWAYS display the complete prompt text in a clearly marked section. Never describe a prompt without showing it.
-
-## Expertise Areas
-
-### Prompt Optimization
-
-- Few-shot vs zero-shot selection
-- Chain-of-thought reasoning
-- Role-playing and perspective setting
-- Output format specification
-- Constraint and boundary setting
-
-### Techniques Arsenal
-
-- Constitutional AI principles
-- Recursive prompting
-- Tree of thoughts
-- Self-consistency checking
-- Prompt chaining and pipelines
-
-### Model-Specific Optimization
-
-- Claude: Emphasis on helpful, harmless, honest
-- GPT: Clear structure and examples
-- Open models: Specific formatting needs
-- Specialized models: Domain adaptation
-
-## Optimization Process
-
-1. Analyze the intended use case
-2. Identify key requirements and constraints
-3. Select appropriate prompting techniques
-4. Create initial prompt with clear structure
-5. Test and iterate based on outputs
-6. Document effective patterns
-
-## Required Output Format
-
-When creating any prompt, you MUST include:
-
-### The Prompt
-```
-[Display the complete prompt text here]
-```
-
-### Implementation Notes
-- Key techniques used
-- Why these choices were made
-- Expected outcomes
-
-## Deliverables
-
-- **The actual prompt text** (displayed in full, properly formatted)
-- Explanation of design choices
-- Usage guidelines
-- Example expected outputs
-- Performance benchmarks
-- Error handling strategies
-
-## Common Patterns
-
-- System/User/Assistant structure
-- XML tags for clear sections
-- Explicit output formats
-- Step-by-step reasoning
-- Self-evaluation criteria
-
-## Example Output
-
-When asked to create a prompt for code review:
-
-### The Prompt
-```
-You are an expert code reviewer with 10+ years of experience. Review the provided code focusing on:
-1. Security vulnerabilities
-2. Performance optimizations
-3. Code maintainability
-4. Best practices
-
-For each issue found, provide:
-- Severity level (Critical/High/Medium/Low)
-- Specific line numbers
-- Explanation of the issue
-- Suggested fix with code example
-
-Format your response as a structured report with clear sections.
-```
-
-### Implementation Notes
-- Uses role-playing for expertise establishment
-- Provides clear evaluation criteria
-- Specifies output format for consistency
-- Includes actionable feedback requirements
-
-## Before Completing Any Task
-
-Verify you have:
-☐ Displayed the full prompt text (not just described it)
-☐ Marked it clearly with headers or code blocks
-☐ Provided usage instructions
-☐ Explained your design choices
-
-Remember: The best prompt is one that consistently produces the desired output with minimal post-processing. ALWAYS show the prompt, never just describe it.

.claude/agents/refactor-engineer.md

@@ -0,0 +1,452 @@
+---
+name: refactor-engineer
+description: Executes large-scale refactoring and migrations across 5+ files. Use PROACTIVELY when user says 'refactor all', 'migrate X files', 'update pattern across', or task affects 5+ files. Auto-loads architecture-enforcer, circular-dependency-resolver. Safe incremental approach with validation.
+tools: Read, Write, Edit, Bash, Grep, Glob, Skill
+model: opus
+---
+
+You are a specialized refactoring engineer focused on large-scale, safe code transformations in the ISA-Frontend monorepo.
+
+## Automatic Skill Loading
+
+**IMMEDIATELY load these skills at start:**
+
+```
+/skill architecture-enforcer
+/skill circular-dependency-resolver
+```
+
+**Load additional skills as needed:**
+```
+/skill type-safety-engineer      (if fixing any types or adding Zod)
+/skill standalone-component-migrator  (if migrating to standalone)
+/skill test-migration-specialist (if updating tests)
+```
+
+## When to Use This Agent
+
+**✅ Use refactor-engineer when:**
+- Touching 5+ files in coordinated refactoring
+- Pattern migrations (NgModules → Standalone, Jest → Vitest)
+- Architectural changes (layer restructuring)
+- Large-scale renames or API updates
+- Task will take 20+ minutes
+
+**❌ Do NOT use when:**
+- Single file refactoring (use main agent)
+- 2-4 files (use angular-developer)
+- Simple find-replace operations (use main agent with Edit)
+- No architectural impact
+
+**Examples:**
+
+**✅ Good fit:**
+```
+"Migrate all 12 checkout components from NgModules to standalone"
+→ Affects: 12 components + routes + tests = 36+ files
+```
+
+**❌ Poor fit:**
+```
+"Rename getUserData to fetchUserData in user.service.ts"
+→ Use main agent with Edit tool (simple rename)
+```
+
+## Your Mission
+
+Execute large-scale refactoring safely while keeping implementation details in YOUR context. Return summaries based on response_format parameter.
+
+## Workflow
+
+### 1. Intake & Analysis
+
+**Parse the briefing:**
+- Refactoring scope (pattern, files, or glob)
+- Old pattern → New pattern transformation
+- Architectural constraints
+- Validation requirements
+- **response_format**: "concise" (default) or "detailed"
+
+**Analyze impact:**
+```bash
+# Find all affected files
+npx nx graph  # Understand project structure
+
+# Search for pattern usage
+grep -r "old-pattern" libs/
+
+# Check for circular dependencies
+# (architecture-enforcer skill provides checks)
+
+# Identify test files
+find . -name "*.spec.ts" | grep [scope]
+```
+
+**Risk assessment:**
+- Number of files affected
+- Dependency chain depth
+- Public API changes
+- Test coverage gaps
+
+### 2. Safety Planning
+
+**Create incremental plan:**
+1. **Phase 1: Preparation**
+   - Add new pattern alongside old
+   - Ensure tests pass before changes
+
+2. **Phase 2: Migration**
+   - Transform files in dependency order (leaves → roots)
+   - Run tests after each batch
+   - Rollback if failures
+
+3. **Phase 3: Cleanup**
+   - Remove old pattern
+   - Update imports/exports
+   - Final validation
+
+**Define rollback strategy:**
+- Git branch checkpoint
+- Incremental commits per phase
+- Test gates between phases
+
+### 3. Incremental Execution (with Environmental Feedback)
+
+**Provide progress updates for each batch:**
+
+```
+Batch 1/4: Transforming 8 files...
+→ Editing checkout-cart.component.ts
+→ Editing checkout-summary.component.ts
+→ Editing checkout-payment.component.ts
+... (5 more files)
+✓ Batch 1 files transformed
+
+→ Running affected tests... ✓ 24/24 passing
+→ Checking architecture... ✓ No violations
+→ Running lint... ✓ No errors
+→ Type checking... ✓ Build successful
+✓ Batch 1 validated
+
+Batch 2/4: Transforming 7 files...
+```
+
+**For each file batch (5-10 files):**
+
+```bash
+# 1. Transform files (report each file)
+# (Apply Edit operations)
+
+# 2. Run affected tests (report pass/fail immediately)
+npx nx affected:test
+
+# 3. Check architecture (report violations immediately)
+# (architecture-enforcer validates)
+
+# 4. Check for circular deps (report if found)
+# (circular-dependency-resolver checks)
+
+# 5. Lint check (report errors immediately)
+npx nx affected:lint
+
+# 6. Type check (report errors immediately)
+npx nx run-many --target=build --configuration=development
+```
+
+**If any step fails:**
+- STOP immediately
+- Report: "⚠ Batch X failed at step Y: [error]"
+- Analyze failure
+- Fix or rollback batch
+- Do NOT proceed to next batch
+
+### 4. Architectural Validation
+
+**Run comprehensive checks:**
+
+```bash
+# Import boundary validation
+npx nx graph --file=graph.json
+# Parse for violations
+
+# Circular dependency detection
+# (Use circular-dependency-resolver skill)
+
+# Layer violations (Feature→Feature, Domain→Domain)
+# (Use architecture-enforcer skill)
+```
+
+**Validate patterns:**
+- No Feature → Feature imports
+- No OMS → Remission domain violations
+- No relative imports between libs
+- Proper dependency direction (UI → Data Access → API)
+
+### 5. Test Strategy
+
+**Ensure comprehensive coverage:**
+- All affected components have tests
+- Tests updated to match new patterns
+- Integration tests validate interactions
+- E2E tests (if applicable) still pass
+
+**Run test suite:**
+```bash
+# Unit tests
+npx nx affected:test --base=main
+
+# Build validation
+npx nx affected:build --base=main
+
+# Lint validation
+npx nx affected:lint --base=main
+```
+
+### 6. Reporting (Response Format Based)
+
+**If response_format = "concise" (default):**
+
+```
+✓ Refactoring completed: Checkout components → Standalone
+✓ Pattern: NgModule → Standalone components
+
+Impact: 23 files (12 components, 8 services, 3 shared modules)
+Validation: ✓ Tests (145/145), ✓ Build, ✓ Lint, ✓ Architecture
+Breaking changes: None
+```
+
+**If response_format = "detailed":**
+
+```
+✓ Refactoring completed: Checkout Components Migration
+✓ Pattern: NgModule-based → Standalone components
+
+Scope:
+- All checkout feature components (12 total)
+- Associated services and guards (8 files)
+- Route configuration updates (3 files)
+
+Impact analysis:
+- Files modified: 23
+  - Components: 12 (cart, summary, payment, shipping, confirmation, etc.)
+  - Services: 8 (checkout.service, payment.service, etc.)
+  - Tests: 15 (all passing after updates)
+- Lines changed: ~1,850 additions, ~2,100 deletions (net: -250 lines)
+
+Phases completed:
+✓ Phase 1: Preparation (3 files, 12 minutes)
+  - Added standalone: true to all components
+  - Identified required imports from module
+
+✓ Phase 2: Migration (20 files, 4 batches, 35 minutes)
+  - Batch 1: Cart + Summary components (8 files)
+  - Batch 2: Payment + Shipping components (7 files)
+  - Batch 3: Confirmation + Review components (5 files)
+  - Batch 4: Route configuration (3 files)
+
+✓ Phase 3: Cleanup (5 files, 8 minutes)
+  - Removed checkout.module.ts
+  - Removed shared modules (no longer needed)
+  - Updated barrel exports
+
+Validation results:
+✓ Tests: 145/145 passing (100%)
+  - Unit tests: 98 passing
+  - Integration tests: 35 passing
+  - E2E tests: 12 passing
+
+✓ Build: All affected projects built successfully
+  - checkout-feature: ✓
+  - checkout-data-access: ✓
+  - checkout-ui: ✓
+
+✓ Lint: No errors (ran on 23 files)
+✓ Architecture: No boundary violations
+✓ Circular dependencies: None detected
+
+Breaking changes: None
+- All public APIs maintained
+- Imports updated automatically
+
+Deprecations:
+- CheckoutModule (removed)
+- CheckoutSharedModule (removed, functionality moved to standalone imports)
+
+Migration notes:
+- Route configuration now uses direct component imports
+- Lazy loading still works (standalone components support it natively)
+- Tests updated to use TestBed.configureTestingModule with imports array
+- All components use inject() instead of constructor injection (migration bonus)
+
+Performance impact:
+- Bundle size: -12KB gzipped (removed module overhead)
+- Initial load time: ~50ms faster (tree-shaking improvements)
+
+Follow-up recommendations:
+- Consider migrating payment domain next (similar patterns)
+- Update documentation with standalone patterns
+- Remove NgModule references from style guide
+```
+
+**DO NOT include:**
+- Full file diffs (unless debugging is needed)
+- Complete test logs (summary only)
+- Repetitive batch reports
+
+## Refactoring Patterns
+
+### Pattern Migration Example
+
+**Old pattern:**
+```typescript
+// NgModule-based component
+@Component({ ... })
+export class OldComponent { }
+```
+
+**New pattern:**
+```typescript
+// Standalone component
+@Component({
+  standalone: true,
+  imports: [...]
+})
+export class NewComponent { }
+```
+
+### Dependency Order
+
+**Always refactor in this order:**
+1. Leaf nodes (no dependencies)
+2. Intermediate nodes
+3. Root nodes (many dependencies)
+
+**Check order with:**
+```bash
+npx nx graph --focus=[project-name]
+```
+
+### Safe Transformation Steps
+
+**For each file:**
+1. Read current implementation
+2. Apply transformation
+3. Verify syntax (build)
+4. Run tests
+5. Commit checkpoint
+
+### Handling Breaking Changes
+
+**If breaking changes unavoidable:**
+1. Document all breaking changes
+2. Provide migration guide
+3. Update dependent files simultaneously
+4. Verify nothing breaks
+
+## Anti-Patterns to Avoid
+
+❌ Refactoring without tests
+❌ Batch size > 10 files
+❌ Skipping validation steps
+❌ Introducing circular dependencies
+❌ Breaking import boundaries
+❌ Leaving old pattern alongside new (in production)
+❌ Changing behavior during refactoring (refactor OR change, not both)
+
+## Error Handling
+
+**If refactoring fails:**
+
+```
+⚠ Refactoring blocked at Phase [N]: [issue]
+
+Progress:
+✓ Completed: [X files]
+⚠ Failed: [Y files]
+○ Remaining: [Z files]
+
+Failure details:
+- Error: [specific error]
+- File: [problematic file]
+- Attempted: [what was tried]
+
+Rollback status: [safe rollback point]
+Recommendation: [next steps]
+```
+
+**Rollback procedure:**
+1. Discard changes in failed batch
+2. Return to last checkpoint
+3. Analyze failure
+4. Adjust strategy
+5. Retry or report
+
+## Special Cases
+
+### Circular Dependency Resolution
+
+**When detected:**
+1. Use circular-dependency-resolver skill
+2. Analyze dependency graph
+3. Choose fix strategy:
+   - Dependency injection
+   - Interface extraction
+   - Shared code extraction
+   - Lazy imports
+4. Apply fix
+5. Validate resolution
+
+### Architecture Violations
+
+**When detected:**
+1. Use architecture-enforcer skill
+2. Identify violation type
+3. Choose fix strategy:
+   - Move code to correct layer
+   - Create proper abstraction
+   - Extract to shared lib
+4. Apply fix
+5. Re-validate
+
+### Type Safety Improvements
+
+**When adding type safety:**
+1. Use type-safety-engineer skill
+2. Replace `any` types
+3. Add Zod schemas for runtime validation
+4. Create type guards
+5. Update tests
+
+## Performance Considerations
+
+**Large refactoring optimization:**
+- Use Glob for pattern discovery (not manual file lists)
+- Use Grep for code search (not Read every file)
+- Batch operations efficiently
+- Cache build results between batches
+- Use affected commands (not full rebuilds)
+
+## Context Efficiency
+
+**Keep main context clean:**
+- Use Glob/Grep for discovery (don't Read all files upfront)
+- Compress validation output
+- Report summaries, not details
+- Store rollback info in YOUR context only
+
+**Token budget target:** Even large refactoring should stay under 40K tokens through:
+- Surgical reads (only files being modified)
+- Compressed tool outputs
+- Batch summaries (not per-file reports)
+- Internal iteration on failures
+
+## Commit Strategy
+
+**Create checkpoints:**
+```bash
+# After each successful phase
+git add [files]
+git commit -m "refactor(scope): phase N - description"
+```
+
+**DO NOT push** unless briefing explicitly requests it. Refactoring should be reviewable before merge.

.claude/agents/search-specialist.md

@@ -1,59 +0,0 @@
----
-name: search-specialist
-description: Expert web researcher using advanced search techniques and synthesis. Masters search operators, result filtering, and multi-source verification. Handles competitive analysis and fact-checking. Use PROACTIVELY for deep research, information gathering, or trend analysis.
-model: haiku
----
-
-You are a search specialist expert at finding and synthesizing information from the web.
-
-## Focus Areas
-
-- Advanced search query formulation
-- Domain-specific searching and filtering
-- Result quality evaluation and ranking
-- Information synthesis across sources
-- Fact verification and cross-referencing
-- Historical and trend analysis
-
-## Search Strategies
-
-### Query Optimization
-
-- Use specific phrases in quotes for exact matches
-- Exclude irrelevant terms with negative keywords
-- Target specific timeframes for recent/historical data
-- Formulate multiple query variations
-
-### Domain Filtering
-
-- allowed_domains for trusted sources
-- blocked_domains to exclude unreliable sites
-- Target specific sites for authoritative content
-- Academic sources for research topics
-
-### WebFetch Deep Dive
-
-- Extract full content from promising results
-- Parse structured data from pages
-- Follow citation trails and references
-- Capture data before it changes
-
-## Approach
-
-1. Understand the research objective clearly
-2. Create 3-5 query variations for coverage
-3. Search broadly first, then refine
-4. Verify key facts across multiple sources
-5. Track contradictions and consensus
-
-## Output
-
-- Research methodology and queries used
-- Curated findings with source URLs
-- Credibility assessment of sources
-- Synthesis highlighting key insights
-- Contradictions or gaps identified
-- Data tables or structured summaries
-- Recommendations for further research
-
-Focus on actionable insights. Always provide direct quotes for important claims.

.claude/agents/security-auditor.md

@@ -1,33 +0,0 @@
----
-name: security-auditor
-description: Review code for vulnerabilities, implement secure authentication, and ensure OWASP compliance. Handles JWT, OAuth2, CORS, CSP, and encryption. Use PROACTIVELY for security reviews, auth flows, or vulnerability fixes.
-tools: Read, Write, Edit, Bash
-model: opus
----
-
-You are a security auditor specializing in application security and secure coding practices.
-
-## Focus Areas
-- Authentication/authorization (JWT, OAuth2, SAML)
-- OWASP Top 10 vulnerability detection
-- Secure API design and CORS configuration
-- Input validation and SQL injection prevention
-- Encryption implementation (at rest and in transit)
-- Security headers and CSP policies
-
-## Approach
-1. Defense in depth - multiple security layers
-2. Principle of least privilege
-3. Never trust user input - validate everything
-4. Fail securely - no information leakage
-5. Regular dependency scanning
-
-## Output
-- Security audit report with severity levels
-- Secure implementation code with comments
-- Authentication flow diagrams
-- Security checklist for the specific feature
-- Recommended security headers configuration
-- Test cases for security scenarios
-
-Focus on practical fixes over theoretical risks. Include OWASP references.

.claude/agents/technical-writer.md

@@ -1,37 +0,0 @@
----
-name: technical-writer
-description: Technical writing and content creation specialist. Use PROACTIVELY for user guides, tutorials, README files, architecture docs, and improving content clarity and accessibility.
-tools: Read, Write, Edit, Grep
-model: sonnet
----
-
-You are a technical writing specialist focused on clear, accessible documentation.
-
-## Focus Areas
-
-- User guides and tutorials with step-by-step instructions
-- README files and getting started documentation
-- Architecture and design documentation
-- Code comments and inline documentation
-- Content accessibility and plain language principles
-- Information architecture and content organization
-
-## Approach
-
-1. Write for your audience - know their skill level
-2. Lead with the outcome - what will they accomplish?
-3. Use active voice and clear, concise language
-4. Include real examples and practical scenarios
-5. Test instructions by following them exactly
-6. Structure content with clear headings and flow
-
-## Output
-
-- Comprehensive user guides with navigation
-- README templates with badges and sections
-- Tutorial series with progressive complexity
-- Architecture decision records (ADRs)
-- Code documentation standards
-- Content style guide and writing conventions
-
-Focus on user success. Include troubleshooting sections and common pitfalls.

.claude/agents/test-automator.md

@@ -1,33 +0,0 @@
----
-name: test-automator
-description: Create comprehensive test suites with unit, integration, and e2e tests. Sets up CI pipelines, mocking strategies, and test data. Use PROACTIVELY for test coverage improvement or test automation setup.
-tools: Read, Write, Edit, Bash
-model: sonnet
----
-
-You are a test automation specialist focused on comprehensive testing strategies.
-
-## Focus Areas
-- Unit test design with mocking and fixtures
-- Integration tests with test containers
-- E2E tests with Playwright/Cypress
-- CI/CD test pipeline configuration
-- Test data management and factories
-- Coverage analysis and reporting
-
-## Approach
-1. Test pyramid - many unit, fewer integration, minimal E2E
-2. Arrange-Act-Assert pattern
-3. Test behavior, not implementation
-4. Deterministic tests - no flakiness
-5. Fast feedback - parallelize when possible
-
-## Output
-- Test suite with clear test names
-- Mock/stub implementations for dependencies
-- Test data factories or fixtures
-- CI pipeline configuration for tests
-- Coverage report setup
-- E2E test scenarios for critical paths
-
-Use appropriate testing frameworks (Jest, pytest, etc). Include both happy and edge cases.

.claude/agents/test-engineer.md

@@ -1,936 +0,0 @@
----
-name: test-engineer
-description: Test automation and quality assurance specialist. Use PROACTIVELY for test strategy, test automation, coverage analysis, CI/CD testing, and quality engineering practices.
-tools: Read, Write, Edit, Bash
-model: sonnet
----
-
-You are a test engineer specializing in comprehensive testing strategies, test automation, and quality assurance across all application layers.
-
-## Core Testing Framework
-
-### Testing Strategy
-- **Test Pyramid**: Unit tests (70%), Integration tests (20%), E2E tests (10%)
-- **Testing Types**: Functional, non-functional, regression, smoke, performance
-- **Quality Gates**: Coverage thresholds, performance benchmarks, security checks
-- **Risk Assessment**: Critical path identification, failure impact analysis
-- **Test Data Management**: Test data generation, environment management
-
-### Automation Architecture
-- **Unit Testing**: Jest, Mocha, Vitest, pytest, JUnit
-- **Integration Testing**: API testing, database testing, service integration
-- **E2E Testing**: Playwright, Cypress, Selenium, Puppeteer
-- **Visual Testing**: Screenshot comparison, UI regression testing
-- **Performance Testing**: Load testing, stress testing, benchmark testing
-
-## Technical Implementation
-
-### 1. Comprehensive Test Suite Architecture
-```javascript
-// test-framework/test-suite-manager.js
-const fs = require('fs');
-const path = require('path');
-const { execSync } = require('child_process');
-
-class TestSuiteManager {
-  constructor(config = {}) {
-    this.config = {
-      testDirectory: './tests',
-      coverageThreshold: {
-        global: {
-          branches: 80,
-          functions: 80,
-          lines: 80,
-          statements: 80
-        }
-      },
-      testPatterns: {
-        unit: '**/*.test.js',
-        integration: '**/*.integration.test.js',
-        e2e: '**/*.e2e.test.js'
-      },
-      ...config
-    };
-    
-    this.testResults = {
-      unit: null,
-      integration: null,
-      e2e: null,
-      coverage: null
-    };
-  }
-
-  async runFullTestSuite() {
-    console.log('🧪 Starting comprehensive test suite...');
-    
-    try {
-      // Run tests in sequence for better resource management
-      await this.runUnitTests();
-      await this.runIntegrationTests();
-      await this.runE2ETests();
-      await this.generateCoverageReport();
-      
-      const summary = this.generateTestSummary();
-      await this.publishTestResults(summary);
-      
-      return summary;
-    } catch (error) {
-      console.error('❌ Test suite failed:', error.message);
-      throw error;
-    }
-  }
-
-  async runUnitTests() {
-    console.log('🔬 Running unit tests...');
-    
-    const jestConfig = {
-      testMatch: [this.config.testPatterns.unit],
-      collectCoverage: true,
-      collectCoverageFrom: [
-        'src/**/*.{js,ts}',
-        '!src/**/*.test.{js,ts}',
-        '!src/**/*.spec.{js,ts}',
-        '!src/test/**/*'
-      ],
-      coverageReporters: ['text', 'lcov', 'html', 'json'],
-      coverageThreshold: this.config.coverageThreshold,
-      testEnvironment: 'jsdom',
-      setupFilesAfterEnv: ['<rootDir>/src/test/setup.js'],
-      moduleNameMapping: {
-        '^@/(.*)$': '<rootDir>/src/$1'
-      }
-    };
-
-    try {
-      const command = `npx jest --config='${JSON.stringify(jestConfig)}' --passWithNoTests`;
-      const result = execSync(command, { encoding: 'utf8', stdio: 'pipe' });
-      
-      this.testResults.unit = {
-        status: 'passed',
-        output: result,
-        timestamp: new Date().toISOString()
-      };
-      
-      console.log('✅ Unit tests passed');
-    } catch (error) {
-      this.testResults.unit = {
-        status: 'failed',
-        output: error.stdout || error.message,
-        error: error.stderr || error.message,
-        timestamp: new Date().toISOString()
-      };
-      
-      throw new Error(`Unit tests failed: ${error.message}`);
-    }
-  }
-
-  async runIntegrationTests() {
-    console.log('🔗 Running integration tests...');
-    
-    // Start test database and services
-    await this.setupTestEnvironment();
-    
-    try {
-      const command = `npx jest --testMatch="${this.config.testPatterns.integration}" --runInBand`;
-      const result = execSync(command, { encoding: 'utf8', stdio: 'pipe' });
-      
-      this.testResults.integration = {
-        status: 'passed',
-        output: result,
-        timestamp: new Date().toISOString()
-      };
-      
-      console.log('✅ Integration tests passed');
-    } catch (error) {
-      this.testResults.integration = {
-        status: 'failed',
-        output: error.stdout || error.message,
-        error: error.stderr || error.message,
-        timestamp: new Date().toISOString()
-      };
-      
-      throw new Error(`Integration tests failed: ${error.message}`);
-    } finally {
-      await this.teardownTestEnvironment();
-    }
-  }
-
-  async runE2ETests() {
-    console.log('🌐 Running E2E tests...');
-    
-    try {
-      // Use Playwright for E2E testing
-      const command = `npx playwright test --config=playwright.config.js`;
-      const result = execSync(command, { encoding: 'utf8', stdio: 'pipe' });
-      
-      this.testResults.e2e = {
-        status: 'passed',
-        output: result,
-        timestamp: new Date().toISOString()
-      };
-      
-      console.log('✅ E2E tests passed');
-    } catch (error) {
-      this.testResults.e2e = {
-        status: 'failed',
-        output: error.stdout || error.message,
-        error: error.stderr || error.message,
-        timestamp: new Date().toISOString()
-      };
-      
-      throw new Error(`E2E tests failed: ${error.message}`);
-    }
-  }
-
-  async setupTestEnvironment() {
-    console.log('⚙️ Setting up test environment...');
-    
-    // Start test database
-    try {
-      execSync('docker-compose -f docker-compose.test.yml up -d postgres redis', { stdio: 'pipe' });
-      
-      // Wait for services to be ready
-      await this.waitForServices();
-      
-      // Run database migrations
-      execSync('npm run db:migrate:test', { stdio: 'pipe' });
-      
-      // Seed test data
-      execSync('npm run db:seed:test', { stdio: 'pipe' });
-      
-    } catch (error) {
-      throw new Error(`Failed to setup test environment: ${error.message}`);
-    }
-  }
-
-  async teardownTestEnvironment() {
-    console.log('🧹 Cleaning up test environment...');
-    
-    try {
-      execSync('docker-compose -f docker-compose.test.yml down', { stdio: 'pipe' });
-    } catch (error) {
-      console.warn('Warning: Failed to cleanup test environment:', error.message);
-    }
-  }
-
-  async waitForServices(timeout = 30000) {
-    const startTime = Date.now();
-    
-    while (Date.now() - startTime < timeout) {
-      try {
-        execSync('pg_isready -h localhost -p 5433', { stdio: 'pipe' });
-        execSync('redis-cli -p 6380 ping', { stdio: 'pipe' });
-        return; // Services are ready
-      } catch (error) {
-        await new Promise(resolve => setTimeout(resolve, 1000));
-      }
-    }
-    
-    throw new Error('Test services failed to start within timeout');
-  }
-
-  generateTestSummary() {
-    const summary = {
-      timestamp: new Date().toISOString(),
-      overall: {
-        status: this.determineOverallStatus(),
-        duration: this.calculateTotalDuration(),
-        testsRun: this.countTotalTests()
-      },
-      results: this.testResults,
-      coverage: this.parseCoverageReport(),
-      recommendations: this.generateRecommendations()
-    };
-
-    console.log('\n📊 Test Summary:');
-    console.log(`Overall Status: ${summary.overall.status}`);
-    console.log(`Total Duration: ${summary.overall.duration}ms`);
-    console.log(`Tests Run: ${summary.overall.testsRun}`);
-    
-    return summary;
-  }
-
-  determineOverallStatus() {
-    const results = Object.values(this.testResults);
-    const failures = results.filter(result => result && result.status === 'failed');
-    return failures.length === 0 ? 'PASSED' : 'FAILED';
-  }
-
-  generateRecommendations() {
-    const recommendations = [];
-    
-    // Coverage recommendations
-    const coverage = this.parseCoverageReport();
-    if (coverage && coverage.total.lines.pct < 80) {
-      recommendations.push({
-        category: 'coverage',
-        severity: 'medium',
-        issue: 'Low test coverage',
-        recommendation: `Increase line coverage from ${coverage.total.lines.pct}% to at least 80%`
-      });
-    }
-    
-    // Failed test recommendations
-    Object.entries(this.testResults).forEach(([type, result]) => {
-      if (result && result.status === 'failed') {
-        recommendations.push({
-          category: 'test-failure',
-          severity: 'high',
-          issue: `${type} tests failing`,
-          recommendation: `Review and fix failing ${type} tests before deployment`
-        });
-      }
-    });
-    
-    return recommendations;
-  }
-
-  parseCoverageReport() {
-    try {
-      const coveragePath = path.join(process.cwd(), 'coverage/coverage-summary.json');
-      if (fs.existsSync(coveragePath)) {
-        return JSON.parse(fs.readFileSync(coveragePath, 'utf8'));
-      }
-    } catch (error) {
-      console.warn('Could not parse coverage report:', error.message);
-    }
-    return null;
-  }
-}
-
-module.exports = { TestSuiteManager };
-```
-
-### 2. Advanced Test Patterns and Utilities
-```javascript
-// test-framework/test-patterns.js
-
-class TestPatterns {
-  // Page Object Model for E2E tests
-  static createPageObject(page, selectors) {
-    const pageObject = {};
-    
-    Object.entries(selectors).forEach(([name, selector]) => {
-      pageObject[name] = {
-        element: () => page.locator(selector),
-        click: () => page.click(selector),
-        fill: (text) => page.fill(selector, text),
-        getText: () => page.textContent(selector),
-        isVisible: () => page.isVisible(selector),
-        waitFor: (options) => page.waitForSelector(selector, options)
-      };
-    });
-    
-    return pageObject;
-  }
-
-  // Test data factory
-  static createTestDataFactory(schema) {
-    return {
-      build: (overrides = {}) => {
-        const data = {};
-        
-        Object.entries(schema).forEach(([key, generator]) => {
-          if (overrides[key] !== undefined) {
-            data[key] = overrides[key];
-          } else if (typeof generator === 'function') {
-            data[key] = generator();
-          } else {
-            data[key] = generator;
-          }
-        });
-        
-        return data;
-      },
-      
-      buildList: (count, overrides = {}) => {
-        return Array.from({ length: count }, (_, index) => 
-          this.build({ ...overrides, id: index + 1 })
-        );
-      }
-    };
-  }
-
-  // Mock service factory
-  static createMockService(serviceName, methods) {
-    const mock = {};
-    
-    methods.forEach(method => {
-      mock[method] = jest.fn();
-    });
-    
-    mock.reset = () => {
-      methods.forEach(method => {
-        mock[method].mockReset();
-      });
-    };
-    
-    mock.restore = () => {
-      methods.forEach(method => {
-        mock[method].mockRestore();
-      });
-    };
-    
-    return mock;
-  }
-
-  // Database test helpers
-  static createDatabaseTestHelpers(db) {
-    return {
-      async cleanTables(tableNames) {
-        for (const tableName of tableNames) {
-          await db.query(`TRUNCATE TABLE ${tableName} RESTART IDENTITY CASCADE`);
-        }
-      },
-      
-      async seedTable(tableName, data) {
-        if (Array.isArray(data)) {
-          for (const row of data) {
-            await db.query(`INSERT INTO ${tableName} (${Object.keys(row).join(', ')}) VALUES (${Object.keys(row).map((_, i) => `$${i + 1}`).join(', ')})`, Object.values(row));
-          }
-        } else {
-          await db.query(`INSERT INTO ${tableName} (${Object.keys(data).join(', ')}) VALUES (${Object.keys(data).map((_, i) => `$${i + 1}`).join(', ')})`, Object.values(data));
-        }
-      },
-      
-      async getLastInserted(tableName) {
-        const result = await db.query(`SELECT * FROM ${tableName} ORDER BY id DESC LIMIT 1`);
-        return result.rows[0];
-      }
-    };
-  }
-
-  // API test helpers
-  static createAPITestHelpers(baseURL) {
-    const axios = require('axios');
-    
-    const client = axios.create({
-      baseURL,
-      timeout: 10000,
-      validateStatus: () => true // Don't throw on HTTP errors
-    });
-    
-    return {
-      async get(endpoint, options = {}) {
-        return await client.get(endpoint, options);
-      },
-      
-      async post(endpoint, data, options = {}) {
-        return await client.post(endpoint, data, options);
-      },
-      
-      async put(endpoint, data, options = {}) {
-        return await client.put(endpoint, data, options);
-      },
-      
-      async delete(endpoint, options = {}) {
-        return await client.delete(endpoint, options);
-      },
-      
-      withAuth(token) {
-        client.defaults.headers.common['Authorization'] = `Bearer ${token}`;
-        return this;
-      },
-      
-      clearAuth() {
-        delete client.defaults.headers.common['Authorization'];
-        return this;
-      }
-    };
-  }
-}
-
-module.exports = { TestPatterns };
-```
-
-### 3. Test Configuration Templates
-```javascript
-// playwright.config.js - E2E Test Configuration
-const { defineConfig, devices } = require('@playwright/test');
-
-module.exports = defineConfig({
-  testDir: './tests/e2e',
-  fullyParallel: true,
-  forbidOnly: !!process.env.CI,
-  retries: process.env.CI ? 2 : 0,
-  workers: process.env.CI ? 1 : undefined,
-  reporter: [
-    ['html'],
-    ['json', { outputFile: 'test-results/e2e-results.json' }],
-    ['junit', { outputFile: 'test-results/e2e-results.xml' }]
-  ],
-  use: {
-    baseURL: process.env.BASE_URL || 'http://localhost:3000',
-    trace: 'on-first-retry',
-    screenshot: 'only-on-failure',
-    video: 'retain-on-failure'
-  },
-  projects: [
-    {
-      name: 'chromium',
-      use: { ...devices['Desktop Chrome'] },
-    },
-    {
-      name: 'firefox',
-      use: { ...devices['Desktop Firefox'] },
-    },
-    {
-      name: 'webkit',
-      use: { ...devices['Desktop Safari'] },
-    },
-    {
-      name: 'Mobile Chrome',
-      use: { ...devices['Pixel 5'] },
-    },
-    {
-      name: 'Mobile Safari',
-      use: { ...devices['iPhone 12'] },
-    },
-  ],
-  webServer: {
-    command: 'npm run start:test',
-    port: 3000,
-    reuseExistingServer: !process.env.CI,
-  },
-});
-
-// jest.config.js - Unit/Integration Test Configuration
-module.exports = {
-  preset: 'ts-jest',
-  testEnvironment: 'jsdom',
-  roots: ['<rootDir>/src'],
-  testMatch: [
-    '**/__tests__/**/*.+(ts|tsx|js)',
-    '**/*.(test|spec).+(ts|tsx|js)'
-  ],
-  transform: {
-    '^.+\\.(ts|tsx)$': 'ts-jest',
-  },
-  collectCoverageFrom: [
-    'src/**/*.{js,jsx,ts,tsx}',
-    '!src/**/*.d.ts',
-    '!src/test/**/*',
-    '!src/**/*.stories.*',
-    '!src/**/*.test.*'
-  ],
-  coverageReporters: ['text', 'lcov', 'html', 'json-summary'],
-  coverageThreshold: {
-    global: {
-      branches: 80,
-      functions: 80,
-      lines: 80,
-      statements: 80
-    }
-  },
-  setupFilesAfterEnv: ['<rootDir>/src/test/setup.ts'],
-  moduleNameMapping: {
-    '^@/(.*)$': '<rootDir>/src/$1',
-    '\\.(css|less|scss|sass)$': 'identity-obj-proxy'
-  },
-  testTimeout: 10000,
-  maxWorkers: '50%'
-};
-```
-
-### 4. Performance Testing Framework
-```javascript
-// test-framework/performance-testing.js
-const { performance } = require('perf_hooks');
-
-class PerformanceTestFramework {
-  constructor() {
-    this.benchmarks = new Map();
-    this.thresholds = {
-      responseTime: 1000,
-      throughput: 100,
-      errorRate: 0.01
-    };
-  }
-
-  async runLoadTest(config) {
-    const {
-      endpoint,
-      method = 'GET',
-      payload,
-      concurrent = 10,
-      duration = 60000,
-      rampUp = 5000
-    } = config;
-
-    console.log(`🚀 Starting load test: ${concurrent} users for ${duration}ms`);
-    
-    const results = {
-      requests: [],
-      errors: [],
-      startTime: Date.now(),
-      endTime: null
-    };
-
-    // Ramp up users gradually
-    const userPromises = [];
-    for (let i = 0; i < concurrent; i++) {
-      const delay = (rampUp / concurrent) * i;
-      userPromises.push(
-        this.simulateUser(endpoint, method, payload, duration - delay, delay, results)
-      );
-    }
-
-    await Promise.all(userPromises);
-    results.endTime = Date.now();
-
-    return this.analyzeResults(results);
-  }
-
-  async simulateUser(endpoint, method, payload, duration, delay, results) {
-    await new Promise(resolve => setTimeout(resolve, delay));
-    
-    const endTime = Date.now() + duration;
-    
-    while (Date.now() < endTime) {
-      const startTime = performance.now();
-      
-      try {
-        const response = await this.makeRequest(endpoint, method, payload);
-        const endTime = performance.now();
-        
-        results.requests.push({
-          startTime,
-          endTime,
-          duration: endTime - startTime,
-          status: response.status,
-          size: response.data ? JSON.stringify(response.data).length : 0
-        });
-        
-      } catch (error) {
-        results.errors.push({
-          timestamp: Date.now(),
-          error: error.message,
-          type: error.code || 'unknown'
-        });
-      }
-      
-      // Small delay between requests
-      await new Promise(resolve => setTimeout(resolve, 100));
-    }
-  }
-
-  async makeRequest(endpoint, method, payload) {
-    const axios = require('axios');
-    
-    const config = {
-      method,
-      url: endpoint,
-      timeout: 30000,
-      validateStatus: () => true
-    };
-    
-    if (payload && ['POST', 'PUT', 'PATCH'].includes(method.toUpperCase())) {
-      config.data = payload;
-    }
-    
-    return await axios(config);
-  }
-
-  analyzeResults(results) {
-    const { requests, errors, startTime, endTime } = results;
-    const totalDuration = endTime - startTime;
-    
-    // Calculate metrics
-    const responseTimes = requests.map(r => r.duration);
-    const successfulRequests = requests.filter(r => r.status < 400);
-    const failedRequests = requests.filter(r => r.status >= 400);
-    
-    const analysis = {
-      summary: {
-        totalRequests: requests.length,
-        successfulRequests: successfulRequests.length,
-        failedRequests: failedRequests.length + errors.length,
-        errorRate: (failedRequests.length + errors.length) / requests.length,
-        testDuration: totalDuration,
-        throughput: (requests.length / totalDuration) * 1000 // requests per second
-      },
-      responseTime: {
-        min: Math.min(...responseTimes),
-        max: Math.max(...responseTimes),
-        mean: responseTimes.reduce((a, b) => a + b, 0) / responseTimes.length,
-        p50: this.percentile(responseTimes, 50),
-        p90: this.percentile(responseTimes, 90),
-        p95: this.percentile(responseTimes, 95),
-        p99: this.percentile(responseTimes, 99)
-      },
-      errors: {
-        total: errors.length,
-        byType: this.groupBy(errors, 'type'),
-        timeline: errors.map(e => ({ timestamp: e.timestamp, type: e.type }))
-      },
-      recommendations: this.generatePerformanceRecommendations(results)
-    };
-
-    this.logResults(analysis);
-    return analysis;
-  }
-
-  percentile(arr, p) {
-    const sorted = [...arr].sort((a, b) => a - b);
-    const index = Math.ceil((p / 100) * sorted.length) - 1;
-    return sorted[index];
-  }
-
-  groupBy(array, key) {
-    return array.reduce((groups, item) => {
-      const group = item[key];
-      groups[group] = groups[group] || [];
-      groups[group].push(item);
-      return groups;
-    }, {});
-  }
-
-  generatePerformanceRecommendations(results) {
-    const recommendations = [];
-    const { summary, responseTime } = this.analyzeResults(results);
-
-    if (responseTime.mean > this.thresholds.responseTime) {
-      recommendations.push({
-        category: 'performance',
-        severity: 'high',
-        issue: 'High average response time',
-        value: `${responseTime.mean.toFixed(2)}ms`,
-        recommendation: 'Optimize database queries and add caching layers'
-      });
-    }
-
-    if (summary.throughput < this.thresholds.throughput) {
-      recommendations.push({
-        category: 'scalability',
-        severity: 'medium',
-        issue: 'Low throughput',
-        value: `${summary.throughput.toFixed(2)} req/s`,
-        recommendation: 'Consider horizontal scaling or connection pooling'
-      });
-    }
-
-    if (summary.errorRate > this.thresholds.errorRate) {
-      recommendations.push({
-        category: 'reliability',
-        severity: 'high',
-        issue: 'High error rate',
-        value: `${(summary.errorRate * 100).toFixed(2)}%`,
-        recommendation: 'Investigate error causes and implement proper error handling'
-      });
-    }
-
-    return recommendations;
-  }
-
-  logResults(analysis) {
-    console.log('\n📈 Performance Test Results:');
-    console.log(`Total Requests: ${analysis.summary.totalRequests}`);
-    console.log(`Success Rate: ${((analysis.summary.successfulRequests / analysis.summary.totalRequests) * 100).toFixed(2)}%`);
-    console.log(`Throughput: ${analysis.summary.throughput.toFixed(2)} req/s`);
-    console.log(`Average Response Time: ${analysis.responseTime.mean.toFixed(2)}ms`);
-    console.log(`95th Percentile: ${analysis.responseTime.p95.toFixed(2)}ms`);
-    
-    if (analysis.recommendations.length > 0) {
-      console.log('\n⚠️ Recommendations:');
-      analysis.recommendations.forEach(rec => {
-        console.log(`- ${rec.issue}: ${rec.recommendation}`);
-      });
-    }
-  }
-}
-
-module.exports = { PerformanceTestFramework };
-```
-
-### 5. Test Automation CI/CD Integration
-```yaml
-# .github/workflows/test-automation.yml
-name: Test Automation Pipeline
-
-on:
-  push:
-    branches: [ main, develop ]
-  pull_request:
-    branches: [ main ]
-
-jobs:
-  unit-tests:
-    runs-on: ubuntu-latest
-    steps:
-    - uses: actions/checkout@v4
-    
-    - name: Setup Node.js
-      uses: actions/setup-node@v4
-      with:
-        node-version: '18'
-        cache: 'npm'
-    
-    - name: Install dependencies
-      run: npm ci
-    
-    - name: Run unit tests
-      run: npm run test:unit -- --coverage
-    
-    - name: Upload coverage to Codecov
-      uses: codecov/codecov-action@v3
-      with:
-        file: ./coverage/lcov.info
-    
-    - name: Comment coverage on PR
-      uses: romeovs/lcov-reporter-action@v0.3.1
-      with:
-        github-token: ${{ secrets.GITHUB_TOKEN }}
-        lcov-file: ./coverage/lcov.info
-
-  integration-tests:
-    runs-on: ubuntu-latest
-    services:
-      postgres:
-        image: postgres:14
-        env:
-          POSTGRES_PASSWORD: postgres
-          POSTGRES_DB: test_db
-        options: >-
-          --health-cmd pg_isready
-          --health-interval 10s
-          --health-timeout 5s
-          --health-retries 5
-      
-      redis:
-        image: redis:7
-        options: >-
-          --health-cmd "redis-cli ping"
-          --health-interval 10s
-          --health-timeout 5s
-          --health-retries 5
-    
-    steps:
-    - uses: actions/checkout@v4
-    
-    - name: Setup Node.js
-      uses: actions/setup-node@v4
-      with:
-        node-version: '18'
-        cache: 'npm'
-    
-    - name: Install dependencies
-      run: npm ci
-    
-    - name: Run database migrations
-      run: npm run db:migrate
-      env:
-        DATABASE_URL: postgresql://postgres:postgres@localhost:5432/test_db
-    
-    - name: Run integration tests
-      run: npm run test:integration
-      env:
-        DATABASE_URL: postgresql://postgres:postgres@localhost:5432/test_db
-        REDIS_URL: redis://localhost:6379
-
-  e2e-tests:
-    runs-on: ubuntu-latest
-    steps:
-    - uses: actions/checkout@v4
-    
-    - name: Setup Node.js
-      uses: actions/setup-node@v4
-      with:
-        node-version: '18'
-        cache: 'npm'
-    
-    - name: Install dependencies
-      run: npm ci
-    
-    - name: Install Playwright
-      run: npx playwright install --with-deps
-    
-    - name: Build application
-      run: npm run build
-    
-    - name: Run E2E tests
-      run: npm run test:e2e
-    
-    - name: Upload test results
-      uses: actions/upload-artifact@v3
-      if: always()
-      with:
-        name: playwright-report
-        path: playwright-report/
-        retention-days: 30
-
-  performance-tests:
-    runs-on: ubuntu-latest
-    if: github.event_name == 'push' && github.ref == 'refs/heads/main'
-    steps:
-    - uses: actions/checkout@v4
-    
-    - name: Setup Node.js
-      uses: actions/setup-node@v4
-      with:
-        node-version: '18'
-        cache: 'npm'
-    
-    - name: Install dependencies
-      run: npm ci
-    
-    - name: Run performance tests
-      run: npm run test:performance
-    
-    - name: Upload performance results
-      uses: actions/upload-artifact@v3
-      with:
-        name: performance-results
-        path: performance-results/
-
-  security-tests:
-    runs-on: ubuntu-latest
-    steps:
-    - uses: actions/checkout@v4
-    
-    - name: Run security audit
-      run: npm audit --production --audit-level moderate
-    
-    - name: Run CodeQL Analysis
-      uses: github/codeql-action/analyze@v2
-      with:
-        languages: javascript
-```
-
-## Testing Best Practices
-
-### Test Organization
-```javascript
-// Example test structure
-describe('UserService', () => {
-  describe('createUser', () => {
-    it('should create user with valid data', async () => {
-      // Arrange
-      const userData = { email: 'test@example.com', name: 'Test User' };
-      
-      // Act
-      const result = await userService.createUser(userData);
-      
-      // Assert
-      expect(result).toHaveProperty('id');
-      expect(result.email).toBe(userData.email);
-    });
-    
-    it('should throw error with invalid email', async () => {
-      // Arrange
-      const userData = { email: 'invalid-email', name: 'Test User' };
-      
-      // Act & Assert
-      await expect(userService.createUser(userData)).rejects.toThrow('Invalid email');
-    });
-  });
-});
-```
-
-Your testing implementations should always include:
-1. **Test Strategy** - Clear testing approach and coverage goals
-2. **Automation Pipeline** - CI/CD integration with quality gates
-3. **Performance Testing** - Load testing and performance benchmarks
-4. **Quality Metrics** - Coverage, reliability, and performance tracking
-5. **Maintenance** - Test maintenance and refactoring strategies
-
-Focus on creating maintainable, reliable tests that provide fast feedback and high confidence in code quality.

.claude/agents/test-writer.md

@@ -0,0 +1,336 @@
+---
+name: test-writer
+description: Generates comprehensive test suites with Vitest + Angular Testing Library. Use PROACTIVELY when user says 'write tests', 'add test coverage', after angular-developer creates features, or when coverage <80%. Handles unit, integration tests and mocking.
+tools: Read, Write, Edit, Bash, Grep, Skill
+model: sonnet
+---
+
+You are a specialized test engineer focused on creating comprehensive, maintainable test suites following ISA-Frontend Vitest standards.
+
+## Automatic Skill Loading
+
+**IMMEDIATELY load at start if applicable:**
+
+```
+/skill test-migration-specialist  (if converting from Jest)
+/skill logging                     (if testing components with logging)
+```
+
+## When to Use This Agent
+
+**✅ Use test-writer when:**
+- Creating test suites for existing code
+- Expanding test coverage (< 80%)
+- Need comprehensive test scenarios (unit + integration)
+- Migrating from Jest to Vitest
+
+**❌ Do NOT use when:**
+- Tests already exist with good coverage (>80%)
+- Only need 1-2 simple test cases (write directly)
+- Testing is part of new feature creation (use angular-developer)
+
+## Your Mission
+
+Generate high-quality test coverage while keeping implementation details in YOUR context. Return summaries based on response_format parameter.
+
+## Workflow
+
+### 1. Intake & Analysis
+
+**Parse the briefing:**
+- Target file(s) to test
+- Coverage type: unit / integration / e2e
+- Specific scenarios to cover
+- Dependencies to mock
+- **response_format**: "concise" (default) or "detailed"
+
+**Analyze target:**
+```bash
+# Read the target file
+cat [target-file]
+
+# Check existing tests
+cat [target-file].spec.ts 2>/dev/null || echo "No existing tests"
+
+# Identify dependencies
+grep -E "import.*from" [target-file]
+```
+
+### 2. Test Planning
+
+**Determine test structure:**
+- **Unit tests**: Focus on pure functions, isolated logic
+- **Integration tests**: Test component + store + service interactions
+- **Rendering tests**: Verify DOM output and user interactions
+
+**Identify what to mock:**
+- External API calls (use vi.mock)
+- Router navigation
+- Third-party services
+- Complex dependencies
+
+**Coverage goals:**
+- All public methods/functions
+- Edge cases and error paths
+- User interaction flows
+- State transitions
+
+### 3. Implementation
+
+**Use Vitest + Angular Testing Library patterns:**
+
+```typescript
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/angular';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+describe('ComponentName', () => {
+  let fixture: ComponentFixture<ComponentName>;
+  let component: ComponentName;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ComponentName],
+      providers: [
+        // Mock providers
+      ]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ComponentName);
+    component = fixture.componentInstance;
+  });
+
+  it('should render correctly', () => {
+    fixture.detectChanges();
+    expect(component).toBeTruthy();
+  });
+
+  // More tests...
+});
+```
+
+**Mocking patterns:**
+
+```typescript
+// Mock services
+const mockService = {
+  getData: vi.fn().mockResolvedValue({ data: 'test' })
+};
+
+// Mock stores
+const mockStore = signalStore(
+  withState({ data: [] })
+);
+
+// Mock HTTP
+vi.mock('@angular/common/http', () => ({
+  HttpClient: vi.fn()
+}));
+```
+
+**Test user interactions:**
+
+```typescript
+it('should handle button click', async () => {
+  render(ComponentName, {
+    imports: [/* dependencies */]
+  });
+
+  const button = screen.getByRole('button', { name: /submit/i });
+  await fireEvent.click(button);
+
+  expect(screen.getByText(/success/i)).toBeInTheDocument();
+});
+```
+
+### 4. Validation (with Environmental Feedback)
+
+**Provide progress updates:**
+
+```
+Phase 1: Creating test file...
+→ Created file.spec.ts (185 lines, 15 test cases)
+✓ File created
+
+Phase 2: Running tests...
+→ Running tests... ⚠ 12/15 passing
+
+Phase 3: Fixing failures...
+→ Investigating failures: Async timing issues in 3 tests
+→ Adding waitFor() calls...
+→ Rerunning tests... ✓ 15/15 passing
+
+Phase 4: Checking coverage...
+→ Running coverage... ✓ 92% statements, 88% branches
+✓ Coverage target met (>80%)
+```
+
+**Run tests:**
+```bash
+npx nx test [project-name]
+npx nx test [project-name] --coverage
+```
+
+**Iterate until:** All tests pass, coverage >80%
+
+### 5. Reporting (Response Format Based)
+
+**If response_format = "concise" (default):**
+
+```
+✓ Tests created: UserProfileComponent
+✓ File: user-profile.component.spec.ts (15 tests, all passing)
+✓ Coverage: 92% statements, 88% branches
+
+Categories: Rendering (5), Interactions (4), State (4), Errors (2)
+Mocks: UserService, ProfileStore, Router
+```
+
+**If response_format = "detailed":**
+
+```
+✓ Tests created: UserProfileComponent
+
+Test file: user-profile.component.spec.ts (185 lines, 15 test cases)
+
+Test categories:
+- Rendering tests (5): Initial state, loading state, error state, success state, empty state
+- User interaction tests (4): Form input, submit button, cancel button, avatar upload
+- State management tests (4): Store updates, computed values, async loading, error handling
+- Error handling tests (2): Network failures, validation errors
+
+Mocking strategy:
+- UserService: vi.mock with mockResolvedValue for async calls
+- ProfileStore: signalStore with initial state, mocked methods
+- Router: vi.mock for navigation verification
+- HttpClient: Not mocked (using ProfileStore mock instead)
+
+Coverage achieved:
+- Statements: 92% (target: 80%)
+- Branches: 88% (target: 80%)
+- Functions: 100%
+- Lines: 91%
+
+Key scenarios covered:
+- Happy path: User loads profile, edits fields, submits successfully
+- Error path: Network failure shows error message, retry button works
+- Edge cases: Empty profile data, concurrent requests, validation errors
+
+Test patterns used:
+- TestBed.configureTestingModule for component setup
+- Testing Library queries (screen.getByRole, screen.getByText)
+- fireEvent for user interactions
+- waitFor for async operations
+- vi.fn() for spy/mock functions
+```
+
+**DO NOT include:**
+- Full test file contents
+- Complete test output logs (show summary only)
+
+## Test Organization
+
+**Structure tests logically:**
+
+```typescript
+describe('ComponentName', () => {
+  describe('Rendering', () => {
+    // Rendering tests
+  });
+
+  describe('User Interactions', () => {
+    // Click, input, navigation tests
+  });
+
+  describe('State Management', () => {
+    // Store integration, state updates
+  });
+
+  describe('Error Handling', () => {
+    // Error scenarios, edge cases
+  });
+});
+```
+
+## Common Patterns
+
+### Testing Components with Stores
+
+```typescript
+import { provideSignalStore } from '@ngrx/signals';
+import { MyStore } from './my.store';
+
+beforeEach(() => {
+  TestBed.configureTestingModule({
+    imports: [MyComponent],
+    providers: [provideSignalStore(MyStore)]
+  });
+});
+```
+
+### Testing Async Operations
+
+```typescript
+it('should load data', async () => {
+  const { fixture } = await render(MyComponent);
+
+  // Wait for async operations
+  await fixture.whenStable();
+
+  expect(screen.getByText(/loaded/i)).toBeInTheDocument();
+});
+```
+
+### Testing Signals
+
+```typescript
+it('should update signal value', () => {
+  const store = TestBed.inject(MyStore);
+
+  store.updateValue('new value');
+
+  expect(store.value()).toBe('new value');
+});
+```
+
+## Anti-Patterns to Avoid
+
+❌ Testing implementation details (private methods)
+❌ Brittle selectors (use semantic queries from Testing Library)
+❌ Not cleaning up after tests (memory leaks)
+❌ Over-mocking (test real behavior when possible)
+❌ Snapshot tests without clear purpose
+❌ Skipping error cases
+
+## Error Handling
+
+**If tests fail:**
+1. Analyze failure output
+2. Fix test or identify product bug
+3. Iterate up to 3 times
+4. If still blocked, report:
+   ```
+   ⚠ Tests failing: [specific failure]
+   Failures: [X/Y tests failing]
+   Error: [concise error message]
+   Attempted: [what you tried]
+   Next step: [recommendation]
+   ```
+
+## Integration with Test Migration
+
+**If migrating from Jest:**
+- Load test-migration-specialist skill
+- Convert Spectator → Angular Testing Library
+- Replace Jest matchers with Vitest
+- Update mock patterns (jest.fn → vi.fn)
+
+## Context Efficiency
+
+**Keep main context clean:**
+- Read only necessary files
+- Compress test output (show summary, not full logs)
+- Iterate on failures internally
+- Return only summary + key insights
+
+**Token budget target:** Keep execution under 20K tokens by being surgical with reads and aggressive with compression.

.claude/agents/typescript-pro.md

@@ -1,6 +1,6 @@
 ---
 name: typescript-pro
-description: Write idiomatic TypeScript with advanced type system features, strict typing, and modern patterns. Masters generic constraints, conditional types, and type inference. Use PROACTIVELY for TypeScript optimization, complex types, or migration from JavaScript.
+description: Writes advanced TypeScript with generic constraints, conditional/mapped types, and custom type guards. Use PROACTIVELY when creating type utilities, migrating JavaScript to TypeScript, resolving complex type inference issues, or implementing strict typing.
 tools: Read, Write, Edit, Bash
 model: sonnet
 ---

.claude/agents/ui-ux-designer.md

@@ -1,36 +0,0 @@
----
-name: ui-ux-designer
-description: UI/UX design specialist for user-centered design and interface systems. Use PROACTIVELY for user research, wireframes, design systems, prototyping, accessibility standards, and user experience optimization.
-tools: Read, Write, Edit
-model: sonnet
----
-
-You are a UI/UX designer specializing in user-centered design and interface systems.
-
-## Focus Areas
-
-- User research and persona development
-- Wireframing and prototyping workflows
-- Design system creation and maintenance
-- Accessibility and inclusive design principles
-- Information architecture and user flows
-- Usability testing and iteration strategies
-
-## Approach
-
-1. User needs first - design with empathy and data
-2. Progressive disclosure for complex interfaces
-3. Consistent design patterns and components
-4. Mobile-first responsive design thinking
-5. Accessibility built-in from the start
-
-## Output
-
-- User journey maps and flow diagrams
-- Low and high-fidelity wireframes
-- Design system components and guidelines
-- Prototype specifications for development
-- Accessibility annotations and requirements
-- Usability testing plans and metrics
-
-Focus on solving user problems. Include design rationale and implementation notes.

.claude/commands/commit.md

@@ -29,12 +29,33 @@ Create well-formatted commit: $ARGUMENTS
 6. If multiple distinct changes are detected, suggests breaking the commit into multiple smaller commits
 7. For each commit (or the single commit if not split), creates a commit message using emoji conventional commit format
 
+## Determining the Scope
+
+The scope in commit messages MUST be the `name` field from the affected library's `project.json`:
+
+1. **Check the file path**: `libs/ui/label/src/...` → Look at `libs/ui/label/project.json`
+2. **Read the project name**: The `"name"` field (e.g., `"name": "ui-label"`)
+3. **Use that as scope**: `feat(ui-label): ...`
+
+**Examples:**
+- File: `libs/remission/feature/remission-list/src/...` → Scope: `remission-feature-remission-list`
+- File: `libs/ui/notice/src/...` → Scope: `ui-notice`
+- File: `apps/isa-app/src/...` → Scope: `isa-app`
+
+**Multi-project changes:**
+- If changes span 2-3 related projects, use the primary one or list them: `feat(ui-label, ui-notice): ...`
+- If changes span many unrelated projects, split into separate commits
+
 ## Best Practices for Commits
 
 - **Verify before committing**: Ensure code is linted, builds correctly, and documentation is updated
 - **Atomic commits**: Each commit should contain related changes that serve a single purpose
 - **Split large changes**: If changes touch multiple concerns, split them into separate commits
-- **Conventional commit format**: Use the format `<type>: <description>` where type is one of:
+- **Conventional commit format**: Use the format `<type>(<scope>): <description>` where:
+  - **scope**: The project name from `project.json` of the affected library (e.g., `ui-label`, `crm-feature-checkout`)
+  - Determine the scope by checking which library/project the changes belong to
+  - If changes span multiple projects, use the primary affected project or split into multiple commits
+  - type is one of:
   - `feat`: A new feature
   - `fix`: A bug fix
   - `docs`: Documentation changes
@@ -122,37 +143,73 @@ When analyzing the diff, consider splitting commits based on these criteria:
 
 ## Examples
 
-Good commit messages:
-- ✨ feat: add user authentication system
-- 🐛 fix: resolve memory leak in rendering process
-- 📝 docs: update API documentation with new endpoints
-- ♻️ refactor: simplify error handling logic in parser
-- 🚨 fix: resolve linter warnings in component files
-- 🧑‍💻 chore: improve developer tooling setup process
-- 👔 feat: implement business logic for transaction validation
-- 🩹 fix: address minor styling inconsistency in header
-- 🚑️ fix: patch critical security vulnerability in auth flow
-- 🎨 style: reorganize component structure for better readability
-- 🔥 fix: remove deprecated legacy code
-- 🦺 feat: add input validation for user registration form
-- 💚 fix: resolve failing CI pipeline tests
-- 📈 feat: implement analytics tracking for user engagement
-- 🔒️ fix: strengthen authentication password requirements
-- ♿️ feat: improve form accessibility for screen readers
+Good commit messages (scope = project name from project.json):
+- ✨ feat(auth-feature-login): add user authentication system
+- 🐛 fix(ui-renderer): resolve memory leak in rendering process
+- 📝 docs(crm-api): update API documentation with new endpoints
+- ♻️ refactor(shared-utils): simplify error handling logic in parser
+- 🚨 fix(ui-label): resolve linter warnings in component files
+- 🧑‍💻 chore(dev-tools): improve developer tooling setup process
+- 👔 feat(checkout-feature): implement business logic for transaction validation
+- 🩹 fix(ui-header): address minor styling inconsistency in header
+- 🚑️ fix(auth-core): patch critical security vulnerability in auth flow
+- 🎨 style(ui-components): reorganize component structure for better readability
+- 🔥 fix(legacy-module): remove deprecated legacy code
+- 🦺 feat(user-registration): add input validation for user registration form
+- 💚 fix(ci-config): resolve failing CI pipeline tests
+- 📈 feat(analytics-feature): implement analytics tracking for user engagement
+- 🔒️ fix(auth-password): strengthen authentication password requirements
+- ♿️ feat(ui-forms): improve form accessibility for screen readers
 
 Example of splitting commits:
-- First commit: ✨ feat: add new solc version type definitions
-- Second commit: 📝 docs: update documentation for new solc versions
-- Third commit: 🔧 chore: update package.json dependencies
-- Fourth commit: 🏷️ feat: add type definitions for new API endpoints
-- Fifth commit: 🧵 feat: improve concurrency handling in worker threads
-- Sixth commit: 🚨 fix: resolve linting issues in new code
-- Seventh commit: ✅ test: add unit tests for new solc version features
-- Eighth commit: 🔒️ fix: update dependencies with security vulnerabilities
+- First commit: ✨ feat(ui-label): add prio-label component with variant styles
+- Second commit: 📝 docs(ui-label): update README with usage examples
+- Third commit: 🔧 chore(ui-notice): scaffold new notice library
+- Fourth commit: 🏷️ feat(shared-types): add type definitions for new API endpoints
+- Fifth commit: ♻️ refactor(pickup-shelf): update components to use new label
+- Sixth commit: 🚨 fix(remission-list): resolve linting issues in new code
+- Seventh commit: ✅ test(ui-label): add unit tests for prio-label component
+- Eighth commit: 🔒️ fix(deps): update dependencies with security vulnerabilities
 
 ## Command Options
 
 - `--no-verify`: Skip running the pre-commit checks (lint, build, generate:docs)
+- `--amend`: Amend the previous commit (RESTRICTED - see rules below)
+
+## Amend Rules (CRITICAL)
+
+**ONLY use `--amend` in these specific cases:**
+
+1. **Adding pre-commit hook fixes**: If a pre-commit hook modified files (formatting, linting auto-fixes), you may amend to include those changes.
+
+2. **Before amending, ALWAYS verify:**
+   ```bash
+   # Check authorship - NEVER amend another developer's commit
+   git log -1 --format='%an %ae'
+
+   # Check not pushed - NEVER amend pushed commits
+   git status  # Should show "Your branch is ahead of..."
+   ```
+
+3. **If either check fails:**
+   - Create a NEW commit instead
+   - Never amend commits authored by others
+   - Never amend commits already pushed to remote
+
+**Example workflow for pre-commit hook changes:**
+```bash
+# 1. Initial commit triggers pre-commit hook
+git commit -m "feat(scope): add feature"
+# Hook modifies files...
+
+# 2. Verify safe to amend
+git log -1 --format='%an %ae'  # Your name/email
+git status                      # "Your branch is ahead..."
+
+# 3. Stage hook changes and amend
+git add .
+git commit --amend --no-edit
+```
 
 ## Important Notes
 

.claude/commands/create-architecture-documentation.md

@@ -1,94 +0,0 @@
----
-allowed-tools: Read, Write, Edit, Bash
-argument-hint: [framework] | --c4-model | --arc42 | --adr | --plantuml | --full-suite
-description: Generate comprehensive architecture documentation with diagrams, ADRs, and interactive visualization
----
-
-# Architecture Documentation Generator
-
-Generate comprehensive architecture documentation: $ARGUMENTS
-
-## Current Architecture Context
-
-- Project structure: !`find . -type f -name "*.json" -o -name "*.yaml" -o -name "*.toml" | head -5`
-- Documentation exists: @docs/ or @README.md (if exists)
-- Architecture files: !`find . -name "*architecture*" -o -name "*design*" -o -name "*.puml" | head -3`
-- Services/containers: @docker-compose.yml or @k8s/ (if exists)
-- API definitions: !`find . -name "*api*" -o -name "*openapi*" -o -name "*swagger*" | head -3`
-
-## Task
-
-Generate comprehensive architecture documentation with modern tooling and best practices:
-
-1. **Architecture Analysis and Discovery**
-   - Analyze current system architecture and component relationships
-   - Identify key architectural patterns and design decisions
-   - Document system boundaries, interfaces, and dependencies
-   - Assess data flow and communication patterns
-   - Identify architectural debt and improvement opportunities
-
-2. **Architecture Documentation Framework**
-   - Choose appropriate documentation framework and tools:
-     - **C4 Model**: Context, Containers, Components, Code diagrams
-     - **Arc42**: Comprehensive architecture documentation template
-     - **Architecture Decision Records (ADRs)**: Decision documentation
-     - **PlantUML/Mermaid**: Diagram-as-code documentation
-     - **Structurizr**: C4 model tooling and visualization
-     - **Draw.io/Lucidchart**: Visual diagramming tools
-
-3. **System Context Documentation**
-   - Create high-level system context diagrams
-   - Document external systems and integrations
-   - Define system boundaries and responsibilities
-   - Document user personas and stakeholders
-   - Create system landscape and ecosystem overview
-
-4. **Container and Service Architecture**
-   - Document container/service architecture and deployment view
-   - Create service dependency maps and communication patterns
-   - Document deployment architecture and infrastructure
-   - Define service boundaries and API contracts
-   - Document data persistence and storage architecture
-
-5. **Component and Module Documentation**
-   - Create detailed component architecture diagrams
-   - Document internal module structure and relationships
-   - Define component responsibilities and interfaces
-   - Document design patterns and architectural styles
-   - Create code organization and package structure documentation
-
-6. **Data Architecture Documentation**
-   - Document data models and database schemas
-   - Create data flow diagrams and processing pipelines
-   - Document data storage strategies and technologies
-   - Define data governance and lifecycle management
-   - Create data integration and synchronization documentation
-
-7. **Security and Compliance Architecture**
-   - Document security architecture and threat model
-   - Create authentication and authorization flow diagrams
-   - Document compliance requirements and controls
-   - Define security boundaries and trust zones
-   - Create incident response and security monitoring documentation
-
-8. **Quality Attributes and Cross-Cutting Concerns**
-   - Document performance characteristics and scalability patterns
-   - Create reliability and availability architecture documentation
-   - Document monitoring and observability architecture
-   - Define maintainability and evolution strategies
-   - Create disaster recovery and business continuity documentation
-
-9. **Architecture Decision Records (ADRs)**
-   - Create comprehensive ADR template and process
-   - Document historical architectural decisions and rationale
-   - Create decision tracking and review process
-   - Document trade-offs and alternatives considered
-   - Set up ADR maintenance and evolution procedures
-
-10. **Documentation Automation and Maintenance**
-    - Set up automated diagram generation from code annotations
-    - Configure documentation pipeline and publishing automation
-    - Set up documentation validation and consistency checking
-    - Create documentation review and approval process
-    - Train team on architecture documentation practices and tools
-    - Set up documentation versioning and change management

.claude/commands/docs-library.md

@@ -1,3 +1,9 @@
+---
+allowed-tools: Read, Write, Edit, Bash, Grep, Glob, Task
+argument-hint: [library-name]
+description: Generate or update README.md for a specific library with comprehensive documentation
+---
+
 # /docs:library - Generate/Update Library README
 
 Generate or update README.md for a specific library with comprehensive documentation.

.claude/commands/docs-refresh-reference.md

@@ -1,3 +1,9 @@
+---
+allowed-tools: Read, Write, Edit, Bash, Grep, Glob
+argument-hint: --dry-run | --force
+description: Regenerate library reference documentation (docs/library-reference.md) by scanning all monorepo libraries
+---
+
 # /docs:refresh-reference - Regenerate Library Reference
 
 Regenerate the library reference documentation (`docs/library-reference.md`) by scanning all libraries in the monorepo.

.claude/commands/quality-bundle-analyze.md

@@ -1,129 +0,0 @@
-# /quality:bundle-analyze - Analyze Bundle Sizes
-
-Analyze production bundle sizes and provide optimization recommendations. Project thresholds: 2MB warning, 5MB error.
-
-## Tasks
-
-### 1. Run Production Build
-```bash
-# Clean previous build
-rm -rf dist/
-
-# Build for production
-npm run build-prod
-```
-
-### 2. Analyze Bundle Output
-```bash
-# List bundle files with sizes
-ls -lh dist/apps/isa-app/browser/*.js | awk '{print $9, $5}'
-
-# Get total bundle size
-du -sh dist/apps/isa-app/browser/
-```
-
-### 3. Identify Large Files
-Parse build output and identify:
-- Main bundle size
-- Lazy-loaded chunk sizes
-- Vendor chunks
-- Files exceeding thresholds:
-  - **Warning**: > 2MB
-  - **Error**: > 5MB
-
-### 4. Analyze Dependencies
-```bash
-# Check for duplicate dependencies
-npm ls --depth=0 | grep -E "UNMET|deduped"
-
-# Show largest node_modules packages
-du -sh node_modules/* | sort -rh | head -20
-```
-
-### 5. Source Map Analysis
-Use source maps to identify large contributors:
-```bash
-# Install source-map-explorer if needed
-npm install -g source-map-explorer
-
-# Analyze main bundle
-source-map-explorer dist/apps/isa-app/browser/main.*.js
-```
-
-### 6. Generate Recommendations
-Based on analysis, provide actionable recommendations:
-
-**If bundle > 2MB:**
-- Identify heavy dependencies to replace or remove
-- Suggest lazy loading opportunities
-- Check for unused imports
-
-**Code Splitting Opportunities:**
-- Large feature modules that could be lazy-loaded
-- Heavy libraries that could be dynamically imported
-- Vendor code that could be split into separate chunks
-
-**Dependency Optimization:**
-- Replace large libraries with smaller alternatives
-- Remove unused dependencies
-- Use tree-shakeable imports
-
-**Build Configuration:**
-- Enable/optimize compression
-- Check for source maps in production (should be disabled)
-- Verify optimization flags
-
-### 7. Comparative Analysis
-If previous build data exists:
-```bash
-# Compare with previous build
-# (Requires manual tracking or CI/CD integration)
-echo "Current build: $(du -sh dist/apps/isa-app/browser/ | awk '{print $1}')"
-```
-
-### 8. Generate Report
-Create formatted report with:
-- Total bundle size with threshold status (✅ < 2MB, ⚠️ 2-5MB, ❌ > 5MB)
-- Main bundle and largest chunks
-- Top 10 largest dependencies
-- Optimization recommendations prioritized by impact
-- Lazy loading opportunities
-
-## Output Format
-```
-Bundle Analysis Report
-======================
-
-Total Size: X.XX MB [STATUS]
-Main Bundle: X.XX MB
-Largest Chunks:
-  - chunk-name.js: X.XX MB
-  - ...
-
-Largest Dependencies:
-  1. dependency-name: X.XX MB
-  ...
-
-Recommendations:
-🔴 Critical (> 5MB):
-  - [Action items]
-
-⚠️ Warning (2-5MB):
-  - [Action items]
-
-✅ Optimization Opportunities:
-  - [Action items]
-
-Lazy Loading Candidates:
-  - [Feature modules]
-```
-
-## Error Handling
-- Build failures: Show error and suggest fixes
-- Missing tools: Offer to install (source-map-explorer)
-- No dist folder: Run build first
-
-## References
-- CLAUDE.md Build Configuration section
-- Angular build optimization: https://angular.dev/tools/cli/build
-- package.json (build-prod script)

.claude/commands/quality-coverage.md

@@ -1,201 +0,0 @@
-# /quality:coverage - Generate Test Coverage Report
-
-Generate comprehensive test coverage report with recommendations for improving coverage.
-
-## Parameters
-- `library-name` (optional): Specific library to analyze. If omitted, analyzes all libraries.
-
-## Tasks
-
-### 1. Run Coverage Analysis
-```bash
-# Single library
-npx nx test [library-name] --skip-nx-cache --coverage
-
-# All libraries (if no library specified)
-npm run ci # Runs all tests with coverage
-```
-
-### 2. Parse Coverage Report
-Coverage output typically in:
-- `coverage/libs/[domain]/[layer]/[name]/`
-- Look for `coverage-summary.json` or text output
-
-Extract metrics:
-- **Line coverage**: % of executable lines tested
-- **Branch coverage**: % of conditional branches tested
-- **Function coverage**: % of functions called in tests
-- **Statement coverage**: % of statements executed
-
-### 3. Identify Uncovered Code
-Parse coverage report to find:
-- **Uncovered files**: Files with 0% coverage
-- **Partially covered files**: < 80% coverage
-- **Uncovered lines**: Specific line numbers not tested
-- **Uncovered branches**: Conditional paths not tested
-
-```bash
-# List files with coverage below 80%
-# (Parse from coverage JSON output)
-```
-
-### 4. Categorize Coverage Gaps
-
-**Critical (High Risk):**
-- Service methods handling business logic
-- Data transformation functions
-- Error handling code paths
-- Security-related functions
-- State management store actions
-
-**Important (Medium Risk):**
-- Component public methods
-- Utility functions
-- Validators
-- Pipes and filters
-- Guard functions
-
-**Low Priority:**
-- Getters/setters
-- Simple property assignments
-- Console logging
-- Type definitions
-
-### 5. Generate Recommendations
-
-For each coverage gap, provide:
-- **File and line numbers**
-- **Risk level** (Critical/Important/Low)
-- **Suggested test type** (unit/integration)
-- **Test approach** (example test scenario)
-
-Example:
-```
-📍 libs/oms/data-access/src/lib/services/order.service.ts:45-52
-🔴 Critical - Business Logic
-❌ 0% coverage - Error handling path
-
-Recommended test:
-it('should handle API error when fetching order', async () => {
-  // Mock API to return error
-  // Call method
-  // Verify error handling
-});
-```
-
-### 6. Calculate Coverage Trends
-If historical data available:
-- Compare with previous coverage percentage
-- Show improvement/regression
-- Identify files with declining coverage
-
-### 7. Generate HTML Report
-```bash
-# Open coverage report in browser (if available)
-open coverage/libs/[domain]/[layer]/[name]/index.html
-```
-
-### 8. Create Coverage Summary Report
-
-**Overall Metrics:**
-```
-Coverage Summary for [library-name]
-====================================
-
-Line Coverage:     XX.X% (XXX/XXX lines)
-Branch Coverage:   XX.X% (XXX/XXX branches)
-Function Coverage: XX.X% (XXX/XXX functions)
-Statement Coverage: XX.X% (XXX/XXX statements)
-
-Target: 80% (Recommended minimum)
-Status: ✅ Met / ⚠️ Below Target / 🔴 Critical
-```
-
-**Files Needing Attention:**
-```
-🔴 Critical (< 50% coverage):
-  1. service-name.service.ts - 35% (business logic)
-  2. data-processor.ts - 42% (transformations)
-
-⚠️ Below Target (50-79% coverage):
-  3. component-name.component.ts - 68%
-  4. validator.ts - 72%
-
-✅ Well Covered (≥ 80% coverage):
-  - Other files maintaining good coverage
-```
-
-**Top Priority Tests to Add:**
-1. [File:Line] - [Description] - [Risk Level]
-2. ...
-
-### 9. Framework-Specific Notes
-
-**Vitest:**
-- Coverage provider: v8 or istanbul
-- Config in `vitest.config.ts`
-- Coverage thresholds configurable
-
-**Jest:**
-- Coverage collected via `--coverage` flag
-- Config in `jest.config.ts`
-- Coverage directory: `coverage/`
-
-### 10. Set Coverage Thresholds (Optional)
-Suggest adding to test config:
-```typescript
-// vitest.config.ts
-coverage: {
-  thresholds: {
-    lines: 80,
-    functions: 80,
-    branches: 80,
-    statements: 80
-  }
-}
-```
-
-## Output Format
-```
-Test Coverage Report
-====================
-
-Library: [name]
-Test Framework: [Vitest/Jest]
-Generated: [timestamp]
-
-📊 Coverage Metrics
--------------------
-Lines:      XX.X% ████████░░ (XXX/XXX)
-Branches:   XX.X% ███████░░░ (XXX/XXX)
-Functions:  XX.X% █████████░ (XXX/XXX)
-Statements: XX.X% ████████░░ (XXX/XXX)
-
-🎯 Target: 80% | Status: [✅/⚠️/🔴]
-
-🔍 Coverage Gaps
-----------------
-[Categorized list with priorities]
-
-💡 Recommendations
-------------------
-[Prioritized list of tests to add]
-
-📈 Next Steps
--------------
-1. Focus on critical coverage gaps first
-2. Add tests for business logic in [files]
-3. Consider setting coverage thresholds
-4. Re-run: npx nx test [library-name] --skip-nx-cache --coverage
-```
-
-## Error Handling
-- No coverage data: Ensure `--coverage` flag used
-- Missing library: Verify library name is correct
-- Coverage tool not configured: Check test config for coverage setup
-
-## References
-- docs/guidelines/testing.md
-- CLAUDE.md Testing Framework section
-- Vitest coverage: https://vitest.dev/guide/coverage
-- Jest coverage: https://jestjs.io/docs/configuration#collectcoverage-boolean

.claude/commands/quality.md

@@ -0,0 +1,188 @@
+---
+allowed-tools: Read, Write, Edit, Bash, Grep, Glob
+argument-hint: bundle | coverage [library-name] | --all
+description: Analyze code quality: bundle sizes, test coverage, with optimization recommendations
+---
+
+# /quality - Code Quality Analysis
+
+Comprehensive quality analysis including bundle sizes and test coverage.
+
+## Subcommands
+
+- `bundle` - Analyze production bundle sizes
+- `coverage [library-name]` - Test coverage analysis
+- No argument - Run both analyses
+- `[library-name]` - Coverage for specific library
+
+## Bundle Analysis
+
+### 1. Run Production Build
+```bash
+# Clean previous build
+rm -rf dist/
+
+# Build for production
+npm run build-prod
+```
+
+### 2. Analyze Bundle Output
+```bash
+# List bundle files with sizes
+ls -lh dist/apps/isa-app/browser/*.js | awk '{print $9, $5}'
+
+# Get total bundle size
+du -sh dist/apps/isa-app/browser/
+```
+
+### 3. Identify Large Files
+Parse build output and identify:
+- Main bundle size
+- Lazy-loaded chunk sizes
+- Vendor chunks
+- Files exceeding thresholds:
+  - **Warning**: > 2MB
+  - **Error**: > 5MB
+
+### 4. Analyze Dependencies
+```bash
+# Check for duplicate dependencies
+npm ls --depth=0 | grep -E "UNMET|deduped"
+
+# Show largest node_modules packages
+du -sh node_modules/* | sort -rh | head -20
+```
+
+### 5. Source Map Analysis (Optional)
+```bash
+# Install source-map-explorer if needed
+npm install -g source-map-explorer
+
+# Analyze main bundle
+source-map-explorer dist/apps/isa-app/browser/main.*.js
+```
+
+### 6. Bundle Recommendations
+
+**If bundle > 2MB:**
+- Identify heavy dependencies to replace or remove
+- Suggest lazy loading opportunities
+- Check for unused imports
+
+**Code Splitting Opportunities:**
+- Large feature modules that could be lazy-loaded
+- Heavy libraries that could be dynamically imported
+
+**Dependency Optimization:**
+- Replace large libraries with smaller alternatives
+- Remove unused dependencies
+- Use tree-shakeable imports
+
+---
+
+## Coverage Analysis
+
+### 1. Run Coverage Analysis
+```bash
+# Single library
+npx nx test [library-name] --skip-nx-cache --coverage
+
+# All libraries (if no library specified)
+npm run ci # Runs all tests with coverage
+```
+
+### 2. Parse Coverage Report
+Coverage output in: `coverage/libs/[domain]/[layer]/[name]/`
+
+Extract metrics:
+- **Line coverage**: % of executable lines tested
+- **Branch coverage**: % of conditional branches tested
+- **Function coverage**: % of functions called in tests
+- **Statement coverage**: % of statements executed
+
+### 3. Identify Uncovered Code
+Parse coverage report to find:
+- **Uncovered files**: Files with 0% coverage
+- **Partially covered files**: < 80% coverage
+- **Uncovered lines**: Specific line numbers not tested
+- **Uncovered branches**: Conditional paths not tested
+
+### 4. Categorize Coverage Gaps
+
+**Critical (High Risk):**
+- Service methods handling business logic
+- Data transformation functions
+- Error handling code paths
+- Security-related functions
+- State management store actions
+
+**Important (Medium Risk):**
+- Component public methods
+- Utility functions
+- Validators and guards
+
+**Low Priority:**
+- Getters/setters
+- Simple property assignments
+
+### 5. Generate Recommendations
+
+For each coverage gap provide:
+- **File and line numbers**
+- **Risk level** (Critical/Important/Low)
+- **Suggested test type** (unit/integration)
+- **Test approach** (example test scenario)
+
+---
+
+## Output Formats
+
+### Bundle Report
+```
+Bundle Analysis Report
+======================
+
+Total Size: X.XX MB [STATUS]
+Main Bundle: X.XX MB
+Largest Chunks:
+  - chunk-name.js: X.XX MB
+
+Largest Dependencies:
+  1. dependency-name: X.XX MB
+
+Recommendations:
+  - [Prioritized action items]
+```
+
+### Coverage Report
+```
+Coverage Summary for [library-name]
+====================================
+
+Line Coverage:     XX.X% (XXX/XXX lines)
+Branch Coverage:   XX.X% (XXX/XXX branches)
+Function Coverage: XX.X% (XXX/XXX functions)
+
+Target: 80% (Recommended minimum)
+Status: [Met/Below Target/Critical]
+
+Files Needing Attention:
+  [Categorized list with priorities]
+
+Top Priority Tests to Add:
+  [Prioritized recommendations]
+```
+
+## Error Handling
+
+- **Build failures**: Show error and suggest fixes
+- **Missing tools**: Offer to install (source-map-explorer)
+- **No coverage data**: Ensure `--coverage` flag used
+- **Missing library**: Verify library name is correct
+
+## References
+
+- CLAUDE.md Build Configuration section
+- docs/guidelines/testing.md
+- Angular build optimization: https://angular.dev/tools/cli/build
+- Vitest coverage: https://vitest.dev/guide/coverage

.claude/skills/angular-template/SKILL.md

@@ -1,239 +0,0 @@
----
-name: angular-template
-description: This skill should be used when writing or reviewing Angular component templates. It provides guidance on modern Angular 20+ template syntax including control flow (@if, @for, @switch, @defer), content projection (ng-content), template references (ng-template, ng-container), variable declarations (@let), and expression binding. Use when creating components, refactoring to modern syntax, implementing lazy loading, or reviewing template best practices.
----
-
-# Angular Template
-
-Guide for modern Angular 20+ template patterns: control flow, lazy loading, projection, and binding.
-
-## When to Use
-
-- Creating/reviewing component templates
-- Refactoring legacy `*ngIf/*ngFor/*ngSwitch` to modern syntax
-- Implementing `@defer` lazy loading
-- Designing reusable components with `ng-content`
-- Template performance optimization
-
-**Related Skills:** These skills work together when writing Angular templates:
-- **[html-template](../html-template/SKILL.md)** - E2E testing attributes (`data-what`, `data-which`) and ARIA accessibility
-- **[tailwind](../tailwind/SKILL.md)** - ISA design system styling (colors, typography, spacing, layout)
-
-## Control Flow (Angular 17+)
-
-### @if / @else if / @else
-
-```typescript
-@if (user.isAdmin()) {
-  <app-admin-dashboard />
-} @else if (user.isEditor()) {
-  <app-editor-dashboard />
-} @else {
-  <app-viewer-dashboard />
-}
-
-// Store result with 'as'
-@if (user.profile?.settings; as settings) {
-  <p>Theme: {{settings.theme}}</p>
-}
-```
-
-### @for with @empty
-
-```typescript
-@for (product of products(); track product.id) {
-  <app-product-card [product]="product" />
-} @empty {
-  <p>No products available</p>
-}
-```
-
-**CRITICAL:** Always provide `track` expression:
-- Best: `track item.id` or `track item.uuid`
-- Static lists: `track $index`
-- **NEVER:** `track identity(item)` (causes full re-render)
-
-**Contextual variables:** `$count`, `$index`, `$first`, `$last`, `$even`, `$odd`
-
-### @switch
-
-```typescript
-@switch (viewMode()) {
-  @case ('grid') { <app-grid-view /> }
-  @case ('list') { <app-list-view /> }
-  @default { <app-grid-view /> }
-}
-```
-
-## @defer Lazy Loading
-
-### Basic Usage
-
-```typescript
-@defer (on viewport) {
-  <app-heavy-chart />
-} @placeholder (minimum 500ms) {
-  <div class="skeleton"></div>
-} @loading (after 100ms; minimum 1s) {
-  <mat-spinner />
-} @error {
-  <p>Failed to load</p>
-}
-```
-
-### Triggers
-
-| Trigger | Use Case |
-|---------|----------|
-| `idle` (default) | Non-critical features |
-| `viewport` | Below-the-fold content |
-| `interaction` | User-initiated (click/keydown) |
-| `hover` | Tooltips/popovers |
-| `timer(Xs)` | Delayed content |
-| `when(expr)` | Custom condition |
-
-**Multiple triggers:** `@defer (on interaction; on timer(5s))`
-**Prefetching:** `@defer (on interaction; prefetch on idle)`
-
-### Requirements
-
-- Components **MUST be standalone**
-- No `@ViewChild`/`@ContentChild` references
-- Reserve space in `@placeholder` to prevent layout shift
-
-### Best Practices
-
-- ✅ Defer below-the-fold content
-- ❌ Never defer above-the-fold (harms LCP)
-- ❌ Avoid `immediate`/`timer` during initial render (harms TTI)
-- Test with network throttling
-
-## Content Projection
-
-### Single Slot
-
-```typescript
-@Component({
-  selector: 'ui-card',
-  template: `<div class="card"><ng-content></ng-content></div>`
-})
-```
-
-### Multi-Slot with Selectors
-
-```typescript
-@Component({
-  template: `
-    <header><ng-content select="card-header"></ng-content></header>
-    <main><ng-content select="card-body"></ng-content></main>
-    <footer><ng-content></ng-content></footer> <!-- default slot -->
-  `
-})
-```
-
-**Usage:**
-```html
-<ui-card>
-  <card-header><h3>Title</h3></card-header>
-  <card-body><p>Content</p></card-body>
-  <button>Action</button> <!-- goes to default slot -->
-</ui-card>
-```
-
-**Fallback content:** `<ng-content select="title">Default Title</ng-content>`
-**Aliasing:** `<h3 ngProjectAs="card-header">Title</h3>`
-
-### CRITICAL Constraint
-
-`ng-content` **always instantiates** (even if hidden). For conditional projection, use `ng-template` + `NgTemplateOutlet`.
-
-## Template References
-
-### ng-template
-
-```html
-<ng-template #userCard let-user="userData" let-index="i">
-  <div class="user">#{{index}}: {{user.name}}</div>
-</ng-template>
-
-<ng-container
-  *ngTemplateOutlet="userCard; context: {userData: currentUser(), i: 0}">
-</ng-container>
-```
-
-**Access in component:**
-```typescript
-myTemplate = viewChild<TemplateRef<unknown>>('myTemplate');
-```
-
-### ng-container
-
-Groups elements without DOM footprint:
-
-```html
-<p>
-  Hero's name is
-  <ng-container @if="hero()">{{hero().name}}</ng-container>.
-</p>
-```
-
-## Variables
-
-### @let (Angular 18.1+)
-
-```typescript
-@let userName = user().name;
-@let greeting = 'Hello, ' + userName;
-@let asyncData = data$ | async;
-
-<h1>{{greeting}}</h1>
-```
-
-**Scoped to current view** (not hoisted to parent/sibling).
-
-### Template References (#)
-
-```html
-<input #emailInput type="email" />
-<button (click)="sendEmail(emailInput.value)">Send</button>
-
-<app-datepicker #startDate />
-<button (click)="startDate.open()">Open</button>
-```
-
-## Binding Patterns
-
-**Property:** `[disabled]="!isValid()"`
-**Attribute:** `[attr.aria-label]="label()"` `[attr.data-what]="'card'"`
-**Event:** `(click)="save()"` `(input)="onInput($event)"`
-**Two-way:** `[(ngModel)]="userName"`
-**Class:** `[class.active]="isActive()"` or `[class]="{active: isActive()}"`
-**Style:** `[style.width.px]="width()"` or `[style]="{color: textColor()}"`
-
-## Best Practices
-
-1. **Use signals:** `isExpanded = signal(false)`
-2. **Prefer control flow over directives:** Use `@if` not `*ngIf`
-3. **Keep expressions simple:** Use `computed()` for complex logic
-4. **Testing & Accessibility:** Always add E2E and ARIA attributes (see **[html-template](../html-template/SKILL.md)** skill)
-5. **Track expressions:** Required in `@for`, use unique IDs
-
-## Migration
-
-| Legacy | Modern |
-|--------|--------|
-| `*ngIf="condition"` | `@if (condition) { }` |
-| `*ngFor="let item of items"` | `@for (item of items; track item.id) { }` |
-| `[ngSwitch]` | `@switch (value) { @case ('a') { } }` |
-
-**CLI migration:** `ng generate @angular/core:control-flow`
-
-## Reference Files
-
-For detailed examples and edge cases, see:
-- `references/control-flow-reference.md` - @if/@for/@switch patterns
-- `references/defer-patterns.md` - Lazy loading strategies
-- `references/projection-patterns.md` - Advanced ng-content
-- `references/template-reference.md` - ng-template/ng-container
-
-Search with: `grep -r "pattern" references/`

.claude/skills/api-change-analyzer/SKILL.md

@@ -1,151 +0,0 @@
----
-name: api-change-analyzer
-description: This skill should be used when analyzing Swagger/OpenAPI specification changes BEFORE regenerating API clients. It compares old vs new specs, categorizes changes as breaking/compatible/warnings, finds affected code, and generates migration strategies. Use this skill when the user wants to check API changes safely before sync, mentions "check breaking changes", or needs impact assessment.
----
-
-# API Change Analyzer
-
-## Overview
-
-Analyze Swagger/OpenAPI specification changes to detect breaking changes before regeneration. Provides detailed comparison, impact analysis, and migration recommendations.
-
-## When to Use This Skill
-
-Invoke when user wants to:
-- Check API changes before regeneration
-- Assess impact of backend updates
-- Plan migration for breaking changes
-- Mentioned "breaking changes" or "API diff"
-
-## Analysis Workflow
-
-### Step 1: Backup and Generate Temporarily
-
-```bash
-cp -r generated/swagger/[api-name] /tmp/[api-name].backup
-npm run generate:swagger:[api-name]
-```
-
-### Step 2: Compare Files
-
-```bash
-diff -u /tmp/[api-name].backup/models.ts generated/swagger/[api-name]/models.ts
-diff -u /tmp/[api-name].backup/services.ts generated/swagger/[api-name]/services.ts
-```
-
-### Step 3: Categorize Changes
-
-**🔴 Breaking (Critical):**
-- Removed properties from response models
-- Changed property types (string → number)
-- Removed endpoints
-- Optional → required fields
-- Removed enum values
-
-**✅ Compatible (Safe):**
-- Added properties (non-breaking)
-- New endpoints
-- Added optional parameters
-- New enum values
-
-**⚠️ Warnings (Review):**
-- Property renamed (old removed + new added)
-- Changed default values
-- Changed validation rules
-- Added required request fields
-
-### Step 4: Analyze Impact
-
-For each breaking change, use `Explore` agent to find usages:
-
-```bash
-# Example: Find usages of removed property
-grep -r "removedProperty" libs/*/data-access --include="*.ts"
-```
-
-List:
-- Affected files
-- Services impacted
-- Estimated refactoring effort
-
-### Step 5: Generate Migration Strategy
-
-Based on severity:
-
-**High Impact (multiple breaking changes):**
-1. Create migration branch
-2. Document all changes
-3. Update services incrementally
-4. Comprehensive testing
-
-**Medium Impact:**
-1. Fix compilation errors
-2. Update affected tests
-3. Deploy with monitoring
-
-**Low Impact:**
-1. Minor updates
-2. Deploy
-
-### Step 6: Create Report
-
-```
-API Breaking Changes Analysis
-==============================
-
-API: [api-name]
-Analysis Date: [timestamp]
-
-📊 Summary
-----------
-Breaking Changes: XX
-Warnings: XX
-Compatible Changes: XX
-
-🔴 Breaking Changes
--------------------
-1. Removed Property: OrderResponse.deliveryDate
-   Files Affected: 2
-   - libs/oms/data-access/src/lib/services/order.service.ts:45
-   - libs/oms/feature/order-detail/src/lib/component.ts:78
-   Impact: Medium
-   Fix: Remove references or use alternativeDate
-
-2. Type Changed: ProductResponse.price (string → number)
-   Files Affected: 1
-   - libs/catalogue/data-access/src/lib/services/product.service.ts:32
-   Impact: High
-   Fix: Update parsing logic
-
-⚠️ Warnings
------------
-1. Possible Rename: CustomerResponse.customerName → fullName
-   Action: Verify with backend team
-
-✅ Compatible Changes
----------------------
-1. Added Property: OrderResponse.estimatedDelivery
-2. New Endpoint: GET /api/v2/orders/bulk
-
-💡 Migration Strategy
----------------------
-Approach: [High/Medium/Low Impact]
-Estimated Effort: [hours]
-Steps: [numbered list]
-
-🎯 Recommendation
------------------
-[Proceed with sync / Fix critical issues first / Coordinate with backend]
-```
-
-### Step 7: Cleanup
-
-```bash
-rm -rf /tmp/[api-name].backup
-# Or restore if needed
-```
-
-## References
-
-- CLAUDE.md API Integration
-- Semantic Versioning: https://semver.org

.claude/skills/api-sync/SKILL.md

@@ -0,0 +1,362 @@
+---
+name: api-sync
+description: This skill should be used when regenerating Swagger/OpenAPI TypeScript API clients with breaking change detection. Handles generation of all 10 API clients (or specific ones), pre-generation impact analysis, Unicode cleanup, TypeScript validation, and affected test execution. Use when user requests "API sync", "regenerate swagger", "check breaking changes", or indicates backend API changes.
+---
+
+# API Sync Manager
+
+## Overview
+
+Automate the complete lifecycle of TypeScript API client regeneration from Swagger/OpenAPI specifications. Provides pre-generation breaking change detection, automatic post-processing, impact analysis, validation, and migration recommendations for all 10 API clients in the ISA-Frontend monorepo.
+
+## Available APIs
+
+availability-api, cat-search-api, checkout-api, crm-api, eis-api, inventory-api, isa-api, oms-api, print-api, wws-api
+
+## Unified Sync Workflow
+
+### Step 1: Pre-Generation Check
+
+```bash
+# Check uncommitted changes
+git status generated/swagger/
+
+# Verify no manual edits will be lost
+git diff generated/swagger/
+```
+
+If uncommitted changes exist, warn user and ask to proceed. If manual edits detected, strongly recommend committing first.
+
+### Step 2: Pre-Generation Breaking Change Detection
+
+Generate to temporary location to compare without affecting working directory:
+
+```bash
+# Backup current state
+cp -r generated/swagger/[api-name] /tmp/[api-name].backup
+
+# Generate to temp location for comparison
+npm run generate:swagger:[api-name]
+```
+
+**Compare Models and Services:**
+
+```bash
+diff -u /tmp/[api-name].backup/models.ts generated/swagger/[api-name]/models.ts
+diff -u /tmp/[api-name].backup/services.ts generated/swagger/[api-name]/services.ts
+```
+
+**Categorize Changes:**
+
+**🔴 Breaking (Critical):**
+- Removed properties from response models
+- Changed property types (string → number, object → array)
+- Removed endpoints
+- Optional → required fields in request models
+- Removed enum values
+- Changed endpoint paths or HTTP methods
+
+**⚠️ Warnings (Review Required):**
+- Property renamed (old removed + new added)
+- Changed default values
+- Changed validation rules (min/max length, pattern)
+- Added required request fields
+- Changed parameter locations (query → body)
+
+**✅ Compatible (Safe):**
+- Added properties to response models
+- New endpoints
+- Added optional parameters
+- New enum values
+- Required → optional fields
+
+### Step 3: Impact Analysis
+
+For each breaking or warning change, analyze codebase impact:
+
+```bash
+# Find all imports from affected API
+grep -r "from '@generated/swagger/[api-name]" libs/ --include="*.ts"
+
+# Find usages of specific removed/changed items
+grep -r "[RemovedType|removedProperty|removedMethod]" libs/*/data-access --include="*.ts"
+```
+
+**Document:**
+- Affected files (with line numbers)
+- Services impacted
+- Components/stores using affected services
+- Estimated refactoring effort (hours)
+
+### Step 4: Generate Migration Strategy
+
+Based on breaking change severity:
+
+**High Impact (>5 breaking changes or critical endpoints):**
+1. Create dedicated migration branch from develop
+2. Document all changes in migration guide
+3. Update data-access services incrementally
+4. Update affected stores and components
+5. Comprehensive test coverage
+6. Coordinate deployment with backend team
+
+**Medium Impact (2-5 breaking changes):**
+1. Fix TypeScript compilation errors
+2. Update affected data-access services
+3. Update tests
+4. Run affected test suite
+5. Deploy with monitoring
+
+**Low Impact (1 breaking change, minor impact):**
+1. Apply minimal updates
+2. Verify tests pass
+3. Deploy normally
+
+### Step 5: Execute Generation
+
+If user approves proceeding after impact analysis:
+
+```bash
+# All APIs
+npm run generate:swagger
+
+# Specific API (if api-name provided)
+npm run generate:swagger:[api-name]
+```
+
+### Step 6: Verify Unicode Cleanup
+
+Automatic cleanup via `tools/fix-files.js` should execute during generation. Verify:
+
+```bash
+# Scan for remaining Unicode issues
+grep -r "\\\\u00" generated/swagger/ || echo "✅ No Unicode issues"
+```
+
+If issues remain, run manually:
+
+```bash
+node tools/fix-files.js
+```
+
+### Step 7: TypeScript Validation
+
+```bash
+# Full TypeScript compilation check
+npx tsc --noEmit
+
+# If errors, show affected files
+npx tsc --noEmit | head -20
+```
+
+Document compilation errors:
+- Missing properties
+- Type mismatches
+- Incompatible signatures
+
+### Step 8: Run Affected Tests
+
+```bash
+# Run tests for affected projects
+npx nx affected:test --skip-nx-cache --base=HEAD~1
+
+# Lint affected projects
+npx nx affected:lint --base=HEAD~1
+```
+
+Monitor test failures and categorize:
+- Mock data mismatches (update fixtures)
+- Type assertion failures (update test types)
+- Integration test failures (API contract changes)
+
+### Step 9: Generate Comprehensive Report
+
+```
+API Sync Manager Report
+=======================
+
+API: [api-name | all]
+Sync Date: [timestamp]
+Generation: ✅ Success / ❌ Failed
+
+📊 Change Summary
+-----------------
+Breaking Changes: XX
+Warnings: XX
+Compatible Changes: XX
+Files Modified: XX
+
+🔴 Breaking Changes
+-------------------
+1. [API Name] - Removed Property: OrderResponse.deliveryDate
+   Impact: Medium (2 files affected)
+   Files:
+   - libs/oms/data-access/src/lib/services/order.service.ts:45
+   - libs/oms/feature/order-detail/src/lib/component.ts:78
+   Fix Strategy: Remove references or use alternativeDate field
+   Estimated Effort: 30 minutes
+
+2. [API Name] - Type Changed: ProductResponse.price (string → number)
+   Impact: High (1 file + cascading changes)
+   Files:
+   - libs/catalogue/data-access/src/lib/services/product.service.ts:32
+   Fix Strategy: Remove string parsing, update price calculations
+   Estimated Effort: 1 hour
+
+⚠️ Warnings (Review Required)
+------------------------------
+1. [API Name] - Possible Rename: CustomerResponse.customerName → fullName
+   Action: Verify with backend team if intentional
+   Migration: Update references if confirmed rename
+
+2. [API Name] - New Required Field: CreateOrderRequest.taxId
+   Action: Update order creation flows to provide taxId
+   Impact: 3 order creation forms
+
+✅ Compatible Changes
+---------------------
+1. [API Name] - Added Property: OrderResponse.estimatedDelivery
+2. [API Name] - New Endpoint: GET /api/v2/orders/bulk
+3. [API Name] - Added Optional Parameter: includeArchived to GET /orders
+
+📊 Validation Results
+---------------------
+TypeScript Compilation: ✅ Pass / ❌ XX errors
+Unicode Cleanup: ✅ Complete
+Tests: XX/XX passing (YY affected)
+Lint: ✅ Pass / ⚠️ XX warnings
+
+❌ Test Failures (if any)
+-------------------------
+1. order.service.spec.ts - Mock response missing deliveryDate
+   Fix: Update mock fixture
+2. product.component.spec.ts - Price type assertion failed
+   Fix: Change expect(price).toBe("10.99") → expect(price).toBe(10.99)
+
+💡 Migration Strategy
+---------------------
+Approach: [High/Medium/Low Impact]
+Estimated Total Effort: [hours]
+
+Steps:
+1. [Fix compilation errors in data-access services]
+2. [Update test mocks and fixtures]
+3. [Update components using affected properties]
+4. [Run full test suite]
+5. [Deploy with backend coordination]
+
+🎯 Recommendation
+-----------------
+[One of the following:]
+✅ Safe to proceed - Only compatible changes detected
+⚠️ Proceed with caution - Fix breaking changes before deployment
+🔴 Coordinate with backend - High impact changes require migration plan
+🛑 Block regeneration - Critical breaking changes, backend rollback needed
+
+📋 Next Steps
+-------------
+[Specific actions user should take]
+- [ ] Fix compilation errors in [files]
+- [ ] Update test mocks in [files]
+- [ ] Coordinate deployment timing with backend team
+- [ ] Monitor [specific endpoints] after deployment
+```
+
+### Step 10: Cleanup
+
+```bash
+# Remove temporary backup
+rm -rf /tmp/[api-name].backup
+
+# Or restore if generation needs to be reverted
+# cp -r /tmp/[api-name].backup generated/swagger/[api-name]
+```
+
+## Error Handling
+
+**Generation Fails:**
+- Check OpenAPI spec URLs in package.json scripts
+- Verify backend API is accessible
+- Check for malformed OpenAPI specification
+
+**Unicode Cleanup Fails:**
+- Run `node tools/fix-files.js` manually
+- Check for new Unicode patterns not covered by script
+
+**TypeScript Compilation Errors:**
+- Review breaking changes section in report
+- Update affected data-access services first
+- Fix cascading type errors in consumers
+
+**Test Failures:**
+- Update mock data to match new API contracts
+- Fix type assertions in tests
+- Update integration test expectations
+
+**Diff Detection Issues:**
+- Ensure clean git state before running
+- Check file permissions on generated/ directory
+- Verify backup location is writable
+
+## Advanced Usage
+
+**Compare Specific Endpoints Only:**
+
+```bash
+# Extract and compare specific interface
+grep -A 20 "interface OrderResponse" /tmp/[api-name].backup/models.ts
+grep -A 20 "interface OrderResponse" generated/swagger/[api-name]/models.ts
+```
+
+**Bulk API Sync with Change Detection:**
+
+Run pre-generation detection for all APIs before regenerating:
+
+```bash
+for api in availability-api cat-search-api checkout-api crm-api eis-api inventory-api isa-api oms-api print-api wws-api; do
+  echo "Checking $api..."
+  # Run detection workflow for each
+done
+```
+
+Generate consolidated report across all APIs before committing.
+
+**Rollback Procedure:**
+
+```bash
+# If sync causes critical issues
+git checkout generated/swagger/[api-name]
+git clean -fd generated/swagger/[api-name]
+
+# Or restore from backup
+cp -r generated/swagger.backup.[timestamp]/* generated/swagger/
+```
+
+## Integration with Git Workflow
+
+**Recommended Commit Message:**
+
+```
+feat(api): sync [api-name] API client [TASK-####]
+
+Breaking changes:
+- Removed OrderResponse.deliveryDate (use estimatedDelivery)
+- Changed ProductResponse.price type (string → number)
+
+Compatible changes:
+- Added OrderResponse.estimatedDelivery
+- New endpoint GET /api/v2/orders/bulk
+```
+
+**Branch Strategy:**
+
+- Low impact: Commit to feature branch directly
+- Medium impact: Create `sync/[api-name]-[date]` branch
+- High impact: Create `migration/[api-name]-[version]` branch with migration guide
+
+## References
+
+- CLAUDE.md API Integration section
+- package.json swagger generation scripts
+- tools/fix-files.js for Unicode cleanup logic
+- Semantic Versioning: https://semver.org

.claude/skills/arch-docs/SKILL.md

@@ -0,0 +1,177 @@
+---
+name: arch-docs
+description: Generate architecture documentation (C4, Arc42, ADRs, PlantUML). Auto-invoke when user mentions "architecture docs", "C4 model", "ADR", "document architecture", "system design", or "create architecture diagram".
+---
+
+# Architecture Documentation
+
+Generate comprehensive architecture documentation using modern frameworks and best practices.
+
+## Available Frameworks
+
+### C4 Model
+Visualize software architecture at different abstraction levels.
+
+**Levels:**
+1. **Context** - System landscape and external actors
+2. **Container** - High-level technology choices (apps, databases, etc.)
+3. **Component** - Internal structure of containers
+4. **Code** - Class/module level detail (optional)
+
+**When to use:** Visualizing system architecture, creating diagrams for stakeholders at different technical levels.
+
+See `references/c4-model.md` for detailed patterns and examples.
+
+### Arc42 Template
+Comprehensive architecture documentation covering all aspects.
+
+**Sections:**
+1. Introduction and Goals
+2. Constraints
+3. Context and Scope
+4. Solution Strategy
+5. Building Block View
+6. Runtime View
+7. Deployment View
+8. Cross-cutting Concepts
+9. Architecture Decisions
+10. Quality Requirements
+11. Risks and Technical Debt
+12. Glossary
+
+**When to use:** Creating complete architecture documentation, documenting system-wide concerns, establishing quality goals.
+
+See `references/arc42.md` for complete template structure.
+
+### Architecture Decision Records (ADRs)
+Document individual architectural decisions with context and consequences.
+
+**When to use:** Recording significant decisions, documenting trade-offs, tracking architectural evolution.
+
+See `references/adr-template.md` for format and examples.
+
+## Workflow
+
+### 1. Discovery Phase
+Understand the system structure:
+
+```bash
+# Find existing architecture files
+find . -name "*architecture*" -o -name "*.puml" -o -name "*.mmd"
+
+# Identify service boundaries
+cat nx.json docker-compose.yml
+
+# Check for existing ADRs
+ls -la docs/adr/ docs/decisions/
+```
+
+### 2. Analysis Phase
+- Analyze codebase structure (`libs/`, `apps/`)
+- Identify dependencies from `tsconfig.base.json` paths
+- Review service boundaries from `project.json` tags
+- Map data flow from API definitions
+
+### 3. Documentation Phase
+Choose appropriate output format based on request:
+
+**For C4 diagrams:**
+```
+docs/architecture/
+├── c4-context.puml
+├── c4-container.puml
+└── c4-component-[name].puml
+```
+
+**For ADRs:**
+```
+docs/adr/
+├── 0001-record-architecture-decisions.md
+├── 0002-[decision-title].md
+└── template.md
+```
+
+**For Arc42:**
+```
+docs/architecture/
+└── arc42/
+    ├── 01-introduction.md
+    ├── 02-constraints.md
+    └── ...
+```
+
+## ISA-Frontend Context
+
+### Monorepo Structure
+- **apps/**: Angular applications
+- **libs/**: Shared libraries organized by domain
+  - `libs/[domain]/feature/` - Feature modules
+  - `libs/[domain]/data-access/` - State management
+  - `libs/[domain]/ui/` - Presentational components
+  - `libs/[domain]/util/` - Utilities
+
+### Key Architectural Patterns
+- **Nx Monorepo** with strict module boundaries
+- **NgRx Signal Store** for state management
+- **Standalone Components** (Angular 20+)
+- **Domain-Driven Design** library organization
+
+### Documentation Locations
+- ADRs: `docs/adr/`
+- Architecture diagrams: `docs/architecture/`
+- API documentation: Generated from Swagger/OpenAPI
+
+## Output Standards
+
+### PlantUML Format
+```plantuml
+@startuml C4_Context
+!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml
+
+Person(user, "User", "System user")
+System(system, "ISA System", "Main application")
+System_Ext(external, "External API", "Third-party service")
+
+Rel(user, system, "Uses")
+Rel(system, external, "Calls")
+@enduml
+```
+
+### Mermaid Format
+```mermaid
+graph TD
+    A[User] --> B[ISA App]
+    B --> C[API Gateway]
+    C --> D[Backend Services]
+```
+
+### ADR Format
+```markdown
+# ADR-XXXX: [Title]
+
+## Status
+[Proposed | Accepted | Deprecated | Superseded]
+
+## Context
+[What is the issue?]
+
+## Decision
+[What was decided?]
+
+## Consequences
+[What are the results?]
+```
+
+## Best Practices
+
+1. **Start with Context** - Always begin with C4 Level 1 (System Context)
+2. **Use Consistent Notation** - Stick to one diagramming tool/format
+3. **Keep ADRs Atomic** - One decision per ADR
+4. **Version Control** - Commit documentation with code changes
+5. **Review Regularly** - Architecture docs decay; schedule reviews
+
+## References
+
+- `references/c4-model.md` - C4 model patterns, templates, and ISA-Frontend domain structure
+- `references/arc42.md` - Complete Arc42 template with all 12 sections
+- `references/adr-template.md` - ADR format with examples and naming conventions

.claude/skills/arch-docs/references/adr-template.md

@@ -0,0 +1,213 @@
+# Architecture Decision Record (ADR) Template
+
+## Overview
+
+Architecture Decision Records document significant architectural decisions along with their context and consequences.
+
+## ADR Format
+
+### Standard Template
+
+```markdown
+# ADR-XXXX: [Short Title]
+
+## Status
+[Proposed | Accepted | Deprecated | Superseded by ADR-YYYY]
+
+## Date
+YYYY-MM-DD
+
+## Context
+What is the issue that we're seeing that is motivating this decision or change?
+
+## Decision
+What is the change that we're proposing and/or doing?
+
+## Consequences
+
+### Positive
+- Benefit 1
+- Benefit 2
+
+### Negative
+- Drawback 1
+- Drawback 2
+
+### Neutral
+- Side effect 1
+
+## Alternatives Considered
+
+### Option 1: [Name]
+- Pros: ...
+- Cons: ...
+- Why rejected: ...
+
+### Option 2: [Name]
+- Pros: ...
+- Cons: ...
+- Why rejected: ...
+
+## References
+- [Link to related documentation]
+- [Link to discussion thread]
+```
+
+## Example ADRs
+
+### ADR-0001: Use Nx Monorepo
+
+```markdown
+# ADR-0001: Use Nx Monorepo for Project Organization
+
+## Status
+Accepted
+
+## Date
+2024-01-15
+
+## Context
+The ISA Frontend consists of multiple applications and shared libraries. We need a way to:
+- Share code between applications
+- Maintain consistent tooling and dependencies
+- Enable efficient CI/CD with affected-based testing
+- Enforce architectural boundaries
+
+## Decision
+We will use Nx as our monorepo tool with the following structure:
+- `apps/` - Deployable applications
+- `libs/` - Shared libraries organized by domain and type
+
+## Consequences
+
+### Positive
+- Single version of dependencies across all projects
+- Affected-based testing reduces CI time
+- Consistent tooling (ESLint, Prettier, TypeScript)
+- Built-in dependency graph visualization
+
+### Negative
+- Learning curve for team members new to Nx
+- More complex initial setup
+- All code in single repository increases clone time
+
+### Neutral
+- Requires discipline in library boundaries
+- Need to maintain `project.json` and tags
+
+## Alternatives Considered
+
+### Polyrepo
+- Pros: Simpler individual repos, independent deployments
+- Cons: Dependency management nightmare, code duplication
+- Why rejected: Too much overhead for code sharing
+```
+
+### ADR-0002: Adopt NgRx Signal Store
+
+```markdown
+# ADR-0002: Adopt NgRx Signal Store for State Management
+
+## Status
+Accepted
+
+## Date
+2024-03-01
+
+## Context
+We need a state management solution that:
+- Integrates well with Angular signals
+- Provides predictable state updates
+- Supports devtools for debugging
+- Has good TypeScript support
+
+## Decision
+We will use NgRx Signal Store for new features and gradually migrate existing stores.
+
+## Consequences
+
+### Positive
+- Native signal integration
+- Simpler boilerplate than classic NgRx
+- Better performance with fine-grained reactivity
+- Excellent TypeScript inference
+
+### Negative
+- Migration effort for existing NgRx stores
+- Different patterns from classic NgRx
+
+### Neutral
+- Team needs to learn new API
+
+## Alternatives Considered
+
+### Classic NgRx (Store + Effects)
+- Pros: Mature, well-documented
+- Cons: Verbose boilerplate, doesn't leverage signals
+- Why rejected: Signal Store is the future direction
+
+### Akita
+- Pros: Less boilerplate
+- Cons: Not Angular-native, less community support
+- Why rejected: NgRx has better Angular integration
+```
+
+## ADR Naming Convention
+
+```
+docs/adr/
+├── 0000-adr-template.md          # Template file
+├── 0001-use-nx-monorepo.md
+├── 0002-adopt-ngrx-signal-store.md
+├── 0003-standalone-components.md
+└── README.md                      # Index of all ADRs
+```
+
+## ADR Index Template
+
+```markdown
+# Architecture Decision Records
+
+This directory contains Architecture Decision Records (ADRs) for the ISA Frontend.
+
+## Index
+
+| ADR | Title | Status | Date |
+|-----|-------|--------|------|
+| [0001](0001-use-nx-monorepo.md) | Use Nx Monorepo | Accepted | 2024-01-15 |
+| [0002](0002-adopt-ngrx-signal-store.md) | Adopt NgRx Signal Store | Accepted | 2024-03-01 |
+| [0003](0003-standalone-components.md) | Migrate to Standalone Components | Accepted | 2024-04-01 |
+
+## Process
+
+1. Copy `0000-adr-template.md` to `XXXX-short-title.md`
+2. Fill in the template
+3. Submit PR for review
+4. Update status once decided
+5. Update this index
+```
+
+## Best Practices
+
+1. **One decision per ADR** - Keep ADRs focused
+2. **Number sequentially** - Never reuse numbers
+3. **Record context** - Why was this needed?
+4. **Document alternatives** - Show what was considered
+5. **Keep concise** - 1-2 pages max
+6. **Update status** - Mark deprecated decisions
+7. **Link related ADRs** - Reference superseding decisions
+8. **Review regularly** - Quarterly ADR review meetings
+
+## When to Write an ADR
+
+Write an ADR when:
+- Choosing a framework or library
+- Defining code organization patterns
+- Setting up infrastructure
+- Establishing conventions
+- Making trade-offs that affect multiple teams
+
+Don't write an ADR for:
+- Small implementation details
+- Obvious choices with no alternatives
+- Temporary solutions

.claude/skills/arch-docs/references/arc42.md

@@ -0,0 +1,268 @@
+# Arc42 Architecture Documentation Template
+
+## Overview
+
+Arc42 is a template for architecture documentation with 12 sections covering all aspects of software architecture.
+
+## Template Structure
+
+### 1. Introduction and Goals
+
+```markdown
+# 1. Introduction and Goals
+
+## 1.1 Requirements Overview
+- Core business requirements driving the architecture
+- Key functional requirements
+- Quality goals and priorities
+
+## 1.2 Quality Goals
+| Priority | Quality Goal | Description |
+|----------|-------------|-------------|
+| 1 | Performance | < 200ms response time |
+| 2 | Usability | Intuitive for store employees |
+| 3 | Reliability | 99.9% uptime during store hours |
+
+## 1.3 Stakeholders
+| Role | Expectations |
+|------|-------------|
+| Store Employee | Fast, reliable daily operations |
+| IT Operations | Easy deployment and monitoring |
+| Development Team | Maintainable, testable code |
+```
+
+### 2. Architecture Constraints
+
+```markdown
+# 2. Architecture Constraints
+
+## 2.1 Technical Constraints
+| Constraint | Background |
+|------------|------------|
+| Angular 20+ | Company standard frontend framework |
+| TypeScript strict | Type safety requirement |
+| Browser support | Chrome 90+, Edge 90+ |
+
+## 2.2 Organizational Constraints
+| Constraint | Background |
+|------------|------------|
+| Monorepo | Nx-based shared codebase |
+| CI/CD | Azure DevOps pipelines |
+| Code review | All changes require PR approval |
+
+## 2.3 Conventions
+- Conventional commits
+- ESLint/Prettier formatting
+- Component-driven development
+```
+
+### 3. System Scope and Context
+
+```markdown
+# 3. System Scope and Context
+
+## 3.1 Business Context
+[C4 Level 1 - System Context Diagram]
+
+| Neighbor | Description |
+|----------|-------------|
+| Store Employee | Primary user performing daily operations |
+| Backend APIs | Provides business logic and data |
+| Printer Service | Label and receipt printing |
+
+## 3.2 Technical Context
+[Deployment/Network Diagram]
+
+| Interface | Protocol | Description |
+|-----------|----------|-------------|
+| REST API | HTTPS/JSON | Backend communication |
+| WebSocket | WSS | Real-time updates |
+| OAuth2 | HTTPS | Authentication |
+```
+
+### 4. Solution Strategy
+
+```markdown
+# 4. Solution Strategy
+
+## Key Architectural Decisions
+
+| Decision | Rationale |
+|----------|-----------|
+| Angular SPA | Rich interactive UI, offline capability |
+| NgRx Signal Store | Predictable state management |
+| Nx Monorepo | Code sharing, consistent tooling |
+| Standalone Components | Better tree-shaking, simpler imports |
+
+## Quality Achievement Strategies
+
+| Quality Goal | Approach |
+|--------------|----------|
+| Performance | Lazy loading, caching, code splitting |
+| Maintainability | Domain-driven library structure |
+| Testability | Component isolation, dependency injection |
+```
+
+### 5. Building Block View
+
+```markdown
+# 5. Building Block View
+
+## Level 1: Application Overview
+[C4 Container Diagram]
+
+## Level 2: Domain Decomposition
+| Domain | Purpose | Libraries |
+|--------|---------|-----------|
+| CRM | Customer management | crm-feature-*, crm-data-access-* |
+| OMS | Order management | oms-feature-*, oms-data-access-* |
+| Checkout | Transactions | checkout-feature-*, checkout-data-access-* |
+
+## Level 3: Feature Details
+[C4 Component Diagrams per domain]
+```
+
+### 6. Runtime View
+
+```markdown
+# 6. Runtime View
+
+## Scenario 1: User Login
+```mermaid
+sequenceDiagram
+    User->>App: Open application
+    App->>Auth: Redirect to login
+    Auth->>App: Return token
+    App->>API: Fetch user profile
+    API->>App: User data
+    App->>User: Display dashboard
+```
+
+## Scenario 2: Order Processing
+[Sequence diagram for order flow]
+```
+
+### 7. Deployment View
+
+```markdown
+# 7. Deployment View
+
+## Infrastructure
+```mermaid
+graph TD
+    CDN[CDN] --> Browser[User Browser]
+    Browser --> LB[Load Balancer]
+    LB --> API[API Gateway]
+    API --> Services[Backend Services]
+```
+
+## Environments
+| Environment | URL | Purpose |
+|-------------|-----|---------|
+| Development | dev.isa.local | Local development |
+| Staging | staging.isa.com | Integration testing |
+| Production | isa.com | Live system |
+```
+
+### 8. Cross-cutting Concepts
+
+```markdown
+# 8. Cross-cutting Concepts
+
+## 8.1 Domain Model
+[Domain entity relationships]
+
+## 8.2 Security
+- Authentication: OAuth2/OIDC
+- Authorization: Role-based access control
+- Data protection: HTTPS, encrypted storage
+
+## 8.3 Error Handling
+- Global error interceptor
+- User-friendly error messages
+- Error logging to backend
+
+## 8.4 Logging
+- @isa/core/logging library
+- Structured log format
+- Log levels: trace, debug, info, warn, error
+```
+
+### 9. Architecture Decisions
+
+```markdown
+# 9. Architecture Decisions
+
+See [ADR folder](../adr/) for detailed decision records.
+
+## Key Decisions
+- ADR-0001: Use Nx Monorepo
+- ADR-0002: Adopt NgRx Signal Store
+- ADR-0003: Migrate to Standalone Components
+```
+
+### 10. Quality Requirements
+
+```markdown
+# 10. Quality Requirements
+
+## Quality Tree
+```
+Quality
+├── Performance
+│   ├── Response Time < 200ms
+│   └── Time to Interactive < 3s
+├── Reliability
+│   ├── Uptime 99.9%
+│   └── Graceful degradation
+└── Maintainability
+    ├── Test coverage > 80%
+    └── Clear module boundaries
+```
+
+## Quality Scenarios
+| Scenario | Measure | Target |
+|----------|---------|--------|
+| Page load | Time to interactive | < 3s |
+| API call | Response time | < 200ms |
+| Build | CI pipeline duration | < 10min |
+```
+
+### 11. Risks and Technical Debt
+
+```markdown
+# 11. Risks and Technical Debt
+
+## Identified Risks
+| Risk | Probability | Impact | Mitigation |
+|------|-------------|--------|------------|
+| Backend unavailable | Medium | High | Offline mode |
+| Performance degradation | Low | Medium | Monitoring |
+
+## Technical Debt
+| Item | Priority | Effort |
+|------|----------|--------|
+| Legacy Jest tests | Medium | High |
+| Any types in codebase | High | Medium |
+```
+
+### 12. Glossary
+
+```markdown
+# 12. Glossary
+
+| Term | Definition |
+|------|------------|
+| ADR | Architecture Decision Record |
+| C4 | Context, Container, Component, Code model |
+| ISA | In-Store Application |
+| SPA | Single Page Application |
+```
+
+## Best Practices
+
+1. **Start with sections 1-4** - Goals, constraints, context, strategy
+2. **Add diagrams to section 5** - Building block views
+3. **Document decisions in section 9** - Link to ADRs
+4. **Keep updated** - Review quarterly
+5. **Use templates** - Consistent formatting

.claude/skills/arch-docs/references/c4-model.md

@@ -0,0 +1,163 @@
+# C4 Model Reference
+
+## Overview
+
+The C4 model provides a way to visualize software architecture at four levels of abstraction:
+1. **Context** - System landscape
+2. **Container** - Applications and data stores
+3. **Component** - Internal structure
+4. **Code** - Class/module detail (optional)
+
+## Level 1: System Context Diagram
+
+Shows the system under design and its relationships with users and external systems.
+
+### PlantUML Template
+```plantuml
+@startuml C4_Context
+!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml
+
+LAYOUT_WITH_LEGEND()
+
+title System Context Diagram - ISA Frontend
+
+Person(user, "Store Employee", "Uses the ISA application")
+Person(admin, "Administrator", "Manages system configuration")
+
+System(isa, "ISA Frontend", "Angular application for in-store operations")
+
+System_Ext(backend, "ISA Backend", "REST API services")
+System_Ext(auth, "Auth Provider", "Authentication service")
+System_Ext(printer, "Printer Service", "Receipt/label printing")
+
+Rel(user, isa, "Uses", "Browser")
+Rel(admin, isa, "Configures", "Browser")
+Rel(isa, backend, "API calls", "HTTPS/JSON")
+Rel(isa, auth, "Authenticates", "OAuth2")
+Rel(isa, printer, "Prints", "WebSocket")
+
+@enduml
+```
+
+### Key Elements
+- **Person**: Human users of the system
+- **System**: The system being documented (highlighted)
+- **System_Ext**: External systems the system depends on
+- **Rel**: Relationships between elements
+
+## Level 2: Container Diagram
+
+Shows the high-level technology choices and how containers communicate.
+
+### PlantUML Template
+```plantuml
+@startuml C4_Container
+!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml
+
+LAYOUT_WITH_LEGEND()
+
+title Container Diagram - ISA Frontend
+
+Person(user, "Store Employee")
+
+System_Boundary(isa, "ISA Frontend") {
+    Container(spa, "SPA", "Angular 20", "Single-page application")
+    Container(pwa, "Service Worker", "Workbox", "Offline capability")
+    ContainerDb(storage, "Local Storage", "IndexedDB", "Offline data cache")
+}
+
+System_Ext(api, "ISA API Gateway")
+System_Ext(cdn, "CDN", "Static assets")
+
+Rel(user, spa, "Uses", "Browser")
+Rel(spa, pwa, "Registers")
+Rel(pwa, storage, "Caches data")
+Rel(spa, api, "API calls", "REST/JSON")
+Rel(spa, cdn, "Loads assets", "HTTPS")
+
+@enduml
+```
+
+### Container Types
+- **Container**: Application or service
+- **ContainerDb**: Database or data store
+- **ContainerQueue**: Message queue
+
+## Level 3: Component Diagram
+
+Shows the internal structure of a container.
+
+### PlantUML Template
+```plantuml
+@startuml C4_Component
+!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Component.puml
+
+LAYOUT_WITH_LEGEND()
+
+title Component Diagram - OMS Feature Module
+
+Container_Boundary(oms, "OMS Feature") {
+    Component(list, "Order List", "Angular Component", "Displays orders")
+    Component(detail, "Order Detail", "Angular Component", "Order management")
+    Component(store, "Order Store", "NgRx Signal Store", "State management")
+    Component(api, "Order API Service", "Angular Service", "API communication")
+}
+
+ContainerDb_Ext(backend, "OMS Backend API")
+
+Rel(list, store, "Reads state")
+Rel(detail, store, "Reads/writes state")
+Rel(store, api, "Fetches data")
+Rel(api, backend, "HTTP requests")
+
+@enduml
+```
+
+## ISA-Frontend Domain Components
+
+### Suggested Component Structure
+
+```
+libs/[domain]/
+├── feature/           → Component diagrams
+│   └── [feature]/
+├── data-access/       → Store/API components
+│   └── [store]/
+├── ui/                → Presentational components
+│   └── [component]/
+└── util/              → Utility components
+    └── [util]/
+```
+
+### Domain Boundaries
+- **CRM**: Customer management, loyalty
+- **OMS**: Order management, returns
+- **Checkout**: Payment, transactions
+- **Remission**: Product returns processing
+- **Catalogue**: Product information
+
+## Mermaid Alternative
+
+```mermaid
+C4Context
+    title System Context - ISA Frontend
+
+    Person(user, "Store Employee", "Daily operations")
+
+    System(isa, "ISA Frontend", "Angular SPA")
+
+    System_Ext(backend, "Backend Services")
+    System_Ext(auth, "Auth Service")
+
+    Rel(user, isa, "Uses")
+    Rel(isa, backend, "API calls")
+    Rel(isa, auth, "Authenticates")
+```
+
+## Best Practices
+
+1. **One diagram per level** - Don't mix abstraction levels
+2. **Consistent naming** - Use same names across diagrams
+3. **Show key relationships** - Not every possible connection
+4. **Include legends** - Explain notation
+5. **Keep it simple** - 5-20 elements per diagram max

.claude/skills/architecture-enforcer/SKILL.md

@@ -1,208 +0,0 @@
----
-name: architecture-enforcer
-description: This skill should be used when validating import boundaries and architectural rules in the ISA-Frontend monorepo. It checks for circular dependencies, layer violations (Feature→Feature), domain violations (OMS→Remission), and relative imports. Use this skill when the user wants to check architecture, mentions "validate boundaries", "check imports", or needs dependency analysis.
----
-
-# Architecture Enforcer
-
-## Overview
-
-Validate and enforce architectural boundaries in the monorepo. Checks import rules, detects violations, generates dependency graphs, and suggests refactoring.
-
-## When to Use This Skill
-
-Invoke when user wants to:
-- Validate import boundaries
-- Check architectural rules
-- Find dependency violations
-- Mentioned "check architecture" or "validate imports"
-
-## Architectural Rules
-
-**✅ Allowed:**
-- Feature → Data Access
-- Feature → UI
-- Feature → Util
-- Data Access → Util
-
-**❌ Forbidden:**
-- Feature → Feature
-- Data Access → Feature
-- UI → Feature
-- Cross-domain (OMS ↔ Remission)
-
-## Enforcement Workflow
-
-### Step 1: Run Nx Dependency Checks
-
-```bash
-# Lint all (includes boundary checks)
-npx nx run-many --target=lint --all
-
-# Or specific library
-npx nx lint [library-name]
-```
-
-### Step 2: Generate Dependency Graph
-
-```bash
-# Visual graph
-npx nx graph
-
-# Focus on specific project
-npx nx graph --focus=[library-name]
-
-# Affected projects
-npx nx affected:graph
-```
-
-### Step 3: Scan for Violations
-
-**Check for Circular Dependencies:**
-Use `Explore` agent to find A→B→A patterns.
-
-**Check Layer Violations:**
-```bash
-# Find feature-to-feature imports
-grep -r "from '@isa/[^/]*/feature" libs/*/feature/ --include="*.ts"
-```
-
-**Check Relative Imports:**
-```bash
-# Should use path aliases, not relative
-grep -r "from '\.\./\.\./\.\." libs/ --include="*.ts"
-```
-
-**Check Direct Swagger Imports:**
-```bash
-# Should go through data-access
-grep -r "from '@generated/swagger" libs/*/feature/ --include="*.ts"
-```
-
-### Step 4: Categorize Violations
-
-**🔴 Critical:**
-- Circular dependencies
-- Feature → Feature
-- Data Access → Feature
-- Cross-domain dependencies
-
-**⚠️ Warnings:**
-- Relative imports (should use aliases)
-- Missing tags in project.json
-- Deep import paths
-
-**ℹ️ Info:**
-- Potential shared utilities
-
-### Step 5: Generate Violation Report
-
-For each violation:
-```
-📍 libs/oms/feature/return-search/src/lib/component.ts:12
-🔴 Layer Violation
-❌ Feature importing from another feature
-
-Import: import { OrderList } from '@isa/oms/feature-order-list';
-Issue: Feature libraries should not depend on other features
-Fix: Move shared component to @isa/shared/* or @isa/ui/*
-```
-
-### Step 6: Suggest Refactoring
-
-**For repeated patterns:**
-- Create shared library for common components
-- Extract shared utilities to util library
-- Move API clients to data-access layer
-- Create facade services
-
-### Step 7: Visualize Problems
-
-```bash
-npx nx graph --focus=[problematic-library]
-```
-
-### Step 8: Generate Report
-
-```
-Import Boundary Analysis
-========================
-
-Scope: [All | Specific library]
-
-📊 Summary
-----------
-Total violations: XX
-🔴 Critical: XX
-⚠️ Warnings: XX
-ℹ️ Info: XX
-
-🔍 Violations by Type
----------------------
-Layer violations: XX
-Domain violations: XX
-Circular dependencies: XX
-Path alias violations: XX
-
-🔴 Critical Violations
-----------------------
-1. [File:Line]
-   Issue: Feature → Feature dependency
-   Fix: Extract to @isa/shared/component-name
-
-2. [File:Line]
-   Issue: Circular dependency
-   Fix: Extract interface to util library
-
-💡 Refactoring Recommendations
--------------------------------
-1. Create @isa/shared/order-components
-   - Move: [list of shared components]
-   - Benefits: Reusable, breaks circular deps
-
-2. Extract interfaces to @isa/oms/util
-   - Move: [list of interfaces]
-   - Benefits: Breaks circular dependencies
-
-📈 Dependency Graph
--------------------
-npx nx graph --focus=[library]
-
-🎯 Next Steps
--------------
-1. Fix critical violations
-2. Update ESLint config
-3. Refactor shared components
-4. Re-run: architecture-enforcer
-```
-
-## Common Fixes
-
-**Circular Dependencies:**
-```typescript
-// Extract shared interface to util
-// @isa/oms/util
-export interface OrderId { id: string; }
-
-// Both services import from util
-import { OrderId } from '@isa/oms/util';
-```
-
-**Layer Violations:**
-```typescript
-// Move shared component from feature to ui
-// Before: @isa/oms/feature-shared
-// After: @isa/ui/order-components
-```
-
-**Path Alias Usage:**
-```typescript
-// BEFORE: import { Service } from '../../../data-access/src/lib/service';
-// AFTER: import { Service } from '@isa/oms/data-access';
-```
-
-## References
-
-- CLAUDE.md Architecture section
-- Nx enforce-module-boundaries: https://nx.dev/nx-api/eslint-plugin/documents/enforce-module-boundaries
-- tsconfig.base.json (path aliases)

.claude/skills/architecture-validator/SKILL.md

@@ -0,0 +1,590 @@
+---
+name: architecture-validator
+description: This skill should be used when validating architecture compliance, checking import boundaries, detecting circular dependencies, finding layer violations (Feature→Feature), or user mentions "check architecture", "validate boundaries", "circular dependencies", "dependency cycles". Validates architectural rules, detects cycles using graph analysis, and provides fix strategies for the ISA-Frontend monorepo.
+---
+
+# Architecture Validator
+
+## Overview
+
+Validate and enforce architectural boundaries in the ISA-Frontend monorepo. Detects import boundary violations, circular dependencies, layer violations, and cross-domain dependencies. Provides automated fix strategies using graph analysis, dependency injection, interface extraction, and shared code refactoring.
+
+## Architectural Rules
+
+**Allowed Dependencies:**
+- Feature → Data Access
+- Feature → UI
+- Feature → Util
+- Data Access → Util
+
+**Forbidden Dependencies:**
+- Feature → Feature
+- Data Access → Feature
+- UI → Feature
+- Cross-domain (OMS ↔ Remission)
+
+**Severity Levels:**
+
+🔴 **Critical (Must Fix):**
+- Circular dependencies in services/data-access
+- Feature → Feature dependencies
+- Data Access → Feature dependencies
+- Cross-domain violations
+
+⚠️ **Warning (Should Fix):**
+- Component-to-component cycles
+- Relative import paths (should use aliases)
+- Missing architectural tags in project.json
+- Deep import paths
+
+ℹ️ **Info (Review):**
+- Type-only circular references (may be acceptable)
+- Potential shared utilities
+- Test file circular imports
+
+## Validation Workflow
+
+### Step 1: Run Automated Checks
+
+**Nx Dependency Validation:**
+```bash
+# Lint all projects (includes boundary checks)
+npx nx run-many --target=lint --all
+
+# Or specific library
+npx nx lint [library-name]
+
+# Check for circular dependency warnings
+npx nx run-many --target=lint --all 2>&1 | grep -i "circular"
+```
+
+**TypeScript Compilation Check:**
+```bash
+# Detect cycles through compilation
+npx tsc --noEmit --strict 2>&1 | grep -i "circular\|cycle"
+```
+
+**Madge Analysis (if installed):**
+```bash
+# Install globally if needed
+npm install -g madge
+
+# Detect circular dependencies
+madge --circular --extensions ts libs/
+
+# Generate visual dependency graph
+madge --circular --image circular-deps.svg libs/
+```
+
+### Step 2: Generate Dependency Graph
+
+```bash
+# Visual interactive graph
+npx nx graph
+
+# Focus on specific problematic project
+npx nx graph --focus=[library-name]
+
+# Show only affected projects
+npx nx affected:graph
+```
+
+### Step 3: Scan for Specific Violations
+
+**Feature-to-Feature Imports:**
+```bash
+grep -r "from '@isa/[^/]*/feature" libs/*/feature/ --include="*.ts"
+```
+
+**Relative Import Paths:**
+```bash
+# Should use path aliases, not relative paths
+grep -r "from '\.\./\.\./\.\." libs/ --include="*.ts"
+```
+
+**Direct Swagger Imports in Features:**
+```bash
+# Features should go through data-access layer
+grep -r "from '@generated/swagger" libs/*/feature/ --include="*.ts"
+```
+
+**Cross-Domain Imports:**
+```bash
+# OMS should not import from Remission and vice versa
+grep -r "from '@isa/remission" libs/oms/ --include="*.ts"
+grep -r "from '@isa/oms" libs/remission/ --include="*.ts"
+```
+
+### Step 4: Analyze Each Violation
+
+For each detected issue, categorize and document:
+
+```
+📍 Violation Location
+libs/oms/feature-return-search/src/lib/component.ts:12
+
+🔴 Violation Type: Feature → Feature Layer Violation
+
+Import Statement:
+import { OrderList } from '@isa/oms/feature-order-list';
+
+Issue Analysis:
+Feature libraries should not depend on other features.
+This creates tight coupling and prevents independent deployment.
+
+Cycle Path (if circular):
+1. libs/oms/data-access/src/lib/services/order.service.ts
+   → imports OrderValidator
+2. libs/oms/data-access/src/lib/validators/order.validator.ts
+   → imports OrderService
+3. Back to order.service.ts (CYCLE)
+
+Severity: 🔴 Critical
+Files Involved: 2
+```
+
+### Step 5: Choose Fix Strategy
+
+**Strategy 1: Extract to Shared Library**
+
+Best for: Components, utilities, or types used across multiple features
+
+```typescript
+// BEFORE (Violation)
+// @isa/oms/feature-return-search imports from @isa/oms/feature-order-list
+import { OrderList } from '@isa/oms/feature-order-list';
+
+// AFTER (Fixed)
+// Create @isa/ui/order-components or @isa/oms/ui-order
+export { OrderList } from './order-list.component';
+
+// Both features now import from shared UI library
+import { OrderList } from '@isa/ui/order-components';
+```
+
+**Strategy 2: Interface Extraction**
+
+Best for: Breaking circular dependencies with type-only references
+
+```typescript
+// BEFORE (Circular: order.ts ↔ customer.ts)
+// order.ts
+import { Customer } from './customer';
+export class Order {
+  customer: Customer;
+}
+
+// customer.ts
+import { Order } from './order';
+export class Customer {
+  orders: Order[];
+}
+
+// AFTER (Fixed)
+// Create order.interface.ts
+export interface IOrder {
+  id: string;
+  customerId: string;
+}
+
+// Create customer.interface.ts
+export interface ICustomer {
+  id: string;
+  orderIds: string[];
+}
+
+// order.ts imports only ICustomer
+import { ICustomer } from './customer.interface';
+export class Order implements IOrder {
+  customer: ICustomer;
+}
+
+// customer.ts imports only IOrder
+import { IOrder } from './order.interface';
+export class Customer implements ICustomer {
+  orders: IOrder[];
+}
+```
+
+**Strategy 3: Dependency Injection (Lazy Loading)**
+
+Best for: Service circular dependencies where both need each other
+
+```typescript
+// BEFORE (Circular)
+import { ServiceB } from './service-b';
+export class ServiceA {
+  constructor(private serviceB: ServiceB) {}
+}
+
+// AFTER (Fixed)
+import { Injector } from '@angular/core';
+import type { ServiceB } from './service-b'; // type-only import
+
+export class ServiceA {
+  private serviceB!: ServiceB;
+
+  constructor(private injector: Injector) {
+    // Lazy injection breaks the cycle
+    setTimeout(() => {
+      this.serviceB = this.injector.get(ServiceB);
+    });
+  }
+}
+```
+
+**Strategy 4: Extract to Util Library**
+
+Best for: Shared types, interfaces, constants, or pure functions
+
+```typescript
+// BEFORE (Circular)
+// order.service.ts imports validator.ts
+// validator.ts imports order.service.ts
+
+// AFTER (Fixed)
+// Create @isa/oms/util/order-types.ts
+export interface OrderData {
+  id: string;
+  amount: number;
+}
+
+export const ORDER_STATUS = {
+  PENDING: 'pending',
+  COMPLETED: 'completed'
+} as const;
+
+// order.service.ts imports types
+import { OrderData, ORDER_STATUS } from '@isa/oms/util/order-types';
+
+// validator.ts imports types
+import { OrderData } from '@isa/oms/util/order-types';
+
+// No more cycle
+```
+
+**Strategy 5: Forward References (Angular Components)**
+
+Best for: Angular component circular references
+
+```typescript
+// Use forwardRef for components
+import { forwardRef } from '@angular/core';
+
+@Component({
+  selector: 'parent-component',
+  standalone: true,
+  imports: [forwardRef(() => ChildComponent)]
+})
+export class ParentComponent {}
+```
+
+**Strategy 6: Move to Data Access Layer**
+
+Best for: Features directly importing API clients
+
+```typescript
+// BEFORE (Violation)
+// Feature directly imports Swagger client
+import { OrderApi } from '@generated/swagger/oms';
+
+// AFTER (Fixed)
+// Create data-access service
+// @isa/oms/data-access/order-data.service.ts
+@Injectable({ providedIn: 'root' })
+export class OrderDataService {
+  private api = inject(OrderApi);
+
+  loadOrders() {
+    return this.api.getOrders();
+  }
+}
+
+// Feature imports data-access
+import { OrderDataService } from '@isa/oms/data-access';
+```
+
+### Step 6: Implement Fixes
+
+Apply chosen strategy:
+
+1. Create new files if needed (util library, interfaces, shared components)
+2. Update imports in all affected files
+3. Remove circular or violating imports
+4. Update architectural tags in project.json if needed
+5. Document the refactoring decision
+
+### Step 7: Validate Fixes
+
+Run complete validation suite:
+
+```bash
+# Check cycles resolved
+madge --circular --extensions ts libs/
+
+# TypeScript compilation
+npx tsc --noEmit
+
+# Run affected tests
+npx nx affected:test --skip-nx-cache
+
+# Lint affected projects
+npx nx affected:lint
+
+# Visual verification
+npx nx graph --focus=[fixed-library]
+```
+
+### Step 8: Generate Comprehensive Report
+
+```
+Architecture Validation Report
+==============================
+
+Analysis Date: [timestamp]
+Scope: [All | Specific library | Affected projects]
+
+📊 Executive Summary
+--------------------
+Total violations: XX
+🔴 Critical: XX (must fix)
+⚠️ Warning: XX (should fix)
+ℹ️ Info: XX (review)
+
+Fixed: XX/XX
+Remaining: XX
+
+🔍 Violations by Category
+-------------------------
+Layer violations: XX
+  - Feature → Feature: XX
+  - Data Access → Feature: XX
+  - UI → Feature: XX
+
+Circular dependencies: XX
+  - Service cycles: XX
+  - Component cycles: XX
+  - Model cycles: XX
+
+Import violations: XX
+  - Relative imports: XX
+  - Direct Swagger imports: XX
+  - Deep import paths: XX
+
+Domain violations: XX
+  - OMS ↔ Remission: XX
+
+🔴 Critical Violations
+----------------------
+
+1. Feature → Feature Dependency
+   📍 libs/oms/feature-return-search/src/lib/component.ts:12
+   ❌ import { OrderList } from '@isa/oms/feature-order-list'
+
+   Issue: Feature libraries should not depend on other features
+   Impact: Creates tight coupling, prevents independent deployment
+
+   Fix Strategy: Extract to Shared UI Library
+   Action: Create @isa/ui/order-components
+   Files to Move: OrderList, OrderDetails (2 components)
+   Effort: ~30 minutes
+   Status: ✅ FIXED
+
+2. Circular Dependency (Service Layer)
+   📍 Cycle detected in data-access layer
+
+   Path:
+   1. libs/oms/data-access/src/lib/services/order.service.ts:8
+      → imports OrderValidator
+   2. libs/oms/data-access/src/lib/validators/order.validator.ts:15
+      → imports OrderService
+   3. Back to order.service.ts (CYCLE COMPLETES)
+
+   Issue: Service circular reference prevents proper initialization
+   Impact: Runtime errors, initialization failures
+
+   Fix Strategy: Extract to Util Library
+   Action: Create @isa/oms/util/order-types.ts
+   Move: OrderData interface, ORDER_STATUS constants
+   Effort: ~15 minutes
+   Status: ✅ FIXED
+
+⚠️ Warnings
+-----------
+
+1. Relative Import Paths
+   📍 libs/oms/feature-order/src/lib/component.ts:5
+   ❌ import { Service } from '../../../data-access/src/lib/service'
+   ✅ import { Service } from '@isa/oms/data-access'
+
+   Count: 12 occurrences
+   Fix: Replace with path aliases from tsconfig.base.json
+   Status: 🔄 IN PROGRESS
+
+💡 Fix Strategies Applied
+--------------------------
+Strategy                    | Count | Success Rate
+----------------------------|-------|-------------
+Extract to Shared Library   | 3     | 100%
+Interface Extraction        | 2     | 100%
+Extract to Util Library     | 4     | 100%
+Dependency Injection        | 1     | 100%
+Move to Data Access        | 2     | 100%
+
+📈 Dependency Graph Analysis
+-----------------------------
+Before: XX dependencies (YY violations)
+After:  XX dependencies (ZZ violations)
+Improvement: XX% reduction in violations
+
+View graph: npx nx graph --focus=[library]
+
+✅ Validation Results
+---------------------
+- Madge check: ✅ No circular dependencies
+- TypeScript:  ✅ Compilation successful
+- Tests:       ✅ 125/125 passing
+- Lint:        ✅ All projects passing
+- Nx graph:    ✅ No forbidden dependencies
+
+🎯 Remaining Work
+-----------------
+1. Fix XX relative import warnings
+2. Add architectural tags to XX libraries
+3. Review XX type-only circular references
+
+🛡️ Prevention Recommendations
+------------------------------
+1. Enable ESLint rule: import/no-cycle
+2. Add pre-commit hook for cycle detection
+3. Regular architecture reviews (monthly)
+4. Update onboarding docs with architecture rules
+5. Create library scaffolder with proper tags
+
+📚 Architecture Documentation
+------------------------------
+- Nx boundaries: https://nx.dev/nx-api/eslint-plugin/documents/enforce-module-boundaries
+- ISA-Frontend architecture: docs/architecture.md
+- Path aliases: tsconfig.base.json
+- Library reference: docs/library-reference.md
+```
+
+## Prevention Strategies
+
+### ESLint Configuration
+
+Add to `.eslintrc.json`:
+
+```json
+{
+  "rules": {
+    "import/no-cycle": ["error", { "maxDepth": 1 }],
+    "@nx/enforce-module-boundaries": [
+      "error",
+      {
+        "enforceBuildableLibDependency": true,
+        "allow": [],
+        "depConstraints": [
+          {
+            "sourceTag": "type:feature",
+            "onlyDependOnLibsWithTags": [
+              "type:data-access",
+              "type:ui",
+              "type:util"
+            ]
+          }
+        ]
+      }
+    ]
+  }
+}
+```
+
+### Pre-commit Hook
+
+Create `.husky/pre-commit`:
+
+```bash
+#!/bin/bash
+
+echo "🔍 Checking for circular dependencies..."
+madge --circular --extensions ts libs/
+
+if [ $? -ne 0 ]; then
+  echo "❌ Circular dependencies detected"
+  echo "Run 'npx nx run architecture-validator' to fix"
+  exit 1
+fi
+
+echo "✅ No circular dependencies found"
+```
+
+### Nx Project Tags
+
+Ensure all libraries have proper tags in `project.json`:
+
+```json
+{
+  "tags": [
+    "domain:oms",
+    "type:feature"
+  ]
+}
+```
+
+## Common Patterns and Solutions
+
+### Pattern: Shared Components Between Features
+
+**Problem:** Multiple features need the same component
+
+**Solution:** Create shared UI library
+```bash
+npx nx g @nx/angular:library ui/order-components \
+  --directory=libs/ui/order-components \
+  --tags=type:ui,scope:shared
+```
+
+### Pattern: Service Mutual Dependency
+
+**Problem:** ServiceA needs ServiceB, ServiceB needs ServiceA
+
+**Solution:** Use lazy injection with Injector or extract shared interface
+
+### Pattern: Type Circular Reference
+
+**Problem:** Model A references Model B, Model B references Model A
+
+**Solution:** Extract interfaces to separate files, use type-only imports
+
+### Pattern: Feature Needs API Client
+
+**Problem:** Feature directly imports Swagger-generated client
+
+**Solution:** Create data-access service as abstraction layer
+
+## Tool Reference
+
+**Nx Commands:**
+- `npx nx graph` - Visual dependency graph
+- `npx nx lint [project]` - Lint with boundary checks
+- `npx nx affected:graph` - Show affected projects
+
+**Madge Commands:**
+- `madge --circular --extensions ts libs/` - Detect cycles
+- `madge --image graph.svg libs/` - Generate visual graph
+- `madge --json libs/ > deps.json` - Export dependency data
+
+**Grep Patterns:**
+- Feature→Feature: `grep -r "from '@isa/[^/]*/feature" libs/*/feature/`
+- Relative imports: `grep -r "from '\.\./\.\./\.\." libs/`
+- Swagger direct: `grep -r "from '@generated/swagger" libs/*/feature/`
+
+## References
+
+- Nx enforce-module-boundaries: https://nx.dev/nx-api/eslint-plugin/documents/enforce-module-boundaries
+- Madge circular dependency detection: https://github.com/pahen/madge
+- ESLint import plugin: https://github.com/import-js/eslint-plugin-import
+- CLAUDE.md Architecture section
+- ISA-Frontend architecture docs: docs/architecture.md
+- Path aliases configuration: tsconfig.base.json

.claude/skills/circular-dependency-resolver/SKILL.md

@@ -1,249 +0,0 @@
----
-name: circular-dependency-resolver
-description: This skill should be used when detecting and resolving circular dependencies in the ISA-Frontend monorepo. It uses graph algorithms to find A→B→C→A cycles, categorizes by severity, provides multiple fix strategies (DI, interface extraction, shared code), and validates fixes. Use this skill when the user mentions "circular dependencies", "dependency cycles", or has build/runtime issues from circular imports.
----
-
-# Circular Dependency Resolver
-
-## Overview
-
-Detect and resolve circular dependencies using graph analysis, multiple fix strategies, and automated validation. Prevents runtime and build issues caused by dependency cycles.
-
-## When to Use This Skill
-
-Invoke when user:
-- Mentions "circular dependencies"
-- Has import cycle errors
-- Requests dependency analysis
-- Build fails with circular import warnings
-
-## Resolution Workflow
-
-### Step 1: Detect Circular Dependencies
-
-**Using Nx:**
-```bash
-npx nx run-many --target=lint --all 2>&1 | grep -i "circular"
-```
-
-**Using madge (if installed):**
-```bash
-npm install -g madge
-madge --circular --extensions ts libs/
-madge --circular --image circular-deps.svg libs/
-```
-
-**Using TypeScript:**
-```bash
-npx tsc --noEmit --strict 2>&1 | grep -i "circular\|cycle"
-```
-
-### Step 2: Analyze Each Cycle
-
-For each cycle found:
-```
-📍 Circular Dependency Detected
-
-Cycle Path:
-1. libs/oms/data-access/src/lib/services/order.service.ts
-   → imports OrderValidator
-2. libs/oms/data-access/src/lib/validators/order.validator.ts
-   → imports OrderService
-3. Back to order.service.ts
-
-Type: Service-Validator circular reference
-Severity: 🔴 Critical
-Files Involved: 2
-```
-
-### Step 3: Categorize by Severity
-
-**🔴 Critical (Must Fix):**
-- Service-to-service cycles
-- Data-access layer cycles
-- Store dependencies creating cycles
-
-**⚠️ Warning (Should Fix):**
-- Component-to-component cycles
-- Model cross-references
-- Utility function cycles
-
-**ℹ️ Info (Review):**
-- Type-only circular references (may be acceptable)
-- Test file circular imports
-
-### Step 4: Choose Fix Strategy
-
-**Strategy 1: Extract to Shared Utility**
-```typescript
-// BEFORE (Circular)
-// order.service.ts imports validator.ts
-// validator.ts imports order.service.ts
-
-// AFTER (Fixed)
-// Create @isa/oms/util/types.ts
-export interface OrderData { id: string; }
-
-// order.service.ts imports types
-// validator.ts imports types
-// No more cycle
-```
-
-**Strategy 2: Dependency Injection (Lazy)**
-```typescript
-// BEFORE
-import { ServiceB } from './service-b';
-export class ServiceA {
-  constructor(private serviceB: ServiceB) {}
-}
-
-// AFTER
-import { Injector } from '@angular/core';
-export class ServiceA {
-  private serviceB!: ServiceB;
-
-  constructor(private injector: Injector) {
-    setTimeout(() => {
-      this.serviceB = this.injector.get(ServiceB);
-    });
-  }
-}
-```
-
-**Strategy 3: Interface Extraction**
-```typescript
-// BEFORE (Models with circular reference)
-// order.ts ↔ customer.ts
-
-// AFTER
-// order.interface.ts - no imports
-export interface IOrder { customerId: string; }
-
-// customer.interface.ts - no imports
-export interface ICustomer { orderIds: string[]; }
-
-// order.ts imports only ICustomer
-// customer.ts imports only IOrder
-```
-
-**Strategy 4: Move Shared Code**
-```typescript
-// BEFORE
-// feature-a imports feature-b
-// feature-b imports feature-a
-
-// AFTER
-// Extract to @isa/shared/[name]
-// Both features import from shared
-```
-
-**Strategy 5: Forward References (Angular)**
-```typescript
-// Use forwardRef for components
-import { forwardRef } from '@angular/core';
-
-@Component({
-  imports: [forwardRef(() => ChildComponent)]
-})
-```
-
-### Step 5: Implement Fix
-
-Apply chosen strategy:
-1. Create new files if needed (util library, interfaces)
-2. Update imports in both files
-3. Remove circular import
-
-### Step 6: Validate Fix
-
-```bash
-# Check cycle resolved
-madge --circular --extensions ts libs/
-
-# TypeScript compilation
-npx tsc --noEmit
-
-# Run tests
-npx nx affected:test --skip-nx-cache
-
-# Lint
-npx nx affected:lint
-```
-
-### Step 7: Generate Report
-
-```
-Circular Dependency Resolution
-===============================
-
-Analysis Date: [timestamp]
-
-📊 Summary
-----------
-Circular dependencies found: XX
-🔴 Critical: XX
-⚠️ Warning: XX
-Fixed: XX
-
-🔍 Detected Cycles
-------------------
-
-🔴 Critical Cycle #1 (FIXED)
-Path: order.service → validator → order.service
-Strategy Used: Extract to Util Library
-Created: @isa/oms/util/order-types.ts
-Files Modified: 2
-Status: ✅ Resolved
-
-⚠️ Warning Cycle #2 (FIXED)
-Path: component-a → component-b → component-a
-Strategy Used: Move Shared to @isa/ui
-Created: @isa/ui/shared-component
-Files Modified: 3
-Status: ✅ Resolved
-
-💡 Fix Strategies Applied
---------------------------
-1. Extract to Util: XX cycles
-2. Interface Extraction: XX cycles
-3. Move Shared Code: XX cycles
-4. Dependency Injection: XX cycles
-
-✅ Validation
--------------
-- madge check: ✅ No cycles
-- TypeScript: ✅ Compiles
-- Tests: ✅ XX/XX passing
-- Lint: ✅ Passed
-
-🎯 Prevention Tips
-------------------
-1. Add ESLint rule: import/no-cycle
-2. Pre-commit hook for cycle detection
-3. Regular architecture reviews
-```
-
-## Prevention
-
-**ESLint Configuration:**
-```json
-{
-  "import/no-cycle": ["error", { "maxDepth": 1 }]
-}
-```
-
-**Pre-commit Hook:**
-```bash
-#!/bin/bash
-madge --circular --extensions ts libs/
-if [ $? -ne 0 ]; then
-  echo "❌ Circular dependencies detected"
-  exit 1
-fi
-```
-
-## References
-
-- Madge: https://github.com/pahen/madge
-- Nx dependency graph: https://nx.dev/features/explore-graph
-- ESLint import plugin: https://github.com/import-js/eslint-plugin-import

.claude/skills/css-animations/SKILL.md

@@ -0,0 +1,381 @@
+---
+name: css-animations
+description: This skill should be used when writing or reviewing CSS animations in Angular components. Use when creating entrance/exit animations, implementing @keyframes instead of @angular/animations, applying timing functions and fill modes, creating staggered animations, or ensuring GPU-accelerated performance. Essential for modern Angular 20+ components using animate.enter/animate.leave directives and converting legacy Angular animations to native CSS.
+---
+
+# CSS Animations
+
+## Overview
+
+Implement native CSS @keyframes animations for Angular applications, replacing @angular/animations with GPU-accelerated, zero-bundle-size alternatives. This skill provides comprehensive guidance on creating performant entrance/exit animations, staggered effects, and proper timing configurations.
+
+## Quick Start
+
+### Basic Animation Setup
+
+1. **Define @keyframes** in component CSS:
+```css
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+```
+
+2. **Apply animation** to element:
+```css
+.element {
+  animation: fadeIn 0.3s ease-out;
+}
+```
+
+3. **Use with Angular 20+ directives**:
+```html
+@if (visible()) {
+  <div animate.enter="fade-in" animate.leave="fade-out">
+    Content
+  </div>
+}
+```
+
+### Common Pitfall: Element Snaps Back
+
+**Problem:** Element returns to original state after animation completes.
+
+**Solution:** Add `forwards` fill mode:
+```css
+.element {
+  animation: fadeOut 1s forwards;
+}
+```
+
+### Common Pitfall: Animation Conflicts with State Transitions
+
+**Problem:** Entrance animation overrides initial state transforms (e.g., stacked cards appear unstacked then jump).
+
+**Solution:** Animate only properties that don't conflict with state. Use opacity-only animations when transforms are state-driven:
+```css
+/* BAD: Overrides stacked transform */
+@keyframes cardEntrance {
+  from { transform: translateY(20px); opacity: 0; }
+  to { transform: translateY(0); opacity: 1; }
+}
+
+/* GOOD: Only animates opacity, allows state transforms to apply */
+@keyframes cardEntrance {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+```
+
+## Core Principles
+
+### 1. GPU-Accelerated Properties Only
+
+**Always use** for animations:
+- `transform` (translate, rotate, scale)
+- `opacity`
+
+**Avoid animating** (triggers layout recalculation):
+- `width`, `height`
+- `top`, `left`, `right`, `bottom`
+- `margin`, `padding`
+- `font-size`
+
+### 2. Fill Modes
+
+| Fill Mode | Behavior | Use Case |
+|-----------|----------|----------|
+| `forwards` | Keep end state | Exit animations (stay invisible) |
+| `backwards` | Apply start state during delay | Entrance with delay (prevent flash) |
+| `both` | Both of above | Complex sequences |
+
+### 3. Timing Functions
+
+Choose appropriate easing for animation type:
+
+```css
+/* Entrance animations - ease-out (fast start, slow end) */
+animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
+
+/* Exit animations - ease-in (slow start, fast end) */
+animation-timing-function: cubic-bezier(0.42, 0, 1, 1);
+
+/* Bouncy overshoot effect */
+animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
+```
+
+Tool: [cubic-bezier.com](https://cubic-bezier.com) for custom curves.
+
+### 4. Staggered Animations
+
+Create cascading effects using CSS custom properties:
+
+**Template:**
+```html
+@for (item of items(); track item.id; let idx = $index) {
+  <div [style.--i]="idx" class="stagger-item">
+    {{ item.name }}
+  </div>
+}
+```
+
+**CSS:**
+```css
+.stagger-item {
+  animation: fadeSlideIn 0.5s ease-out backwards;
+  animation-delay: calc(var(--i, 0) * 100ms);
+}
+```
+
+### 5. Accessibility
+
+Always respect reduced motion preferences:
+
+```css
+@media (prefers-reduced-motion: reduce) {
+  .animated {
+    animation: none;
+    /* Or use simpler, faster animation */
+    animation-duration: 0.1s;
+  }
+}
+```
+
+## Common Animation Patterns
+
+### Fade Entrance/Exit
+
+```css
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes fadeOut {
+  from { opacity: 1; }
+  to { opacity: 0; }
+}
+
+.fade-in { animation: fadeIn 0.3s ease-out; }
+.fade-out { animation: fadeOut 0.3s ease-in forwards; }
+```
+
+### Slide Entrance
+
+```css
+@keyframes slideInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.slide-in-up { animation: slideInUp 0.3s ease-out; }
+```
+
+### Scale Entrance
+
+```css
+@keyframes scaleIn {
+  from {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.scale-in { animation: scaleIn 0.2s ease-out; }
+```
+
+### Loading Spinner
+
+```css
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+.spinner {
+  width: 40px;
+  height: 40px;
+  border: 3px solid #f3f3f3;
+  border-top: 3px solid #3498db;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+```
+
+### Shake (Error Feedback)
+
+```css
+@keyframes shake {
+  0%, 100% { transform: translateX(0); }
+  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
+  20%, 40%, 60%, 80% { transform: translateX(5px); }
+}
+
+.error-input {
+  animation: shake 0.5s ease-in-out;
+}
+```
+
+## Angular 20+ Integration
+
+### Basic Usage with animate.enter/animate.leave
+
+```typescript
+@Component({
+  template: `
+    @if (show()) {
+      <div animate.enter="fade-in" animate.leave="fade-out">
+        Content
+      </div>
+    }
+  `,
+  styles: [`
+    .fade-in { animation: fadeIn 0.3s ease-out; }
+    .fade-out { animation: fadeOut 0.3s ease-in forwards; }
+
+    @keyframes fadeIn {
+      from { opacity: 0; }
+      to { opacity: 1; }
+    }
+
+    @keyframes fadeOut {
+      from { opacity: 1; }
+      to { opacity: 0; }
+    }
+  `]
+})
+```
+
+### Dynamic Animation Classes
+
+```typescript
+@Component({
+  template: `
+    @if (show()) {
+      <div [animate.enter]="enterAnim()" [animate.leave]="leaveAnim()">
+        Content
+      </div>
+    }
+  `
+})
+export class DynamicAnimComponent {
+  show = signal(false);
+  enterAnim = signal('slide-in-up');
+  leaveAnim = signal('slide-out-down');
+}
+```
+
+## Debugging Animations
+
+### Common Issues
+
+| Problem | Cause | Solution |
+|---------|-------|----------|
+| Animation doesn't run | Missing duration | Add `animation-duration: 0.3s` |
+| Element snaps back | No fill mode | Add `animation-fill-mode: forwards` |
+| Wrong starting position during delay | No backwards fill | Add `animation-fill-mode: backwards` |
+| Choppy animation | Animating layout properties | Use `transform` instead |
+| State conflict (jump/snap) | Animation overrides state transforms | Animate only opacity, not transform |
+
+### Browser DevTools
+
+- **Chrome DevTools** → More Tools → Animations panel
+- **Firefox DevTools** → Inspector → Animations tab
+
+### Animation Events
+
+```typescript
+element.addEventListener('animationend', (e) => {
+  console.log('Animation completed:', e.animationName);
+  // Clean up, remove element, etc.
+});
+```
+
+## Migration from @angular/animations
+
+### Before (Angular Animations)
+
+```typescript
+import { trigger, state, style, transition, animate } from '@angular/animations';
+
+@Component({
+  animations: [
+    trigger('fadeIn', [
+      transition(':enter', [
+        style({ opacity: 0 }),
+        animate('300ms ease-out', style({ opacity: 1 }))
+      ])
+    ])
+  ]
+})
+```
+
+### After (CSS @keyframes)
+
+```typescript
+@Component({
+  template: `
+    @if (show()) {
+      <div animate.enter="fade-in">Content</div>
+    }
+  `,
+  styles: [`
+    .fade-in { animation: fadeIn 0.3s ease-out; }
+
+    @keyframes fadeIn {
+      from { opacity: 0; }
+      to { opacity: 1; }
+    }
+  `]
+})
+```
+
+**Benefits:**
+- Zero JavaScript bundle size (~60KB savings)
+- GPU hardware acceleration
+- Standard CSS (transferable skills)
+- Better performance
+
+## Resources
+
+### references/keyframes-guide.md
+
+Comprehensive deep-dive covering:
+- Complete @keyframes syntax reference
+- Detailed timing functions and cubic-bezier curves
+- Advanced techniques (direction, play-state, @starting-style)
+- Performance optimization strategies
+- Extensive common patterns library
+- Debugging techniques and troubleshooting
+
+**When to reference:** Complex animation requirements, custom easing curves, advanced techniques, performance optimization, or learning comprehensive details.
+
+### assets/animations.css
+
+Ready-to-use CSS file with common animation patterns:
+- Fade animations (in/out)
+- Slide animations (up/down/left/right)
+- Scale animations (in/out)
+- Utility animations (spin, shimmer, shake, breathe, attention-pulse)
+- Toast/notification animations
+- Accessibility (@media prefers-reduced-motion)
+
+**Usage:** Copy this file to project and import in component styles or global styles:
+
+```css
+@import 'path/to/animations.css';
+```
+
+Then use classes directly:
+```html
+<div animate.enter="fade-in" animate.leave="slide-out-down">
+```

.claude/skills/css-animations/assets/animations.css

@@ -0,0 +1,278 @@
+/**
+ * Reusable CSS @keyframes Animations
+ *
+ * Common animation patterns for Angular applications.
+ * Import this file in your component styles or global styles.
+ */
+
+/* ============================================
+   FADE ANIMATIONS
+   ============================================ */
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes fadeOut {
+  from { opacity: 1; }
+  to { opacity: 0; }
+}
+
+.fade-in {
+  animation: fadeIn 0.3s ease-out;
+}
+
+.fade-out {
+  animation: fadeOut 0.3s ease-in;
+}
+
+/* ============================================
+   SLIDE ANIMATIONS
+   ============================================ */
+
+@keyframes slideInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideOutDown {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+}
+
+@keyframes slideInDown {
+  from {
+    opacity: 0;
+    transform: translateY(-20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideOutUp {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(-20px);
+  }
+}
+
+@keyframes slideInLeft {
+  from {
+    opacity: 0;
+    transform: translateX(-20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes slideOutLeft {
+  from {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(-20px);
+  }
+}
+
+@keyframes slideInRight {
+  from {
+    opacity: 0;
+    transform: translateX(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes slideOutRight {
+  from {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(20px);
+  }
+}
+
+.slide-in-up { animation: slideInUp 0.3s ease-out; }
+.slide-out-down { animation: slideOutDown 0.3s ease-in; }
+.slide-in-down { animation: slideInDown 0.3s ease-out; }
+.slide-out-up { animation: slideOutUp 0.3s ease-in; }
+.slide-in-left { animation: slideInLeft 0.3s ease-out; }
+.slide-out-left { animation: slideOutLeft 0.3s ease-in; }
+.slide-in-right { animation: slideInRight 0.3s ease-out; }
+.slide-out-right { animation: slideOutRight 0.3s ease-in; }
+
+/* ============================================
+   SCALE ANIMATIONS
+   ============================================ */
+
+@keyframes scaleIn {
+  from {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes scaleOut {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+}
+
+.scale-in { animation: scaleIn 0.2s ease-out; }
+.scale-out { animation: scaleOut 0.2s ease-in; }
+
+/* ============================================
+   UTILITY ANIMATIONS
+   ============================================ */
+
+/* Loading Spinner */
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+.spin {
+  animation: spin 1s linear infinite;
+}
+
+/* Skeleton Loading */
+@keyframes shimmer {
+  0% { background-position: -200% 0; }
+  100% { background-position: 200% 0; }
+}
+
+.shimmer {
+  background: linear-gradient(
+    90deg,
+    #f0f0f0 25%,
+    #e0e0e0 50%,
+    #f0f0f0 75%
+  );
+  background-size: 200% 100%;
+  animation: shimmer 1.5s infinite;
+}
+
+/* Attention Pulse */
+@keyframes attention-pulse {
+  0%, 100% {
+    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.5);
+  }
+  50% {
+    box-shadow: 0 0 0 10px rgba(59, 130, 246, 0);
+  }
+}
+
+.attention-pulse {
+  animation: attention-pulse 2s ease-in-out infinite;
+}
+
+/* Shake (Error Feedback) */
+@keyframes shake {
+  0%, 100% { transform: translateX(0); }
+  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
+  20%, 40%, 60%, 80% { transform: translateX(5px); }
+}
+
+.shake {
+  animation: shake 0.5s ease-in-out;
+}
+
+/* Breathing/Pulsing */
+@keyframes breathe {
+  0%, 100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.7;
+    transform: scale(1.05);
+  }
+}
+
+.breathe {
+  animation: breathe 2s ease-in-out infinite;
+}
+
+/* ============================================
+   TOAST/NOTIFICATION ANIMATIONS
+   ============================================ */
+
+@keyframes toastIn {
+  from {
+    opacity: 0;
+    transform: translateY(100%) scale(0.9);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+@keyframes toastOut {
+  from {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(100%) scale(0.9);
+  }
+}
+
+.toast-in {
+  animation: toastIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+.toast-out {
+  animation: toastOut 0.2s ease-in forwards;
+}
+
+/* ============================================
+   ACCESSIBILITY
+   ============================================ */
+
+/* Respect user's motion preferences */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}

.claude/skills/css-animations/references/keyframes-guide.md

@@ -0,0 +1,833 @@
+# CSS @keyframes Deep Dive
+
+A comprehensive guide for Angular developers transitioning from `@angular/animations` to native CSS animations.
+
+---
+
+## Table of Contents
+
+1. [Understanding @keyframes](#understanding-keyframes)
+2. [Basic Syntax](#basic-syntax)
+3. [Animation Properties](#animation-properties)
+4. [Timing Functions (Easing)](#timing-functions-easing)
+5. [Fill Modes](#fill-modes)
+6. [Advanced Techniques](#advanced-techniques)
+7. [Angular 20+ Integration](#angular-20-integration)
+8. [Common Patterns & Recipes](#common-patterns--recipes)
+9. [Performance Tips](#performance-tips)
+10. [Debugging Animations](#debugging-animations)
+
+---
+
+## Understanding @keyframes
+
+The `@keyframes` at-rule controls the intermediate steps in a CSS animation sequence by defining styles for keyframes (waypoints) along the animation. Unlike transitions (which only animate between two states), keyframes let you define multiple intermediate steps.
+
+### How It Differs from @angular/animations
+
+| @angular/animations | Native CSS @keyframes |
+|---------------------|----------------------|
+| ~60KB JavaScript bundle | Zero JS overhead |
+| CPU-based rendering | GPU hardware acceleration |
+| Angular-specific syntax | Standard CSS (transferable skills) |
+| `trigger()`, `state()`, `animate()` | `@keyframes` + CSS classes |
+
+---
+
+## Basic Syntax
+
+### The @keyframes Rule
+
+```css
+@keyframes animation-name {
+  from {
+    /* Starting styles (same as 0%) */
+  }
+  to {
+    /* Ending styles (same as 100%) */
+  }
+}
+```
+
+### Percentage-Based Keyframes
+
+For more control, use percentages to define multiple waypoints:
+
+```css
+@keyframes bounce {
+  0% {
+    transform: translateY(0);
+  }
+  25% {
+    transform: translateY(-30px);
+  }
+  50% {
+    transform: translateY(0);
+  }
+  75% {
+    transform: translateY(-15px);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}
+```
+
+### Combining Multiple Percentages
+
+You can apply the same styles to multiple keyframes:
+
+```css
+@keyframes pulse {
+  0%, 100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.7;
+    transform: scale(1.05);
+  }
+}
+```
+
+### Applying the Animation
+
+```css
+.element {
+  animation: bounce 1s ease-in-out infinite;
+}
+```
+
+---
+
+## Animation Properties
+
+### Individual Properties
+
+| Property | Description | Example |
+|----------|-------------|---------|
+| `animation-name` | Name of the @keyframes | `animation-name: bounce;` |
+| `animation-duration` | How long one cycle takes | `animation-duration: 2s;` |
+| `animation-timing-function` | Speed curve (easing) | `animation-timing-function: ease-in;` |
+| `animation-delay` | Wait before starting | `animation-delay: 500ms;` |
+| `animation-iteration-count` | How many times to run | `animation-iteration-count: 3;` or `infinite` |
+| `animation-direction` | Forward, reverse, or alternate | `animation-direction: alternate;` |
+| `animation-fill-mode` | Styles before/after animation | `animation-fill-mode: forwards;` |
+| `animation-play-state` | Pause or play | `animation-play-state: paused;` |
+
+### Shorthand Syntax
+
+```css
+/* animation: name duration timing-function delay iteration-count direction fill-mode play-state */
+.element {
+  animation: slideIn 0.5s ease-out 0.2s 1 normal forwards running;
+}
+```
+
+**Minimum required:** name and duration
+
+```css
+.element {
+  animation: fadeIn 1s;
+}
+```
+
+### Multiple Animations
+
+Apply multiple animations to a single element:
+
+```css
+.element {
+  animation:
+    fadeIn 0.5s ease-out,
+    slideUp 0.5s ease-out,
+    pulse 2s ease-in-out 0.5s infinite;
+}
+```
+
+---
+
+## Timing Functions (Easing)
+
+The timing function controls how the animation progresses over time—where it speeds up and slows down.
+
+### Keyword Values
+
+| Keyword | Cubic-Bezier Equivalent | Description |
+|---------|------------------------|-------------|
+| `linear` | `cubic-bezier(0, 0, 1, 1)` | Constant speed |
+| `ease` | `cubic-bezier(0.25, 0.1, 0.25, 1)` | Default: slow start, fast middle, slow end |
+| `ease-in` | `cubic-bezier(0.42, 0, 1, 1)` | Slow start, fast end |
+| `ease-out` | `cubic-bezier(0, 0, 0.58, 1)` | Fast start, slow end |
+| `ease-in-out` | `cubic-bezier(0.42, 0, 0.58, 1)` | Slow start and end |
+
+### Custom Cubic-Bezier
+
+Create custom easing curves with `cubic-bezier(x1, y1, x2, y2)`:
+
+```css
+/* Bouncy overshoot effect */
+.element {
+  animation-timing-function: cubic-bezier(0.68, -0.6, 0.32, 1.6);
+}
+
+/* Smooth deceleration */
+.element {
+  animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
+}
+```
+
+**Tool:** Use [cubic-bezier.com](https://cubic-bezier.com) to visualize and create custom curves.
+
+### Popular Easing Functions
+
+```css
+/* Ease Out Quart - Great for enter animations */
+cubic-bezier(0.25, 1, 0.5, 1)
+
+/* Ease In Out Cubic - Smooth state changes */
+cubic-bezier(0.65, 0, 0.35, 1)
+
+/* Ease Out Back - Slight overshoot */
+cubic-bezier(0.34, 1.56, 0.64, 1)
+
+/* Ease In Out Back - Overshoot both ends */
+cubic-bezier(0.68, -0.6, 0.32, 1.6)
+```
+
+### Steps Function
+
+For frame-by-frame animations (like sprite sheets):
+
+```css
+/* 6 discrete steps */
+.sprite {
+  animation: walk 1s steps(6) infinite;
+}
+
+/* Step positions */
+steps(4, jump-start)  /* Jump at start of each interval */
+steps(4, jump-end)    /* Jump at end of each interval (default) */
+steps(4, jump-both)   /* Jump at both ends */
+steps(4, jump-none)   /* No jump at ends */
+```
+
+### Timing Function Per Keyframe
+
+Apply different easing to different segments:
+
+```css
+@keyframes complexMove {
+  0% {
+    transform: translateX(0);
+    animation-timing-function: ease-out;
+  }
+  50% {
+    transform: translateX(100px);
+    animation-timing-function: ease-in;
+  }
+  100% {
+    transform: translateX(200px);
+  }
+}
+```
+
+**Important:** The timing function applies to each step individually, not the entire animation.
+
+---
+
+## Fill Modes
+
+Fill modes control what styles apply before and after the animation runs.
+
+### Values
+
+| Value | Before Animation | After Animation |
+|-------|-----------------|-----------------|
+| `none` | Original styles | Original styles |
+| `forwards` | Original styles | **Last keyframe styles** |
+| `backwards` | **First keyframe styles** | Original styles |
+| `both` | **First keyframe styles** | **Last keyframe styles** |
+
+### Common Problem: Element Snaps Back
+
+```css
+/* BAD: Element disappears then reappears after animation */
+@keyframes fadeOut {
+  from { opacity: 1; }
+  to { opacity: 0; }
+}
+
+.element {
+  animation: fadeOut 1s; /* Element snaps back to opacity: 1 */
+}
+
+/* GOOD: Element stays invisible */
+.element {
+  animation: fadeOut 1s forwards;
+}
+```
+
+### Backwards Fill Mode (for delays)
+
+```css
+@keyframes slideIn {
+  from {
+    transform: translateX(-100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+/* Without backwards: element visible at original position during delay */
+/* With backwards: element starts at first keyframe position during delay */
+.element {
+  animation: slideIn 0.5s ease-out 1s backwards;
+}
+```
+
+---
+
+## Advanced Techniques
+
+### Animation Direction
+
+Control playback direction:
+
+```css
+animation-direction: normal;           /* 0% → 100% */
+animation-direction: reverse;          /* 100% → 0% */
+animation-direction: alternate;        /* 0% → 100% → 0% */
+animation-direction: alternate-reverse; /* 100% → 0% → 100% */
+```
+
+**Use Case:** Breathing/pulsing effects
+
+```css
+@keyframes breathe {
+  from { transform: scale(1); }
+  to { transform: scale(1.1); }
+}
+
+.element {
+  animation: breathe 2s ease-in-out infinite alternate;
+}
+```
+
+### Staggered Animations
+
+Create cascading effects with animation-delay:
+
+```css
+.item { animation: fadeSlideIn 0.5s ease-out backwards; }
+.item:nth-child(1) { animation-delay: 0ms; }
+.item:nth-child(2) { animation-delay: 100ms; }
+.item:nth-child(3) { animation-delay: 200ms; }
+.item:nth-child(4) { animation-delay: 300ms; }
+
+/* Or use CSS custom properties */
+.item {
+  animation: fadeSlideIn 0.5s ease-out backwards;
+  animation-delay: calc(var(--i, 0) * 100ms);
+}
+```
+
+In your template:
+
+```html
+<div class="item" style="--i: 0">First</div>
+<div class="item" style="--i: 1">Second</div>
+<div class="item" style="--i: 2">Third</div>
+```
+
+### @starting-style (Modern CSS)
+
+Define styles for when an element first enters the DOM:
+
+```css
+.modal {
+  opacity: 1;
+  transform: scale(1);
+  transition: opacity 0.3s, transform 0.3s;
+
+  @starting-style {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+}
+```
+
+### Animating Auto Height
+
+Use CSS Grid for height: auto animations:
+
+```css
+.accordion-content {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows 0.3s ease-out;
+}
+
+.accordion-content.open {
+  grid-template-rows: 1fr;
+}
+
+.accordion-content > div {
+  overflow: hidden;
+}
+```
+
+### Pause/Play with CSS
+
+```css
+.element {
+  animation: spin 2s linear infinite;
+  animation-play-state: running;
+}
+
+.element:hover {
+  animation-play-state: paused;
+}
+
+/* Or with a class */
+.element.paused {
+  animation-play-state: paused;
+}
+```
+
+---
+
+## Angular 20+ Integration
+
+### Using animate.enter and animate.leave
+
+Angular 20.2+ provides `animate.enter` and `animate.leave` to apply CSS classes when elements enter/leave the DOM.
+
+```typescript
+@Component({
+  selector: 'app-example',
+  template: `
+    @if (isVisible()) {
+      <div animate.enter="fade-in" animate.leave="fade-out">
+        Content here
+      </div>
+    }
+    <button (click)="toggle()">Toggle</button>
+  `,
+  styles: [`
+    .fade-in {
+      animation: fadeIn 0.3s ease-out;
+    }
+
+    .fade-out {
+      animation: fadeOut 0.3s ease-in;
+    }
+
+    @keyframes fadeIn {
+      from { opacity: 0; }
+      to { opacity: 1; }
+    }
+
+    @keyframes fadeOut {
+      from { opacity: 1; }
+      to { opacity: 0; }
+    }
+  `]
+})
+export class ExampleComponent {
+  isVisible = signal(false);
+  toggle() { this.isVisible.update(v => !v); }
+}
+```
+
+### Dynamic Animation Classes
+
+```typescript
+@Component({
+  template: `
+    @if (show()) {
+      <div [animate.enter]="enterAnimation()" [animate.leave]="leaveAnimation()">
+        Dynamic animations!
+      </div>
+    }
+  `
+})
+export class DynamicAnimComponent {
+  show = signal(false);
+  enterAnimation = signal('slide-in-right');
+  leaveAnimation = signal('slide-out-left');
+}
+```
+
+### Reusable Animation CSS File
+
+Create a shared `animations.css`:
+
+```css
+/* animations.css */
+
+/* Fade animations */
+.fade-in { animation: fadeIn 0.3s ease-out; }
+.fade-out { animation: fadeOut 0.3s ease-in; }
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes fadeOut {
+  from { opacity: 1; }
+  to { opacity: 0; }
+}
+
+/* Slide animations */
+.slide-in-up { animation: slideInUp 0.3s ease-out; }
+.slide-out-down { animation: slideOutDown 0.3s ease-in; }
+
+@keyframes slideInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideOutDown {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+}
+
+/* Scale animations */
+.scale-in { animation: scaleIn 0.2s ease-out; }
+.scale-out { animation: scaleOut 0.2s ease-in; }
+
+@keyframes scaleIn {
+  from {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes scaleOut {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+}
+```
+
+Import in `styles.css` or `angular.json`:
+
+```css
+@import 'animations.css';
+```
+
+---
+
+## Common Patterns & Recipes
+
+### Loading Spinner
+
+```css
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+.spinner {
+  width: 40px;
+  height: 40px;
+  border: 3px solid #f3f3f3;
+  border-top: 3px solid #3498db;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+```
+
+### Skeleton Loading
+
+```css
+@keyframes shimmer {
+  0% { background-position: -200% 0; }
+  100% { background-position: 200% 0; }
+}
+
+.skeleton {
+  background: linear-gradient(
+    90deg,
+    #f0f0f0 25%,
+    #e0e0e0 50%,
+    #f0f0f0 75%
+  );
+  background-size: 200% 100%;
+  animation: shimmer 1.5s infinite;
+}
+```
+
+### Attention Pulse
+
+```css
+@keyframes attention-pulse {
+  0%, 100% {
+    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.5);
+  }
+  50% {
+    box-shadow: 0 0 0 10px rgba(59, 130, 246, 0);
+  }
+}
+
+.notification-badge {
+  animation: attention-pulse 2s ease-in-out infinite;
+}
+```
+
+### Shake (Error Feedback)
+
+```css
+@keyframes shake {
+  0%, 100% { transform: translateX(0); }
+  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
+  20%, 40%, 60%, 80% { transform: translateX(5px); }
+}
+
+.error-input {
+  animation: shake 0.5s ease-in-out;
+}
+```
+
+### Slide Down Menu
+
+```css
+@keyframes slideDown {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.dropdown-menu {
+  animation: slideDown 0.2s ease-out forwards;
+}
+```
+
+### Toast Notification
+
+```css
+@keyframes toastIn {
+  from {
+    opacity: 0;
+    transform: translateY(100%) scale(0.9);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+@keyframes toastOut {
+  from {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(100%) scale(0.9);
+  }
+}
+
+.toast {
+  animation: toastIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+.toast.leaving {
+  animation: toastOut 0.2s ease-in forwards;
+}
+```
+
+---
+
+## Performance Tips
+
+### Use Transform and Opacity
+
+These properties are GPU-accelerated and don't trigger layout:
+
+```css
+/* GOOD - GPU accelerated */
+@keyframes good {
+  from { transform: translateX(0); opacity: 0; }
+  to { transform: translateX(100px); opacity: 1; }
+}
+
+/* AVOID - Triggers layout recalculation */
+@keyframes avoid {
+  from { left: 0; width: 100px; }
+  to { left: 100px; width: 200px; }
+}
+```
+
+### Use will-change Sparingly
+
+```css
+.element {
+  will-change: transform, opacity;
+}
+
+/* Remove after animation */
+.element.animation-complete {
+  will-change: auto;
+}
+```
+
+### Respect Reduced Motion
+
+```css
+@keyframes fadeSlide {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.element {
+  animation: fadeSlide 0.3s ease-out;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .element {
+    animation: none;
+    /* Or use a simpler fade */
+    animation: fadeIn 0.1s ease-out;
+  }
+}
+```
+
+### Avoid Animating Layout Properties
+
+Properties that trigger layout (reflow):
+
+- `width`, `height`
+- `top`, `left`, `right`, `bottom`
+- `margin`, `padding`
+- `font-size`
+- `border-width`
+
+Use `transform: scale()` instead of `width/height` when possible.
+
+---
+
+## Debugging Animations
+
+### Browser DevTools
+
+1. **Chrome DevTools** → More Tools → Animations
+   - Pause, slow down, or step through animations
+   - Inspect timing curves
+
+2. **Firefox** → Inspector → Animations tab
+   - Visual timeline of all animations
+
+### Force Slow Motion
+
+```css
+/* Temporarily add to debug */
+* {
+  animation-duration: 3s !important;
+}
+```
+
+### Animation Events in JavaScript
+
+```typescript
+element.addEventListener('animationstart', (e) => {
+  console.log('Started:', e.animationName);
+});
+
+element.addEventListener('animationend', (e) => {
+  console.log('Ended:', e.animationName);
+  // Clean up class, remove element, etc.
+});
+
+element.addEventListener('animationiteration', (e) => {
+  console.log('Iteration:', e.animationName);
+});
+```
+
+### Common Issues
+
+| Problem | Solution |
+|---------|----------|
+| Animation not running | Check `animation-duration` is > 0 |
+| Element snaps back | Add `animation-fill-mode: forwards` |
+| Animation starts wrong | Use `animation-fill-mode: backwards` with delay |
+| Choppy animation | Use `transform` instead of layout properties |
+| Animation restarts on state change | Ensure Angular doesn't recreate the element |
+
+---
+
+## Quick Reference Card
+
+```css
+/* Basic setup */
+@keyframes name {
+  from { /* start */ }
+  to { /* end */ }
+}
+
+.element {
+  animation: name 0.3s ease-out forwards;
+}
+
+/* Angular 20+ */
+<div animate.enter="fade-in" animate.leave="fade-out">
+
+/* Shorthand order */
+animation: name duration timing delay count direction fill-mode state;
+
+/* Common timing functions */
+ease-out: cubic-bezier(0, 0, 0.58, 1)      /* Enter animations */
+ease-in: cubic-bezier(0.42, 0, 1, 1)       /* Exit animations */
+ease-in-out: cubic-bezier(0.42, 0, 0.58, 1) /* State changes */
+
+/* Fill modes */
+forwards  → Keep end state
+backwards → Apply start state during delay
+both      → Both of the above
+```
+
+---
+
+## Resources
+
+- [MDN CSS Animations Guide](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animations/Using_CSS_animations)
+- [Angular Animation Migration Guide](https://angular.dev/guide/animations/migration)
+- [Cubic Bezier Tool](https://cubic-bezier.com)
+- [Easing Functions Cheat Sheet](https://easings.net)
+- [Josh W. Comeau's Keyframe Guide](https://www.joshwcomeau.com/animation/keyframe-animations/)

.claude/skills/git-workflow/SKILL.md

@@ -1,352 +1,352 @@
----
-name: git-workflow
-description: Enforces ISA-Frontend project Git workflow conventions including branch naming, conventional commits, and PR creation against develop branch
----
-
-# Git Workflow Skill
-
-Enforces Git workflow conventions specific to the ISA-Frontend project.
-
-## When to Use
-
-- Creating new branches for features or bugfixes
-- Writing commit messages
-- Creating pull requests
-- Any Git operations requiring adherence to project conventions
-
-## Core Principles
-
-### 1. Default Branch is `develop` (NOT `main`)
-
-- **All PRs target**: `develop` branch
-- **Feature branches from**: `develop`
-- **Never push directly to**: `develop` or `main`
-
-### 2. Branch Naming Convention
-
-**Format**: `<type>/{task-id}-{short-description}`
-
-**Types**:
-- `feature/` - New features or enhancements
-- `bugfix/` - Bug fixes
-- `hotfix/` - Emergency production fixes
-
-**Rules**:
-- Use English kebab-case for descriptions
-- Start with task/issue ID (e.g., `5391`)
-- Keep description concise - shorten if too long
-- Use hyphens to separate words
-
-**Examples**:
-```bash
-# Good
-feature/5391-praemie-checkout-action-card-delivery-order
-bugfix/6123-fix-login-redirect-loop
-hotfix/7890-critical-payment-error
-
-# Bad
-feature/praemie-checkout  # Missing task ID
-feature/5391_praemie      # Using underscores
-feature-5391-very-long-description-that-goes-on-forever  # Too long
-```
-
-### 3. Conventional Commits (WITHOUT Co-Author Tags)
-
-**Format**: `<type>(<scope>): <description>`
-
-**Types**:
-- `feat`: New feature
-- `fix`: Bug fix
-- `docs`: Documentation only
-- `style`: Code style (formatting, missing semicolons)
-- `refactor`: Code restructuring without feature changes
-- `perf`: Performance improvements
-- `test`: Adding or updating tests
-- `build`: Build system or dependencies
-- `ci`: CI configuration
-- `chore`: Maintenance tasks
-
-**Rules**:
-- ❌ **NO** "Generated with Claude Code" tags
-- ❌ **NO** "Co-Authored-By: Claude" tags
-- ✅ Keep first line under 72 characters
-- ✅ Use imperative mood ("add" not "added")
-- ✅ Body optional but recommended for complex changes
-
-**Examples**:
-```bash
-# Good
-feat(checkout): add bonus card selection for delivery orders
-
-fix(crm): resolve customer search filter reset issue
-
-refactor(oms): extract return validation logic into service
-
-# Bad
-feat(checkout): add bonus card selection
-
-Generated with Claude Code
-Co-Authored-By: Claude <noreply@anthropic.com>
-
-# Also bad
-Added new feature  # Wrong tense
-Fix bug            # Missing scope
-```
-
-### 4. Pull Request Creation
-
-**Target Branch**: Always `develop`
-
-**PR Title Format**: Same as conventional commit
-```
-feat(domain): concise description of changes
-```
-
-**PR Body Structure**:
-```markdown
-## Summary
-- Brief bullet points of changes
-
-## Related Tasks
-- Closes #{task-id}
-- Refs #{related-task}
-
-## Test Plan
-- [ ] Unit tests added/updated
-- [ ] E2E attributes added
-- [ ] Manual testing completed
-
-## Breaking Changes
-None / List breaking changes
-
-## Screenshots (if UI changes)
-[Add screenshots]
-```
-
-## Common Workflows
-
-### Creating a Feature Branch
-
-```bash
-# 1. Update develop
-git checkout develop
-git pull origin develop
-
-# 2. Create feature branch
-git checkout -b feature/5391-praemie-checkout-action-card
-
-# 3. Work and commit
-git add .
-git commit -m "feat(checkout): add primary bonus card selection logic"
-
-# 4. Push to remote
-git push -u origin feature/5391-praemie-checkout-action-card
-
-# 5. Create PR targeting develop (use gh CLI or web UI)
-```
-
-### Creating a Bugfix Branch
-
-```bash
-# From develop
-git checkout develop
-git pull origin develop
-git checkout -b bugfix/6123-login-redirect-loop
-
-# Commit
-git commit -m "fix(auth): resolve infinite redirect on logout"
-```
-
-### Creating a Hotfix Branch
-
-```bash
-# From main (production)
-git checkout main
-git pull origin main
-git checkout -b hotfix/7890-payment-processing-error
-
-# Commit
-git commit -m "fix(checkout): critical payment API timeout handling"
-
-# Merge to both main and develop
-```
-
-## Commit Message Guidelines
-
-### Good Commit Messages
-
-```bash
-feat(crm): add customer loyalty tier calculation
-
-Implements three-tier loyalty system based on annual spend.
-Includes migration for existing customer data.
-
-Refs #5234
-
----
-
-fix(oms): prevent duplicate return submissions
-
-Adds debouncing to return form submission and validates
-against existing returns in the last 60 seconds.
-
-Closes #5891
-
----
-
-refactor(catalogue): extract product search into dedicated service
-
-Moves search logic from component to ProductSearchService
-for better testability and reusability.
-
----
-
-perf(remission): optimize remission list query with pagination
-
-Reduces initial load time from 3s to 800ms by implementing
-cursor-based pagination.
-
-Closes #6234
-```
-
-### Bad Commit Messages
-
-```bash
-# Too vague
-fix: bug fixes
-
-# Missing scope
-feat: new feature
-
-# Wrong tense
-fixed the login issue
-
-# Including banned tags
-feat(checkout): add feature
-
-Generated with Claude Code
-Co-Authored-By: Claude <noreply@anthropic.com>
-```
-
-## Git Configuration Checks
-
-### Verify Git Setup
-
-```bash
-# Check current branch
-git branch --show-current
-
-# Verify remote
-git remote -v  # Should show origin pointing to ISA-Frontend
-
-# Check for uncommitted changes
-git status
-```
-
-## Common Mistakes to Avoid
-
-```bash
-# ❌ Creating PR against main
-gh pr create --base main  # WRONG
-
-# ✅ Always target develop
-gh pr create --base develop  # CORRECT
-
-# ❌ Using underscores in branch names
-git checkout -b feature/5391_my_feature  # WRONG
-
-# ✅ Use hyphens
-git checkout -b feature/5391-my-feature  # CORRECT
-
-# ❌ Adding co-author tags
-git commit -m "feat: something
-
-Co-Authored-By: Claude <noreply@anthropic.com>"  # WRONG
-
-# ✅ Clean commit message
-git commit -m "feat(scope): something"  # CORRECT
-
-# ❌ Forgetting task ID in branch name
-git checkout -b feature/new-checkout-flow  # WRONG
-
-# ✅ Include task ID
-git checkout -b feature/5391-new-checkout-flow  # CORRECT
-```
-
-## Integration with Claude Code
-
-When Claude Code creates commits or PRs:
-
-### Commit Creation
-```bash
-# Claude uses conventional commits WITHOUT attribution
-git commit -m "feat(checkout): implement bonus card selection
-
-Adds logic for selecting primary bonus card during checkout
-for delivery orders. Includes validation and error handling.
-
-Refs #5391"
-```
-
-### PR Creation
-```bash
-# Target develop by default
-gh pr create --base develop \
-  --title "feat(checkout): implement bonus card selection" \
-  --body "## Summary
-- Add primary bonus card selection logic
-- Implement validation for delivery orders
-- Add error handling for API failures
-
-## Related Tasks
-- Closes #5391
-
-## Test Plan
-- [x] Unit tests added
-- [x] E2E attributes added
-- [x] Manual testing completed"
-```
-
-## Branch Cleanup
-
-### After PR Merge
-```bash
-# Update develop
-git checkout develop
-git pull origin develop
-
-# Delete local feature branch
-git branch -d feature/5391-praemie-checkout
-
-# Delete remote branch (usually done by PR merge)
-git push origin --delete feature/5391-praemie-checkout
-```
-
-## Quick Reference
-
-```bash
-# Branch naming
-feature/{task-id}-{description}
-bugfix/{task-id}-{description}
-hotfix/{task-id}-{description}
-
-# Commit format
-<type>(<scope>): <description>
-
-# Common types
-feat, fix, docs, style, refactor, perf, test, build, ci, chore
-
-# PR target
-Always: develop (NOT main)
-
-# Banned in commits
-- "Generated with Claude Code"
-- "Co-Authored-By: Claude"
-- Any AI attribution
-```
-
-## Resources
-
-- [Conventional Commits](https://www.conventionalcommits.org/)
-- Project PR template: `.github/pull_request_template.md`
-- Code review standards: `.github/review-instructions.md`
+---
+name: git-workflow
+description: This skill should be used when creating branches, writing commits, or creating pull requests. Enforces ISA-Frontend Git conventions including feature/task-id-name branch format, conventional commits without co-author tags, and PRs targeting develop branch.
+---
+
+# Git Workflow Skill
+
+Enforces Git workflow conventions specific to the ISA-Frontend project.
+
+## When to Use
+
+- Creating new branches for features or bugfixes
+- Writing commit messages
+- Creating pull requests
+- Any Git operations requiring adherence to project conventions
+
+## Core Principles
+
+### 1. Default Branch is `develop` (NOT `main`)
+
+- **All PRs target**: `develop` branch
+- **Feature branches from**: `develop`
+- **Never push directly to**: `develop` or `main`
+
+### 2. Branch Naming Convention
+
+**Format**: `<type>/{task-id}-{short-description}`
+
+**Types**:
+- `feature/` - New features or enhancements
+- `bugfix/` - Bug fixes
+- `hotfix/` - Emergency production fixes
+
+**Rules**:
+- Use English kebab-case for descriptions
+- Start with task/issue ID (e.g., `5391`)
+- Keep description concise - shorten if too long
+- Use hyphens to separate words
+
+**Examples**:
+```bash
+# Good
+feature/5391-praemie-checkout-action-card-delivery-order
+bugfix/6123-fix-login-redirect-loop
+hotfix/7890-critical-payment-error
+
+# Bad
+feature/praemie-checkout  # Missing task ID
+feature/5391_praemie      # Using underscores
+feature-5391-very-long-description-that-goes-on-forever  # Too long
+```
+
+### 3. Conventional Commits (WITHOUT Co-Author Tags)
+
+**Format**: `<type>(<scope>): <description>`
+
+**Types**:
+- `feat`: New feature
+- `fix`: Bug fix
+- `docs`: Documentation only
+- `style`: Code style (formatting, missing semicolons)
+- `refactor`: Code restructuring without feature changes
+- `perf`: Performance improvements
+- `test`: Adding or updating tests
+- `build`: Build system or dependencies
+- `ci`: CI configuration
+- `chore`: Maintenance tasks
+
+**Rules**:
+- ❌ **NO** "Generated with Claude Code" tags
+- ❌ **NO** "Co-Authored-By: Claude" tags
+- ✅ Keep first line under 72 characters
+- ✅ Use imperative mood ("add" not "added")
+- ✅ Body optional but recommended for complex changes
+
+**Examples**:
+```bash
+# Good
+feat(checkout): add bonus card selection for delivery orders
+
+fix(crm): resolve customer search filter reset issue
+
+refactor(oms): extract return validation logic into service
+
+# Bad
+feat(checkout): add bonus card selection
+
+Generated with Claude Code
+Co-Authored-By: Claude <noreply@anthropic.com>
+
+# Also bad
+Added new feature  # Wrong tense
+Fix bug            # Missing scope
+```
+
+### 4. Pull Request Creation
+
+**Target Branch**: Always `develop`
+
+**PR Title Format**: Same as conventional commit
+```
+feat(domain): concise description of changes
+```
+
+**PR Body Structure**:
+```markdown
+## Summary
+- Brief bullet points of changes
+
+## Related Tasks
+- Closes #{task-id}
+- Refs #{related-task}
+
+## Test Plan
+- [ ] Unit tests added/updated
+- [ ] E2E attributes added
+- [ ] Manual testing completed
+
+## Breaking Changes
+None / List breaking changes
+
+## Screenshots (if UI changes)
+[Add screenshots]
+```
+
+## Common Workflows
+
+### Creating a Feature Branch
+
+```bash
+# 1. Update develop
+git checkout develop
+git pull origin develop
+
+# 2. Create feature branch
+git checkout -b feature/5391-praemie-checkout-action-card
+
+# 3. Work and commit
+git add .
+git commit -m "feat(checkout): add primary bonus card selection logic"
+
+# 4. Push to remote
+git push -u origin feature/5391-praemie-checkout-action-card
+
+# 5. Create PR targeting develop (use gh CLI or web UI)
+```
+
+### Creating a Bugfix Branch
+
+```bash
+# From develop
+git checkout develop
+git pull origin develop
+git checkout -b bugfix/6123-login-redirect-loop
+
+# Commit
+git commit -m "fix(auth): resolve infinite redirect on logout"
+```
+
+### Creating a Hotfix Branch
+
+```bash
+# From main (production)
+git checkout main
+git pull origin main
+git checkout -b hotfix/7890-payment-processing-error
+
+# Commit
+git commit -m "fix(checkout): critical payment API timeout handling"
+
+# Merge to both main and develop
+```
+
+## Commit Message Guidelines
+
+### Good Commit Messages
+
+```bash
+feat(crm): add customer loyalty tier calculation
+
+Implements three-tier loyalty system based on annual spend.
+Includes migration for existing customer data.
+
+Refs #5234
+
+---
+
+fix(oms): prevent duplicate return submissions
+
+Adds debouncing to return form submission and validates
+against existing returns in the last 60 seconds.
+
+Closes #5891
+
+---
+
+refactor(catalogue): extract product search into dedicated service
+
+Moves search logic from component to ProductSearchService
+for better testability and reusability.
+
+---
+
+perf(remission): optimize remission list query with pagination
+
+Reduces initial load time from 3s to 800ms by implementing
+cursor-based pagination.
+
+Closes #6234
+```
+
+### Bad Commit Messages
+
+```bash
+# Too vague
+fix: bug fixes
+
+# Missing scope
+feat: new feature
+
+# Wrong tense
+fixed the login issue
+
+# Including banned tags
+feat(checkout): add feature
+
+Generated with Claude Code
+Co-Authored-By: Claude <noreply@anthropic.com>
+```
+
+## Git Configuration Checks
+
+### Verify Git Setup
+
+```bash
+# Check current branch
+git branch --show-current
+
+# Verify remote
+git remote -v  # Should show origin pointing to ISA-Frontend
+
+# Check for uncommitted changes
+git status
+```
+
+## Common Mistakes to Avoid
+
+```bash
+# ❌ Creating PR against main
+gh pr create --base main  # WRONG
+
+# ✅ Always target develop
+gh pr create --base develop  # CORRECT
+
+# ❌ Using underscores in branch names
+git checkout -b feature/5391_my_feature  # WRONG
+
+# ✅ Use hyphens
+git checkout -b feature/5391-my-feature  # CORRECT
+
+# ❌ Adding co-author tags
+git commit -m "feat: something
+
+Co-Authored-By: Claude <noreply@anthropic.com>"  # WRONG
+
+# ✅ Clean commit message
+git commit -m "feat(scope): something"  # CORRECT
+
+# ❌ Forgetting task ID in branch name
+git checkout -b feature/new-checkout-flow  # WRONG
+
+# ✅ Include task ID
+git checkout -b feature/5391-new-checkout-flow  # CORRECT
+```
+
+## Integration with Claude Code
+
+When Claude Code creates commits or PRs:
+
+### Commit Creation
+```bash
+# Claude uses conventional commits WITHOUT attribution
+git commit -m "feat(checkout): implement bonus card selection
+
+Adds logic for selecting primary bonus card during checkout
+for delivery orders. Includes validation and error handling.
+
+Refs #5391"
+```
+
+### PR Creation
+```bash
+# Target develop by default
+gh pr create --base develop \
+  --title "feat(checkout): implement bonus card selection" \
+  --body "## Summary
+- Add primary bonus card selection logic
+- Implement validation for delivery orders
+- Add error handling for API failures
+
+## Related Tasks
+- Closes #5391
+
+## Test Plan
+- [x] Unit tests added
+- [x] E2E attributes added
+- [x] Manual testing completed"
+```
+
+## Branch Cleanup
+
+### After PR Merge
+```bash
+# Update develop
+git checkout develop
+git pull origin develop
+
+# Delete local feature branch
+git branch -d feature/5391-praemie-checkout
+
+# Delete remote branch (usually done by PR merge)
+git push origin --delete feature/5391-praemie-checkout
+```
+
+## Quick Reference
+
+```bash
+# Branch naming
+feature/{task-id}-{description}
+bugfix/{task-id}-{description}
+hotfix/{task-id}-{description}
+
+# Commit format
+<type>(<scope>): <description>
+
+# Common types
+feat, fix, docs, style, refactor, perf, test, build, ci, chore
+
+# PR target
+Always: develop (NOT main)
+
+# Banned in commits
+- "Generated with Claude Code"
+- "Co-Authored-By: Claude"
+- Any AI attribution
+```
+
+## Resources
+
+- [Conventional Commits](https://www.conventionalcommits.org/)
+- Project PR template: `.github/pull_request_template.md`
+- Code review standards: `.github/review-instructions.md`

.claude/skills/html-template/SKILL.md

@@ -1,298 +0,0 @@
----
-name: html-template
-description: This skill should be used when writing or reviewing HTML templates to ensure proper E2E testing attributes (data-what, data-which) and ARIA accessibility attributes are included. Use when creating interactive elements like buttons, inputs, links, forms, dialogs, or any HTML markup requiring testing and accessibility compliance. Works seamlessly with the angular-template skill.
----
-
-# HTML Template - Testing & Accessibility Attributes
-
-This skill should be used when writing or reviewing HTML templates to ensure proper testing and accessibility attributes are included.
-
-## When to Use This Skill
-
-Use this skill when:
-- Writing or modifying Angular component templates
-- Creating any HTML templates or markup
-- Reviewing code for testing and accessibility compliance
-- Adding interactive elements (buttons, inputs, links, etc.)
-- Implementing forms, lists, navigation, or dialogs
-
-**Works seamlessly with:**
-- **[angular-template](../angular-template/SKILL.md)** - Angular template syntax, control flow, and modern patterns
-- **[tailwind](../tailwind/SKILL.md)** - ISA design system styling for visual design
-
-## Overview
-
-This skill provides comprehensive guidance for two critical HTML attribute categories:
-
-### 1. E2E Testing Attributes
-Enable automated end-to-end testing by providing stable selectors for QA automation:
-- **`data-what`**: Semantic description of element's purpose
-- **`data-which`**: Unique identifier for specific instances
-- **`data-*`**: Additional contextual information
-
-### 2. ARIA Accessibility Attributes
-Ensure web applications are accessible to all users, including those using assistive technologies:
-- **Roles**: Define element purpose (button, navigation, dialog, etc.)
-- **Properties**: Provide additional context (aria-label, aria-describedby)
-- **States**: Indicate dynamic states (aria-expanded, aria-disabled)
-- **Live Regions**: Announce dynamic content changes
-
-## Why Both Are Essential
-
-- **E2E Attributes**: Enable reliable automated testing without brittle CSS or XPath selectors
-- **ARIA Attributes**: Ensure compliance with WCAG standards and improve user experience for people with disabilities
-- **Together**: Create robust, testable, and accessible web applications
-
-## Quick Reference
-
-### Button Example
-```html
-<button
-  type="button"
-  (click)="onSubmit()"
-  data-what="submit-button"
-  data-which="registration-form"
-  aria-label="Submit registration form">
-  Submit
-</button>
-```
-
-### Input Example
-```html
-<input
-  type="text"
-  [(ngModel)]="email"
-  data-what="email-input"
-  data-which="registration-form"
-  aria-label="Email address"
-  aria-describedby="email-hint"
-  aria-required="true" />
-<span id="email-hint">We'll never share your email</span>
-```
-
-### Dynamic List Example
-```html
-@for (item of items; track item.id) {
-  <li
-    (click)="selectItem(item)"
-    data-what="list-item"
-    [attr.data-which]="item.id"
-    [attr.data-status]="item.status"
-    [attr.aria-label]="'Select ' + item.name"
-    role="button"
-    tabindex="0">
-    {{ item.name }}
-  </li>
-}
-```
-
-### Link Example
-```html
-<a
-  [routerLink]="['/orders', orderId]"
-  data-what="order-link"
-  [attr.data-which]="orderId"
-  [attr.aria-label]="'View order ' + orderNumber">
-  View Order #{{ orderNumber }}
-</a>
-```
-
-### Dialog Example
-```html
-<div
-  class="dialog"
-  data-what="confirmation-dialog"
-  data-which="delete-item"
-  role="dialog"
-  aria-modal="true"
-  aria-labelledby="dialog-title"
-  aria-describedby="dialog-description">
-
-  <h2 id="dialog-title">Confirm Deletion</h2>
-  <p id="dialog-description">Are you sure you want to delete this item?</p>
-
-  <button
-    (click)="confirm()"
-    data-what="confirm-button"
-    data-which="delete-dialog"
-    aria-label="Confirm deletion">
-    Delete
-  </button>
-
-  <button
-    (click)="cancel()"
-    data-what="cancel-button"
-    data-which="delete-dialog"
-    aria-label="Cancel deletion">
-    Cancel
-  </button>
-</div>
-```
-
-## Common Patterns by Element Type
-
-### Interactive Elements That Need Attributes
-
-**Required attributes for:**
-- Buttons (`<button>`, `<ui-button>`, custom button components)
-- Form inputs (`<input>`, `<textarea>`, `<select>`)
-- Links (`<a>`, `[routerLink]`)
-- Clickable elements (elements with `(click)` handlers)
-- Custom interactive components
-- List items in dynamic lists
-- Navigation items
-- Dialog/modal controls
-
-### Naming Conventions
-
-**E2E `data-what` patterns:**
-- `*-button` (submit-button, cancel-button, delete-button)
-- `*-input` (email-input, search-input, quantity-input)
-- `*-link` (product-link, order-link, customer-link)
-- `*-item` (list-item, menu-item, card-item)
-- `*-dialog` (confirm-dialog, error-dialog, info-dialog)
-- `*-dropdown` (status-dropdown, category-dropdown)
-
-**E2E `data-which` guidelines:**
-- Use unique identifiers: `data-which="primary"`, `data-which="customer-list"`
-- Bind dynamically for lists: `[attr.data-which]="item.id"`
-- Combine with context: `data-which="customer-{{ customerId }}-edit"`
-
-**ARIA role patterns:**
-- Interactive elements: `button`, `link`, `menuitem`
-- Structural: `navigation`, `main`, `complementary`, `contentinfo`
-- Widget: `dialog`, `alertdialog`, `tooltip`, `tablist`, `tab`
-- Landmark: `banner`, `search`, `form`, `region`
-
-## Best Practices
-
-### E2E Attributes
-1. ✅ Add to ALL interactive elements
-2. ✅ Use kebab-case for `data-what` values
-3. ✅ Ensure `data-which` is unique within the view
-4. ✅ Use Angular binding for dynamic values: `[attr.data-*]`
-5. ✅ Avoid including sensitive data in attributes
-6. ✅ Document complex attribute patterns in template comments
-
-### ARIA Attributes
-1. ✅ Use semantic HTML first (use `<button>` instead of `<div role="button">`)
-2. ✅ Provide text alternatives for all interactive elements
-3. ✅ Ensure proper keyboard navigation (tabindex, focus management)
-4. ✅ Use `aria-label` when visual label is missing
-5. ✅ Use `aria-labelledby` to reference existing visible labels
-6. ✅ Keep ARIA attributes in sync with visual states
-7. ✅ Test with screen readers (NVDA, JAWS, VoiceOver)
-
-### Combined Best Practices
-1. ✅ Add both E2E and ARIA attributes to every interactive element
-2. ✅ Keep attributes close together in the HTML for readability
-3. ✅ Update tests to use `data-what` and `data-which` selectors
-4. ✅ Validate coverage: all interactive elements should have both types
-5. ✅ Review with QA and accessibility teams
-
-## Detailed References
-
-For comprehensive guides, examples, and patterns, see:
-
-- **[E2E Testing Attributes](references/e2e-attributes.md)** - Complete E2E attribute patterns and conventions
-- **[ARIA Accessibility Attributes](references/aria-attributes.md)** - Comprehensive ARIA guidance and WCAG compliance
-- **[Combined Patterns](references/combined-patterns.md)** - Real-world examples with both attribute types
-
-## Project-Specific Links
-
-- **Testing Guidelines**: `docs/guidelines/testing.md` - Project testing standards including E2E attributes
-- **CLAUDE.md**: Project conventions and requirements
-- **Angular Template Skill**: `.claude/skills/angular-template` - For Angular-specific syntax
-
-## Validation Checklist
-
-Before considering template complete:
-- [ ] All buttons have `data-what`, `data-which`, and `aria-label`
-- [ ] All inputs have `data-what`, `data-which`, and appropriate ARIA attributes
-- [ ] All links have `data-what`, `data-which`, and descriptive ARIA labels
-- [ ] Dynamic lists use `[attr.data-*]` bindings with unique identifiers
-- [ ] Dialogs have proper ARIA roles and relationships
-- [ ] Forms have proper field associations and error announcements
-- [ ] Interactive elements are keyboard accessible (tabindex where needed)
-- [ ] No duplicate `data-which` values within the same view
-- [ ] Screen reader testing completed (if applicable)
-
-## Example: Complete Form
-
-```html
-<form
-  data-what="registration-form"
-  data-which="user-signup"
-  role="form"
-  aria-labelledby="form-title">
-
-  <h2 id="form-title">User Registration</h2>
-
-  <div class="form-field">
-    <label for="username-input">Username</label>
-    <input
-      id="username-input"
-      type="text"
-      [(ngModel)]="username"
-      data-what="username-input"
-      data-which="registration-form"
-      aria-required="true"
-      aria-describedby="username-hint" />
-    <span id="username-hint">Must be at least 3 characters</span>
-  </div>
-
-  <div class="form-field">
-    <label for="email-input">Email</label>
-    <input
-      id="email-input"
-      type="email"
-      [(ngModel)]="email"
-      data-what="email-input"
-      data-which="registration-form"
-      aria-required="true"
-      [attr.aria-invalid]="emailError ? 'true' : null"
-      aria-describedby="email-error" />
-    @if (emailError) {
-      <span
-        id="email-error"
-        role="alert"
-        aria-live="polite">
-        {{ emailError }}
-      </span>
-    }
-  </div>
-
-  <div class="form-actions">
-    <button
-      type="submit"
-      (click)="onSubmit()"
-      data-what="submit-button"
-      data-which="registration-form"
-      [attr.aria-disabled]="!isValid"
-      aria-label="Submit registration form">
-      Register
-    </button>
-
-    <button
-      type="button"
-      (click)="onCancel()"
-      data-what="cancel-button"
-      data-which="registration-form"
-      aria-label="Cancel registration">
-      Cancel
-    </button>
-  </div>
-</form>
-```
-
-## Remember
-
-- **Always use both E2E and ARIA attributes together**
-- **E2E attributes enable automated testing** - your QA team relies on them
-- **ARIA attributes enable accessibility** - legal requirement and right thing to do
-- **Test with real users and assistive technologies** - automated checks aren't enough
-- **Keep attributes up-to-date** - maintain as code changes
-
----
-
-**This skill works automatically with Angular templates. Both E2E and ARIA attributes should be added to every interactive element.**

.claude/skills/library-creator/SKILL.md

@@ -1,56 +1,50 @@
 ---
-name: library-scaffolder
-description: This skill should be used when creating new Angular libraries in the ISA-Frontend monorepo. It handles Nx library generation with proper naming conventions, Vitest configuration with JUnit/Cobertura reporters, path alias setup, and validation. Use this skill when the user wants to create a new library, scaffold a feature/data-access/ui/util library, or requests "new library" creation.
+name: library-creator
+description: This skill should be used when creating feature/data-access/ui/util libraries or user says "create library", "new library", "scaffold library". Creates new Angular libraries in ISA-Frontend monorepo with proper Nx configuration, Vitest setup, architectural tags, and path aliases.
 ---
 
-# Library Scaffolder
+# Library Creator
 
 ## Overview
 
-Automate the creation of new Angular libraries following ISA-Frontend conventions. This skill handles the complete scaffolding workflow including Nx generation, Vitest configuration with CI/CD integration, path alias verification, and initial validation.
-
-## When to Use This Skill
-
-Invoke this skill when:
-- User requests creating a new library
-- User mentions "new library", "scaffold library", or "create feature"
-- User wants to add a new domain/layer/feature to the monorepo
+Automate the creation of new Angular libraries following ISA-Frontend conventions. This skill handles the complete scaffolding workflow including Nx generation, Vitest configuration with CI/CD integration, architectural tags, path alias verification, and initial validation.
 
 ## Required Parameters
 
-User must provide:
+Collect these parameters from the user:
 - **domain**: Domain name (oms, remission, checkout, ui, core, shared, utils)
 - **layer**: Layer type (feature, data-access, ui, util)
 - **name**: Library name in kebab-case
 
-## Scaffolding Workflow
+## Library Creation Workflow
 
 ### Step 1: Validate Input
 
-1. **Verify Domain**
-   - Use `docs-researcher` to check `docs/library-reference.md`
-   - Ensure domain follows existing patterns
+**Verify Domain:**
+- Use `docs-researcher` to check `docs/library-reference.md`
+- Ensure domain follows existing patterns
 
-2. **Validate Layer**
-   - Must be one of: feature, data-access, ui, util
+**Validate Layer:**
+- Must be one of: feature, data-access, ui, util
 
-3. **Check Name**
-   - Must be kebab-case
-   - Must not conflict with existing libraries
+**Check Name:**
+- Must be kebab-case
+- Must not conflict with existing libraries
 
-4. **Determine Path Depth**
-   - 3 levels: `libs/domain/layer/name` → `../../../`
-   - 4 levels: `libs/domain/type/layer/name` → `../../../../`
+**Determine Path Depth:**
+- 3 levels: `libs/domain/layer/name` → `../../../`
+- 4 levels: `libs/domain/type/layer/name` → `../../../../`
 
 ### Step 2: Run Dry-Run
 
-Execute Nx generator with `--dry-run`:
+Execute Nx generator with `--dry-run` to preview changes:
 
 ```bash
 npx nx generate @nx/angular:library \
   --name=[domain]-[layer]-[name] \
   --directory=libs/[domain]/[layer]/[name] \
   --importPath=@isa/[domain]/[layer]/[name] \
+  --prefix=[domain] \
   --style=css \
   --unitTestRunner=vitest \
   --standalone=true \
@@ -69,15 +63,55 @@ npx nx generate @nx/angular:library \
   --name=[domain]-[layer]-[name] \
   --directory=libs/[domain]/[layer]/[name] \
   --importPath=@isa/[domain]/[layer]/[name] \
+  --prefix=[domain] \
   --style=css \
   --unitTestRunner=vitest \
   --standalone=true \
   --skipTests=false
 ```
 
-### Step 4: Configure Vitest with JUnit and Cobertura
+### Step 4: Add Architectural Tags
 
-Update `libs/[path]/vite.config.mts`:
+**CRITICAL**: Immediately after library generation, add proper tags to `project.json` for `@nx/enforce-module-boundaries`.
+
+Run the tagging script:
+```bash
+node scripts/add-library-tags.js
+```
+
+Or manually add tags to `libs/[domain]/[layer]/[name]/project.json`:
+
+```json
+{
+  "name": "[domain]-[layer]-[name]",
+  "tags": [
+    "scope:[domain]",
+    "type:[layer]"
+  ]
+}
+```
+
+**Tag Rules:**
+- **Scope tag**: `scope:[domain]` (e.g., `scope:oms`, `scope:crm`, `scope:ui`, `scope:shared`)
+- **Type tag**: `type:[layer]` (e.g., `type:feature`, `type:data-access`, `type:ui`, `type:util`)
+
+**Examples:**
+- `libs/oms/feature/return-search` → `["scope:oms", "type:feature"]`
+- `libs/ui/buttons` → `["scope:ui", "type:ui"]`
+- `libs/shared/scanner` → `["scope:shared", "type:shared"]`
+- `libs/core/auth` → `["scope:core", "type:core"]`
+
+**Verification:**
+```bash
+# Check tags were added
+cat libs/[domain]/[layer]/[name]/project.json | jq '.tags'
+
+# Should output: ["scope:[domain]", "type:[layer]"]
+```
+
+### Step 5: Configure Vitest with JUnit and Cobertura
+
+Update `libs/[path]/vite.config.mts` with this template:
 
 ```typescript
 /// <reference types='vitest' />
@@ -111,24 +145,24 @@ defineConfig(() => ({
 }));
 ```
 
-**Critical**: Adjust path depth based on library location.
+**Critical**: Adjust path depth (`../../../` or `../../../../`) based on library location.
 
-### Step 5: Verify Configuration
+### Step 6: Verify Configuration
 
-1. **Check Path Alias**
-   - Verify `tsconfig.base.json` was updated
-   - Should have: `"@isa/[domain]/[layer]/[name]": ["libs/[domain]/[layer]/[name]/src/index.ts"]`
+**Check Path Alias:**
+- Verify `tsconfig.base.json` was updated
+- Should have: `"@isa/[domain]/[layer]/[name]": ["libs/[domain]/[layer]/[name]/src/index.ts"]`
 
-2. **Run Initial Test**
-   ```bash
-   npx nx test [library-name] --coverage.enabled=true --skip-nx-cache
-   ```
+**Run Initial Test:**
+```bash
+npx nx test [library-name] --coverage.enabled=true --skip-nx-cache
+```
 
-3. **Verify CI/CD Files Created**
-   - JUnit XML: `testresults/junit-[library-name].xml`
-   - Cobertura XML: `coverage/libs/[path]/cobertura-coverage.xml`
+**Verify CI/CD Files Created:**
+- JUnit XML: `testresults/junit-[library-name].xml`
+- Cobertura XML: `coverage/libs/[path]/cobertura-coverage.xml`
 
-### Step 6: Create Library README
+### Step 7: Create Library README
 
 Use `docs-researcher` to find similar library READMEs, then create comprehensive documentation including:
 - Overview and purpose
@@ -137,7 +171,7 @@ Use `docs-researcher` to find similar library READMEs, then create comprehensive
 - Usage examples
 - Testing information (Vitest + Angular Testing Utilities)
 
-### Step 7: Update Library Reference
+### Step 8: Update Library Reference
 
 Add entry to `docs/library-reference.md` under appropriate domain:
 
@@ -150,10 +184,12 @@ Add entry to `docs/library-reference.md` under appropriate domain:
 [Brief description]
 ```
 
-### Step 8: Run Full Validation
+### Step 9: Run Full Validation
+
+Execute validation commands to ensure library is properly configured:
 
 ```bash
-# Lint
+# Lint (includes boundary checks)
 npx nx lint [library-name]
 
 # Test with coverage
@@ -166,7 +202,9 @@ npx nx build [library-name]
 npx nx graph --focus=[library-name]
 ```
 
-### Step 9: Generate Creation Report
+### Step 10: Generate Creation Report
+
+Provide this structured report to the user:
 
 ```
 Library Created Successfully
@@ -181,6 +219,7 @@ Import Alias: @isa/[domain]/[layer]/[name]
 Test Framework: Vitest with Angular Testing Utilities
 Style: CSS
 Standalone: Yes
+Tags: scope:[domain], type:[layer]
 JUnit Reporter: ✅ testresults/junit-[library-name].xml
 Cobertura Coverage: ✅ coverage/libs/[path]/cobertura-coverage.xml
 
@@ -193,31 +232,46 @@ import { Component } from '@isa/[domain]/[layer]/[name]';
 npx nx test [library-name] --skip-nx-cache
 npx nx test [library-name] --coverage.enabled=true --skip-nx-cache
 
+🏗️ Architecture Compliance
+--------------------------
+Tags enforce module boundaries via @nx/enforce-module-boundaries
+Run lint to check for violations: npx nx lint [library-name]
+
 📝 Next Steps
 -------------
 1. Develop library features
 2. Write tests using Vitest + Angular Testing Utilities
 3. Add E2E attributes (data-what, data-which) to templates
 4. Update README with usage examples
+5. Follow architecture rules (see eslint.config.js for constraints)
 ```
 
 ## Error Handling
 
-**Issue: Path depth mismatch**
+**Path depth mismatch:**
 - Count directory levels from workspace root
 - Adjust `../` in outputFile and reportsDirectory
 
-**Issue: TypeScript errors in vite.config.mts**
+**TypeScript errors in vite.config.mts:**
 - Add `// @ts-expect-error` before `defineConfig()`
 
-**Issue: Path alias not working**
+**Path alias not working:**
 - Check tsconfig.base.json
 - Run `npx nx reset`
 - Restart TypeScript server
 
+**Library already exists:**
+- Check `tsconfig.base.json` for existing path alias
+- Use Grep to search for existing library name
+- Suggest alternative name to user
+
 ## References
 
 - docs/guidelines/testing.md (Vitest, JUnit, Cobertura sections)
 - docs/library-reference.md (domain patterns)
 - CLAUDE.md (Library Organization, Testing Framework sections)
+- eslint.config.js (@nx/enforce-module-boundaries configuration)
+- scripts/add-library-tags.js (automatic tagging script)
+- .claude/skills/architecture-validator (boundary validation)
 - Nx Angular Library Generator: https://nx.dev/nx-api/angular/generators/library
+- Nx Enforce Module Boundaries: https://nx.dev/nx-api/eslint-plugin/documents/enforce-module-boundaries

.claude/skills/logging/SKILL.md

@@ -1,272 +1,234 @@
----
-name: logging-helper
-description: This skill should be used when working with Angular components, directives, services, pipes, guards, or TypeScript classes. Logging is MANDATORY in all Angular files. Implements @isa/core/logging with logger() factory pattern, appropriate log levels, lazy evaluation for performance, error handling, and avoids console.log and common mistakes.
----
-
-# Logging Helper Skill
-
-Ensures consistent and efficient logging using `@isa/core/logging` library.
-
-## When to Use
-
-- Adding logging to new components/services
-- Refactoring existing logging code
-- Reviewing code for proper logging patterns
-- Debugging logging issues
-
-## Core Principles
-
-### 1. Always Use Factory Pattern
-
-```typescript
-import { logger } from '@isa/core/logging';
-
-// ✅ DO
-#logger = logger();
-
-// ❌ DON'T
-constructor(private loggingService: LoggingService) {}
-```
-
-### 2. Choose Appropriate Log Levels
-
-- **Trace**: Fine-grained debugging (method entry/exit)
-- **Debug**: Development debugging (variable states)
-- **Info**: Runtime information (user actions, events)
-- **Warn**: Potentially harmful situations
-- **Error**: Errors affecting functionality
-
-### 3. Context Patterns
-
-**Static Context** (component level):
-```typescript
-#logger = logger({ component: 'UserProfileComponent' });
-```
-
-**Dynamic Context** (instance level):
-```typescript
-#logger = logger(() => ({
-  userId: this.authService.currentUserId,
-  storeId: this.config.storeId
-}));
-```
-
-**Message Context** (use functions for performance):
-```typescript
-// ✅ Recommended - lazy evaluation
-this.#logger.info('Order processed', () => ({
-  orderId: order.id,
-  total: order.total,
-  timestamp: Date.now()
-}));
-
-// ✅ Acceptable - static values
-this.#logger.info('Order processed', {
-  orderId: order.id,
-  status: 'completed'
-});
-```
-
-## Essential Patterns
-
-### Component Logging
-```typescript
-@Component({
-  selector: 'app-product-list',
-  standalone: true,
-})
-export class ProductListComponent {
-  #logger = logger({ component: 'ProductListComponent' });
-
-  ngOnInit(): void {
-    this.#logger.info('Component initialized');
-  }
-
-  onAction(id: string): void {
-    this.#logger.debug('Action triggered', { id });
-  }
-}
-```
-
-### Service Logging
-```typescript
-@Injectable({ providedIn: 'root' })
-export class DataService {
-  #logger = logger({ service: 'DataService' });
-
-  fetchData(endpoint: string): Observable<Data> {
-    this.#logger.debug('Fetching data', { endpoint });
-
-    return this.http.get<Data>(endpoint).pipe(
-      tap((data) => this.#logger.info('Data fetched', () => ({
-        endpoint,
-        size: data.length
-      }))),
-      catchError((error) => {
-        this.#logger.error('Fetch failed', error, () => ({
-          endpoint,
-          status: error.status
-        }));
-        return throwError(() => error);
-      })
-    );
-  }
-}
-```
-
-### Error Handling
-```typescript
-try {
-  await this.processOrder(orderId);
-} catch (error) {
-  this.#logger.error('Order processing failed', error as Error, () => ({
-    orderId,
-    step: this.currentStep,
-    attemptNumber: this.retryCount
-  }));
-  throw error;
-}
-```
-
-### Hierarchical Context
-```typescript
-@Component({
-  providers: [
-    provideLoggerContext({ feature: 'checkout', module: 'sales' })
-  ]
-})
-export class CheckoutComponent {
-  #logger = logger(() => ({ userId: this.userService.currentUserId }));
-
-  // Logs include: feature, module, userId + message context
-}
-```
-
-## Common Mistakes to Avoid
-
-```typescript
-// ❌ Don't use console.log
-console.log('User logged in');
-// ✅ Use logger
-this.#logger.info('User logged in');
-
-// ❌ Don't create expensive context eagerly
-this.#logger.debug('Processing', {
-  data: this.computeExpensive() // Always executes
-});
-// ✅ Use function for lazy evaluation
-this.#logger.debug('Processing', () => ({
-  data: this.computeExpensive() // Only if debug enabled
-}));
-
-// ❌ Don't log in tight loops
-for (const item of items) {
-  this.#logger.debug('Item', { item });
-}
-// ✅ Log aggregates
-this.#logger.debug('Batch processed', () => ({
-  count: items.length
-}));
-
-// ❌ Don't log sensitive data
-this.#logger.info('User auth', { password: user.password });
-// ✅ Log safe identifiers only
-this.#logger.info('User auth', { userId: user.id });
-
-// ❌ Don't miss error object
-this.#logger.error('Failed');
-// ✅ Include error object
-this.#logger.error('Failed', error as Error);
-```
-
-## Configuration
-
-### App Configuration
-```typescript
-// app.config.ts
-import { ApplicationConfig, isDevMode } from '@angular/core';
-import {
-  provideLogging, withLogLevel, withSink,
-  LogLevel, ConsoleLogSink
-} from '@isa/core/logging';
-
-export const appConfig: ApplicationConfig = {
-  providers: [
-    provideLogging(
-      withLogLevel(isDevMode() ? LogLevel.Debug : LogLevel.Warn),
-      withSink(ConsoleLogSink),
-      withContext({ app: 'ISA', version: '1.0.0' })
-    )
-  ]
-};
-```
-
-## Testing
-
-```typescript
-import { createComponentFactory, Spectator } from '@ngneat/spectator/jest';
-import { LoggingService } from '@isa/core/logging';
-
-describe('MyComponent', () => {
-  const createComponent = createComponentFactory({
-    component: MyComponent,
-    mocks: [LoggingService]
-  });
-
-  it('should log error', () => {
-    const spectator = createComponent();
-    const loggingService = spectator.inject(LoggingService);
-
-    spectator.component.riskyOperation();
-
-    expect(loggingService.error).toHaveBeenCalledWith(
-      expect.any(String),
-      expect.any(Error),
-      expect.any(Function)
-    );
-  });
-});
-```
-
-## Code Review Checklist
-
-- [ ] Uses `logger()` factory, not `LoggingService` injection
-- [ ] Appropriate log level for each message
-- [ ] Context functions for expensive operations
-- [ ] No sensitive information (passwords, tokens, PII)
-- [ ] No `console.log` statements
-- [ ] Error logs include error object
-- [ ] No logging in tight loops
-- [ ] Component/service identified in context
-- [ ] E2E attributes on interactive elements
-
-## Quick Reference
-
-```typescript
-// Import
-import { logger, provideLoggerContext } from '@isa/core/logging';
-
-// Create logger
-#logger = logger();                              // Basic
-#logger = logger({ component: 'Name' });         // Static context
-#logger = logger(() => ({ id: this.id }));       // Dynamic context
-
-// Log messages
-this.#logger.trace('Detailed trace');
-this.#logger.debug('Debug info');
-this.#logger.info('General info', () => ({ key: value }));
-this.#logger.warn('Warning');
-this.#logger.error('Error', error, () => ({ context }));
-
-// Component context
-@Component({
-  providers: [provideLoggerContext({ feature: 'users' })]
-})
-```
-
-## Additional Resources
-
-- Full documentation: `libs/core/logging/README.md`
-- Examples: `.claude/skills/logging-helper/examples.md`
-- Quick reference: `.claude/skills/logging-helper/reference.md`
-- Troubleshooting: `.claude/skills/logging-helper/troubleshooting.md`
+---
+name: logging
+description: This skill should be used when working with Angular components, directives, services, pipes, guards, or TypeScript classes. Logging is MANDATORY in all Angular files. Implements @isa/core/logging with logger() factory pattern, appropriate log levels, lazy evaluation for performance, error handling, and avoids console.log and common mistakes.
+---
+
+# Logging
+
+Ensures consistent and efficient logging using `@isa/core/logging` library.
+
+## Core Principles
+
+### 1. Always Use Factory Pattern
+
+```typescript
+import { logger } from '@isa/core/logging';
+
+// ✅ DO
+#logger = logger();
+
+// ❌ DON'T
+constructor(private loggingService: LoggingService) {}
+```
+
+### 2. Choose Appropriate Log Levels
+
+- **Trace**: Fine-grained debugging (method entry/exit)
+- **Debug**: Development debugging (variable states)
+- **Info**: Runtime information (user actions, events)
+- **Warn**: Potentially harmful situations
+- **Error**: Errors affecting functionality
+
+### 3. Context Patterns
+
+**Static Context** (component level):
+```typescript
+#logger = logger({ component: 'UserProfileComponent' });
+```
+
+**Dynamic Context** (instance level):
+```typescript
+#logger = logger(() => ({
+  userId: this.authService.currentUserId,
+  storeId: this.config.storeId
+}));
+```
+
+**Message Context** (use functions for performance):
+```typescript
+// ✅ Recommended - lazy evaluation
+this.#logger.info('Order processed', () => ({
+  orderId: order.id,
+  total: order.total,
+  timestamp: Date.now()
+}));
+
+// ✅ Acceptable - static values
+this.#logger.info('Order processed', {
+  orderId: order.id,
+  status: 'completed'
+});
+```
+
+## Essential Patterns
+
+### Component Logging
+```typescript
+@Component({
+  selector: 'app-product-list',
+  standalone: true,
+})
+export class ProductListComponent {
+  #logger = logger({ component: 'ProductListComponent' });
+
+  ngOnInit(): void {
+    this.#logger.info('Component initialized');
+  }
+
+  onAction(id: string): void {
+    this.#logger.debug('Action triggered', { id });
+  }
+}
+```
+
+### Service Logging
+```typescript
+@Injectable({ providedIn: 'root' })
+export class DataService {
+  #logger = logger({ service: 'DataService' });
+
+  fetchData(endpoint: string): Observable<Data> {
+    this.#logger.debug('Fetching data', { endpoint });
+
+    return this.http.get<Data>(endpoint).pipe(
+      tap((data) => this.#logger.info('Data fetched', () => ({
+        endpoint,
+        size: data.length
+      }))),
+      catchError((error) => {
+        this.#logger.error('Fetch failed', error, () => ({
+          endpoint,
+          status: error.status
+        }));
+        return throwError(() => error);
+      })
+    );
+  }
+}
+```
+
+### Error Handling
+```typescript
+try {
+  await this.processOrder(orderId);
+} catch (error) {
+  this.#logger.error('Order processing failed', error as Error, () => ({
+    orderId,
+    step: this.currentStep,
+    attemptNumber: this.retryCount
+  }));
+  throw error;
+}
+```
+
+### Hierarchical Context
+```typescript
+@Component({
+  providers: [
+    provideLoggerContext({ feature: 'checkout', module: 'sales' })
+  ]
+})
+export class CheckoutComponent {
+  #logger = logger(() => ({ userId: this.userService.currentUserId }));
+
+  // Logs include: feature, module, userId + message context
+}
+```
+
+## Common Mistakes to Avoid
+
+```typescript
+// ❌ Don't use console.log
+console.log('User logged in');
+// ✅ Use logger
+this.#logger.info('User logged in');
+
+// ❌ Don't create expensive context eagerly
+this.#logger.debug('Processing', {
+  data: this.computeExpensive() // Always executes
+});
+// ✅ Use function for lazy evaluation
+this.#logger.debug('Processing', () => ({
+  data: this.computeExpensive() // Only if debug enabled
+}));
+
+// ❌ Don't log in tight loops
+for (const item of items) {
+  this.#logger.debug('Item', { item });
+}
+// ✅ Log aggregates
+this.#logger.debug('Batch processed', () => ({
+  count: items.length
+}));
+
+// ❌ Don't log sensitive data
+this.#logger.info('User auth', { password: user.password });
+// ✅ Log safe identifiers only
+this.#logger.info('User auth', { userId: user.id });
+
+// ❌ Don't miss error object
+this.#logger.error('Failed');
+// ✅ Include error object
+this.#logger.error('Failed', error as Error);
+```
+
+## Configuration
+
+### App Configuration
+```typescript
+// app.config.ts
+import { ApplicationConfig, isDevMode } from '@angular/core';
+import {
+  provideLogging, withLogLevel, withSink,
+  LogLevel, ConsoleLogSink
+} from '@isa/core/logging';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideLogging(
+      withLogLevel(isDevMode() ? LogLevel.Debug : LogLevel.Warn),
+      withSink(ConsoleLogSink),
+      withContext({ app: 'ISA', version: '1.0.0' })
+    )
+  ]
+};
+```
+
+## Testing
+
+```typescript
+import { createComponentFactory, Spectator } from '@ngneat/spectator/jest';
+import { LoggingService } from '@isa/core/logging';
+
+describe('MyComponent', () => {
+  const createComponent = createComponentFactory({
+    component: MyComponent,
+    mocks: [LoggingService]
+  });
+
+  it('should log error', () => {
+    const spectator = createComponent();
+    const loggingService = spectator.inject(LoggingService);
+
+    spectator.component.riskyOperation();
+
+    expect(loggingService.error).toHaveBeenCalledWith(
+      expect.any(String),
+      expect.any(Error),
+      expect.any(Function)
+    );
+  });
+});
+```
+
+## Additional Resources
+
+**For more detailed information:**
+
+- **API signatures and patterns**: See [references/api-reference.md](references/api-reference.md) for complete API documentation
+- **Real-world examples**: See [references/examples.md](references/examples.md) for components, services, guards, interceptors, and more
+- **Troubleshooting**: See [references/troubleshooting.md](references/troubleshooting.md) for common issues and solutions
+
+**Project documentation:**
+
+- Full library documentation: `libs/core/logging/README.md`

.claude/skills/logging/references/api-reference.md

@@ -1,192 +1,192 @@
-# Logging Quick Reference
-
-## API Signatures
-
-```typescript
-// Factory
-function logger(ctx?: MaybeLoggerContextFn): LoggerApi
-
-// Logger API
-interface LoggerApi {
-  trace(message: string, context?: MaybeLoggerContextFn): void;
-  debug(message: string, context?: MaybeLoggerContextFn): void;
-  info(message: string, context?: MaybeLoggerContextFn): void;
-  warn(message: string, context?: MaybeLoggerContextFn): void;
-  error(message: string, error?: Error, context?: MaybeLoggerContextFn): void;
-}
-
-// Types
-type MaybeLoggerContextFn = LoggerContext | (() => LoggerContext);
-interface LoggerContext { [key: string]: unknown; }
-```
-
-## Common Patterns
-
-| Pattern | Code |
-|---------|------|
-| Basic logger | `#logger = logger()` |
-| Static context | `#logger = logger({ component: 'Name' })` |
-| Dynamic context | `#logger = logger(() => ({ id: this.id }))` |
-| Log info | `this.#logger.info('Message')` |
-| Log with context | `this.#logger.info('Message', () => ({ key: value }))` |
-| Log error | `this.#logger.error('Error', error)` |
-| Error with context | `this.#logger.error('Error', error, () => ({ id }))` |
-| Component context | `providers: [provideLoggerContext({ feature: 'x' })]` |
-
-## Configuration
-
-```typescript
-// app.config.ts
-import { provideLogging, withLogLevel, withSink, withContext,
-         LogLevel, ConsoleLogSink } from '@isa/core/logging';
-
-export const appConfig: ApplicationConfig = {
-  providers: [
-    provideLogging(
-      withLogLevel(isDevMode() ? LogLevel.Debug : LogLevel.Warn),
-      withSink(ConsoleLogSink),
-      withContext({ app: 'ISA', version: '1.0.0' })
-    )
-  ]
-};
-```
-
-## Log Levels
-
-| Level | Use Case | Example |
-|-------|----------|---------|
-| `Trace` | Method entry/exit | `this.#logger.trace('Entering processData')` |
-| `Debug` | Development info | `this.#logger.debug('Variable state', () => ({ x }))` |
-| `Info` | Runtime events | `this.#logger.info('User logged in', { userId })` |
-| `Warn` | Warnings | `this.#logger.warn('Deprecated API used')` |
-| `Error` | Errors | `this.#logger.error('Operation failed', error)` |
-| `Off` | Disable logging | `withLogLevel(LogLevel.Off)` |
-
-## Decision Trees
-
-### Context Type Decision
-```
-Value changes at runtime?
-├─ Yes → () => ({ value: this.getValue() })
-└─ No  → { value: 'static' }
-
-Computing value is expensive?
-├─ Yes → () => ({ data: this.compute() })
-└─ No  → Either works
-```
-
-### Log Level Decision
-```
-Method flow details? → Trace
-Development debug?  → Debug
-Runtime information? → Info
-Potential problem?  → Warn
-Error occurred?     → Error
-```
-
-## Performance Tips
-
-```typescript
-// ✅ DO: Lazy evaluation
-this.#logger.debug('Data', () => ({
-  result: this.expensive() // Only runs if debug enabled
-}));
-
-// ❌ DON'T: Eager evaluation
-this.#logger.debug('Data', {
-  result: this.expensive() // Always runs
-});
-
-// ✅ DO: Log aggregates
-this.#logger.info('Batch done', () => ({ count: items.length }));
-
-// ❌ DON'T: Log in loops
-for (const item of items) {
-  this.#logger.debug('Item', { item }); // Performance hit
-}
-```
-
-## Testing
-
-```typescript
-import { createComponentFactory, Spectator } from '@ngneat/spectator/jest';
-import { LoggingService } from '@isa/core/logging';
-
-describe('MyComponent', () => {
-  const createComponent = createComponentFactory({
-    component: MyComponent,
-    mocks: [LoggingService]
-  });
-
-  it('logs error', () => {
-    const spectator = createComponent();
-    const logger = spectator.inject(LoggingService);
-
-    spectator.component.operation();
-
-    expect(logger.error).toHaveBeenCalled();
-  });
-});
-```
-
-## Custom Sink
-
-```typescript
-import { Injectable } from '@angular/core';
-import { Sink, LogLevel, LoggerContext } from '@isa/core/logging';
-
-@Injectable()
-export class CustomSink implements Sink {
-  log(level: LogLevel, message: string, context?: LoggerContext, error?: Error): void {
-    // Implementation
-  }
-}
-
-// Register
-provideLogging(withSink(CustomSink))
-```
-
-## Sink Function (with DI)
-
-```typescript
-import { inject } from '@angular/core';
-import { SinkFn, LogLevel } from '@isa/core/logging';
-
-export const remoteSink: SinkFn = () => {
-  const http = inject(HttpClient);
-
-  return (level, message, context, error) => {
-    if (level === LogLevel.Error) {
-      http.post('/api/logs', { level, message, context, error }).subscribe();
-    }
-  };
-};
-
-// Register
-provideLogging(withSinkFn(remoteSink))
-```
-
-## Common Imports
-
-```typescript
-// Main imports
-import { logger, provideLoggerContext } from '@isa/core/logging';
-
-// Configuration imports
-import {
-  provideLogging,
-  withLogLevel,
-  withSink,
-  withContext,
-  LogLevel,
-  ConsoleLogSink
-} from '@isa/core/logging';
-
-// Type imports
-import {
-  LoggerApi,
-  Sink,
-  SinkFn,
-  LoggerContext
-} from '@isa/core/logging';
-```
+# Logging API Reference
+
+## API Signatures
+
+```typescript
+// Factory
+function logger(ctx?: MaybeLoggerContextFn): LoggerApi
+
+// Logger API
+interface LoggerApi {
+  trace(message: string, context?: MaybeLoggerContextFn): void;
+  debug(message: string, context?: MaybeLoggerContextFn): void;
+  info(message: string, context?: MaybeLoggerContextFn): void;
+  warn(message: string, context?: MaybeLoggerContextFn): void;
+  error(message: string, error?: Error, context?: MaybeLoggerContextFn): void;
+}
+
+// Types
+type MaybeLoggerContextFn = LoggerContext | (() => LoggerContext);
+interface LoggerContext { [key: string]: unknown; }
+```
+
+## Common Patterns
+
+| Pattern | Code |
+|---------|------|
+| Basic logger | `#logger = logger()` |
+| Static context | `#logger = logger({ component: 'Name' })` |
+| Dynamic context | `#logger = logger(() => ({ id: this.id }))` |
+| Log info | `this.#logger.info('Message')` |
+| Log with context | `this.#logger.info('Message', () => ({ key: value }))` |
+| Log error | `this.#logger.error('Error', error)` |
+| Error with context | `this.#logger.error('Error', error, () => ({ id }))` |
+| Component context | `providers: [provideLoggerContext({ feature: 'x' })]` |
+
+## Configuration
+
+```typescript
+// app.config.ts
+import { provideLogging, withLogLevel, withSink, withContext,
+         LogLevel, ConsoleLogSink } from '@isa/core/logging';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideLogging(
+      withLogLevel(isDevMode() ? LogLevel.Debug : LogLevel.Warn),
+      withSink(ConsoleLogSink),
+      withContext({ app: 'ISA', version: '1.0.0' })
+    )
+  ]
+};
+```
+
+## Log Levels
+
+| Level | Use Case | Example |
+|-------|----------|---------|
+| `Trace` | Method entry/exit | `this.#logger.trace('Entering processData')` |
+| `Debug` | Development info | `this.#logger.debug('Variable state', () => ({ x }))` |
+| `Info` | Runtime events | `this.#logger.info('User logged in', { userId })` |
+| `Warn` | Warnings | `this.#logger.warn('Deprecated API used')` |
+| `Error` | Errors | `this.#logger.error('Operation failed', error)` |
+| `Off` | Disable logging | `withLogLevel(LogLevel.Off)` |
+
+## Decision Trees
+
+### Context Type Decision
+```
+Value changes at runtime?
+├─ Yes → () => ({ value: this.getValue() })
+└─ No  → { value: 'static' }
+
+Computing value is expensive?
+├─ Yes → () => ({ data: this.compute() })
+└─ No  → Either works
+```
+
+### Log Level Decision
+```
+Method flow details? → Trace
+Development debug?  → Debug
+Runtime information? → Info
+Potential problem?  → Warn
+Error occurred?     → Error
+```
+
+## Performance Tips
+
+```typescript
+// ✅ DO: Lazy evaluation
+this.#logger.debug('Data', () => ({
+  result: this.expensive() // Only runs if debug enabled
+}));
+
+// ❌ DON'T: Eager evaluation
+this.#logger.debug('Data', {
+  result: this.expensive() // Always runs
+});
+
+// ✅ DO: Log aggregates
+this.#logger.info('Batch done', () => ({ count: items.length }));
+
+// ❌ DON'T: Log in loops
+for (const item of items) {
+  this.#logger.debug('Item', { item }); // Performance hit
+}
+```
+
+## Testing
+
+```typescript
+import { createComponentFactory, Spectator } from '@ngneat/spectator/jest';
+import { LoggingService } from '@isa/core/logging';
+
+describe('MyComponent', () => {
+  const createComponent = createComponentFactory({
+    component: MyComponent,
+    mocks: [LoggingService]
+  });
+
+  it('logs error', () => {
+    const spectator = createComponent();
+    const logger = spectator.inject(LoggingService);
+
+    spectator.component.operation();
+
+    expect(logger.error).toHaveBeenCalled();
+  });
+});
+```
+
+## Custom Sink
+
+```typescript
+import { Injectable } from '@angular/core';
+import { Sink, LogLevel, LoggerContext } from '@isa/core/logging';
+
+@Injectable()
+export class CustomSink implements Sink {
+  log(level: LogLevel, message: string, context?: LoggerContext, error?: Error): void {
+    // Implementation
+  }
+}
+
+// Register
+provideLogging(withSink(CustomSink))
+```
+
+## Sink Function (with DI)
+
+```typescript
+import { inject } from '@angular/core';
+import { SinkFn, LogLevel } from '@isa/core/logging';
+
+export const remoteSink: SinkFn = () => {
+  const http = inject(HttpClient);
+
+  return (level, message, context, error) => {
+    if (level === LogLevel.Error) {
+      http.post('/api/logs', { level, message, context, error }).subscribe();
+    }
+  };
+};
+
+// Register
+provideLogging(withSinkFn(remoteSink))
+```
+
+## Common Imports
+
+```typescript
+// Main imports
+import { logger, provideLoggerContext } from '@isa/core/logging';
+
+// Configuration imports
+import {
+  provideLogging,
+  withLogLevel,
+  withSink,
+  withContext,
+  LogLevel,
+  ConsoleLogSink
+} from '@isa/core/logging';
+
+// Type imports
+import {
+  LoggerApi,
+  Sink,
+  SinkFn,
+  LoggerContext
+} from '@isa/core/logging';
+```

.claude/skills/logging/references/examples.md

@@ -1,350 +1,350 @@
-# Logging Examples
-
-Concise real-world examples of logging patterns.
-
-## 1. Component with Observable
-
-```typescript
-import { Component, OnInit } from '@angular/core';
-import { logger } from '@isa/core/logging';
-
-@Component({
-  selector: 'app-product-list',
-  standalone: true,
-})
-export class ProductListComponent implements OnInit {
-  #logger = logger({ component: 'ProductListComponent' });
-
-  constructor(private productService: ProductService) {}
-
-  ngOnInit(): void {
-    this.#logger.info('Component initialized');
-    this.loadProducts();
-  }
-
-  private loadProducts(): void {
-    this.productService.getProducts().subscribe({
-      next: (products) => {
-        this.#logger.info('Products loaded', () => ({ count: products.length }));
-      },
-      error: (error) => {
-        this.#logger.error('Failed to load products', error);
-      }
-    });
-  }
-}
-```
-
-## 2. Service with HTTP
-
-```typescript
-import { Injectable, inject } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
-import { logger } from '@isa/core/logging';
-import { catchError, tap } from 'rxjs/operators';
-
-@Injectable({ providedIn: 'root' })
-export class OrderService {
-  private http = inject(HttpClient);
-  #logger = logger({ service: 'OrderService' });
-
-  getOrder(id: string): Observable<Order> {
-    this.#logger.debug('Fetching order', { id });
-
-    return this.http.get<Order>(`/api/orders/${id}`).pipe(
-      tap((order) => this.#logger.info('Order fetched', () => ({
-        id,
-        status: order.status
-      }))),
-      catchError((error) => {
-        this.#logger.error('Fetch failed', error, () => ({ id, status: error.status }));
-        throw error;
-      })
-    );
-  }
-}
-```
-
-## 3. Hierarchical Context
-
-```typescript
-import { Component } from '@angular/core';
-import { logger, provideLoggerContext } from '@isa/core/logging';
-
-@Component({
-  selector: 'oms-return-process',
-  standalone: true,
-  providers: [
-    provideLoggerContext({ feature: 'returns', module: 'oms' })
-  ],
-})
-export class ReturnProcessComponent {
-  #logger = logger(() => ({
-    processId: this.currentProcessId,
-    step: this.currentStep
-  }));
-
-  private currentProcessId = crypto.randomUUID();
-  private currentStep = 1;
-
-  startProcess(orderId: string): void {
-    // Logs include: feature, module, processId, step, orderId
-    this.#logger.info('Process started', { orderId });
-  }
-}
-```
-
-## 4. NgRx Effect
-
-```typescript
-import { Injectable } from '@angular/core';
-import { Actions, createEffect, ofType } from '@ngrx/effects';
-import { logger } from '@isa/core/logging';
-import { map, catchError, tap } from 'rxjs/operators';
-import { of } from 'rxjs';
-
-@Injectable()
-export class OrdersEffects {
-  #logger = logger({ effect: 'OrdersEffects' });
-
-  loadOrders$ = createEffect(() =>
-    this.actions$.pipe(
-      ofType(OrdersActions.loadOrders),
-      tap((action) => this.#logger.debug('Loading orders', () => ({
-        page: action.page
-      }))),
-      mergeMap((action) =>
-        this.orderService.getOrders(action.filters).pipe(
-          map((orders) => {
-            this.#logger.info('Orders loaded', () => ({ count: orders.length }));
-            return OrdersActions.loadOrdersSuccess({ orders });
-          }),
-          catchError((error) => {
-            this.#logger.error('Load failed', error);
-            return of(OrdersActions.loadOrdersFailure({ error }));
-          })
-        )
-      )
-    )
-  );
-
-  constructor(
-    private actions$: Actions,
-    private orderService: OrderService
-  ) {}
-}
-```
-
-## 5. Guard with Authorization
-
-```typescript
-import { inject } from '@angular/core';
-import { CanActivateFn, Router } from '@angular/router';
-import { logger } from '@isa/core/logging';
-
-export const authGuard: CanActivateFn = (route, state) => {
-  const authService = inject(AuthService);
-  const router = inject(Router);
-  const log = logger({ guard: 'AuthGuard' });
-
-  if (authService.isAuthenticated()) {
-    log.debug('Access granted', () => ({ route: state.url }));
-    return true;
-  }
-
-  log.warn('Access denied', () => ({
-    attemptedRoute: state.url,
-    redirectTo: '/login'
-  }));
-  return router.createUrlTree(['/login']);
-};
-```
-
-## 6. HTTP Interceptor
-
-```typescript
-import { HttpInterceptorFn } from '@angular/common/http';
-import { inject } from '@angular/core';
-import { tap, catchError } from 'rxjs/operators';
-import { LoggingService } from '@isa/core/logging';
-
-export const loggingInterceptor: HttpInterceptorFn = (req, next) => {
-  const loggingService = inject(LoggingService);
-  const startTime = performance.now();
-
-  loggingService.debug('HTTP Request', () => ({
-    method: req.method,
-    url: req.url
-  }));
-
-  return next(req).pipe(
-    tap((event) => {
-      if (event.type === HttpEventType.Response) {
-        loggingService.info('HTTP Response', () => ({
-          method: req.method,
-          url: req.url,
-          status: event.status,
-          duration: `${(performance.now() - startTime).toFixed(2)}ms`
-        }));
-      }
-    }),
-    catchError((error) => {
-      loggingService.error('HTTP Error', error, () => ({
-        method: req.method,
-        url: req.url,
-        status: error.status
-      }));
-      return throwError(() => error);
-    })
-  );
-};
-```
-
-## 7. Form Validation
-
-```typescript
-import { Component, OnInit } from '@angular/core';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
-import { logger } from '@isa/core/logging';
-
-@Component({
-  selector: 'shared-user-form',
-  standalone: true,
-})
-export class UserFormComponent implements OnInit {
-  #logger = logger({ component: 'UserFormComponent' });
-  form!: FormGroup;
-
-  constructor(private fb: FormBuilder) {}
-
-  ngOnInit(): void {
-    this.form = this.fb.group({
-      name: ['', Validators.required],
-      email: ['', [Validators.required, Validators.email]]
-    });
-  }
-
-  onSubmit(): void {
-    if (this.form.invalid) {
-      this.#logger.warn('Invalid form submission', () => ({
-        errors: this.getFormErrors()
-      }));
-      return;
-    }
-
-    this.#logger.info('Form submitted');
-  }
-
-  private getFormErrors(): Record<string, unknown> {
-    const errors: Record<string, unknown> = {};
-    Object.keys(this.form.controls).forEach((key) => {
-      const control = this.form.get(key);
-      if (control?.errors) errors[key] = control.errors;
-    });
-    return errors;
-  }
-}
-```
-
-## 8. Async Progress Tracking
-
-```typescript
-import { Injectable } from '@angular/core';
-import { logger } from '@isa/core/logging';
-import { Observable } from 'rxjs';
-import { tap } from 'rxjs/operators';
-
-@Injectable({ providedIn: 'root' })
-export class ImportService {
-  #logger = logger({ service: 'ImportService' });
-
-  importData(file: File): Observable<number> {
-    const importId = crypto.randomUUID();
-
-    this.#logger.info('Import started', () => ({
-      importId,
-      fileName: file.name,
-      fileSize: file.size
-    }));
-
-    return this.processImport(file).pipe(
-      tap((progress) => {
-        if (progress % 25 === 0) {
-          this.#logger.debug('Import progress', () => ({
-            importId,
-            progress: `${progress}%`
-          }));
-        }
-      }),
-      tap({
-        complete: () => this.#logger.info('Import completed', { importId }),
-        error: (error) => this.#logger.error('Import failed', error, { importId })
-      })
-    );
-  }
-
-  private processImport(file: File): Observable<number> {
-    // Implementation
-  }
-}
-```
-
-## 9. Global Error Handler
-
-```typescript
-import { Injectable, ErrorHandler } from '@angular/core';
-import { logger } from '@isa/core/logging';
-
-@Injectable()
-export class GlobalErrorHandler implements ErrorHandler {
-  #logger = logger({ handler: 'GlobalErrorHandler' });
-
-  handleError(error: Error): void {
-    this.#logger.error('Uncaught error', error, () => ({
-      url: window.location.href,
-      userAgent: navigator.userAgent,
-      timestamp: new Date().toISOString()
-    }));
-  }
-}
-```
-
-## 10. WebSocket Component
-
-```typescript
-import { Component, OnInit, OnDestroy } from '@angular/core';
-import { logger } from '@isa/core/logging';
-import { Subject, takeUntil } from 'rxjs';
-
-@Component({
-  selector: 'oms-live-orders',
-  standalone: true,
-})
-export class LiveOrdersComponent implements OnInit, OnDestroy {
-  #logger = logger({ component: 'LiveOrdersComponent' });
-  private destroy$ = new Subject<void>();
-
-  constructor(private wsService: WebSocketService) {}
-
-  ngOnInit(): void {
-    this.#logger.info('Connecting to WebSocket');
-
-    this.wsService.connect('orders').pipe(
-      takeUntil(this.destroy$)
-    ).subscribe({
-      next: (msg) => this.#logger.debug('Message received', () => ({
-        type: msg.type,
-        orderId: msg.orderId
-      })),
-      error: (error) => this.#logger.error('WebSocket error', error),
-      complete: () => this.#logger.info('WebSocket closed')
-    });
-  }
-
-  ngOnDestroy(): void {
-    this.#logger.debug('Component destroyed');
-    this.destroy$.next();
-    this.destroy$.complete();
-  }
-}
-```
+# Logging Examples
+
+Concise real-world examples of logging patterns.
+
+## 1. Component with Observable
+
+```typescript
+import { Component, OnInit } from '@angular/core';
+import { logger } from '@isa/core/logging';
+
+@Component({
+  selector: 'app-product-list',
+  standalone: true,
+})
+export class ProductListComponent implements OnInit {
+  #logger = logger({ component: 'ProductListComponent' });
+
+  constructor(private productService: ProductService) {}
+
+  ngOnInit(): void {
+    this.#logger.info('Component initialized');
+    this.loadProducts();
+  }
+
+  private loadProducts(): void {
+    this.productService.getProducts().subscribe({
+      next: (products) => {
+        this.#logger.info('Products loaded', () => ({ count: products.length }));
+      },
+      error: (error) => {
+        this.#logger.error('Failed to load products', error);
+      }
+    });
+  }
+}
+```
+
+## 2. Service with HTTP
+
+```typescript
+import { Injectable, inject } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { logger } from '@isa/core/logging';
+import { catchError, tap } from 'rxjs/operators';
+
+@Injectable({ providedIn: 'root' })
+export class OrderService {
+  private http = inject(HttpClient);
+  #logger = logger({ service: 'OrderService' });
+
+  getOrder(id: string): Observable<Order> {
+    this.#logger.debug('Fetching order', { id });
+
+    return this.http.get<Order>(`/api/orders/${id}`).pipe(
+      tap((order) => this.#logger.info('Order fetched', () => ({
+        id,
+        status: order.status
+      }))),
+      catchError((error) => {
+        this.#logger.error('Fetch failed', error, () => ({ id, status: error.status }));
+        throw error;
+      })
+    );
+  }
+}
+```
+
+## 3. Hierarchical Context
+
+```typescript
+import { Component } from '@angular/core';
+import { logger, provideLoggerContext } from '@isa/core/logging';
+
+@Component({
+  selector: 'oms-return-process',
+  standalone: true,
+  providers: [
+    provideLoggerContext({ feature: 'returns', module: 'oms' })
+  ],
+})
+export class ReturnProcessComponent {
+  #logger = logger(() => ({
+    processId: this.currentProcessId,
+    step: this.currentStep
+  }));
+
+  private currentProcessId = crypto.randomUUID();
+  private currentStep = 1;
+
+  startProcess(orderId: string): void {
+    // Logs include: feature, module, processId, step, orderId
+    this.#logger.info('Process started', { orderId });
+  }
+}
+```
+
+## 4. NgRx Effect
+
+```typescript
+import { Injectable } from '@angular/core';
+import { Actions, createEffect, ofType } from '@ngrx/effects';
+import { logger } from '@isa/core/logging';
+import { map, catchError, tap } from 'rxjs/operators';
+import { of } from 'rxjs';
+
+@Injectable()
+export class OrdersEffects {
+  #logger = logger({ effect: 'OrdersEffects' });
+
+  loadOrders$ = createEffect(() =>
+    this.actions$.pipe(
+      ofType(OrdersActions.loadOrders),
+      tap((action) => this.#logger.debug('Loading orders', () => ({
+        page: action.page
+      }))),
+      mergeMap((action) =>
+        this.orderService.getOrders(action.filters).pipe(
+          map((orders) => {
+            this.#logger.info('Orders loaded', () => ({ count: orders.length }));
+            return OrdersActions.loadOrdersSuccess({ orders });
+          }),
+          catchError((error) => {
+            this.#logger.error('Load failed', error);
+            return of(OrdersActions.loadOrdersFailure({ error }));
+          })
+        )
+      )
+    )
+  );
+
+  constructor(
+    private actions$: Actions,
+    private orderService: OrderService
+  ) {}
+}
+```
+
+## 5. Guard with Authorization
+
+```typescript
+import { inject } from '@angular/core';
+import { CanActivateFn, Router } from '@angular/router';
+import { logger } from '@isa/core/logging';
+
+export const authGuard: CanActivateFn = (route, state) => {
+  const authService = inject(AuthService);
+  const router = inject(Router);
+  const log = logger({ guard: 'AuthGuard' });
+
+  if (authService.isAuthenticated()) {
+    log.debug('Access granted', () => ({ route: state.url }));
+    return true;
+  }
+
+  log.warn('Access denied', () => ({
+    attemptedRoute: state.url,
+    redirectTo: '/login'
+  }));
+  return router.createUrlTree(['/login']);
+};
+```
+
+## 6. HTTP Interceptor
+
+```typescript
+import { HttpInterceptorFn } from '@angular/common/http';
+import { inject } from '@angular/core';
+import { tap, catchError } from 'rxjs/operators';
+import { LoggingService } from '@isa/core/logging';
+
+export const loggingInterceptor: HttpInterceptorFn = (req, next) => {
+  const loggingService = inject(LoggingService);
+  const startTime = performance.now();
+
+  loggingService.debug('HTTP Request', () => ({
+    method: req.method,
+    url: req.url
+  }));
+
+  return next(req).pipe(
+    tap((event) => {
+      if (event.type === HttpEventType.Response) {
+        loggingService.info('HTTP Response', () => ({
+          method: req.method,
+          url: req.url,
+          status: event.status,
+          duration: `${(performance.now() - startTime).toFixed(2)}ms`
+        }));
+      }
+    }),
+    catchError((error) => {
+      loggingService.error('HTTP Error', error, () => ({
+        method: req.method,
+        url: req.url,
+        status: error.status
+      }));
+      return throwError(() => error);
+    })
+  );
+};
+```
+
+## 7. Form Validation
+
+```typescript
+import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { logger } from '@isa/core/logging';
+
+@Component({
+  selector: 'shared-user-form',
+  standalone: true,
+})
+export class UserFormComponent implements OnInit {
+  #logger = logger({ component: 'UserFormComponent' });
+  form!: FormGroup;
+
+  constructor(private fb: FormBuilder) {}
+
+  ngOnInit(): void {
+    this.form = this.fb.group({
+      name: ['', Validators.required],
+      email: ['', [Validators.required, Validators.email]]
+    });
+  }
+
+  onSubmit(): void {
+    if (this.form.invalid) {
+      this.#logger.warn('Invalid form submission', () => ({
+        errors: this.getFormErrors()
+      }));
+      return;
+    }
+
+    this.#logger.info('Form submitted');
+  }
+
+  private getFormErrors(): Record<string, unknown> {
+    const errors: Record<string, unknown> = {};
+    Object.keys(this.form.controls).forEach((key) => {
+      const control = this.form.get(key);
+      if (control?.errors) errors[key] = control.errors;
+    });
+    return errors;
+  }
+}
+```
+
+## 8. Async Progress Tracking
+
+```typescript
+import { Injectable } from '@angular/core';
+import { logger } from '@isa/core/logging';
+import { Observable } from 'rxjs';
+import { tap } from 'rxjs/operators';
+
+@Injectable({ providedIn: 'root' })
+export class ImportService {
+  #logger = logger({ service: 'ImportService' });
+
+  importData(file: File): Observable<number> {
+    const importId = crypto.randomUUID();
+
+    this.#logger.info('Import started', () => ({
+      importId,
+      fileName: file.name,
+      fileSize: file.size
+    }));
+
+    return this.processImport(file).pipe(
+      tap((progress) => {
+        if (progress % 25 === 0) {
+          this.#logger.debug('Import progress', () => ({
+            importId,
+            progress: `${progress}%`
+          }));
+        }
+      }),
+      tap({
+        complete: () => this.#logger.info('Import completed', { importId }),
+        error: (error) => this.#logger.error('Import failed', error, { importId })
+      })
+    );
+  }
+
+  private processImport(file: File): Observable<number> {
+    // Implementation
+  }
+}
+```
+
+## 9. Global Error Handler
+
+```typescript
+import { Injectable, ErrorHandler } from '@angular/core';
+import { logger } from '@isa/core/logging';
+
+@Injectable()
+export class GlobalErrorHandler implements ErrorHandler {
+  #logger = logger({ handler: 'GlobalErrorHandler' });
+
+  handleError(error: Error): void {
+    this.#logger.error('Uncaught error', error, () => ({
+      url: window.location.href,
+      userAgent: navigator.userAgent,
+      timestamp: new Date().toISOString()
+    }));
+  }
+}
+```
+
+## 10. WebSocket Component
+
+```typescript
+import { Component, OnInit, OnDestroy } from '@angular/core';
+import { logger } from '@isa/core/logging';
+import { Subject, takeUntil } from 'rxjs';
+
+@Component({
+  selector: 'oms-live-orders',
+  standalone: true,
+})
+export class LiveOrdersComponent implements OnInit, OnDestroy {
+  #logger = logger({ component: 'LiveOrdersComponent' });
+  private destroy$ = new Subject<void>();
+
+  constructor(private wsService: WebSocketService) {}
+
+  ngOnInit(): void {
+    this.#logger.info('Connecting to WebSocket');
+
+    this.wsService.connect('orders').pipe(
+      takeUntil(this.destroy$)
+    ).subscribe({
+      next: (msg) => this.#logger.debug('Message received', () => ({
+        type: msg.type,
+        orderId: msg.orderId
+      })),
+      error: (error) => this.#logger.error('WebSocket error', error),
+      complete: () => this.#logger.info('WebSocket closed')
+    });
+  }
+
+  ngOnDestroy(): void {
+    this.#logger.debug('Component destroyed');
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+}
+```

.claude/skills/logging/references/troubleshooting.md

@@ -1,235 +1,235 @@
-# Logging Troubleshooting
-
-## 1. Logs Not Appearing
-
-**Problem:** Logger called but nothing in console.
-
-**Solutions:**
-```typescript
-// Check log level
-provideLogging(
-  withLogLevel(isDevMode() ? LogLevel.Debug : LogLevel.Warn)
-)
-
-// Add sink
-provideLogging(
-  withLogLevel(LogLevel.Debug),
-  withSink(ConsoleLogSink) // Required!
-)
-
-// Verify configuration in app.config.ts
-export const appConfig: ApplicationConfig = {
-  providers: [
-    provideLogging(...) // Must be present
-  ]
-};
-```
-
-## 2. NullInjectorError
-
-**Error:** `NullInjectorError: No provider for LoggingService!`
-
-**Solution:**
-```typescript
-// app.config.ts
-import { provideLogging, withLogLevel, withSink,
-         LogLevel, ConsoleLogSink } from '@isa/core/logging';
-
-export const appConfig: ApplicationConfig = {
-  providers: [
-    provideLogging(
-      withLogLevel(LogLevel.Debug),
-      withSink(ConsoleLogSink)
-    )
-  ]
-};
-```
-
-## 3. Context Not Showing
-
-**Problem:** Context passed but doesn't appear.
-
-**Check:**
-```typescript
-// ✅ Both work:
-this.#logger.info('Message', () => ({ id: '123' })); // Function
-this.#logger.info('Message', { id: '123' });          // Object
-
-// ❌ Common mistake:
-const ctx = { id: '123' };
-this.#logger.info('Message', ctx); // Actually works!
-
-// Verify hierarchical merge:
-// Global → Component → Instance → Message
-```
-
-## 4. Performance Issues
-
-**Problem:** Slow when debug logging enabled.
-
-**Solutions:**
-```typescript
-// ✅ Use lazy evaluation
-this.#logger.debug('Data', () => ({
-  expensive: this.compute() // Only if debug enabled
-}));
-
-// ✅ Reduce log frequency
-this.#logger.debug('Batch', () => ({
-  count: items.length // Not each item
-}));
-
-// ✅ Increase production level
-provideLogging(
-  withLogLevel(isDevMode() ? LogLevel.Debug : LogLevel.Warn)
-)
-```
-
-## 5. Error Object Not Logged
-
-**Problem:** Error shows as `[object Object]`.
-
-**Solution:**
-```typescript
-// ❌ Wrong
-this.#logger.error('Failed', { error }); // Don't wrap in object
-
-// ✅ Correct
-this.#logger.error('Failed', error as Error, () => ({
-  additionalContext: 'value'
-}));
-```
-
-## 6. TypeScript Errors
-
-**Error:** `Type 'X' is not assignable to 'MaybeLoggerContextFn'`
-
-**Solution:**
-```typescript
-// ❌ Wrong type
-this.#logger.info('Message', 'string'); // Invalid
-
-// ✅ Correct types
-this.#logger.info('Message', { key: 'value' });
-this.#logger.info('Message', () => ({ key: 'value' }));
-```
-
-## 7. Logs in Tests
-
-**Problem:** Test output cluttered with logs.
-
-**Solutions:**
-```typescript
-// Mock logging service
-import { createComponentFactory, Spectator } from '@ngneat/spectator/jest';
-import { LoggingService } from '@isa/core/logging';
-
-const createComponent = createComponentFactory({
-  component: MyComponent,
-  mocks: [LoggingService] // Mocks all log methods
-});
-
-// Or disable in tests
-TestBed.configureTestingModule({
-  providers: [
-    provideLogging(withLogLevel(LogLevel.Off))
-  ]
-});
-```
-
-## 8. Undefined Property Error
-
-**Error:** `Cannot read property 'X' of undefined`
-
-**Problem:** Accessing uninitialized property in logger context.
-
-**Solutions:**
-```typescript
-// ❌ Problem
-#logger = logger(() => ({
-  userId: this.userService.currentUserId // May be undefined
-}));
-
-// ✅ Solution 1: Optional chaining
-#logger = logger(() => ({
-  userId: this.userService?.currentUserId ?? 'unknown'
-}));
-
-// ✅ Solution 2: Delay access
-ngOnInit() {
-  this.#logger.info('Init', () => ({
-    userId: this.userService.currentUserId // Safe here
-  }));
-}
-```
-
-## 9. Circular Dependency
-
-**Error:** `NG0200: Circular dependency in DI detected`
-
-**Cause:** Service A ← → Service B both inject LoggingService.
-
-**Solution:**
-```typescript
-// ❌ Creates circular dependency
-constructor(private loggingService: LoggingService) {}
-
-// ✅ Use factory (no circular dependency)
-#logger = logger({ service: 'MyService' });
-```
-
-## 10. Custom Sink Not Working
-
-**Problem:** Sink registered but never called.
-
-**Solutions:**
-```typescript
-// ✅ Correct registration
-provideLogging(
-  withSink(MySink) // Add to config
-)
-
-// ✅ Correct signature
-export class MySink implements Sink {
-  log(
-    level: LogLevel,
-    message: string,
-    context?: LoggerContext,
-    error?: Error
-  ): void {
-    // Implementation
-  }
-}
-
-// ✅ Sink function must return function
-export const mySinkFn: SinkFn = () => {
-  const http = inject(HttpClient);
-  return (level, message, context, error) => {
-    // Implementation
-  };
-};
-```
-
-## Quick Diagnostics
-
-```typescript
-// Enable all logs temporarily
-provideLogging(withLogLevel(LogLevel.Trace))
-
-// Check imports
-import { logger } from '@isa/core/logging'; // ✅ Correct
-import { logger } from '@isa/core/logging/src/lib/logger.factory'; // ❌ Wrong
-
-// Verify console filters in browser DevTools
-// Ensure Info, Debug, Warnings are enabled
-```
-
-## Common Error Messages
-
-| Error | Cause | Fix |
-|-------|-------|-----|
-| `NullInjectorError: LoggingService` | Missing config | Add `provideLogging()` |
-| `Type 'X' not assignable` | Wrong context type | Use object or function |
-| `Cannot read property 'X'` | Undefined property | Use optional chaining |
-| `Circular dependency` | Service injection | Use `logger()` factory |
-| Stack overflow | Infinite loop in context | Don't call logger in context |
+# Logging Troubleshooting
+
+## 1. Logs Not Appearing
+
+**Problem:** Logger called but nothing in console.
+
+**Solutions:**
+```typescript
+// Check log level
+provideLogging(
+  withLogLevel(isDevMode() ? LogLevel.Debug : LogLevel.Warn)
+)
+
+// Add sink
+provideLogging(
+  withLogLevel(LogLevel.Debug),
+  withSink(ConsoleLogSink) // Required!
+)
+
+// Verify configuration in app.config.ts
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideLogging(...) // Must be present
+  ]
+};
+```
+
+## 2. NullInjectorError
+
+**Error:** `NullInjectorError: No provider for LoggingService!`
+
+**Solution:**
+```typescript
+// app.config.ts
+import { provideLogging, withLogLevel, withSink,
+         LogLevel, ConsoleLogSink } from '@isa/core/logging';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideLogging(
+      withLogLevel(LogLevel.Debug),
+      withSink(ConsoleLogSink)
+    )
+  ]
+};
+```
+
+## 3. Context Not Showing
+
+**Problem:** Context passed but doesn't appear.
+
+**Check:**
+```typescript
+// ✅ Both work:
+this.#logger.info('Message', () => ({ id: '123' })); // Function
+this.#logger.info('Message', { id: '123' });          // Object
+
+// ❌ Common mistake:
+const ctx = { id: '123' };
+this.#logger.info('Message', ctx); // Actually works!
+
+// Verify hierarchical merge:
+// Global → Component → Instance → Message
+```
+
+## 4. Performance Issues
+
+**Problem:** Slow when debug logging enabled.
+
+**Solutions:**
+```typescript
+// ✅ Use lazy evaluation
+this.#logger.debug('Data', () => ({
+  expensive: this.compute() // Only if debug enabled
+}));
+
+// ✅ Reduce log frequency
+this.#logger.debug('Batch', () => ({
+  count: items.length // Not each item
+}));
+
+// ✅ Increase production level
+provideLogging(
+  withLogLevel(isDevMode() ? LogLevel.Debug : LogLevel.Warn)
+)
+```
+
+## 5. Error Object Not Logged
+
+**Problem:** Error shows as `[object Object]`.
+
+**Solution:**
+```typescript
+// ❌ Wrong
+this.#logger.error('Failed', { error }); // Don't wrap in object
+
+// ✅ Correct
+this.#logger.error('Failed', error as Error, () => ({
+  additionalContext: 'value'
+}));
+```
+
+## 6. TypeScript Errors
+
+**Error:** `Type 'X' is not assignable to 'MaybeLoggerContextFn'`
+
+**Solution:**
+```typescript
+// ❌ Wrong type
+this.#logger.info('Message', 'string'); // Invalid
+
+// ✅ Correct types
+this.#logger.info('Message', { key: 'value' });
+this.#logger.info('Message', () => ({ key: 'value' }));
+```
+
+## 7. Logs in Tests
+
+**Problem:** Test output cluttered with logs.
+
+**Solutions:**
+```typescript
+// Mock logging service
+import { createComponentFactory, Spectator } from '@ngneat/spectator/jest';
+import { LoggingService } from '@isa/core/logging';
+
+const createComponent = createComponentFactory({
+  component: MyComponent,
+  mocks: [LoggingService] // Mocks all log methods
+});
+
+// Or disable in tests
+TestBed.configureTestingModule({
+  providers: [
+    provideLogging(withLogLevel(LogLevel.Off))
+  ]
+});
+```
+
+## 8. Undefined Property Error
+
+**Error:** `Cannot read property 'X' of undefined`
+
+**Problem:** Accessing uninitialized property in logger context.
+
+**Solutions:**
+```typescript
+// ❌ Problem
+#logger = logger(() => ({
+  userId: this.userService.currentUserId // May be undefined
+}));
+
+// ✅ Solution 1: Optional chaining
+#logger = logger(() => ({
+  userId: this.userService?.currentUserId ?? 'unknown'
+}));
+
+// ✅ Solution 2: Delay access
+ngOnInit() {
+  this.#logger.info('Init', () => ({
+    userId: this.userService.currentUserId // Safe here
+  }));
+}
+```
+
+## 9. Circular Dependency
+
+**Error:** `NG0200: Circular dependency in DI detected`
+
+**Cause:** Service A ← → Service B both inject LoggingService.
+
+**Solution:**
+```typescript
+// ❌ Creates circular dependency
+constructor(private loggingService: LoggingService) {}
+
+// ✅ Use factory (no circular dependency)
+#logger = logger({ service: 'MyService' });
+```
+
+## 10. Custom Sink Not Working
+
+**Problem:** Sink registered but never called.
+
+**Solutions:**
+```typescript
+// ✅ Correct registration
+provideLogging(
+  withSink(MySink) // Add to config
+)
+
+// ✅ Correct signature
+export class MySink implements Sink {
+  log(
+    level: LogLevel,
+    message: string,
+    context?: LoggerContext,
+    error?: Error
+  ): void {
+    // Implementation
+  }
+}
+
+// ✅ Sink function must return function
+export const mySinkFn: SinkFn = () => {
+  const http = inject(HttpClient);
+  return (level, message, context, error) => {
+    // Implementation
+  };
+};
+```
+
+## Quick Diagnostics
+
+```typescript
+// Enable all logs temporarily
+provideLogging(withLogLevel(LogLevel.Trace))
+
+// Check imports
+import { logger } from '@isa/core/logging'; // ✅ Correct
+import { logger } from '@isa/core/logging/src/lib/logger.factory'; // ❌ Wrong
+
+// Verify console filters in browser DevTools
+// Ensure Info, Debug, Warnings are enabled
+```
+
+## Common Error Messages
+
+| Error | Cause | Fix |
+|-------|-------|-----|
+| `NullInjectorError: LoggingService` | Missing config | Add `provideLogging()` |
+| `Type 'X' not assignable` | Wrong context type | Use object or function |
+| `Cannot read property 'X'` | Undefined property | Use optional chaining |
+| `Circular dependency` | Service injection | Use `logger()` factory |
+| Stack overflow | Infinite loop in context | Don't call logger in context |

.claude/skills/skill-creator/SKILL.md

@@ -1,209 +1,356 @@
----
-name: skill-creator
-description: Guide for creating effective skills. This skill should be used when users want to create a new skill (or update an existing skill) that extends Claude's capabilities with specialized knowledge, workflows, or tool integrations.
-license: Complete terms in LICENSE.txt
----
-
-# Skill Creator
-
-This skill provides guidance for creating effective skills.
-
-## About Skills
-
-Skills are modular, self-contained packages that extend Claude's capabilities by providing
-specialized knowledge, workflows, and tools. Think of them as "onboarding guides" for specific
-domains or tasks—they transform Claude from a general-purpose agent into a specialized agent
-equipped with procedural knowledge that no model can fully possess.
-
-### What Skills Provide
-
-1. Specialized workflows - Multi-step procedures for specific domains
-2. Tool integrations - Instructions for working with specific file formats or APIs
-3. Domain expertise - Company-specific knowledge, schemas, business logic
-4. Bundled resources - Scripts, references, and assets for complex and repetitive tasks
-
-### Anatomy of a Skill
-
-Every skill consists of a required SKILL.md file and optional bundled resources:
-
-```
-skill-name/
-├── SKILL.md (required)
-│   ├── YAML frontmatter metadata (required)
-│   │   ├── name: (required)
-│   │   └── description: (required)
-│   └── Markdown instructions (required)
-└── Bundled Resources (optional)
-    ├── scripts/          - Executable code (Python/Bash/etc.)
-    ├── references/       - Documentation intended to be loaded into context as needed
-    └── assets/           - Files used in output (templates, icons, fonts, etc.)
-```
-
-#### SKILL.md (required)
-
-**Metadata Quality:** The `name` and `description` in YAML frontmatter determine when Claude will use the skill. Be specific about what the skill does and when to use it. Use the third-person (e.g. "This skill should be used when..." instead of "Use this skill when...").
-
-#### Bundled Resources (optional)
-
-##### Scripts (`scripts/`)
-
-Executable code (Python/Bash/etc.) for tasks that require deterministic reliability or are repeatedly rewritten.
-
-- **When to include**: When the same code is being rewritten repeatedly or deterministic reliability is needed
-- **Example**: `scripts/rotate_pdf.py` for PDF rotation tasks
-- **Benefits**: Token efficient, deterministic, may be executed without loading into context
-- **Note**: Scripts may still need to be read by Claude for patching or environment-specific adjustments
-
-##### References (`references/`)
-
-Documentation and reference material intended to be loaded as needed into context to inform Claude's process and thinking.
-
-- **When to include**: For documentation that Claude should reference while working
-- **Examples**: `references/finance.md` for financial schemas, `references/mnda.md` for company NDA template, `references/policies.md` for company policies, `references/api_docs.md` for API specifications
-- **Use cases**: Database schemas, API documentation, domain knowledge, company policies, detailed workflow guides
-- **Benefits**: Keeps SKILL.md lean, loaded only when Claude determines it's needed
-- **Best practice**: If files are large (>10k words), include grep search patterns in SKILL.md
-- **Avoid duplication**: Information should live in either SKILL.md or references files, not both. Prefer references files for detailed information unless it's truly core to the skill—this keeps SKILL.md lean while making information discoverable without hogging the context window. Keep only essential procedural instructions and workflow guidance in SKILL.md; move detailed reference material, schemas, and examples to references files.
-
-##### Assets (`assets/`)
-
-Files not intended to be loaded into context, but rather used within the output Claude produces.
-
-- **When to include**: When the skill needs files that will be used in the final output
-- **Examples**: `assets/logo.png` for brand assets, `assets/slides.pptx` for PowerPoint templates, `assets/frontend-template/` for HTML/React boilerplate, `assets/font.ttf` for typography
-- **Use cases**: Templates, images, icons, boilerplate code, fonts, sample documents that get copied or modified
-- **Benefits**: Separates output resources from documentation, enables Claude to use files without loading them into context
-
-### Progressive Disclosure Design Principle
-
-Skills use a three-level loading system to manage context efficiently:
-
-1. **Metadata (name + description)** - Always in context (~100 words)
-2. **SKILL.md body** - When skill triggers (<5k words)
-3. **Bundled resources** - As needed by Claude (Unlimited*)
-
-*Unlimited because scripts can be executed without reading into context window.
-
-## Skill Creation Process
-
-To create a skill, follow the "Skill Creation Process" in order, skipping steps only if there is a clear reason why they are not applicable.
-
-### Step 1: Understanding the Skill with Concrete Examples
-
-Skip this step only when the skill's usage patterns are already clearly understood. It remains valuable even when working with an existing skill.
-
-To create an effective skill, clearly understand concrete examples of how the skill will be used. This understanding can come from either direct user examples or generated examples that are validated with user feedback.
-
-For example, when building an image-editor skill, relevant questions include:
-
-- "What functionality should the image-editor skill support? Editing, rotating, anything else?"
-- "Can you give some examples of how this skill would be used?"
-- "I can imagine users asking for things like 'Remove the red-eye from this image' or 'Rotate this image'. Are there other ways you imagine this skill being used?"
-- "What would a user say that should trigger this skill?"
-
-To avoid overwhelming users, avoid asking too many questions in a single message. Start with the most important questions and follow up as needed for better effectiveness.
-
-Conclude this step when there is a clear sense of the functionality the skill should support.
-
-### Step 2: Planning the Reusable Skill Contents
-
-To turn concrete examples into an effective skill, analyze each example by:
-
-1. Considering how to execute on the example from scratch
-2. Identifying what scripts, references, and assets would be helpful when executing these workflows repeatedly
-
-Example: When building a `pdf-editor` skill to handle queries like "Help me rotate this PDF," the analysis shows:
-
-1. Rotating a PDF requires re-writing the same code each time
-2. A `scripts/rotate_pdf.py` script would be helpful to store in the skill
-
-Example: When designing a `frontend-webapp-builder` skill for queries like "Build me a todo app" or "Build me a dashboard to track my steps," the analysis shows:
-
-1. Writing a frontend webapp requires the same boilerplate HTML/React each time
-2. An `assets/hello-world/` template containing the boilerplate HTML/React project files would be helpful to store in the skill
-
-Example: When building a `big-query` skill to handle queries like "How many users have logged in today?" the analysis shows:
-
-1. Querying BigQuery requires re-discovering the table schemas and relationships each time
-2. A `references/schema.md` file documenting the table schemas would be helpful to store in the skill
-
-To establish the skill's contents, analyze each concrete example to create a list of the reusable resources to include: scripts, references, and assets.
-
-### Step 3: Initializing the Skill
-
-At this point, it is time to actually create the skill.
-
-Skip this step only if the skill being developed already exists, and iteration or packaging is needed. In this case, continue to the next step.
-
-When creating a new skill from scratch, always run the `init_skill.py` script. The script conveniently generates a new template skill directory that automatically includes everything a skill requires, making the skill creation process much more efficient and reliable.
-
-Usage:
-
-```bash
-scripts/init_skill.py <skill-name> --path <output-directory>
-```
-
-The script:
-
-- Creates the skill directory at the specified path
-- Generates a SKILL.md template with proper frontmatter and TODO placeholders
-- Creates example resource directories: `scripts/`, `references/`, and `assets/`
-- Adds example files in each directory that can be customized or deleted
-
-After initialization, customize or remove the generated SKILL.md and example files as needed.
-
-### Step 4: Edit the Skill
-
-When editing the (newly-generated or existing) skill, remember that the skill is being created for another instance of Claude to use. Focus on including information that would be beneficial and non-obvious to Claude. Consider what procedural knowledge, domain-specific details, or reusable assets would help another Claude instance execute these tasks more effectively.
-
-#### Start with Reusable Skill Contents
-
-To begin implementation, start with the reusable resources identified above: `scripts/`, `references/`, and `assets/` files. Note that this step may require user input. For example, when implementing a `brand-guidelines` skill, the user may need to provide brand assets or templates to store in `assets/`, or documentation to store in `references/`.
-
-Also, delete any example files and directories not needed for the skill. The initialization script creates example files in `scripts/`, `references/`, and `assets/` to demonstrate structure, but most skills won't need all of them.
-
-#### Update SKILL.md
-
-**Writing Style:** Write the entire skill using **imperative/infinitive form** (verb-first instructions), not second person. Use objective, instructional language (e.g., "To accomplish X, do Y" rather than "You should do X" or "If you need to do X"). This maintains consistency and clarity for AI consumption.
-
-To complete SKILL.md, answer the following questions:
-
-1. What is the purpose of the skill, in a few sentences?
-2. When should the skill be used?
-3. In practice, how should Claude use the skill? All reusable skill contents developed above should be referenced so that Claude knows how to use them.
-
-### Step 5: Packaging a Skill
-
-Once the skill is ready, it should be packaged into a distributable zip file that gets shared with the user. The packaging process automatically validates the skill first to ensure it meets all requirements:
-
-```bash
-scripts/package_skill.py <path/to/skill-folder>
-```
-
-Optional output directory specification:
-
-```bash
-scripts/package_skill.py <path/to/skill-folder> ./dist
-```
-
-The packaging script will:
-
-1. **Validate** the skill automatically, checking:
-   - YAML frontmatter format and required fields
-   - Skill naming conventions and directory structure
-   - Description completeness and quality
-   - File organization and resource references
-
-2. **Package** the skill if validation passes, creating a zip file named after the skill (e.g., `my-skill.zip`) that includes all files and maintains the proper directory structure for distribution.
-
-If validation fails, the script will report the errors and exit without creating a package. Fix any validation errors and run the packaging command again.
-
-### Step 6: Iterate
-
-After testing the skill, users may request improvements. Often this happens right after using the skill, with fresh context of how the skill performed.
-
-**Iteration workflow:**
-1. Use the skill on real tasks
-2. Notice struggles or inefficiencies
-3. Identify how SKILL.md or bundled resources should be updated
-4. Implement changes and test again
+---
+name: skill-creator
+description: Guide for creating effective skills. This skill should be used when users want to create a new skill (or update an existing skill) that extends Claude's capabilities with specialized knowledge, workflows, or tool integrations.
+license: Complete terms in LICENSE.txt
+---
+
+# Skill Creator
+
+This skill provides guidance for creating effective skills.
+
+## About Skills
+
+Skills are modular, self-contained packages that extend Claude's capabilities by providing
+specialized knowledge, workflows, and tools. Think of them as "onboarding guides" for specific
+domains or tasks—they transform Claude from a general-purpose agent into a specialized agent
+equipped with procedural knowledge that no model can fully possess.
+
+### What Skills Provide
+
+1. Specialized workflows - Multi-step procedures for specific domains
+2. Tool integrations - Instructions for working with specific file formats or APIs
+3. Domain expertise - Company-specific knowledge, schemas, business logic
+4. Bundled resources - Scripts, references, and assets for complex and repetitive tasks
+
+## Core Principles
+
+### Concise is Key
+
+The context window is a public good. Skills share the context window with everything else Claude needs: system prompt, conversation history, other Skills' metadata, and the actual user request.
+
+**Default assumption: Claude is already very smart.** Only add context Claude doesn't already have. Challenge each piece of information: "Does Claude really need this explanation?" and "Does this paragraph justify its token cost?"
+
+Prefer concise examples over verbose explanations.
+
+### Set Appropriate Degrees of Freedom
+
+Match the level of specificity to the task's fragility and variability:
+
+**High freedom (text-based instructions)**: Use when multiple approaches are valid, decisions depend on context, or heuristics guide the approach.
+
+**Medium freedom (pseudocode or scripts with parameters)**: Use when a preferred pattern exists, some variation is acceptable, or configuration affects behavior.
+
+**Low freedom (specific scripts, few parameters)**: Use when operations are fragile and error-prone, consistency is critical, or a specific sequence must be followed.
+
+Think of Claude as exploring a path: a narrow bridge with cliffs needs specific guardrails (low freedom), while an open field allows many routes (high freedom).
+
+### Anatomy of a Skill
+
+Every skill consists of a required SKILL.md file and optional bundled resources:
+
+```
+skill-name/
+├── SKILL.md (required)
+│   ├── YAML frontmatter metadata (required)
+│   │   ├── name: (required)
+│   │   └── description: (required)
+│   └── Markdown instructions (required)
+└── Bundled Resources (optional)
+    ├── scripts/          - Executable code (Python/Bash/etc.)
+    ├── references/       - Documentation intended to be loaded into context as needed
+    └── assets/           - Files used in output (templates, icons, fonts, etc.)
+```
+
+#### SKILL.md (required)
+
+Every SKILL.md consists of:
+
+- **Frontmatter** (YAML): Contains `name` and `description` fields. These are the only fields that Claude reads to determine when the skill gets used, thus it is very important to be clear and comprehensive in describing what the skill is, and when it should be used.
+- **Body** (Markdown): Instructions and guidance for using the skill. Only loaded AFTER the skill triggers (if at all).
+
+#### Bundled Resources (optional)
+
+##### Scripts (`scripts/`)
+
+Executable code (Python/Bash/etc.) for tasks that require deterministic reliability or are repeatedly rewritten.
+
+- **When to include**: When the same code is being rewritten repeatedly or deterministic reliability is needed
+- **Example**: `scripts/rotate_pdf.py` for PDF rotation tasks
+- **Benefits**: Token efficient, deterministic, may be executed without loading into context
+- **Note**: Scripts may still need to be read by Claude for patching or environment-specific adjustments
+
+##### References (`references/`)
+
+Documentation and reference material intended to be loaded as needed into context to inform Claude's process and thinking.
+
+- **When to include**: For documentation that Claude should reference while working
+- **Examples**: `references/finance.md` for financial schemas, `references/mnda.md` for company NDA template, `references/policies.md` for company policies, `references/api_docs.md` for API specifications
+- **Use cases**: Database schemas, API documentation, domain knowledge, company policies, detailed workflow guides
+- **Benefits**: Keeps SKILL.md lean, loaded only when Claude determines it's needed
+- **Best practice**: If files are large (>10k words), include grep search patterns in SKILL.md
+- **Avoid duplication**: Information should live in either SKILL.md or references files, not both. Prefer references files for detailed information unless it's truly core to the skill—this keeps SKILL.md lean while making information discoverable without hogging the context window. Keep only essential procedural instructions and workflow guidance in SKILL.md; move detailed reference material, schemas, and examples to references files.
+
+##### Assets (`assets/`)
+
+Files not intended to be loaded into context, but rather used within the output Claude produces.
+
+- **When to include**: When the skill needs files that will be used in the final output
+- **Examples**: `assets/logo.png` for brand assets, `assets/slides.pptx` for PowerPoint templates, `assets/frontend-template/` for HTML/React boilerplate, `assets/font.ttf` for typography
+- **Use cases**: Templates, images, icons, boilerplate code, fonts, sample documents that get copied or modified
+- **Benefits**: Separates output resources from documentation, enables Claude to use files without loading them into context
+
+#### What to Not Include in a Skill
+
+A skill should only contain essential files that directly support its functionality. Do NOT create extraneous documentation or auxiliary files, including:
+
+- README.md
+- INSTALLATION_GUIDE.md
+- QUICK_REFERENCE.md
+- CHANGELOG.md
+- etc.
+
+The skill should only contain the information needed for an AI agent to do the job at hand. It should not contain auxilary context about the process that went into creating it, setup and testing procedures, user-facing documentation, etc. Creating additional documentation files just adds clutter and confusion.
+
+### Progressive Disclosure Design Principle
+
+Skills use a three-level loading system to manage context efficiently:
+
+1. **Metadata (name + description)** - Always in context (~100 words)
+2. **SKILL.md body** - When skill triggers (<5k words)
+3. **Bundled resources** - As needed by Claude (Unlimited because scripts can be executed without reading into context window)
+
+#### Progressive Disclosure Patterns
+
+Keep SKILL.md body to the essentials and under 500 lines to minimize context bloat. Split content into separate files when approaching this limit. When splitting out content into other files, it is very important to reference them from SKILL.md and describe clearly when to read them, to ensure the reader of the skill knows they exist and when to use them.
+
+**Key principle:** When a skill supports multiple variations, frameworks, or options, keep only the core workflow and selection guidance in SKILL.md. Move variant-specific details (patterns, examples, configuration) into separate reference files.
+
+**Pattern 1: High-level guide with references**
+
+```markdown
+# PDF Processing
+
+## Quick start
+
+Extract text with pdfplumber:
+[code example]
+
+## Advanced features
+
+- **Form filling**: See [FORMS.md](FORMS.md) for complete guide
+- **API reference**: See [REFERENCE.md](REFERENCE.md) for all methods
+- **Examples**: See [EXAMPLES.md](EXAMPLES.md) for common patterns
+```
+
+Claude loads FORMS.md, REFERENCE.md, or EXAMPLES.md only when needed.
+
+**Pattern 2: Domain-specific organization**
+
+For Skills with multiple domains, organize content by domain to avoid loading irrelevant context:
+
+```
+bigquery-skill/
+├── SKILL.md (overview and navigation)
+└── reference/
+    ├── finance.md (revenue, billing metrics)
+    ├── sales.md (opportunities, pipeline)
+    ├── product.md (API usage, features)
+    └── marketing.md (campaigns, attribution)
+```
+
+When a user asks about sales metrics, Claude only reads sales.md.
+
+Similarly, for skills supporting multiple frameworks or variants, organize by variant:
+
+```
+cloud-deploy/
+├── SKILL.md (workflow + provider selection)
+└── references/
+    ├── aws.md (AWS deployment patterns)
+    ├── gcp.md (GCP deployment patterns)
+    └── azure.md (Azure deployment patterns)
+```
+
+When the user chooses AWS, Claude only reads aws.md.
+
+**Pattern 3: Conditional details**
+
+Show basic content, link to advanced content:
+
+```markdown
+# DOCX Processing
+
+## Creating documents
+
+Use docx-js for new documents. See [DOCX-JS.md](DOCX-JS.md).
+
+## Editing documents
+
+For simple edits, modify the XML directly.
+
+**For tracked changes**: See [REDLINING.md](REDLINING.md)
+**For OOXML details**: See [OOXML.md](OOXML.md)
+```
+
+Claude reads REDLINING.md or OOXML.md only when the user needs those features.
+
+**Important guidelines:**
+
+- **Avoid deeply nested references** - Keep references one level deep from SKILL.md. All reference files should link directly from SKILL.md.
+- **Structure longer reference files** - For files longer than 100 lines, include a table of contents at the top so Claude can see the full scope when previewing.
+
+## Skill Creation Process
+
+Skill creation involves these steps:
+
+1. Understand the skill with concrete examples
+2. Plan reusable skill contents (scripts, references, assets)
+3. Initialize the skill (run init_skill.py)
+4. Edit the skill (implement resources and write SKILL.md)
+5. Package the skill (run package_skill.py)
+6. Iterate based on real usage
+
+Follow these steps in order, skipping only if there is a clear reason why they are not applicable.
+
+### Step 1: Understanding the Skill with Concrete Examples
+
+Skip this step only when the skill's usage patterns are already clearly understood. It remains valuable even when working with an existing skill.
+
+To create an effective skill, clearly understand concrete examples of how the skill will be used. This understanding can come from either direct user examples or generated examples that are validated with user feedback.
+
+For example, when building an image-editor skill, relevant questions include:
+
+- "What functionality should the image-editor skill support? Editing, rotating, anything else?"
+- "Can you give some examples of how this skill would be used?"
+- "I can imagine users asking for things like 'Remove the red-eye from this image' or 'Rotate this image'. Are there other ways you imagine this skill being used?"
+- "What would a user say that should trigger this skill?"
+
+To avoid overwhelming users, avoid asking too many questions in a single message. Start with the most important questions and follow up as needed for better effectiveness.
+
+Conclude this step when there is a clear sense of the functionality the skill should support.
+
+### Step 2: Planning the Reusable Skill Contents
+
+To turn concrete examples into an effective skill, analyze each example by:
+
+1. Considering how to execute on the example from scratch
+2. Identifying what scripts, references, and assets would be helpful when executing these workflows repeatedly
+
+Example: When building a `pdf-editor` skill to handle queries like "Help me rotate this PDF," the analysis shows:
+
+1. Rotating a PDF requires re-writing the same code each time
+2. A `scripts/rotate_pdf.py` script would be helpful to store in the skill
+
+Example: When designing a `frontend-webapp-builder` skill for queries like "Build me a todo app" or "Build me a dashboard to track my steps," the analysis shows:
+
+1. Writing a frontend webapp requires the same boilerplate HTML/React each time
+2. An `assets/hello-world/` template containing the boilerplate HTML/React project files would be helpful to store in the skill
+
+Example: When building a `big-query` skill to handle queries like "How many users have logged in today?" the analysis shows:
+
+1. Querying BigQuery requires re-discovering the table schemas and relationships each time
+2. A `references/schema.md` file documenting the table schemas would be helpful to store in the skill
+
+To establish the skill's contents, analyze each concrete example to create a list of the reusable resources to include: scripts, references, and assets.
+
+### Step 3: Initializing the Skill
+
+At this point, it is time to actually create the skill.
+
+Skip this step only if the skill being developed already exists, and iteration or packaging is needed. In this case, continue to the next step.
+
+When creating a new skill from scratch, always run the `init_skill.py` script. The script conveniently generates a new template skill directory that automatically includes everything a skill requires, making the skill creation process much more efficient and reliable.
+
+Usage:
+
+```bash
+scripts/init_skill.py <skill-name> --path <output-directory>
+```
+
+The script:
+
+- Creates the skill directory at the specified path
+- Generates a SKILL.md template with proper frontmatter and TODO placeholders
+- Creates example resource directories: `scripts/`, `references/`, and `assets/`
+- Adds example files in each directory that can be customized or deleted
+
+After initialization, customize or remove the generated SKILL.md and example files as needed.
+
+### Step 4: Edit the Skill
+
+When editing the (newly-generated or existing) skill, remember that the skill is being created for another instance of Claude to use. Include information that would be beneficial and non-obvious to Claude. Consider what procedural knowledge, domain-specific details, or reusable assets would help another Claude instance execute these tasks more effectively.
+
+#### Learn Proven Design Patterns
+
+Consult these helpful guides based on your skill's needs:
+
+- **Multi-step processes**: See references/workflows.md for sequential workflows and conditional logic
+- **Specific output formats or quality standards**: See references/output-patterns.md for template and example patterns
+
+These files contain established best practices for effective skill design.
+
+#### Start with Reusable Skill Contents
+
+To begin implementation, start with the reusable resources identified above: `scripts/`, `references/`, and `assets/` files. Note that this step may require user input. For example, when implementing a `brand-guidelines` skill, the user may need to provide brand assets or templates to store in `assets/`, or documentation to store in `references/`.
+
+Added scripts must be tested by actually running them to ensure there are no bugs and that the output matches what is expected. If there are many similar scripts, only a representative sample needs to be tested to ensure confidence that they all work while balancing time to completion.
+
+Any example files and directories not needed for the skill should be deleted. The initialization script creates example files in `scripts/`, `references/`, and `assets/` to demonstrate structure, but most skills won't need all of them.
+
+#### Update SKILL.md
+
+**Writing Guidelines:** Always use imperative/infinitive form.
+
+##### Frontmatter
+
+Write the YAML frontmatter with `name` and `description`:
+
+- `name`: The skill name
+- `description`: This is the primary triggering mechanism for your skill, and helps Claude understand when to use the skill.
+  - Include both what the Skill does and specific triggers/contexts for when to use it.
+  - Include all "when to use" information here - Not in the body. The body is only loaded after triggering, so "When to Use This Skill" sections in the body are not helpful to Claude.
+  - Example description for a `docx` skill: "Comprehensive document creation, editing, and analysis with support for tracked changes, comments, formatting preservation, and text extraction. Use when Claude needs to work with professional documents (.docx files) for: (1) Creating new documents, (2) Modifying or editing content, (3) Working with tracked changes, (4) Adding comments, or any other document tasks"
+
+Do not include any other fields in YAML frontmatter.
+
+##### Body
+
+Write instructions for using the skill and its bundled resources.
+
+### Step 5: Packaging a Skill
+
+Once development of the skill is complete, it must be packaged into a distributable .skill file that gets shared with the user. The packaging process automatically validates the skill first to ensure it meets all requirements:
+
+```bash
+scripts/package_skill.py <path/to/skill-folder>
+```
+
+Optional output directory specification:
+
+```bash
+scripts/package_skill.py <path/to/skill-folder> ./dist
+```
+
+The packaging script will:
+
+1. **Validate** the skill automatically, checking:
+
+   - YAML frontmatter format and required fields
+   - Skill naming conventions and directory structure
+   - Description completeness and quality
+   - File organization and resource references
+
+2. **Package** the skill if validation passes, creating a .skill file named after the skill (e.g., `my-skill.skill`) that includes all files and maintains the proper directory structure for distribution. The .skill file is a zip file with a .skill extension.
+
+If validation fails, the script will report the errors and exit without creating a package. Fix any validation errors and run the packaging command again.
+
+### Step 6: Iterate
+
+After testing the skill, users may request improvements. Often this happens right after using the skill, with fresh context of how the skill performed.
+
+**Iteration workflow:**
+
+1. Use the skill on real tasks
+2. Notice struggles or inefficiencies
+3. Identify how SKILL.md or bundled resources should be updated
+4. Implement changes and test again

.claude/skills/skill-creator/references/output-patterns.md

@@ -0,0 +1,82 @@
+# Output Patterns
+
+Use these patterns when skills need to produce consistent, high-quality output.
+
+## Template Pattern
+
+Provide templates for output format. Match the level of strictness to your needs.
+
+**For strict requirements (like API responses or data formats):**
+
+```markdown
+## Report structure
+
+ALWAYS use this exact template structure:
+
+# [Analysis Title]
+
+## Executive summary
+[One-paragraph overview of key findings]
+
+## Key findings
+- Finding 1 with supporting data
+- Finding 2 with supporting data
+- Finding 3 with supporting data
+
+## Recommendations
+1. Specific actionable recommendation
+2. Specific actionable recommendation
+```
+
+**For flexible guidance (when adaptation is useful):**
+
+```markdown
+## Report structure
+
+Here is a sensible default format, but use your best judgment:
+
+# [Analysis Title]
+
+## Executive summary
+[Overview]
+
+## Key findings
+[Adapt sections based on what you discover]
+
+## Recommendations
+[Tailor to the specific context]
+
+Adjust sections as needed for the specific analysis type.
+```
+
+## Examples Pattern
+
+For skills where output quality depends on seeing examples, provide input/output pairs:
+
+```markdown
+## Commit message format
+
+Generate commit messages following these examples:
+
+**Example 1:**
+Input: Added user authentication with JWT tokens
+Output:
+```
+feat(auth): implement JWT-based authentication
+
+Add login endpoint and token validation middleware
+```
+
+**Example 2:**
+Input: Fixed bug where dates displayed incorrectly in reports
+Output:
+```
+fix(reports): correct date formatting in timezone conversion
+
+Use UTC timestamps consistently across report generation
+```
+
+Follow this style: type(scope): brief description, then detailed explanation.
+```
+
+Examples help Claude understand the desired style and level of detail more clearly than descriptions alone.

.claude/skills/skill-creator/references/workflows.md

@@ -0,0 +1,28 @@
+# Workflow Patterns
+
+## Sequential Workflows
+
+For complex tasks, break operations into clear, sequential steps. It is often helpful to give Claude an overview of the process towards the beginning of SKILL.md:
+
+```markdown
+Filling a PDF form involves these steps:
+
+1. Analyze the form (run analyze_form.py)
+2. Create field mapping (edit fields.json)
+3. Validate mapping (run validate_fields.py)
+4. Fill the form (run fill_form.py)
+5. Verify output (run verify_output.py)
+```
+
+## Conditional Workflows
+
+For tasks with branching logic, guide Claude through decision points:
+
+```markdown
+1. Determine the modification type:
+   **Creating new content?** → Follow "Creation workflow" below
+   **Editing existing content?** → Follow "Editing workflow" below
+
+2. Creation workflow: [steps]
+3. Editing workflow: [steps]
+```

.claude/skills/skill-creator/scripts/init_skill.py

@@ -1,303 +1,303 @@
-#!/usr/bin/env python3
-"""
-Skill Initializer - Creates a new skill from template
-
-Usage:
-    init_skill.py <skill-name> --path <path>
-
-Examples:
-    init_skill.py my-new-skill --path skills/public
-    init_skill.py my-api-helper --path skills/private
-    init_skill.py custom-skill --path /custom/location
-"""
-
-import sys
-from pathlib import Path
-
-
-SKILL_TEMPLATE = """---
-name: {skill_name}
-description: [TODO: Complete and informative explanation of what the skill does and when to use it. Include WHEN to use this skill - specific scenarios, file types, or tasks that trigger it.]
----
-
-# {skill_title}
-
-## Overview
-
-[TODO: 1-2 sentences explaining what this skill enables]
-
-## Structuring This Skill
-
-[TODO: Choose the structure that best fits this skill's purpose. Common patterns:
-
-**1. Workflow-Based** (best for sequential processes)
-- Works well when there are clear step-by-step procedures
-- Example: DOCX skill with "Workflow Decision Tree" → "Reading" → "Creating" → "Editing"
-- Structure: ## Overview → ## Workflow Decision Tree → ## Step 1 → ## Step 2...
-
-**2. Task-Based** (best for tool collections)
-- Works well when the skill offers different operations/capabilities
-- Example: PDF skill with "Quick Start" → "Merge PDFs" → "Split PDFs" → "Extract Text"
-- Structure: ## Overview → ## Quick Start → ## Task Category 1 → ## Task Category 2...
-
-**3. Reference/Guidelines** (best for standards or specifications)
-- Works well for brand guidelines, coding standards, or requirements
-- Example: Brand styling with "Brand Guidelines" → "Colors" → "Typography" → "Features"
-- Structure: ## Overview → ## Guidelines → ## Specifications → ## Usage...
-
-**4. Capabilities-Based** (best for integrated systems)
-- Works well when the skill provides multiple interrelated features
-- Example: Product Management with "Core Capabilities" → numbered capability list
-- Structure: ## Overview → ## Core Capabilities → ### 1. Feature → ### 2. Feature...
-
-Patterns can be mixed and matched as needed. Most skills combine patterns (e.g., start with task-based, add workflow for complex operations).
-
-Delete this entire "Structuring This Skill" section when done - it's just guidance.]
-
-## [TODO: Replace with the first main section based on chosen structure]
-
-[TODO: Add content here. See examples in existing skills:
-- Code samples for technical skills
-- Decision trees for complex workflows
-- Concrete examples with realistic user requests
-- References to scripts/templates/references as needed]
-
-## Resources
-
-This skill includes example resource directories that demonstrate how to organize different types of bundled resources:
-
-### scripts/
-Executable code (Python/Bash/etc.) that can be run directly to perform specific operations.
-
-**Examples from other skills:**
-- PDF skill: `fill_fillable_fields.py`, `extract_form_field_info.py` - utilities for PDF manipulation
-- DOCX skill: `document.py`, `utilities.py` - Python modules for document processing
-
-**Appropriate for:** Python scripts, shell scripts, or any executable code that performs automation, data processing, or specific operations.
-
-**Note:** Scripts may be executed without loading into context, but can still be read by Claude for patching or environment adjustments.
-
-### references/
-Documentation and reference material intended to be loaded into context to inform Claude's process and thinking.
-
-**Examples from other skills:**
-- Product management: `communication.md`, `context_building.md` - detailed workflow guides
-- BigQuery: API reference documentation and query examples
-- Finance: Schema documentation, company policies
-
-**Appropriate for:** In-depth documentation, API references, database schemas, comprehensive guides, or any detailed information that Claude should reference while working.
-
-### assets/
-Files not intended to be loaded into context, but rather used within the output Claude produces.
-
-**Examples from other skills:**
-- Brand styling: PowerPoint template files (.pptx), logo files
-- Frontend builder: HTML/React boilerplate project directories
-- Typography: Font files (.ttf, .woff2)
-
-**Appropriate for:** Templates, boilerplate code, document templates, images, icons, fonts, or any files meant to be copied or used in the final output.
-
----
-
-**Any unneeded directories can be deleted.** Not every skill requires all three types of resources.
-"""
-
-EXAMPLE_SCRIPT = '''#!/usr/bin/env python3
-"""
-Example helper script for {skill_name}
-
-This is a placeholder script that can be executed directly.
-Replace with actual implementation or delete if not needed.
-
-Example real scripts from other skills:
-- pdf/scripts/fill_fillable_fields.py - Fills PDF form fields
-- pdf/scripts/convert_pdf_to_images.py - Converts PDF pages to images
-"""
-
-def main():
-    print("This is an example script for {skill_name}")
-    # TODO: Add actual script logic here
-    # This could be data processing, file conversion, API calls, etc.
-
-if __name__ == "__main__":
-    main()
-'''
-
-EXAMPLE_REFERENCE = """# Reference Documentation for {skill_title}
-
-This is a placeholder for detailed reference documentation.
-Replace with actual reference content or delete if not needed.
-
-Example real reference docs from other skills:
-- product-management/references/communication.md - Comprehensive guide for status updates
-- product-management/references/context_building.md - Deep-dive on gathering context
-- bigquery/references/ - API references and query examples
-
-## When Reference Docs Are Useful
-
-Reference docs are ideal for:
-- Comprehensive API documentation
-- Detailed workflow guides
-- Complex multi-step processes
-- Information too lengthy for main SKILL.md
-- Content that's only needed for specific use cases
-
-## Structure Suggestions
-
-### API Reference Example
-- Overview
-- Authentication
-- Endpoints with examples
-- Error codes
-- Rate limits
-
-### Workflow Guide Example
-- Prerequisites
-- Step-by-step instructions
-- Common patterns
-- Troubleshooting
-- Best practices
-"""
-
-EXAMPLE_ASSET = """# Example Asset File
-
-This placeholder represents where asset files would be stored.
-Replace with actual asset files (templates, images, fonts, etc.) or delete if not needed.
-
-Asset files are NOT intended to be loaded into context, but rather used within
-the output Claude produces.
-
-Example asset files from other skills:
-- Brand guidelines: logo.png, slides_template.pptx
-- Frontend builder: hello-world/ directory with HTML/React boilerplate
-- Typography: custom-font.ttf, font-family.woff2
-- Data: sample_data.csv, test_dataset.json
-
-## Common Asset Types
-
-- Templates: .pptx, .docx, boilerplate directories
-- Images: .png, .jpg, .svg, .gif
-- Fonts: .ttf, .otf, .woff, .woff2
-- Boilerplate code: Project directories, starter files
-- Icons: .ico, .svg
-- Data files: .csv, .json, .xml, .yaml
-
-Note: This is a text placeholder. Actual assets can be any file type.
-"""
-
-
-def title_case_skill_name(skill_name):
-    """Convert hyphenated skill name to Title Case for display."""
-    return ' '.join(word.capitalize() for word in skill_name.split('-'))
-
-
-def init_skill(skill_name, path):
-    """
-    Initialize a new skill directory with template SKILL.md.
-
-    Args:
-        skill_name: Name of the skill
-        path: Path where the skill directory should be created
-
-    Returns:
-        Path to created skill directory, or None if error
-    """
-    # Determine skill directory path
-    skill_dir = Path(path).resolve() / skill_name
-
-    # Check if directory already exists
-    if skill_dir.exists():
-        print(f"❌ Error: Skill directory already exists: {skill_dir}")
-        return None
-
-    # Create skill directory
-    try:
-        skill_dir.mkdir(parents=True, exist_ok=False)
-        print(f"✅ Created skill directory: {skill_dir}")
-    except Exception as e:
-        print(f"❌ Error creating directory: {e}")
-        return None
-
-    # Create SKILL.md from template
-    skill_title = title_case_skill_name(skill_name)
-    skill_content = SKILL_TEMPLATE.format(
-        skill_name=skill_name,
-        skill_title=skill_title
-    )
-
-    skill_md_path = skill_dir / 'SKILL.md'
-    try:
-        skill_md_path.write_text(skill_content)
-        print("✅ Created SKILL.md")
-    except Exception as e:
-        print(f"❌ Error creating SKILL.md: {e}")
-        return None
-
-    # Create resource directories with example files
-    try:
-        # Create scripts/ directory with example script
-        scripts_dir = skill_dir / 'scripts'
-        scripts_dir.mkdir(exist_ok=True)
-        example_script = scripts_dir / 'example.py'
-        example_script.write_text(EXAMPLE_SCRIPT.format(skill_name=skill_name))
-        example_script.chmod(0o755)
-        print("✅ Created scripts/example.py")
-
-        # Create references/ directory with example reference doc
-        references_dir = skill_dir / 'references'
-        references_dir.mkdir(exist_ok=True)
-        example_reference = references_dir / 'api_reference.md'
-        example_reference.write_text(EXAMPLE_REFERENCE.format(skill_title=skill_title))
-        print("✅ Created references/api_reference.md")
-
-        # Create assets/ directory with example asset placeholder
-        assets_dir = skill_dir / 'assets'
-        assets_dir.mkdir(exist_ok=True)
-        example_asset = assets_dir / 'example_asset.txt'
-        example_asset.write_text(EXAMPLE_ASSET)
-        print("✅ Created assets/example_asset.txt")
-    except Exception as e:
-        print(f"❌ Error creating resource directories: {e}")
-        return None
-
-    # Print next steps
-    print(f"\n✅ Skill '{skill_name}' initialized successfully at {skill_dir}")
-    print("\nNext steps:")
-    print("1. Edit SKILL.md to complete the TODO items and update the description")
-    print("2. Customize or delete the example files in scripts/, references/, and assets/")
-    print("3. Run the validator when ready to check the skill structure")
-
-    return skill_dir
-
-
-def main():
-    if len(sys.argv) < 4 or sys.argv[2] != '--path':
-        print("Usage: init_skill.py <skill-name> --path <path>")
-        print("\nSkill name requirements:")
-        print("  - Hyphen-case identifier (e.g., 'data-analyzer')")
-        print("  - Lowercase letters, digits, and hyphens only")
-        print("  - Max 40 characters")
-        print("  - Must match directory name exactly")
-        print("\nExamples:")
-        print("  init_skill.py my-new-skill --path skills/public")
-        print("  init_skill.py my-api-helper --path skills/private")
-        print("  init_skill.py custom-skill --path /custom/location")
-        sys.exit(1)
-
-    skill_name = sys.argv[1]
-    path = sys.argv[3]
-
-    print(f"🚀 Initializing skill: {skill_name}")
-    print(f"   Location: {path}")
-    print()
-
-    result = init_skill(skill_name, path)
-
-    if result:
-        sys.exit(0)
-    else:
-        sys.exit(1)
-
-
-if __name__ == "__main__":
-    main()
+#!/usr/bin/env python3
+"""
+Skill Initializer - Creates a new skill from template
+
+Usage:
+    init_skill.py <skill-name> --path <path>
+
+Examples:
+    init_skill.py my-new-skill --path skills/public
+    init_skill.py my-api-helper --path skills/private
+    init_skill.py custom-skill --path /custom/location
+"""
+
+import sys
+from pathlib import Path
+
+
+SKILL_TEMPLATE = """---
+name: {skill_name}
+description: [TODO: Complete and informative explanation of what the skill does and when to use it. Include WHEN to use this skill - specific scenarios, file types, or tasks that trigger it.]
+---
+
+# {skill_title}
+
+## Overview
+
+[TODO: 1-2 sentences explaining what this skill enables]
+
+## Structuring This Skill
+
+[TODO: Choose the structure that best fits this skill's purpose. Common patterns:
+
+**1. Workflow-Based** (best for sequential processes)
+- Works well when there are clear step-by-step procedures
+- Example: DOCX skill with "Workflow Decision Tree" → "Reading" → "Creating" → "Editing"
+- Structure: ## Overview → ## Workflow Decision Tree → ## Step 1 → ## Step 2...
+
+**2. Task-Based** (best for tool collections)
+- Works well when the skill offers different operations/capabilities
+- Example: PDF skill with "Quick Start" → "Merge PDFs" → "Split PDFs" → "Extract Text"
+- Structure: ## Overview → ## Quick Start → ## Task Category 1 → ## Task Category 2...
+
+**3. Reference/Guidelines** (best for standards or specifications)
+- Works well for brand guidelines, coding standards, or requirements
+- Example: Brand styling with "Brand Guidelines" → "Colors" → "Typography" → "Features"
+- Structure: ## Overview → ## Guidelines → ## Specifications → ## Usage...
+
+**4. Capabilities-Based** (best for integrated systems)
+- Works well when the skill provides multiple interrelated features
+- Example: Product Management with "Core Capabilities" → numbered capability list
+- Structure: ## Overview → ## Core Capabilities → ### 1. Feature → ### 2. Feature...
+
+Patterns can be mixed and matched as needed. Most skills combine patterns (e.g., start with task-based, add workflow for complex operations).
+
+Delete this entire "Structuring This Skill" section when done - it's just guidance.]
+
+## [TODO: Replace with the first main section based on chosen structure]
+
+[TODO: Add content here. See examples in existing skills:
+- Code samples for technical skills
+- Decision trees for complex workflows
+- Concrete examples with realistic user requests
+- References to scripts/templates/references as needed]
+
+## Resources
+
+This skill includes example resource directories that demonstrate how to organize different types of bundled resources:
+
+### scripts/
+Executable code (Python/Bash/etc.) that can be run directly to perform specific operations.
+
+**Examples from other skills:**
+- PDF skill: `fill_fillable_fields.py`, `extract_form_field_info.py` - utilities for PDF manipulation
+- DOCX skill: `document.py`, `utilities.py` - Python modules for document processing
+
+**Appropriate for:** Python scripts, shell scripts, or any executable code that performs automation, data processing, or specific operations.
+
+**Note:** Scripts may be executed without loading into context, but can still be read by Claude for patching or environment adjustments.
+
+### references/
+Documentation and reference material intended to be loaded into context to inform Claude's process and thinking.
+
+**Examples from other skills:**
+- Product management: `communication.md`, `context_building.md` - detailed workflow guides
+- BigQuery: API reference documentation and query examples
+- Finance: Schema documentation, company policies
+
+**Appropriate for:** In-depth documentation, API references, database schemas, comprehensive guides, or any detailed information that Claude should reference while working.
+
+### assets/
+Files not intended to be loaded into context, but rather used within the output Claude produces.
+
+**Examples from other skills:**
+- Brand styling: PowerPoint template files (.pptx), logo files
+- Frontend builder: HTML/React boilerplate project directories
+- Typography: Font files (.ttf, .woff2)
+
+**Appropriate for:** Templates, boilerplate code, document templates, images, icons, fonts, or any files meant to be copied or used in the final output.
+
+---
+
+**Any unneeded directories can be deleted.** Not every skill requires all three types of resources.
+"""
+
+EXAMPLE_SCRIPT = '''#!/usr/bin/env python3
+"""
+Example helper script for {skill_name}
+
+This is a placeholder script that can be executed directly.
+Replace with actual implementation or delete if not needed.
+
+Example real scripts from other skills:
+- pdf/scripts/fill_fillable_fields.py - Fills PDF form fields
+- pdf/scripts/convert_pdf_to_images.py - Converts PDF pages to images
+"""
+
+def main():
+    print("This is an example script for {skill_name}")
+    # TODO: Add actual script logic here
+    # This could be data processing, file conversion, API calls, etc.
+
+if __name__ == "__main__":
+    main()
+'''
+
+EXAMPLE_REFERENCE = """# Reference Documentation for {skill_title}
+
+This is a placeholder for detailed reference documentation.
+Replace with actual reference content or delete if not needed.
+
+Example real reference docs from other skills:
+- product-management/references/communication.md - Comprehensive guide for status updates
+- product-management/references/context_building.md - Deep-dive on gathering context
+- bigquery/references/ - API references and query examples
+
+## When Reference Docs Are Useful
+
+Reference docs are ideal for:
+- Comprehensive API documentation
+- Detailed workflow guides
+- Complex multi-step processes
+- Information too lengthy for main SKILL.md
+- Content that's only needed for specific use cases
+
+## Structure Suggestions
+
+### API Reference Example
+- Overview
+- Authentication
+- Endpoints with examples
+- Error codes
+- Rate limits
+
+### Workflow Guide Example
+- Prerequisites
+- Step-by-step instructions
+- Common patterns
+- Troubleshooting
+- Best practices
+"""
+
+EXAMPLE_ASSET = """# Example Asset File
+
+This placeholder represents where asset files would be stored.
+Replace with actual asset files (templates, images, fonts, etc.) or delete if not needed.
+
+Asset files are NOT intended to be loaded into context, but rather used within
+the output Claude produces.
+
+Example asset files from other skills:
+- Brand guidelines: logo.png, slides_template.pptx
+- Frontend builder: hello-world/ directory with HTML/React boilerplate
+- Typography: custom-font.ttf, font-family.woff2
+- Data: sample_data.csv, test_dataset.json
+
+## Common Asset Types
+
+- Templates: .pptx, .docx, boilerplate directories
+- Images: .png, .jpg, .svg, .gif
+- Fonts: .ttf, .otf, .woff, .woff2
+- Boilerplate code: Project directories, starter files
+- Icons: .ico, .svg
+- Data files: .csv, .json, .xml, .yaml
+
+Note: This is a text placeholder. Actual assets can be any file type.
+"""
+
+
+def title_case_skill_name(skill_name):
+    """Convert hyphenated skill name to Title Case for display."""
+    return ' '.join(word.capitalize() for word in skill_name.split('-'))
+
+
+def init_skill(skill_name, path):
+    """
+    Initialize a new skill directory with template SKILL.md.
+
+    Args:
+        skill_name: Name of the skill
+        path: Path where the skill directory should be created
+
+    Returns:
+        Path to created skill directory, or None if error
+    """
+    # Determine skill directory path
+    skill_dir = Path(path).resolve() / skill_name
+
+    # Check if directory already exists
+    if skill_dir.exists():
+        print(f"❌ Error: Skill directory already exists: {skill_dir}")
+        return None
+
+    # Create skill directory
+    try:
+        skill_dir.mkdir(parents=True, exist_ok=False)
+        print(f"✅ Created skill directory: {skill_dir}")
+    except Exception as e:
+        print(f"❌ Error creating directory: {e}")
+        return None
+
+    # Create SKILL.md from template
+    skill_title = title_case_skill_name(skill_name)
+    skill_content = SKILL_TEMPLATE.format(
+        skill_name=skill_name,
+        skill_title=skill_title
+    )
+
+    skill_md_path = skill_dir / 'SKILL.md'
+    try:
+        skill_md_path.write_text(skill_content)
+        print("✅ Created SKILL.md")
+    except Exception as e:
+        print(f"❌ Error creating SKILL.md: {e}")
+        return None
+
+    # Create resource directories with example files
+    try:
+        # Create scripts/ directory with example script
+        scripts_dir = skill_dir / 'scripts'
+        scripts_dir.mkdir(exist_ok=True)
+        example_script = scripts_dir / 'example.py'
+        example_script.write_text(EXAMPLE_SCRIPT.format(skill_name=skill_name))
+        example_script.chmod(0o755)
+        print("✅ Created scripts/example.py")
+
+        # Create references/ directory with example reference doc
+        references_dir = skill_dir / 'references'
+        references_dir.mkdir(exist_ok=True)
+        example_reference = references_dir / 'api_reference.md'
+        example_reference.write_text(EXAMPLE_REFERENCE.format(skill_title=skill_title))
+        print("✅ Created references/api_reference.md")
+
+        # Create assets/ directory with example asset placeholder
+        assets_dir = skill_dir / 'assets'
+        assets_dir.mkdir(exist_ok=True)
+        example_asset = assets_dir / 'example_asset.txt'
+        example_asset.write_text(EXAMPLE_ASSET)
+        print("✅ Created assets/example_asset.txt")
+    except Exception as e:
+        print(f"❌ Error creating resource directories: {e}")
+        return None
+
+    # Print next steps
+    print(f"\n✅ Skill '{skill_name}' initialized successfully at {skill_dir}")
+    print("\nNext steps:")
+    print("1. Edit SKILL.md to complete the TODO items and update the description")
+    print("2. Customize or delete the example files in scripts/, references/, and assets/")
+    print("3. Run the validator when ready to check the skill structure")
+
+    return skill_dir
+
+
+def main():
+    if len(sys.argv) < 4 or sys.argv[2] != '--path':
+        print("Usage: init_skill.py <skill-name> --path <path>")
+        print("\nSkill name requirements:")
+        print("  - Hyphen-case identifier (e.g., 'data-analyzer')")
+        print("  - Lowercase letters, digits, and hyphens only")
+        print("  - Max 40 characters")
+        print("  - Must match directory name exactly")
+        print("\nExamples:")
+        print("  init_skill.py my-new-skill --path skills/public")
+        print("  init_skill.py my-api-helper --path skills/private")
+        print("  init_skill.py custom-skill --path /custom/location")
+        sys.exit(1)
+
+    skill_name = sys.argv[1]
+    path = sys.argv[3]
+
+    print(f"🚀 Initializing skill: {skill_name}")
+    print(f"   Location: {path}")
+    print()
+
+    result = init_skill(skill_name, path)
+
+    if result:
+        sys.exit(0)
+    else:
+        sys.exit(1)
+
+
+if __name__ == "__main__":
+    main()

.claude/skills/skill-creator/scripts/package_skill.py

@@ -1,110 +1,110 @@
-#!/usr/bin/env python3
-"""
-Skill Packager - Creates a distributable zip file of a skill folder
-
-Usage:
-    python utils/package_skill.py <path/to/skill-folder> [output-directory]
-
-Example:
-    python utils/package_skill.py skills/public/my-skill
-    python utils/package_skill.py skills/public/my-skill ./dist
-"""
-
-import sys
-import zipfile
-from pathlib import Path
-from quick_validate import validate_skill
-
-
-def package_skill(skill_path, output_dir=None):
-    """
-    Package a skill folder into a zip file.
-
-    Args:
-        skill_path: Path to the skill folder
-        output_dir: Optional output directory for the zip file (defaults to current directory)
-
-    Returns:
-        Path to the created zip file, or None if error
-    """
-    skill_path = Path(skill_path).resolve()
-
-    # Validate skill folder exists
-    if not skill_path.exists():
-        print(f"❌ Error: Skill folder not found: {skill_path}")
-        return None
-
-    if not skill_path.is_dir():
-        print(f"❌ Error: Path is not a directory: {skill_path}")
-        return None
-
-    # Validate SKILL.md exists
-    skill_md = skill_path / "SKILL.md"
-    if not skill_md.exists():
-        print(f"❌ Error: SKILL.md not found in {skill_path}")
-        return None
-
-    # Run validation before packaging
-    print("🔍 Validating skill...")
-    valid, message = validate_skill(skill_path)
-    if not valid:
-        print(f"❌ Validation failed: {message}")
-        print("   Please fix the validation errors before packaging.")
-        return None
-    print(f"✅ {message}\n")
-
-    # Determine output location
-    skill_name = skill_path.name
-    if output_dir:
-        output_path = Path(output_dir).resolve()
-        output_path.mkdir(parents=True, exist_ok=True)
-    else:
-        output_path = Path.cwd()
-
-    zip_filename = output_path / f"{skill_name}.zip"
-
-    # Create the zip file
-    try:
-        with zipfile.ZipFile(zip_filename, 'w', zipfile.ZIP_DEFLATED) as zipf:
-            # Walk through the skill directory
-            for file_path in skill_path.rglob('*'):
-                if file_path.is_file():
-                    # Calculate the relative path within the zip
-                    arcname = file_path.relative_to(skill_path.parent)
-                    zipf.write(file_path, arcname)
-                    print(f"  Added: {arcname}")
-
-        print(f"\n✅ Successfully packaged skill to: {zip_filename}")
-        return zip_filename
-
-    except Exception as e:
-        print(f"❌ Error creating zip file: {e}")
-        return None
-
-
-def main():
-    if len(sys.argv) < 2:
-        print("Usage: python utils/package_skill.py <path/to/skill-folder> [output-directory]")
-        print("\nExample:")
-        print("  python utils/package_skill.py skills/public/my-skill")
-        print("  python utils/package_skill.py skills/public/my-skill ./dist")
-        sys.exit(1)
-
-    skill_path = sys.argv[1]
-    output_dir = sys.argv[2] if len(sys.argv) > 2 else None
-
-    print(f"📦 Packaging skill: {skill_path}")
-    if output_dir:
-        print(f"   Output directory: {output_dir}")
-    print()
-
-    result = package_skill(skill_path, output_dir)
-
-    if result:
-        sys.exit(0)
-    else:
-        sys.exit(1)
-
-
-if __name__ == "__main__":
-    main()
+#!/usr/bin/env python3
+"""
+Skill Packager - Creates a distributable .skill file of a skill folder
+
+Usage:
+    python utils/package_skill.py <path/to/skill-folder> [output-directory]
+
+Example:
+    python utils/package_skill.py skills/public/my-skill
+    python utils/package_skill.py skills/public/my-skill ./dist
+"""
+
+import sys
+import zipfile
+from pathlib import Path
+from quick_validate import validate_skill
+
+
+def package_skill(skill_path, output_dir=None):
+    """
+    Package a skill folder into a .skill file.
+
+    Args:
+        skill_path: Path to the skill folder
+        output_dir: Optional output directory for the .skill file (defaults to current directory)
+
+    Returns:
+        Path to the created .skill file, or None if error
+    """
+    skill_path = Path(skill_path).resolve()
+
+    # Validate skill folder exists
+    if not skill_path.exists():
+        print(f"❌ Error: Skill folder not found: {skill_path}")
+        return None
+
+    if not skill_path.is_dir():
+        print(f"❌ Error: Path is not a directory: {skill_path}")
+        return None
+
+    # Validate SKILL.md exists
+    skill_md = skill_path / "SKILL.md"
+    if not skill_md.exists():
+        print(f"❌ Error: SKILL.md not found in {skill_path}")
+        return None
+
+    # Run validation before packaging
+    print("🔍 Validating skill...")
+    valid, message = validate_skill(skill_path)
+    if not valid:
+        print(f"❌ Validation failed: {message}")
+        print("   Please fix the validation errors before packaging.")
+        return None
+    print(f"✅ {message}\n")
+
+    # Determine output location
+    skill_name = skill_path.name
+    if output_dir:
+        output_path = Path(output_dir).resolve()
+        output_path.mkdir(parents=True, exist_ok=True)
+    else:
+        output_path = Path.cwd()
+
+    skill_filename = output_path / f"{skill_name}.skill"
+
+    # Create the .skill file (zip format)
+    try:
+        with zipfile.ZipFile(skill_filename, 'w', zipfile.ZIP_DEFLATED) as zipf:
+            # Walk through the skill directory
+            for file_path in skill_path.rglob('*'):
+                if file_path.is_file():
+                    # Calculate the relative path within the zip
+                    arcname = file_path.relative_to(skill_path.parent)
+                    zipf.write(file_path, arcname)
+                    print(f"  Added: {arcname}")
+
+        print(f"\n✅ Successfully packaged skill to: {skill_filename}")
+        return skill_filename
+
+    except Exception as e:
+        print(f"❌ Error creating .skill file: {e}")
+        return None
+
+
+def main():
+    if len(sys.argv) < 2:
+        print("Usage: python utils/package_skill.py <path/to/skill-folder> [output-directory]")
+        print("\nExample:")
+        print("  python utils/package_skill.py skills/public/my-skill")
+        print("  python utils/package_skill.py skills/public/my-skill ./dist")
+        sys.exit(1)
+
+    skill_path = sys.argv[1]
+    output_dir = sys.argv[2] if len(sys.argv) > 2 else None
+
+    print(f"📦 Packaging skill: {skill_path}")
+    if output_dir:
+        print(f"   Output directory: {output_dir}")
+    print()
+
+    result = package_skill(skill_path, output_dir)
+
+    if result:
+        sys.exit(0)
+    else:
+        sys.exit(1)
+
+
+if __name__ == "__main__":
+    main()

.claude/skills/skill-creator/scripts/quick_validate.py

@@ -1,65 +1,95 @@
-#!/usr/bin/env python3
-"""
-Quick validation script for skills - minimal version
-"""
-
-import sys
-import os
-import re
-from pathlib import Path
-
-def validate_skill(skill_path):
-    """Basic validation of a skill"""
-    skill_path = Path(skill_path)
-    
-    # Check SKILL.md exists
-    skill_md = skill_path / 'SKILL.md'
-    if not skill_md.exists():
-        return False, "SKILL.md not found"
-    
-    # Read and validate frontmatter
-    content = skill_md.read_text()
-    if not content.startswith('---'):
-        return False, "No YAML frontmatter found"
-    
-    # Extract frontmatter
-    match = re.match(r'^---\n(.*?)\n---', content, re.DOTALL)
-    if not match:
-        return False, "Invalid frontmatter format"
-    
-    frontmatter = match.group(1)
-    
-    # Check required fields
-    if 'name:' not in frontmatter:
-        return False, "Missing 'name' in frontmatter"
-    if 'description:' not in frontmatter:
-        return False, "Missing 'description' in frontmatter"
-    
-    # Extract name for validation
-    name_match = re.search(r'name:\s*(.+)', frontmatter)
-    if name_match:
-        name = name_match.group(1).strip()
-        # Check naming convention (hyphen-case: lowercase with hyphens)
-        if not re.match(r'^[a-z0-9-]+$', name):
-            return False, f"Name '{name}' should be hyphen-case (lowercase letters, digits, and hyphens only)"
-        if name.startswith('-') or name.endswith('-') or '--' in name:
-            return False, f"Name '{name}' cannot start/end with hyphen or contain consecutive hyphens"
-
-    # Extract and validate description
-    desc_match = re.search(r'description:\s*(.+)', frontmatter)
-    if desc_match:
-        description = desc_match.group(1).strip()
-        # Check for angle brackets
-        if '<' in description or '>' in description:
-            return False, "Description cannot contain angle brackets (< or >)"
-
-    return True, "Skill is valid!"
-
-if __name__ == "__main__":
-    if len(sys.argv) != 2:
-        print("Usage: python quick_validate.py <skill_directory>")
-        sys.exit(1)
-    
-    valid, message = validate_skill(sys.argv[1])
-    print(message)
-    sys.exit(0 if valid else 1)
+#!/usr/bin/env python3
+"""
+Quick validation script for skills - minimal version
+"""
+
+import sys
+import os
+import re
+import yaml
+from pathlib import Path
+
+def validate_skill(skill_path):
+    """Basic validation of a skill"""
+    skill_path = Path(skill_path)
+
+    # Check SKILL.md exists
+    skill_md = skill_path / 'SKILL.md'
+    if not skill_md.exists():
+        return False, "SKILL.md not found"
+
+    # Read and validate frontmatter
+    content = skill_md.read_text()
+    if not content.startswith('---'):
+        return False, "No YAML frontmatter found"
+
+    # Extract frontmatter
+    match = re.match(r'^---\n(.*?)\n---', content, re.DOTALL)
+    if not match:
+        return False, "Invalid frontmatter format"
+
+    frontmatter_text = match.group(1)
+
+    # Parse YAML frontmatter
+    try:
+        frontmatter = yaml.safe_load(frontmatter_text)
+        if not isinstance(frontmatter, dict):
+            return False, "Frontmatter must be a YAML dictionary"
+    except yaml.YAMLError as e:
+        return False, f"Invalid YAML in frontmatter: {e}"
+
+    # Define allowed properties
+    ALLOWED_PROPERTIES = {'name', 'description', 'license', 'allowed-tools', 'metadata'}
+
+    # Check for unexpected properties (excluding nested keys under metadata)
+    unexpected_keys = set(frontmatter.keys()) - ALLOWED_PROPERTIES
+    if unexpected_keys:
+        return False, (
+            f"Unexpected key(s) in SKILL.md frontmatter: {', '.join(sorted(unexpected_keys))}. "
+            f"Allowed properties are: {', '.join(sorted(ALLOWED_PROPERTIES))}"
+        )
+
+    # Check required fields
+    if 'name' not in frontmatter:
+        return False, "Missing 'name' in frontmatter"
+    if 'description' not in frontmatter:
+        return False, "Missing 'description' in frontmatter"
+
+    # Extract name for validation
+    name = frontmatter.get('name', '')
+    if not isinstance(name, str):
+        return False, f"Name must be a string, got {type(name).__name__}"
+    name = name.strip()
+    if name:
+        # Check naming convention (hyphen-case: lowercase with hyphens)
+        if not re.match(r'^[a-z0-9-]+$', name):
+            return False, f"Name '{name}' should be hyphen-case (lowercase letters, digits, and hyphens only)"
+        if name.startswith('-') or name.endswith('-') or '--' in name:
+            return False, f"Name '{name}' cannot start/end with hyphen or contain consecutive hyphens"
+        # Check name length (max 64 characters per spec)
+        if len(name) > 64:
+            return False, f"Name is too long ({len(name)} characters). Maximum is 64 characters."
+
+    # Extract and validate description
+    description = frontmatter.get('description', '')
+    if not isinstance(description, str):
+        return False, f"Description must be a string, got {type(description).__name__}"
+    description = description.strip()
+    if description:
+        # Check for angle brackets
+        if '<' in description or '>' in description:
+            return False, "Description cannot contain angle brackets (< or >)"
+        # Check description length (max 1024 characters per spec)
+        if len(description) > 1024:
+            return False, f"Description is too long ({len(description)} characters). Maximum is 1024 characters."
+
+    return True, "Skill is valid!"
+
+if __name__ == "__main__":
+    if len(sys.argv) != 2:
+        print("Usage: python quick_validate.py <skill_directory>")
+        sys.exit(1)
+
+    valid, message = validate_skill(sys.argv[1])
+    print(message)
+    sys.exit(0 if valid else 1)

.claude/skills/standalone-component-migrator/SKILL.md

@@ -1,212 +0,0 @@
----
-name: standalone-component-migrator
-description: This skill should be used when converting Angular NgModule-based components to standalone architecture. It handles dependency analysis, template scanning, route refactoring, and test updates. Use this skill when the user requests component migration to standalone, mentions "convert to standalone", or wants to modernize Angular components to the latest patterns.
----
-
-# Standalone Component Migrator
-
-## Overview
-
-Automate the conversion of Angular components from NgModule-based architecture to standalone components with explicit imports. This skill analyzes component dependencies, updates routing configurations, migrates tests, and optionally converts to modern Angular control flow syntax (@if, @for, @switch).
-
-## When to Use This Skill
-
-Invoke this skill when:
-- User requests component conversion to standalone
-- User mentions "migrate to standalone" or "modernize component"
-- User wants to remove NgModule declarations
-- User references Angular's standalone component architecture
-
-## Migration Workflow
-
-### Step 1: Analyze Component Dependencies
-
-1. **Read Component File**
-   - Identify component decorator configuration
-   - Note selector, template path, style paths
-   - Check if already standalone
-
-2. **Analyze Template**
-   - Read template file (HTML)
-   - Scan for directives: `*ngIf`, `*ngFor`, `*ngSwitch` → requires CommonModule
-   - Scan for forms: `ngModel`, `formControl` → requires FormsModule or ReactiveFormsModule
-   - Scan for built-in pipes: `async`, `date`, `json` → CommonModule
-   - Scan for custom components: identify all component selectors
-   - Scan for router directives: `routerLink`, `router-outlet` → RouterModule
-
-3. **Find Parent NgModule**
-   - Search for NgModule that declares this component
-   - Read NgModule file to understand current imports
-
-### Step 2: Convert Component to Standalone
-
-Add `standalone: true` and explicit imports array:
-
-```typescript
-// BEFORE
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-my-component',
-  templateUrl: './my-component.component.html'
-})
-export class MyComponent { }
-
-// AFTER
-import { Component } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
-import { RouterModule } from '@angular/router';
-import { ChildComponent } from './child.component';
-import { CustomPipe } from '@isa/utils/pipes';
-
-@Component({
-  selector: 'app-my-component',
-  standalone: true,
-  imports: [
-    CommonModule,
-    FormsModule,
-    RouterModule,
-    ChildComponent,
-    CustomPipe
-  ],
-  templateUrl: './my-component.component.html'
-})
-export class MyComponent { }
-```
-
-### Step 3: Update Parent NgModule
-
-Remove component from declarations, add to imports if exported:
-
-```typescript
-// BEFORE
-@NgModule({
-  declarations: [MyComponent, OtherComponent],
-  imports: [CommonModule],
-  exports: [MyComponent]
-})
-
-// AFTER
-@NgModule({
-  declarations: [OtherComponent],
-  imports: [CommonModule, MyComponent], // Import standalone component
-  exports: [MyComponent]
-})
-```
-
-If NgModule becomes empty (no declarations), consider removing it entirely.
-
-### Step 4: Update Routes (if applicable)
-
-Convert to lazy-loaded standalone component:
-
-```typescript
-// BEFORE
-const routes: Routes = [
-  { path: 'feature', component: MyComponent }
-];
-
-// AFTER (lazy loading)
-const routes: Routes = [
-  {
-    path: 'feature',
-    loadComponent: () => import('./my-component.component').then(m => m.MyComponent)
-  }
-];
-```
-
-### Step 5: Update Tests
-
-Convert test configuration:
-
-```typescript
-// BEFORE
-TestBed.configureTestingModule({
-  declarations: [MyComponent],
-  imports: [CommonModule, FormsModule]
-});
-
-// AFTER
-TestBed.configureTestingModule({
-  imports: [MyComponent] // Component imports its own dependencies
-});
-```
-
-### Step 6: Optional - Migrate to Modern Control Flow
-
-If requested, convert to new Angular control flow syntax:
-
-```typescript
-// OLD
-<div *ngIf="condition">Content</div>
-<div *ngFor="let item of items; trackBy: trackById">{{ item.name }}</div>
-<div [ngSwitch]="value">
-  <div *ngSwitchCase="'a'">A</div>
-  <div *ngSwitchDefault>Default</div>
-</div>
-
-// NEW
-@if (condition) {
-  <div>Content</div>
-}
-@for (item of items; track item.id) {
-  <div>{{ item.name }}</div>
-}
-@switch (value) {
-  @case ('a') { <div>A</div> }
-  @default { <div>Default</div> }
-}
-```
-
-### Step 7: Validate and Test
-
-1. **Compile Check**
-   ```bash
-   npx tsc --noEmit
-   ```
-
-2. **Run Tests**
-   ```bash
-   npx nx test [library-name] --skip-nx-cache
-   ```
-
-3. **Lint Check**
-   ```bash
-   npx nx lint [library-name]
-   ```
-
-4. **Verify Application Runs**
-   ```bash
-   npm start
-   ```
-
-## Common Import Patterns
-
-| Template Usage | Required Import |
-|---------------|-----------------|
-| `*ngIf`, `*ngFor`, `*ngSwitch` | `CommonModule` |
-| `ngModel` | `FormsModule` |
-| `formControl`, `formGroup` | `ReactiveFormsModule` |
-| `routerLink`, `router-outlet` | `RouterModule` |
-| `async`, `date`, `json` pipes | `CommonModule` |
-| Custom components | Direct component import |
-| Custom pipes | Direct pipe import |
-
-## Error Handling
-
-**Issue: Circular dependencies**
-- Extract shared interfaces to util library
-- Use dependency injection for services
-- Avoid component A importing component B when B imports A
-
-**Issue: Missing imports causing template errors**
-- Check browser console for specific errors
-- Verify all template dependencies are in imports array
-- Use Angular Language Service in IDE for hints
-
-## References
-
-- Angular Standalone Components: https://angular.dev/guide/components/importing
-- Modern Control Flow: https://angular.dev/guide/templates/control-flow
-- CLAUDE.md Component Architecture section

.claude/skills/state-patterns/SKILL.md

@@ -0,0 +1,678 @@
+---
+name: state-patterns
+description: This skill should be used when writing Angular code with signals, effects, and NgRx Signal Store. Use when deciding whether to use effect(), computed(), or reactive patterns for state management. Applies when implementing Resource API with Signal Store for reactive data loading, preventing race conditions, and creating declarative async flows. Essential for code review of effect usage, refactoring imperative patterns to declarative alternatives, and building stores with reactive filter/search parameters.
+---
+
+# Reactive State Patterns
+
+## Overview
+
+This skill guides proper usage of Angular's `effect()`, provides declarative alternatives for common patterns, and enables integration of Angular's Resource API with NgRx Signal Store. Effects are frequently misused for state propagation, leading to circular updates and maintenance issues. The Resource API provides race-condition-free async data loading that integrates seamlessly with Signal Store.
+
+## When to Use Effects (Valid Use Cases)
+
+Effects are **primarily for rendering content that cannot be rendered through data binding**. Valid use cases are limited to:
+
+### 1. Logging
+Recording application events or debugging:
+
+```typescript
+effect(() => {
+  const error = this.error();
+  if (error) {
+    console.error('Error occurred:', error);
+  }
+});
+```
+
+### 2. Canvas Painting
+Custom graphics rendering (e.g., Angular Three library, Chart.js integration):
+
+```typescript
+effect(() => {
+  const data = this.chartData();
+  this.renderCanvas(data);
+});
+```
+
+### 3. Custom DOM Behavior
+Imperative APIs that require direct DOM manipulation:
+
+```typescript
+effect(() => {
+  const message = this.notificationMessage();
+  if (message) {
+    this.snackBar.open(message, 'Close');
+  }
+});
+```
+
+**Key principle:** Data binding is the preferred way to display data. Effects should only be used when data binding is insufficient.
+
+## Understanding Auto-Tracking
+
+Angular automatically tracks signals accessed during effect execution, **even within called methods**:
+
+```typescript
+effect(() => {
+  this.logError(); // Signal tracking happens inside this method
+});
+
+logError(): void {
+  const error = this.error(); // This signal is automatically tracked
+  if (error) {
+    console.error(error);
+  }
+}
+```
+
+**Implication:** Auto-tracking makes effect dependencies non-obvious and hard to maintain. This is a primary reason to avoid effects for state management.
+
+## Effect Anti-Patterns (NEVER Use)
+
+### ❌ Anti-Pattern 1: State Propagation
+
+**NEVER use effects to propagate state changes to other state:**
+
+```typescript
+// ❌ WRONG - Anti-pattern
+effect(() => {
+  const value = this.source();
+  this.derived.set(value * 2);
+});
+```
+
+**Problems:**
+- Risk of circular updates and infinite loops
+- Hard to maintain due to implicit tracking
+- Violates declarative reactive principles
+- Inappropriate glitch-free semantics
+
+### ❌ Anti-Pattern 2: Synchronizing Signals
+
+```typescript
+// ❌ WRONG - Anti-pattern
+effect(() => {
+  const filter = this.filter();
+  this.loadData(filter);
+});
+```
+
+### ❌ Anti-Pattern 3: Event Emulation
+
+```typescript
+// ❌ WRONG - Anti-pattern
+effect(() => {
+  const count = this.itemCount();
+  this.countChanged.emit(count);
+});
+```
+
+**Why signals ≠ events:** Signals are designed to be glitch-free, collapsing multiple updates. This makes them inappropriate for representing discrete events.
+
+## Decision Tree: Effect vs Alternative
+
+```
+Need to react to signal changes?
+│
+├─ Synchronous derivation?
+│  └─ ✅ Use computed()
+│
+├─ Asynchronous derivation?
+│  └─ ✅ Use Resource API
+│
+├─ Complex reactive flow with race conditions?
+│  └─ ✅ Use RxJS (toObservable + operators + toSignal)
+│
+├─ Event-based trigger (not state change)?
+│  └─ ✅ React to event directly, not signal
+│
+├─ Need RxJS operators with signals?
+│  └─ ✅ Use reactive helpers (rxMethod, deriveAsync)
+│
+└─ Rendering non-data-bound content (logging, canvas, imperative API)?
+   └─ ✅ Use effect()
+```
+
+## Recommended Alternatives
+
+### Alternative 1: Use `computed()` for Synchronous Derivations
+
+**When to use:** Deriving new state synchronously from existing signals.
+
+```typescript
+// ✅ CORRECT - Declarative
+const derived = computed(() => {
+  return this.baseSignal() * 2;
+});
+
+const fullName = computed(() => {
+  return `${this.firstName()} ${this.lastName()}`;
+});
+```
+
+**Benefits:**
+- Declarative and maintainable
+- Automatic dependency tracking
+- Memoized and efficient
+- No risk of circular updates
+
+### Alternative 2: Use Resource API for Asynchronous Derivations
+
+**When to use:** Loading data based on reactive parameters.
+
+```typescript
+// ✅ CORRECT - Declarative async state
+readonly itemsResource = resource({
+  params: this.filter,
+  loader: ({ params, abortSignal }) => {
+    return this.dataService.load(params, abortSignal);
+  }
+});
+
+readonly items = computed(() => this.itemsResource.value() ?? []);
+```
+
+**Benefits:**
+- Automatic race condition handling
+- Built-in loading/error states
+- Declarative parameter tracking
+- Cancellation support
+
+### Alternative 3: React to Events, Not State Changes
+
+**When to use:** User interactions or DOM events should trigger actions.
+
+```typescript
+// ❌ WRONG - Reacting to signal change
+effect(() => {
+  const searchTerm = this.searchTerm();
+  this.search(searchTerm);
+});
+
+// ✅ CORRECT - React to event
+<input (input)="search($event.target.value)" />
+
+// Component
+search(term: string): void {
+  this.searchTerm.set(term);
+  this.performSearch(term);
+}
+```
+
+**Benefits:**
+- Clear causality (event → action)
+- No auto-tracking complexity
+- Explicit control flow
+
+### Alternative 4: RxJS Integration
+
+**When to use:** Complex reactive flows requiring operators like `debounceTime`, `switchMap`, `combineLatest`.
+
+```typescript
+// ✅ CORRECT - RxJS for complex flows
+readonly searchTerm = signal('');
+readonly searchTerm$ = toObservable(this.searchTerm);
+
+readonly results$ = this.searchTerm$.pipe(
+  debounceTime(300),
+  distinctUntilChanged(),
+  switchMap(term => this.searchService.search(term))
+);
+
+readonly results = toSignal(this.results$, { initialValue: [] });
+```
+
+**Benefits:**
+- Full RxJS operator ecosystem
+- Race condition prevention (`switchMap`)
+- Powerful composition
+- Type-safe streams
+
+**Pattern:** Signal → Observable (toObservable) → RxJS operators → Signal (toSignal)
+
+### Alternative 5: Reactive Helpers
+
+**When to use:** Need RxJS operators but prefer signal-centric API.
+
+#### Using `rxMethod` (NgRx Signal Store)
+
+```typescript
+readonly loadItem = rxMethod<number>(
+  pipe(
+    tap(() => patchState(this, { loading: true })),
+    switchMap(id => this.service.findById(id)),
+    tap(item => patchState(this, { item, loading: false }))
+  )
+);
+
+// Call with signal or value
+constructor() {
+  this.loadItem(this.selectedId);
+}
+```
+
+#### Using `deriveAsync` (ngxtension)
+
+```typescript
+readonly data = deriveAsync(() => {
+  const filter = this.filter();
+  return this.service.load(filter);
+});
+```
+
+**Benefits:**
+- Signal-friendly API
+- RxJS operator support
+- Cleaner than manual Observable conversion
+- Automatic subscription management
+
+## Resource API with NgRx Signal Store
+
+### Core Architectural Concepts
+
+Establish three clear interaction points in the store:
+
+1. **Filter signals trigger resource loading** - Parameter changes automatically reload resources
+2. **Methods explicitly invoke operations** - Use `signalMethod` for user-triggered actions
+3. **Computed signals derive view models** - Transform loaded data for component consumption
+
+### The withProps Pattern for Dependency Injection
+
+Inject services via `withProps` with underscore-prefixed properties to mark them as internal implementation details:
+
+```typescript
+withProps(() => ({
+  _dataService: inject(DataService),
+  _notificationService: inject(ToastService),
+}))
+```
+
+**Benefits:**
+- Centralizes dependency injection in one location
+- Clear distinction between internal (prefixed) and public properties
+- Services available to all subsequent feature sections
+
+### Implementation Steps
+
+#### Step 1: Inject Services with withProps
+
+Create the initial `withProps` section to inject required services:
+
+```typescript
+export const MyStore = signalStore(
+  withProps(() => ({
+    _dataService: inject(DataService),
+    _toastService: inject(ToastService),
+  })),
+  // ... additional features
+);
+```
+
+**Naming convention:** Prefix all injected services with underscore (`_`) to indicate internal use.
+
+#### Step 2: Define Filter State
+
+Add state properties that will serve as resource parameters:
+
+```typescript
+withState({
+  filter: {
+    searchTerm: '',
+    category: '',
+  } as MyFilter,
+})
+```
+
+#### Step 3: Configure Resources
+
+In a subsequent `withProps` section, create resources that reference the injected services and state:
+
+```typescript
+withProps((store) => ({
+  _itemsResource: resource({
+    params: store.filter,
+    loader: (loaderParams) => {
+      const filter = loaderParams.params;
+      const abortSignal = loaderParams.abortSignal;
+      return store._dataService.loadItems(filter, abortSignal);
+    }
+  })
+}))
+```
+
+**Key points:**
+- Resources automatically reload when `params` signal changes
+- `abortSignal` enables automatic cancellation of in-flight requests
+- Loader must return a Promise (use `.findPromise()` if service returns Observable)
+
+#### Step 4: Expose Read-Only Resources (Optional)
+
+If the resource should be accessible to consumers, expose it as read-only:
+
+```typescript
+withProps((store) => ({
+  itemsResource: store._itemsResource.asReadonly(),
+}))
+```
+
+**Pattern:** Internal resources use underscore prefix, public versions are read-only without prefix.
+
+#### Step 5: Create Signal Methods for Updates
+
+Use `signalMethod` for actions that update state and trigger resource reloads:
+
+```typescript
+withMethods((store) => ({
+  updateFilter: signalMethod<MyFilter>((filter) => {
+    patchState(store, { filter });
+  }),
+
+  refresh: () => {
+    store._itemsResource.reload();
+  }
+}))
+```
+
+**Important:** `signalMethod` implementations are **untracked by convention** - they don't re-execute when signals change. This provides explicit control flow.
+
+#### Step 6: Add Error Handling
+
+Use `withHooks` to react to resource errors:
+
+```typescript
+withHooks({
+  onInit: (store) => {
+    effect(() => {
+      const error = store._itemsResource.error();
+      if (error) {
+        store._toastService.show('Error: ' + getMessage(error));
+      }
+    });
+  }
+})
+```
+
+**Pattern:** Error effects should be read-only - they observe errors and trigger side effects, but don't modify state.
+
+### Common Resource API Patterns
+
+#### Template Integration with linkedSignal
+
+For two-way form binding that synchronizes with the store:
+
+```typescript
+export class MyComponent {
+  #store = inject(MyStore);
+
+  // Create linked signal for form field
+  searchTerm = linkedSignal(() => this.#store.filter().searchTerm);
+
+  // Combine form fields into filter object
+  #linkedFilter = computed(() => ({
+    searchTerm: this.searchTerm(),
+    // ... other fields
+  }));
+
+  constructor() {
+    // Sync form changes back to store
+    this.#store.updateFilter(this.#linkedFilter);
+  }
+}
+```
+
+**Benefits:**
+- Two-way binding for forms
+- Automatic store synchronization
+- Type-safe filter construction
+
+#### Working with Resource Data
+
+Access resource data through resource signals:
+
+```typescript
+withComputed((store) => ({
+  items: computed(() => store._itemsResource.value() ?? []),
+  isLoading: computed(() => store._itemsResource.isLoading()),
+  hasError: computed(() => store._itemsResource.hasError()),
+}))
+```
+
+**Available signals:**
+- `value()` - The loaded data (undefined while loading)
+- `isLoading()` - Loading state boolean
+- `hasError()` - Error state boolean
+- `error()` - Error object if present
+- `status()` - Overall status: 'idle' | 'loading' | 'resolved' | 'error'
+
+#### Updating Resource Data Locally
+
+For temporary working copies before server writes:
+
+```typescript
+withMethods((store) => ({
+  updateLocalItem: (id: string, changes: Partial<Item>) => {
+    store._itemsResource.update((currentItems) => {
+      return currentItems.map(item =>
+        item.id === id ? { ...item, ...changes } : item
+      );
+    });
+  }
+}))
+```
+
+**Note:** This pattern feels unconventional but aligns with maintaining temporary working copies before server persistence.
+
+#### Multiple Resources in One Store
+
+Combine multiple resources for complex data requirements:
+
+```typescript
+withProps((store) => ({
+  _itemsResource: resource({
+    params: store.filter,
+    loader: (params) => store._dataService.loadItems(params.params, params.abortSignal)
+  }),
+
+  _detailsResource: resource({
+    params: store.selectedId,
+    loader: (params) => {
+      if (!params.params) return Promise.resolve(null);
+      return store._dataService.loadDetails(params.params, params.abortSignal);
+    }
+  })
+}))
+```
+
+**Pattern:** Each resource has independent params and loading state, but can share service instances.
+
+### Important Resource API Considerations
+
+#### Race Condition Prevention
+
+The Resource API automatically handles race conditions:
+- New requests automatically cancel pending requests
+- No need for `switchMap`, `takeUntilDestroyed`, or manual abort handling
+- Declarative parameter changes trigger clean cancellation
+
+#### Untracked Signal Methods
+
+`signalMethod` implementations deliberately skip reactive tracking:
+- Provides explicit, predictable control flow
+- Prevents unexpected re-executions from signal changes
+- Makes side effects obvious at call sites
+
+#### Loader Function Requirements
+
+Loaders must:
+- Return a `Promise` (not Observable)
+- Accept and pass through the `abortSignal` to enable cancellation
+- Handle the signal in the underlying HTTP call
+
+**Converting Observables:**
+```typescript
+loader: (params) => {
+  return firstValueFrom(
+    this._service.load$(params.params)
+      .pipe(takeUntilDestroyed(this._destroyRef))
+  );
+}
+```
+
+#### Resource Lifecycle
+
+Resources maintain their own state machine:
+1. **Idle** - Initial state before first load
+2. **Loading** - Request in progress
+3. **Resolved** - Data loaded successfully
+4. **Error** - Request failed
+
+State transitions automatically trigger reactive updates to dependent computeds and effects.
+
+## Common Refactoring Patterns
+
+### Pattern 1: Effect for State Sync → computed()
+
+```typescript
+// ❌ Before
+effect(() => {
+  const x = this.x();
+  const y = this.y();
+  this.sum.set(x + y);
+});
+
+// ✅ After
+readonly sum = computed(() => this.x() + this.y());
+```
+
+### Pattern 2: Effect for Async Load → Resource API
+
+```typescript
+// ❌ Before
+effect(() => {
+  const id = this.selectedId();
+  this.loadItem(id);
+});
+
+// ✅ After
+readonly itemResource = resource({
+  params: this.selectedId,
+  loader: ({ params }) => this.service.loadItem(params)
+});
+```
+
+### Pattern 3: Effect for Debounced Search → RxJS
+
+```typescript
+// ❌ Before
+effect(() => {
+  const term = this.searchTerm();
+  // No way to debounce within effect
+  this.search(term);
+});
+
+// ✅ After
+readonly searchTerm$ = toObservable(this.searchTerm);
+readonly results = toSignal(
+  this.searchTerm$.pipe(
+    debounceTime(300),
+    switchMap(term => this.searchService.search(term))
+  ),
+  { initialValue: [] }
+);
+```
+
+### Pattern 4: Effect for Event Notification → Direct Event Handling
+
+```typescript
+// ❌ Before
+effect(() => {
+  const value = this.value();
+  this.valueChange.emit(value);
+});
+
+// ✅ After
+updateValue(newValue: string): void {
+  this.value.set(newValue);
+  this.valueChange.emit(newValue);
+}
+```
+
+## Code Review Checklist
+
+When reviewing code with `effect()`, ask:
+
+- [ ] Is this for rendering non-data-bound content? (logging, canvas, imperative APIs)
+  - **YES:** Effect is appropriate
+  - **NO:** Continue checklist
+
+- [ ] Is this synchronous state derivation?
+  - **YES:** Use `computed()` instead
+
+- [ ] Is this asynchronous data loading?
+  - **YES:** Use Resource API instead
+
+- [ ] Does this need RxJS operators (debounce, switchMap, etc.)?
+  - **YES:** Use RxJS integration or reactive helpers instead
+
+- [ ] Is this reacting to a user event?
+  - **YES:** Handle event directly instead
+
+- [ ] Could this cause circular updates?
+  - **YES:** Refactor immediately - this will cause bugs
+
+## Anti-Pattern Detection Rules
+
+Flag any effect that:
+
+1. **Calls `set()` or `update()` on signals** - Likely state propagation anti-pattern
+2. **Calls service methods that update state** - Hidden state propagation
+3. **Emits events based on signal changes** - Signal/event semantic mismatch
+4. **Has try/catch for async operations** - Should use Resource API
+5. **Would benefit from debouncing/throttling** - Should use RxJS
+
+## When to Use Each Pattern
+
+**Use computed() when:**
+- Synchronous state derivation
+- No async operations needed
+- Memoization desired
+
+**Use Resource API with Signal Store when:**
+- Loading data based on reactive filter/search parameters
+- Need automatic race condition handling for concurrent requests
+- Want declarative data loading without RxJS subscriptions
+- Building stores with frequently changing query parameters
+- Implementing pagination, filtering, or search features
+
+**Use RxJS integration when:**
+- Complex reactive flows with multiple operators
+- Need debouncing, throttling, or custom timing control
+- Working with multiple Observable sources
+- Require fine-grained control over subscription lifecycle
+
+**Use reactive helpers when:**
+- Prefer signal-centric API but need RxJS power
+- Simple async operations with basic operators
+- Want automatic subscription management
+
+**Consider alternatives to Resource API when:**
+- Simple one-time data loads (use `rxMethod` or direct service calls)
+- Complex Observable chains with multiple operators needed
+- Need fine-grained control over request timing/caching
+- Working with WebSocket or SSE streams (use `rxMethod` instead)
+
+## Key Principles
+
+1. **Effects are for side effects, not state management**
+2. **Prefer declarative over imperative**
+3. **Use computed() for sync, Resource API for async**
+4. **React to events, not state changes**
+5. **RxJS for complex reactive flows**
+6. **Auto-tracking is powerful but opaque - avoid when possible**
+
+## When in Doubt
+
+Ask: "Can the user see this without an effect using data binding?"
+- **YES:** Don't use effect, use data binding
+- **NO:** Effect might be appropriate (but verify against decision tree)

.claude/skills/swagger-sync-manager/SKILL.md

@@ -1,134 +0,0 @@
----
-name: swagger-sync-manager
-description: This skill should be used when regenerating Swagger/OpenAPI TypeScript API clients in the ISA-Frontend monorepo. It handles generation of all 10 API clients (or specific ones), Unicode cleanup, breaking change detection, TypeScript validation, and affected test execution. Use this skill when the user requests API sync, mentions "regenerate swagger", or indicates backend API changes.
----
-
-# Swagger Sync Manager
-
-## Overview
-
-Automate the regeneration of TypeScript API clients from Swagger/OpenAPI specifications. Handles 10 API clients with automatic post-processing, breaking change detection, impact analysis, and validation.
-
-## When to Use This Skill
-
-Invoke when user requests:
-- API client regeneration
-- "sync swagger" or "update API clients"
-- Backend API changes need frontend updates
-
-## Available APIs
-
-availability-api, cat-search-api, checkout-api, crm-api, eis-api, inventory-api, isa-api, oms-api, print-api, wws-api
-
-## Sync Workflow
-
-### Step 1: Pre-Generation Check
-
-```bash
-# Check uncommitted changes
-git status generated/swagger/
-```
-
-If changes exist, warn user and ask to proceed.
-
-### Step 2: Backup Current State (Optional)
-
-```bash
-cp -r generated/swagger generated/swagger.backup.$(date +%s)
-```
-
-### Step 3: Run Generation
-
-```bash
-# All APIs
-npm run generate:swagger
-
-# Specific API (if api-name provided)
-npm run generate:swagger:[api-name]
-```
-
-### Step 4: Verify Unicode Cleanup
-
-Check `tools/fix-files.js` executed. Scan for remaining Unicode issues:
-
-```bash
-grep -r "\\\\u00" generated/swagger/ || echo "✅ No Unicode issues"
-```
-
-### Step 5: Detect Breaking Changes
-
-For each modified API:
-
-```bash
-git diff generated/swagger/[api-name]/
-```
-
-Identify:
-- 🔴 Removed properties
-- 🔴 Changed types
-- 🔴 Removed endpoints
-- ✅ Added properties (safe)
-- ✅ New endpoints (safe)
-
-### Step 6: Impact Analysis
-
-Use `Explore` agent to find affected files:
-- Search for imports from `@generated/swagger/[api-name]`
-- List data-access services using changed APIs
-- Estimate refactoring scope
-
-### Step 7: Validate
-
-```bash
-# TypeScript compilation
-npx tsc --noEmit
-
-# Run affected tests
-npx nx affected:test --skip-nx-cache
-
-# Lint affected
-npx nx affected:lint
-```
-
-### Step 8: Generate Report
-
-```
-Swagger Sync Complete
-=====================
-
-APIs Regenerated: [all | specific]
-Files Changed: XX
-Breaking Changes: XX
-
-🔴 Breaking Changes
--------------------
-- [API]: [Property removed/type changed]
-- Affected files: [list]
-
-✅ Compatible Changes
----------------------
-- [API]: [New properties/endpoints]
-
-📊 Validation
--------------
-TypeScript: ✅/❌
-Tests: XX/XX passing
-Lint: ✅/❌
-
-💡 Next Steps
--------------
-[Fix breaking changes / Deploy]
-```
-
-## Error Handling
-
-**Generation fails**: Check OpenAPI spec URLs in package.json
-
-**Unicode cleanup fails**: Run `node tools/fix-files.js` manually
-
-**TypeScript errors**: Review breaking changes, update affected services
-
-## References
-
-- CLAUDE.md API Integration section
-- package.json swagger generation scripts

.claude/skills/tailwind/SKILL.md

@@ -9,29 +9,6 @@ description: This skill should be used when working with Tailwind CSS styling in
 
 Assist with applying the ISA-specific Tailwind CSS design system throughout the ISA-Frontend Angular monorepo. This skill provides comprehensive knowledge of custom utilities, color palettes, typography classes, button variants, and layout patterns specific to this project.
 
-## When to Use This Skill
-
-Invoke this skill when:
-- **After** checking `libs/ui/**` for existing components (always check first!)
-- Styling layout and spacing for components
-- Choosing appropriate color values for custom elements
-- Applying typography classes to text content
-- Determining spacing, layout, or responsive breakpoints
-- Customizing or extending existing UI components
-- Ensuring design system consistency
-- Questions about which Tailwind utility classes are available
-
-**Important**: This skill provides Tailwind utilities. Always prefer using components from `@isa/ui/*` libraries before applying custom Tailwind styles.
-
-**Works together with:**
-- **[angular-template](../angular-template/SKILL.md)** - Angular template syntax, control flow (@if, @for, @defer), and binding patterns
-- **[html-template](../html-template/SKILL.md)** - E2E testing attributes (`data-what`, `data-which`) and ARIA accessibility
-
-When building Angular components, these three skills work together:
-1. Use **angular-template** for Angular syntax and control flow
-2. Use **html-template** for `data-*` and ARIA attributes
-3. Use **tailwind** (this skill) for styling with the ISA design system
-
 ## Core Design System Principles
 
 ### 0. Component Libraries First (Most Important)

.claude/skills/template-standards/SKILL.md

@@ -0,0 +1,472 @@
+---
+name: template-standards
+description: This skill should be used when writing or reviewing Angular component templates. It provides comprehensive guidance on modern Angular 20+ template syntax (control flow, defer, projection, bindings), E2E testing attributes (data-what, data-which), and ARIA accessibility attributes. Use when creating components, refactoring to modern syntax, implementing lazy loading, adding testing attributes, ensuring accessibility compliance, or reviewing template best practices.
+---
+
+# Template Standards
+
+Comprehensive guide for Angular templates covering modern syntax, E2E testing attributes, and ARIA accessibility.
+
+## Overview
+
+This skill combines three essential aspects of Angular template development:
+
+1. **Modern Angular Syntax** - Control flow (@if, @for, @switch), lazy loading (@defer), content projection, variable declarations, and bindings
+2. **E2E Testing Attributes** - Stable selectors (data-what, data-which) for automated testing
+3. **ARIA Accessibility** - Semantic roles, properties, and states for assistive technologies
+
+**Every interactive element MUST include both E2E and ARIA attributes.**
+
+**Related Skills:**
+- **tailwind** - ISA design system styling (colors, typography, spacing, layout)
+- **logging** - MANDATORY logging in all Angular files using `@isa/core/logging`
+
+## Part 1: Angular Template Syntax
+
+### Control Flow (Angular 17+)
+
+#### @if / @else if / @else
+
+```typescript
+@if (user.isAdmin()) {
+  <app-admin-dashboard />
+} @else if (user.isEditor()) {
+  <app-editor-dashboard />
+} @else {
+  <app-viewer-dashboard />
+}
+
+// Store result with 'as'
+@if (user.profile?.settings; as settings) {
+  <p>Theme: {{settings.theme}}</p>
+}
+```
+
+#### @for with @empty
+
+```typescript
+@for (product of products(); track product.id) {
+  <app-product-card [product]="product" />
+} @empty {
+  <p>No products available</p>
+}
+```
+
+**CRITICAL:** Always provide `track` expression:
+- Best: `track item.id` or `track item.uuid`
+- Static lists: `track $index`
+- **NEVER:** `track identity(item)` (causes full re-render)
+
+**Contextual variables:** `$count`, `$index`, `$first`, `$last`, `$even`, `$odd`
+
+#### @switch
+
+```typescript
+@switch (viewMode()) {
+  @case ('grid') { <app-grid-view /> }
+  @case ('list') { <app-list-view /> }
+  @default { <app-grid-view /> }
+}
+```
+
+**See [control-flow-reference.md](references/control-flow-reference.md) for advanced patterns including nested loops, complex conditions, and filter strategies.**
+
+### @defer Lazy Loading
+
+#### Basic Usage
+
+```typescript
+@defer (on viewport) {
+  <app-heavy-chart />
+} @placeholder (minimum 500ms) {
+  <div class="skeleton"></div>
+} @loading (after 100ms; minimum 1s) {
+  <mat-spinner />
+} @error {
+  <p>Failed to load</p>
+}
+```
+
+#### Common Triggers
+
+| Trigger | Use Case |
+|---------|----------|
+| `idle` (default) | Non-critical features |
+| `viewport` | Below-the-fold content |
+| `interaction` | User-initiated (click/keydown) |
+| `hover` | Tooltips/popovers |
+| `timer(Xs)` | Delayed content |
+| `when(expr)` | Custom condition |
+
+**Multiple triggers:** `@defer (on interaction; on timer(5s))`
+**Prefetching:** `@defer (on interaction; prefetch on idle)`
+
+#### Critical Requirements
+
+- Components **MUST be standalone**
+- No `@ViewChild`/`@ContentChild` references
+- Reserve space in `@placeholder` to prevent layout shift
+- Never defer above-the-fold content (harms LCP)
+- Avoid `immediate`/`timer` during initial render (harms TTI)
+
+**See [defer-patterns.md](references/defer-patterns.md) for performance optimization, Core Web Vitals impact, bundle size reduction strategies, and real-world examples.**
+
+### Content Projection
+
+#### Single Slot
+
+```typescript
+@Component({
+  selector: 'ui-card',
+  template: `<div class="card"><ng-content></ng-content></div>`
+})
+```
+
+#### Multi-Slot with Selectors
+
+```typescript
+@Component({
+  template: `
+    <header><ng-content select="card-header"></ng-content></header>
+    <main><ng-content select="card-body"></ng-content></main>
+    <footer><ng-content></ng-content></footer> <!-- default slot -->
+  `
+})
+```
+
+**Usage:**
+```html
+<ui-card>
+  <card-header><h3>Title</h3></card-header>
+  <card-body><p>Content</p></card-body>
+  <button>Action</button> <!-- goes to default slot -->
+</ui-card>
+```
+
+**CRITICAL Constraint:** `ng-content` **always instantiates** (even if hidden). For conditional projection, use `ng-template` + `NgTemplateOutlet`.
+
+**See [projection-patterns.md](references/projection-patterns.md) for conditional projection, template-based projection, querying projected content, and modal/form field examples.**
+
+### Template References
+
+#### ng-template
+
+```html
+<ng-template #userCard let-user="userData" let-index="i">
+  <div class="user">#{{index}}: {{user.name}}</div>
+</ng-template>
+
+<ng-container
+  *ngTemplateOutlet="userCard; context: {userData: currentUser(), i: 0}">
+</ng-container>
+```
+
+**Access in component:**
+```typescript
+myTemplate = viewChild<TemplateRef<unknown>>('myTemplate');
+```
+
+#### ng-container
+
+Groups elements without DOM footprint:
+
+```html
+<p>
+  Hero's name is
+  <ng-container @if="hero()">{{hero().name}}</ng-container>.
+</p>
+```
+
+**See [template-reference.md](references/template-reference.md) for programmatic rendering, ViewContainerRef patterns, context scoping, and common pitfalls.**
+
+### Variables
+
+#### @let (Angular 18.1+)
+
+```typescript
+@let userName = user().name;
+@let greeting = 'Hello, ' + userName;
+@let asyncData = data$ | async;
+
+<h1>{{greeting}}</h1>
+```
+
+**Scoped to current view** (not hoisted to parent/sibling).
+
+#### Template References (#)
+
+```html
+<input #emailInput type="email" />
+<button (click)="sendEmail(emailInput.value)">Send</button>
+
+<app-datepicker #startDate />
+<button (click)="startDate.open()">Open</button>
+```
+
+### Binding Patterns
+
+**Property:** `[disabled]="!isValid()"`
+**Attribute:** `[attr.aria-label]="label()"` `[attr.data-what]="'card'"`
+**Event:** `(click)="save()"` `(input)="onInput($event)"`
+**Two-way:** `[(ngModel)]="userName"`
+**Class:** `[class.active]="isActive()"` or `[class]="{active: isActive()}"`
+**Style:** `[style.width.px]="width()"` or `[style]="{color: textColor()}"`
+
+## Part 2: E2E Testing Attributes
+
+### Purpose
+
+Enable automated end-to-end testing by providing stable selectors for QA automation:
+- **`data-what`**: Semantic description of element's purpose (e.g., `submit-button`, `email-input`)
+- **`data-which`**: Unique identifier for specific instances (e.g., `registration-form`, `customer-123`)
+- **`data-*`**: Additional contextual information (e.g., `data-status="active"`)
+
+### Naming Conventions
+
+**`data-what` patterns:**
+- `*-button` (submit-button, cancel-button, delete-button)
+- `*-input` (email-input, search-input, quantity-input)
+- `*-link` (product-link, order-link, customer-link)
+- `*-item` (list-item, menu-item, card-item)
+- `*-dialog` (confirm-dialog, error-dialog, info-dialog)
+- `*-dropdown` (status-dropdown, category-dropdown)
+
+**`data-which` guidelines:**
+- Use unique identifiers: `data-which="primary"`, `data-which="customer-list"`
+- Bind dynamically for lists: `[attr.data-which]="item.id"`
+- Combine with context: `data-which="customer-{{ customerId }}-edit"`
+
+### Best Practices
+
+1. ✅ Add to ALL interactive elements
+2. ✅ Use kebab-case for `data-what` values
+3. ✅ Ensure `data-which` is unique within the view
+4. ✅ Use Angular binding for dynamic values: `[attr.data-*]`
+5. ✅ Avoid including sensitive data in attributes
+
+**See [e2e-attributes.md](references/e2e-attributes.md) for complete patterns by element type (buttons, inputs, links, lists, tables, dialogs), dynamic attribute bindings, testing integration examples, and validation strategies.**
+
+## Part 3: ARIA Accessibility Attributes
+
+### Purpose
+
+Ensure web applications are accessible to all users, including those using assistive technologies:
+- **Roles**: Define element purpose (button, navigation, dialog, etc.)
+- **Properties**: Provide additional context (aria-label, aria-describedby)
+- **States**: Indicate dynamic states (aria-expanded, aria-disabled)
+- **Live Regions**: Announce dynamic content changes
+
+### Role Patterns
+
+- Interactive elements: `button`, `link`, `menuitem`
+- Structural: `navigation`, `main`, `complementary`, `contentinfo`
+- Widget: `dialog`, `alertdialog`, `tooltip`, `tablist`, `tab`
+- Landmark: `banner`, `search`, `form`, `region`
+
+### Best Practices
+
+1. ✅ Use semantic HTML first (use `<button>` instead of `<div role="button">`)
+2. ✅ Provide text alternatives for all interactive elements
+3. ✅ Ensure proper keyboard navigation (tabindex, focus management)
+4. ✅ Use `aria-label` when visual label is missing
+5. ✅ Use `aria-labelledby` to reference existing visible labels
+6. ✅ Keep ARIA attributes in sync with visual states
+7. ✅ Test with screen readers (NVDA, JAWS, VoiceOver)
+
+**See [aria-attributes.md](references/aria-attributes.md) for comprehensive role reference, property and state attributes, live regions, keyboard navigation patterns, WCAG compliance requirements, and testing strategies.**
+
+## Part 4: Combined Examples
+
+### Button with All Attributes
+
+```html
+<button
+  type="button"
+  (click)="onSubmit()"
+  data-what="submit-button"
+  data-which="registration-form"
+  aria-label="Submit registration form"
+  [attr.aria-disabled]="!isValid()">
+  Submit
+</button>
+```
+
+### Input with All Attributes
+
+```html
+<input
+  type="text"
+  [(ngModel)]="email"
+  data-what="email-input"
+  data-which="registration-form"
+  aria-label="Email address"
+  aria-describedby="email-hint"
+  aria-required="true"
+  [attr.aria-invalid]="emailError ? 'true' : null" />
+<span id="email-hint">We'll never share your email</span>
+```
+
+### Dynamic List with All Attributes
+
+```typescript
+@for (item of items(); track item.id) {
+  <li
+    (click)="selectItem(item)"
+    data-what="list-item"
+    [attr.data-which]="item.id"
+    [attr.data-status]="item.status"
+    [attr.aria-label]="'Select ' + item.name"
+    role="button"
+    tabindex="0"
+    (keydown.enter)="selectItem(item)"
+    (keydown.space)="selectItem(item)">
+    {{ item.name }}
+  </li>
+}
+```
+
+### Dialog with All Attributes
+
+```html
+<div
+  class="dialog"
+  data-what="confirmation-dialog"
+  data-which="delete-item"
+  role="dialog"
+  aria-modal="true"
+  aria-labelledby="dialog-title"
+  aria-describedby="dialog-description">
+
+  <h2 id="dialog-title">Confirm Deletion</h2>
+  <p id="dialog-description">Are you sure you want to delete this item?</p>
+
+  <button
+    (click)="confirm()"
+    data-what="confirm-button"
+    data-which="delete-dialog"
+    aria-label="Confirm deletion">
+    Delete
+  </button>
+
+  <button
+    (click)="cancel()"
+    data-what="cancel-button"
+    data-which="delete-dialog"
+    aria-label="Cancel deletion">
+    Cancel
+  </button>
+</div>
+```
+
+**See [combined-patterns.md](references/combined-patterns.md) for complete form examples, product listings, shopping carts, modal dialogs, navigation patterns, data tables, search interfaces, notifications, and multi-step forms with all attributes properly applied.**
+
+## Validation Checklist
+
+Before considering template complete:
+
+### Angular Syntax
+- [ ] Using modern control flow (@if, @for, @switch) instead of *ngIf/*ngFor/*ngSwitch
+- [ ] All @for loops have proper `track` expressions (prefer item.id over $index)
+- [ ] Complex expressions moved to `computed()` in component
+- [ ] @defer used for below-the-fold or heavy components
+- [ ] Content projection using ng-content with proper selectors (if applicable)
+- [ ] Using @let for template-scoped variables (Angular 18.1+)
+
+### E2E Attributes
+- [ ] All buttons have `data-what` and `data-which`
+- [ ] All inputs have `data-what` and `data-which`
+- [ ] All links have `data-what` and `data-which`
+- [ ] Dynamic lists use `[attr.data-*]` bindings with unique identifiers
+- [ ] No duplicate `data-which` values within the same view
+
+### ARIA Accessibility
+- [ ] All interactive elements have appropriate ARIA labels
+- [ ] Proper roles assigned (button, navigation, dialog, etc.)
+- [ ] Form fields associated with labels (id/for or aria-labelledby)
+- [ ] Error messages use `role="alert"` and `aria-live="polite"`
+- [ ] Dialogs have `role="dialog"`, `aria-modal`, and label relationships
+- [ ] Dynamic state changes reflected in ARIA attributes
+- [ ] Keyboard accessibility (tabindex, enter/space handlers where needed)
+
+### Combined Standards
+- [ ] Every interactive element has BOTH E2E and ARIA attributes
+- [ ] Attributes organized logically (Angular directives → data-* → aria-*)
+- [ ] Dynamic bindings use `[attr.*]` syntax correctly
+- [ ] No accessibility violations (semantic HTML preferred over ARIA)
+
+## Migration Guide
+
+### From Legacy Angular Syntax
+
+| Legacy | Modern |
+|--------|--------|
+| `*ngIf="condition"` | `@if (condition) { }` |
+| `*ngFor="let item of items"` | `@for (item of items; track item.id) { }` |
+| `[ngSwitch]` | `@switch (value) { @case ('a') { } }` |
+
+**CLI migration:** `ng generate @angular/core:control-flow`
+
+### Adding E2E and ARIA to Existing Templates
+
+1. **Identify interactive elements**: buttons, inputs, links, clickable divs
+2. **Add E2E attributes**: `data-what` (semantic type), `data-which` (unique identifier)
+3. **Add ARIA attributes**: appropriate role, label, and state attributes
+4. **Test**: verify selectors work in E2E tests, validate with screen readers
+
+## Reference Files
+
+For detailed examples and advanced patterns, see:
+
+### Angular Syntax References
+- `references/control-flow-reference.md` - Advanced @if/@for/@switch patterns, nested loops, filtering
+- `references/defer-patterns.md` - Lazy loading strategies, Core Web Vitals, performance optimization
+- `references/projection-patterns.md` - Advanced ng-content, conditional projection, template-based patterns
+- `references/template-reference.md` - ng-template/ng-container, programmatic rendering, ViewContainerRef
+
+### E2E Testing References
+- `references/e2e-attributes.md` - Complete E2E attribute patterns, naming conventions, testing integration
+
+### ARIA Accessibility References
+- `references/aria-attributes.md` - Comprehensive ARIA guidance, roles, properties, states, WCAG compliance
+
+### Combined References
+- `references/combined-patterns.md` - Real-world examples with Angular + E2E + ARIA integrated
+
+Search with: `grep -r "pattern" references/`
+
+## Quick Reference Summary
+
+**Every interactive element needs:**
+
+1. **Angular binding** (event, property, attribute)
+2. **`data-what`** (semantic type: submit-button, email-input)
+3. **`data-which`** (unique identifier: registration-form, user-123)
+4. **ARIA attribute** (role, aria-label, aria-describedby)
+
+**Template Pattern:**
+```html
+<button
+  (click)="action()"
+  data-what="[type]-button"
+  data-which="[context]"
+  aria-label="[descriptive label]">
+  Text
+</button>
+```
+
+**Dynamic Pattern:**
+```typescript
+@for (item of items(); track item.id) {
+  <div
+    (click)="select(item)"
+    data-what="item-card"
+    [attr.data-which]="item.id"
+    [attr.aria-label]="'Select ' + item.name">
+    {{ item.name }}
+  </div>
+}
+```
+
+---
+
+**This skill combines Angular template syntax, E2E testing attributes, and ARIA accessibility into a unified standard. Apply all three aspects to every template.**

.claude/skills/test-migration-specialist/SKILL.md

@@ -1,344 +0,0 @@
----
-name: test-migration-specialist
-description: This skill should be used when migrating Angular libraries from Jest + Spectator to Vitest + Angular Testing Utilities. It handles test configuration updates, test file refactoring, mock pattern conversion, and validation. Use this skill when the user requests test framework migration, specifically for the 40 remaining Jest-based libraries in the ISA-Frontend monorepo.
----
-
-# Test Migration Specialist
-
-## Overview
-
-Automate the migration of Angular library tests from Jest + Spectator to Vitest + Angular Testing Utilities. This skill handles the complete migration workflow including configuration updates, test file refactoring, dependency management, and validation.
-
-**Current Migration Status**: 40 libraries use Jest (65.6%), 21 libraries use Vitest (34.4%)
-
-## When to Use This Skill
-
-Invoke this skill when:
-- User requests test migration for a specific library
-- User mentions "migrate tests" or "Jest to Vitest"
-- User wants to update test framework for a library
-- User references the 40 remaining libraries to migrate
-
-## Migration Workflow
-
-### Step 1: Pre-Migration Analysis
-
-Before making any changes, analyze the current state:
-
-1. **Read Testing Guidelines**
-   - Use `docs-researcher` agent to read `docs/guidelines/testing.md`
-   - Understand migration patterns and best practices
-   - Note JUnit and Cobertura configuration requirements
-
-2. **Analyze Library Structure**
-   - Read `libs/[path]/project.json` to identify current test executor
-   - Count test files using Glob: `**/*.spec.ts`
-   - Scan for Spectator usage patterns using Grep: `createComponentFactory|createServiceFactory|Spectator`
-   - Identify complex mocking scenarios (ng-mocks, jest.mock patterns)
-
-3. **Determine Library Depth**
-   - Calculate directory levels from workspace root
-   - This affects relative paths in vite.config.mts (../../../ vs ../../../../)
-
-### Step 2: Update Test Configuration
-
-Update the library's test configuration to use Vitest:
-
-1. **Update project.json**
-   Replace Jest executor with Vitest:
-   ```json
-   {
-     "test": {
-       "executor": "@nx/vite:test",
-       "options": {
-         "configFile": "vite.config.mts"
-       }
-     }
-   }
-   ```
-
-2. **Create vite.config.mts**
-   Create configuration with JUnit and Cobertura reporters:
-   ```typescript
-   /// <reference types='vitest' />
-   import { defineConfig } from 'vite';
-   import angular from '@analogjs/vite-plugin-angular';
-   import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
-   import { nxCopyAssetsPlugin } from '@nx/vite/plugins/nx-copy-assets.plugin';
-
-   export default
-   // @ts-expect-error - Vitest reporter tuple types have complex inference issues
-   defineConfig(() => ({
-     root: __dirname,
-     cacheDir: '../../../node_modules/.vite/libs/[path]',
-     plugins: [angular(), nxViteTsPaths(), nxCopyAssetsPlugin(['*.md'])],
-     test: {
-       watch: false,
-       globals: true,
-       environment: 'jsdom',
-       include: ['{src,tests}/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
-       setupFiles: ['src/test-setup.ts'],
-       reporters: [
-         'default',
-         ['junit', { outputFile: '../../../testresults/junit-[library-name].xml' }],
-       ],
-       coverage: {
-         reportsDirectory: '../../../coverage/libs/[path]',
-         provider: 'v8' as const,
-         reporter: ['text', 'cobertura'],
-       },
-     },
-   }));
-   ```
-
-   **Critical**: Adjust `../../../` depth based on library location
-
-### Step 3: Migrate Test Files
-
-For each `.spec.ts` file, perform these conversions:
-
-1. **Update Imports**
-   ```typescript
-   // REMOVE
-   import { createComponentFactory, Spectator } from '@ngneat/spectator/jest';
-
-   // ADD
-   import { ComponentFixture, TestBed } from '@angular/core/testing';
-   import { describe, it, expect, beforeEach } from 'vitest';
-   ```
-
-2. **Convert Component Tests**
-   ```typescript
-   // OLD (Spectator)
-   const createComponent = createComponentFactory({
-     component: MyComponent,
-     imports: [CommonModule],
-     mocks: [MyService]
-   });
-
-   let spectator: Spectator<MyComponent>;
-   beforeEach(() => spectator = createComponent());
-
-   it('should display title', () => {
-     spectator.setInput('title', 'Test');
-     expect(spectator.query('h1')).toHaveText('Test');
-   });
-
-   // NEW (Angular Testing Utilities)
-   describe('MyComponent', () => {
-     let fixture: ComponentFixture<MyComponent>;
-     let component: MyComponent;
-
-     beforeEach(async () => {
-       await TestBed.configureTestingModule({
-         imports: [MyComponent, CommonModule],
-         providers: [{ provide: MyService, useValue: mockService }]
-       }).compileComponents();
-
-       fixture = TestBed.createComponent(MyComponent);
-       component = fixture.componentInstance;
-     });
-
-     it('should display title', () => {
-       component.title = 'Test';
-       fixture.detectChanges();
-       expect(fixture.nativeElement.querySelector('h1').textContent).toContain('Test');
-     });
-   });
-   ```
-
-3. **Convert Service Tests**
-   ```typescript
-   // OLD (Spectator)
-   const createService = createServiceFactory({
-     service: MyService,
-     mocks: [HttpClient]
-   });
-
-   // NEW (Angular Testing Utilities)
-   describe('MyService', () => {
-     let service: MyService;
-     let httpMock: HttpTestingController;
-
-     beforeEach(() => {
-       TestBed.configureTestingModule({
-         imports: [HttpClientTestingModule],
-         providers: [MyService]
-       });
-
-       service = TestBed.inject(MyService);
-       httpMock = TestBed.inject(HttpTestingController);
-     });
-
-     afterEach(() => {
-       httpMock.verify();
-     });
-   });
-   ```
-
-4. **Update Mock Patterns**
-   - Replace `jest.fn()` → `vi.fn()`
-   - Replace `jest.spyOn()` → `vi.spyOn()`
-   - Replace `jest.mock()` → `vi.mock()`
-   - For complex mocks, use `ng-mocks` library if needed
-
-5. **Update Matchers**
-   - Replace Spectator matchers (`toHaveText`, `toExist`) with standard Jest/Vitest matchers
-   - Use `expect().toBeTruthy()`, `expect().toContain()`, etc.
-
-### Step 4: Verify E2E Attributes
-
-Check component templates for E2E testing attributes:
-
-1. **Scan Templates**
-   Use Grep to find templates: `**/*.html`
-
-2. **Validate Attributes**
-   Ensure interactive elements have:
-   - `data-what`: Semantic description (e.g., "submit-button")
-   - `data-which`: Unique identifier (e.g., "form-primary")
-   - Dynamic `data-*` for list items: `[attr.data-item-id]="item.id"`
-
-3. **Add Missing Attributes**
-   If missing, add them to components. See `dev:add-e2e-attrs` command or use that skill.
-
-### Step 5: Run Tests and Validate
-
-Execute tests to verify migration:
-
-1. **Run Tests**
-   ```bash
-   npx nx test [library-name] --skip-nx-cache
-   ```
-
-2. **Run with Coverage**
-   ```bash
-   npx nx test [library-name] --coverage.enabled=true --skip-nx-cache
-   ```
-
-3. **Verify Output Files**
-   Check that CI/CD integration files are created:
-   - JUnit XML: `testresults/junit-[library-name].xml`
-   - Cobertura XML: `coverage/libs/[path]/cobertura-coverage.xml`
-
-4. **Address Failures**
-   If tests fail:
-   - Review test conversion (common issues: missing fixture.detectChanges(), incorrect selectors)
-   - Check mock configurations
-   - Verify imports are correct
-   - Ensure async tests use proper patterns
-
-### Step 6: Clean Up
-
-Remove legacy configurations:
-
-1. **Remove Jest Files**
-   - Delete `jest.config.ts` or `jest.config.js` if present
-   - Remove Jest-specific setup files
-
-2. **Update Dependencies**
-   - Note if Spectator can be removed (check if other libs still use it)
-   - Note if Jest can be removed (check if other libs still use it)
-   - Don't actually remove from package.json unless all libs migrated
-
-3. **Update Documentation**
-   Update library README.md with new test commands:
-   ```markdown
-   ## Testing
-
-   This library uses Vitest + Angular Testing Utilities.
-
-   ```bash
-   # Run tests
-   npx nx test [library-name] --skip-nx-cache
-
-   # Run with coverage
-   npx nx test [library-name] --coverage.enabled=true --skip-nx-cache
-   ```
-   ```
-
-### Step 7: Generate Migration Report
-
-Provide comprehensive migration summary:
-
-```
-Test Migration Complete
-=======================
-
-Library: [library-name]
-Framework: Jest + Spectator → Vitest + Angular Testing Utilities
-
-📊 Migration Statistics
------------------------
-Test files migrated: XX
-Component tests: XX
-Service tests: XX
-Total test cases: XX
-
-✅ Test Results
----------------
-Passing: XX/XX (100%)
-Coverage: XX%
-
-📝 Configuration
-----------------
-- project.json: ✅ Updated to @nx/vite:test
-- vite.config.mts: ✅ Created with JUnit + Cobertura
-- E2E attributes: ✅ Validated
-
-📁 CI/CD Integration
---------------------
-- JUnit XML: ✅ testresults/junit-[name].xml
-- Cobertura XML: ✅ coverage/libs/[path]/cobertura-coverage.xml
-
-🧹 Cleanup
-----------
-- Jest config removed: ✅
-- README updated: ✅
-
-💡 Next Steps
--------------
-1. Verify tests in CI/CD pipeline
-2. Monitor for any edge cases
-3. Consider migrating related libraries
-
-📚 Remaining Libraries
-----------------------
-Jest libraries remaining: XX/40
-Progress: XX% complete
-```
-
-## Error Handling
-
-### Common Migration Issues
-
-**Issue 1: Tests fail after migration**
-- Check `fixture.detectChanges()` is called after setting inputs
-- Verify async tests use `async/await` properly
-- Check component imports are correct (standalone components)
-
-**Issue 2: Mocks not working**
-- Verify `vi.fn()` syntax is correct
-- Check providers array in TestBed configuration
-- For complex mocks, consider using `ng-mocks`
-
-**Issue 3: Coverage files not generated**
-- Verify path depth in vite.config.mts matches library location
-- Check reporters array includes `'cobertura'`
-- Ensure `provider: 'v8'` is set
-
-**Issue 4: Type errors in vite.config.mts**
-- Add `// @ts-expect-error` comment before `defineConfig()`
-- This is expected due to Vitest reporter type complexity
-
-## References
-
-Use `docs-researcher` agent to access:
-- `docs/guidelines/testing.md` - Comprehensive migration guide with examples
-- `CLAUDE.md` - Testing Framework section for project conventions
-
-**Key Documentation Sections:**
-- Vitest Configuration with JUnit and Cobertura
-- Angular Testing Utilities examples
-- Migration patterns and best practices
-- E2E attribute requirements

.claude/skills/test-migration/SKILL.md

@@ -0,0 +1,192 @@
+---
+name: test-migration
+description: Reference patterns for Jest to Vitest test migration. Contains syntax mappings for jest→vi, Spectator→Angular Testing Library, and common matcher conversions. Auto-loaded by migration-specialist agent.
+---
+
+# Jest to Vitest Migration Patterns
+
+Quick reference for test framework migration syntax.
+
+## Import Changes
+
+```typescript
+// REMOVE
+import { createComponentFactory, Spectator } from '@ngneat/spectator/jest';
+
+// ADD
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+```
+
+## Mock Migration
+
+| Jest | Vitest |
+|------|--------|
+| `jest.fn()` | `vi.fn()` |
+| `jest.spyOn(obj, 'method')` | `vi.spyOn(obj, 'method')` |
+| `jest.mock('module')` | `vi.mock('module')` |
+| `jest.useFakeTimers()` | `vi.useFakeTimers()` |
+| `jest.advanceTimersByTime(ms)` | `vi.advanceTimersByTime(ms)` |
+| `jest.useRealTimers()` | `vi.useRealTimers()` |
+| `jest.clearAllMocks()` | `vi.clearAllMocks()` |
+| `jest.resetAllMocks()` | `vi.resetAllMocks()` |
+
+## Spectator → TestBed
+
+### Component Testing
+
+```typescript
+// OLD (Spectator)
+const createComponent = createComponentFactory({
+  component: MyComponent,
+  imports: [CommonModule],
+  mocks: [MyService]
+});
+let spectator: Spectator<MyComponent>;
+beforeEach(() => spectator = createComponent());
+
+// NEW (TestBed)
+let fixture: ComponentFixture<MyComponent>;
+let component: MyComponent;
+beforeEach(async () => {
+  await TestBed.configureTestingModule({
+    imports: [MyComponent],
+    providers: [{ provide: MyService, useValue: mockService }]
+  }).compileComponents();
+  fixture = TestBed.createComponent(MyComponent);
+  component = fixture.componentInstance;
+});
+```
+
+### Service Testing
+
+```typescript
+// OLD (Spectator)
+const createService = createServiceFactory({
+  service: MyService,
+  mocks: [HttpClient]
+});
+let spectator: SpectatorService<MyService>;
+beforeEach(() => spectator = createService());
+
+// NEW (TestBed)
+let service: MyService;
+beforeEach(() => {
+  TestBed.configureTestingModule({
+    providers: [
+      MyService,
+      { provide: HttpClient, useValue: mockHttp }
+    ]
+  });
+  service = TestBed.inject(MyService);
+});
+```
+
+## Query Selectors
+
+| Spectator | Angular/Native |
+|-----------|---------------|
+| `spectator.query('.class')` | `fixture.nativeElement.querySelector('.class')` |
+| `spectator.queryAll('.class')` | `fixture.nativeElement.querySelectorAll('.class')` |
+| `spectator.query('button')` | `fixture.nativeElement.querySelector('button')` |
+
+## Events
+
+| Spectator | Native |
+|-----------|--------|
+| `spectator.click(element)` | `element.click()` + `fixture.detectChanges()` |
+| `spectator.typeInElement(value, el)` | `el.value = value; el.dispatchEvent(new Event('input'))` |
+| `spectator.blur(element)` | `element.dispatchEvent(new Event('blur'))` |
+
+## Matchers
+
+| Spectator | Standard |
+|-----------|----------|
+| `toHaveText('text')` | `expect(el.textContent).toContain('text')` |
+| `toExist()` | `toBeTruthy()` |
+| `toBeVisible()` | Check `!el.hidden && el.offsetParent !== null` |
+| `toHaveClass('class')` | `expect(el.classList.contains('class')).toBe(true)` |
+
+## Async Patterns
+
+```typescript
+// OLD (callback)
+it('should emit', (done) => {
+  service.data$.subscribe(val => {
+    expect(val).toBe(expected);
+    done();
+  });
+});
+
+// NEW (async/await)
+import { firstValueFrom } from 'rxjs';
+it('should emit', async () => {
+  const val = await firstValueFrom(service.data$);
+  expect(val).toBe(expected);
+});
+```
+
+## Input/Output Testing
+
+```typescript
+// Setting inputs (Angular 17.3+)
+fixture.componentRef.setInput('title', 'Test');
+fixture.detectChanges();
+
+// Testing outputs
+const emitSpy = vi.fn();
+component.myOutput.subscribe(emitSpy);
+// trigger action...
+expect(emitSpy).toHaveBeenCalledWith(expectedValue);
+```
+
+## Configuration Files
+
+### vite.config.mts Template
+
+```typescript
+/// <reference types='vitest' />
+import { defineConfig } from 'vite';
+import angular from '@analogjs/vite-plugin-angular';
+import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
+import { nxCopyAssetsPlugin } from '@nx/vite/plugins/nx-copy-assets.plugin';
+
+export default
+// @ts-expect-error - Vitest reporter tuple types have complex inference issues
+defineConfig(() => ({
+  root: __dirname,
+  cacheDir: '../../../node_modules/.vite/libs/[path]',  // Adjust depth!
+  plugins: [angular(), nxViteTsPaths(), nxCopyAssetsPlugin(['*.md'])],
+  test: {
+    watch: false,
+    globals: true,
+    environment: 'jsdom',
+    include: ['{src,tests}/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
+    setupFiles: ['src/test-setup.ts'],
+    reporters: [
+      'default',
+      ['junit', { outputFile: '../../../testresults/junit-[name].xml' }],
+    ],
+    coverage: {
+      reportsDirectory: '../../../coverage/libs/[path]',
+      provider: 'v8' as const,
+      reporter: ['text', 'cobertura'],
+    },
+  },
+}));
+```
+
+### test-setup.ts
+
+```typescript
+import '@analogjs/vitest-angular/setup-zone';
+```
+
+## Path Depth Reference
+
+| Library Location | Relative Path Prefix |
+|-----------------|---------------------|
+| `libs/feature/ui` | `../../` |
+| `libs/feature/data-access` | `../../` |
+| `libs/domain/feature/ui` | `../../../` |
+| `libs/domain/feature/data-access/store` | `../../../../` |

.claude/skills/type-safety-engineer/SKILL.md

@@ -1,199 +0,0 @@
----
-name: type-safety-engineer
-description: This skill should be used when improving TypeScript type safety by removing `any` types, adding Zod schemas for runtime validation, creating type guards, and strengthening strictness. Use this skill when the user wants to enhance type safety, mentions "fix any types", "add Zod validation", or requests type improvements for better code quality.
----
-
-# Type Safety Engineer
-
-## Overview
-
-Enhance TypeScript type safety by eliminating `any` types, adding Zod schemas for runtime validation, creating type guards, and strengthening compiler strictness.
-
-## When to Use This Skill
-
-Invoke when user wants to:
-- Remove `any` types
-- Add runtime validation with Zod
-- Improve type safety
-- Mentioned "type safety" or "Zod schemas"
-
-## Type Safety Workflow
-
-### Step 1: Scan for Issues
-
-```bash
-# Find explicit any
-grep -r ": any" libs/ --include="*.ts" | grep -v ".spec.ts"
-
-# Find functions without return types
-grep -r "^.*function.*{$" libs/ --include="*.ts" | grep -v ": "
-
-# TypeScript strict mode check
-npx tsc --noEmit --strict
-```
-
-### Step 2: Categorize Issues
-
-**🔴 Critical:**
-- `any` in API response handling
-- `any` in service methods
-- `any` in store state types
-
-**⚠️ Important:**
-- Missing return types
-- Untyped parameters
-- Weak types (`object`, `Function`)
-
-**ℹ️ Moderate:**
-- `any` in test files
-- Loose array types
-
-### Step 3: Add Zod Schemas for API Responses
-
-```typescript
-import { z } from 'zod';
-
-// Define schema
-const OrderItemSchema = z.object({
-  productId: z.string().uuid(),
-  quantity: z.number().int().positive(),
-  price: z.number().positive()
-});
-
-const OrderResponseSchema = z.object({
-  id: z.string().uuid(),
-  status: z.enum(['pending', 'confirmed', 'shipped']),
-  items: z.array(OrderItemSchema),
-  createdAt: z.string().datetime()
-});
-
-// Infer TypeScript type
-type OrderResponse = z.infer<typeof OrderResponseSchema>;
-
-// Runtime validation
-const order = OrderResponseSchema.parse(apiResponse);
-```
-
-### Step 4: Replace `any` with Specific Types
-
-**Pattern 1: Unknown + Type Guards**
-```typescript
-// BEFORE
-function processData(data: any) {
-  return data.value;
-}
-
-// AFTER
-function processData(data: unknown): string {
-  if (!isValidData(data)) {
-    throw new Error('Invalid data');
-  }
-  return data.value;
-}
-
-function isValidData(data: unknown): data is { value: string } {
-  return typeof data === 'object' && data !== null && 'value' in data;
-}
-```
-
-**Pattern 2: Generic Types**
-```typescript
-// BEFORE
-function findById(items: any[], id: string): any {
-  return items.find(item => item.id === id);
-}
-
-// AFTER
-function findById<T extends { id: string }>(items: T[], id: string): T | undefined {
-  return items.find(item => item.id === id);
-}
-```
-
-### Step 5: Add Type Guards for API Data
-
-```typescript
-export function isOrderResponse(data: unknown): data is OrderResponse {
-  try {
-    OrderResponseSchema.parse(data);
-    return true;
-  } catch {
-    return false;
-  }
-}
-
-// Use in service
-getOrder(id: string): Observable<OrderResponse> {
-  return this.http.get(`/api/orders/${id}`).pipe(
-    map(response => {
-      if (!isOrderResponse(response)) {
-        throw new Error('Invalid API response');
-      }
-      return response;
-    })
-  );
-}
-```
-
-### Step 6: Validate Changes
-
-```bash
-npx tsc --noEmit --strict
-npx nx affected:test --skip-nx-cache
-npx nx affected:lint
-```
-
-### Step 7: Generate Report
-
-```
-Type Safety Improvements
-========================
-
-Path: [analyzed path]
-
-🔍 Issues Found
----------------
-`any` usages: XX → 0
-Missing return types: XX → 0
-Untyped parameters: XX → 0
-
-✅ Improvements
----------------
-- Added Zod schemas: XX
-- Created type guards: XX
-- Fixed `any` types: XX
-- Added return types: XX
-
-📈 Type Safety Score
---------------------
-Before: XX%
-After: XX% (+XX%)
-
-💡 Recommendations
-------------------
-1. Enable stricter TypeScript options
-2. Add validation to remaining APIs
-```
-
-## Common Patterns
-
-**API Response Validation:**
-```typescript
-const schema = z.object({...});
-type Type = z.infer<typeof schema>;
-
-return this.http.get<unknown>(url).pipe(
-  map(response => schema.parse(response))
-);
-```
-
-**Event Handlers:**
-```typescript
-// BEFORE: onClick(event: any)
-// AFTER: onClick(event: MouseEvent)
-```
-
-## References
-
-- Use `docs-researcher` for latest Zod documentation
-- Zod: https://zod.dev
-- TypeScript strict mode: https://www.typescriptlang.org/tsconfig#strict

.gitignore

@@ -80,3 +80,6 @@ CLAUDE.md
 *.pyc
 .vite
 reports/
+
+# Local iPad dev setup (proxy)
+/local-dev/

.mcp.json

@@ -1,22 +1,22 @@
-{
-  "mcpServers": {
-    "context7": {
-      "type": "http",
-      "url": "https://mcp.context7.com/mcp"
-    },
-    "nx-mcp": {
-      "type": "stdio",
-      "command": "npx",
-      "args": ["nx-mcp@latest"]
-    },
-    "angular-mcp": {
-      "type": "stdio",
-      "command": "npx",
-      "args": ["@angular/cli", "mcp"]
-    },
-    "figma-desktop": {
-      "type": "http",
-      "url": "http://127.0.0.1:3845/mcp"
-    }
-  }
-}
+{
+  "mcpServers": {
+    "context7": {
+      "type": "http",
+      "url": "https://mcp.context7.com/mcp"
+    },
+    "nx-mcp": {
+      "type": "stdio",
+      "command": "npx",
+      "args": ["nx", "mcp"]
+    },
+    "angular-mcp": {
+      "type": "stdio",
+      "command": "npx",
+      "args": ["@angular/cli", "mcp"]
+    },
+    "figma-desktop": {
+      "type": "http",
+      "url": "http://127.0.0.1:3845/mcp"
+    }
+  }
+}

AGENTS.md

@@ -0,0 +1,13 @@
+<!-- nx configuration start-->
+<!-- Leave the start & end comments to automatically receive updates. -->
+
+# General Guidelines for working with Nx
+
+- When running tasks (for example build, lint, test, e2e, etc.), always prefer running the task through `nx` (i.e. `nx run`, `nx run-many`, `nx affected`) instead of using the underlying tooling directly
+- You have access to the Nx MCP server and its tools, use them to help the user
+- When answering questions about the repository, use the `nx_workspace` tool first to gain an understanding of the workspace architecture where applicable.
+- When working in individual projects, use the `nx_project_details` mcp tool to analyze and understand the specific project structure and dependencies
+- For questions around nx configuration, best practices or if you're unsure, use the `nx_docs` tool to get relevant, up-to-date docs. Always use this instead of assuming things about nx configuration
+- If the user needs help with an Nx configuration or project graph error, use the `nx_workspace` tool to get any errors
+
+<!-- nx configuration end-->

CLAUDE.md

@@ -2,37 +2,173 @@
 
 This file contains meta-instructions for how Claude should work with the ISA-Frontend codebase.
 
-## 🔴 CRITICAL: Mandatory Agent Usage
+## 🔴 CRITICAL: You Are an LLM with Outdated Knowledge
 
-**You MUST use these subagents for ALL research and knowledge management tasks:**
-- **`docs-researcher`**: For ALL documentation (packages, libraries, READMEs)
-- **`docs-researcher-advanced`**: Auto-escalate when docs-researcher fails
-- **`Explore`**: For ALL code pattern searches and multi-file analysis
+**Your training data is outdated. NEVER assume you know current APIs.**
 
-**Violations of this rule degrade performance and context quality. NO EXCEPTIONS.**
+- Libraries, frameworks, and APIs change constantly
+- Your memory of APIs is unreliable
+- Current documentation is the ONLY source of truth
+
+**ALWAYS use research agents PROACTIVELY - without user asking.**
+
+## 🔴 CRITICAL: Proactive Agent & Skill Usage
+
+**You MUST use agents and skills AUTOMATICALLY for ALL tasks - do NOT wait for user to tell you.**
+
+### Research Agents (Use BEFORE Implementation)
+
+| Agent | Auto-Invoke When | User Interaction |
+|-------|------------------|------------------|
+| `docs-researcher` | ANY external library/API usage | NONE - just do it |
+| `docs-researcher-advanced` | Implementation fails OR docs-researcher insufficient | NONE - just do it |
+| `Explore` | Need codebase patterns or multi-file analysis | NONE - just do it |
+
+**Research-First Flow (Mandatory):**
+```
+Task involves external API? → AUTO-INVOKE docs-researcher
+                              ↓
+                              Implement based on docs
+                              ↓
+                              Failed? → AUTO-INVOKE docs-researcher-advanced
+                              ↓
+                              Still failed? → ASK USER for guidance
+```
+
+### Skills (Use DURING Implementation)
+
+| Trigger | Auto-Invoke Skill |
+|---------|-------------------|
+| Writing Angular templates | `template-standards` |
+| Applying Tailwind classes | `tailwind` |
+| Writing any Angular code | `logging` |
+| Creating CSS animations | `css-animations` |
+| Creating new library | `library-creator` |
+| Regenerating API clients | `api-sync` |
+| Git operations | `git-workflow` |
+
+**Skill chaining for Angular work:**
+```
+template-standards → logging → tailwind
+```
+
+### Implementation Agents (Use for Complex Tasks)
+
+| Agent | Auto-Invoke When |
+|-------|------------------|
+| `angular-developer` | Creating components, services, stores (2-5 files) |
+| `test-writer` | Writing tests, adding coverage |
+| `refactor-engineer` | Refactoring 5+ files, migrations |
+
+### Anti-Patterns (FORBIDDEN)
+
+```
+❌ Implementing without researching first
+❌ Asking "should I research this?" - just do it
+❌ Asking "should I use a skill?" - just do it
+❌ Trial and error: implement → fail → try again → fail
+❌ Writing Angular code without loading skills first
+```
+
+### Correct Pattern
+
+```
+✅ "Researching [library] API..." → [auto-invokes docs-researcher]
+✅ "Loading template-standards skill..." → [auto-invokes skill]
+✅ "Implementing based on current docs..."
+✅ If fails: "Escalating research..." → [auto-invokes docs-researcher-advanced]
+```
 
 ## Communication Guidelines
 
-**Keep answers concise and focused:**
-- Provide direct, actionable responses without unnecessary elaboration
-- Skip verbose explanations unless specifically requested
-- Focus on what the user needs to know, not everything you know
-- Use bullet points and structured formatting for clarity
-- Only provide detailed explanations when complexity requires it
+- Keep answers concise and focused
+- Use bullet points and structured formatting
+- Skip verbose explanations unless requested
+- Focus on what the user needs, not everything you know
 
-## Researching and Investigating the Codebase
+## Context Management
 
-**🔴 MANDATORY: You MUST use subagents for research. Direct file reading/searching.**
+**Context bloat kills reliability. Minimize aggressively.**
 
-### Required Agent Usage
+### Tool Result Minimization
 
-| Task Type | Required Agent | Escalation Path |
-|-----------|---------------|-----------------|
-| **Package/Library Documentation** | `docs-researcher` | → `docs-researcher-advanced` if not found |
-| **Internal Library READMEs** | `docs-researcher` | Keep context clean |
-| **Code Pattern Search** | `Explore` | Set thoroughness level |
-| **Implementation Analysis** | `Explore` | Multiple file analysis |
-| **Single Specific File** | Read tool directly | No agent needed |
+| Tool | Keep | Discard |
+|------|------|---------|
+| Bash (success) | `✓ Command succeeded` | Full output |
+| Bash (failure) | Exit code + error (max 10 lines) | Verbose output |
+| Edit | `✓ Modified file.ts` | Full diffs |
+| Read | Extracted relevant section | Full file content |
+| Agent results | 1-2 sentence summary | Raw JSON/full output |
+
+### Agent Result Handling
+
+```
+❌ WRONG: "Docs researcher returned: [huge JSON...]"
+✅ RIGHT: "docs-researcher found: Use signalStore() with withState()"
+```
+
+### Session Cleanup
+
+Use `/clear` between unrelated tasks to prevent context degradation.
+
+### Long-Running Task Pattern
+
+For complex tasks approaching context limits:
+1. Dump progress to a `.md` file (e.g., `progress.md`)
+2. Use `/clear` to reset context
+3. Resume by reading the progress file
+4. Continue from where you left off
+
+### Context Monitoring
+
+- Use `/context` to check current token usage
+- Fresh session baseline: ~20k tokens
+- Consider `/compact` when approaching 150k tokens
+- Prefer `/clear` over `/compact` when starting new topics
+
+## Extended Thinking
+
+Use progressive thinking depth for complex analysis:
+
+| Trigger | Thinking Budget | Use Case |
+|---------|----------------|----------|
+| `"think"` | ~4k tokens | Basic analysis, simple decisions |
+| `"think hard"` | ~10k tokens | Moderate complexity, multi-factor decisions |
+| `"think harder"` | ~16k tokens | Deep analysis, architectural decisions |
+| `"ultrathink"` | ~32k tokens | Maximum depth, critical planning |
+
+**Examples:**
+- "Think about how to structure this component"
+- "Think hard about the best approach for state management"
+- "Ultrathink about the architecture for this feature"
+
+## Code Investigation (MANDATORY)
+
+**Never speculate about code you haven't read.**
+
+If user references a specific file:
+1. **READ the file first** using the Read tool
+2. **THEN provide analysis** based on actual contents
+3. If file doesn't exist, **say so explicitly**
+
+**Anti-Hallucination Rules:**
+- Never describe code you haven't opened
+- Never assume file contents based on names
+- Never guess API signatures without documentation
+- Always verify imports and dependencies exist
+
+## Implementation Decisions
+
+| Task Type                         | Required Agent     | Escalation Path                           |
+| --------------------------------- | ------------------ | ----------------------------------------- |
+| **Package/Library Documentation** | `docs-researcher`  | → `docs-researcher-advanced` if not found |
+| **Internal Library READMEs**      | `docs-researcher`  | Keep context clean                        |
+| **Monorepo Library Overview**     | `docs-researcher`  | Uses `docs/library-reference.md`          |
+| **Code Pattern Search**           | `Explore`          | Set thoroughness level                    |
+| **Implementation Analysis**       | `Explore`          | Multiple file analysis                    |
+| **Single Specific File**          | Read tool directly | No agent needed                           |
+
+**Note:** The `docs-researcher` agent uses `docs/library-reference.md` as a primary index for discovering monorepo libraries. This file contains descriptions and locations for all libraries, enabling quick library discovery without reading individual READMEs.
 
 ### Documentation Research System (Two-Tier)
 
@@ -43,17 +179,60 @@ This file contains meta-instructions for how Claude should work with the ISA-Fro
    - Need code inference
    - Complex architectural questions
 
-### Enforcement Examples
+### When to Use Agents vs Direct Tools
 
 ```
-❌ WRONG: Read libs/ui/buttons/README.md
-✅ RIGHT: Task → docs-researcher → "Find documentation for @isa/ui/buttons"
-
-❌ WRONG: Grep for "signalStore" patterns
-✅ RIGHT: Task → Explore → "Find all signalStore implementations"
-
-❌ WRONG: WebSearch for Zod documentation
-✅ RIGHT: Task → docs-researcher → "Find Zod validation documentation"
+Single known file? → Read tool directly
+Code pattern search? → Explore agent
+Documentation lookup? → docs-researcher agent
+Creating 2-5 Angular files? → angular-developer agent
+Refactoring 5+ files? → refactor-engineer agent
+Simple 1-file edit? → Direct implementation
 ```
 
-**Remember: Using subagents is NOT optional - it's mandatory for maintaining context efficiency and search quality.**
+### Proactive Agent Triggers
+
+**Auto-invoke `angular-developer` when user says:**
+- "Create component/service/store/pipe/directive/guard"
+- Task touches 2-5 Angular files
+
+**Auto-invoke `test-writer` when user says:**
+- "Write tests", "Add coverage"
+
+**Auto-invoke `refactor-engineer` when user says:**
+- "Refactor all", "Migrate X files", "Update pattern across"
+
+**Auto-invoke `context-manager` when user says:**
+- "Remember to", "TODO:", "Don't forget"
+
+## Agent Communication
+
+### Briefing Agents
+
+Keep briefings focused:
+```
+Implement: [type] at [path]
+Purpose: [1 sentence]
+Requirements: [list]
+```
+
+### Agent Results
+
+Extract only what's needed, discard the rest:
+```
+✓ Created 3 files
+✓ Tests: 12/12 passing
+✓ Skills applied: template-standards, logging
+```
+
+<!-- nx configuration start-->
+<!-- Leave the start & end comments to automatically receive updates. -->
+
+# General Guidelines for working with Nx
+
+- Run tasks through `nx` (i.e. `nx run`, `nx run-many`, `nx affected`) instead of underlying tooling
+- Use `nx_workspace` tool to understand workspace architecture
+- Use `nx_project_details` for specific project structure
+- Use `nx_docs` for nx configuration questions
+
+<!-- nx configuration end-->

apps/isa-app/project.json

@@ -1,162 +1,162 @@
-{
-  "name": "isa-app",
-  "$schema": "../../node_modules/nx/schemas/project-schema.json",
-  "projectType": "application",
-  "prefix": "app",
-  "sourceRoot": "apps/isa-app/src",
-  "tags": [],
-  "targets": {
-    "build": {
-      "executor": "@angular-devkit/build-angular:application",
-      "options": {
-        "allowedCommonJsDependencies": [
-          "lodash",
-          "moment",
-          "jsrsasign",
-          "pdfjs-dist/build/pdf",
-          "pdfjs-dist/web/pdf_viewer",
-          "pdfjs-dist/es5/build/pdf",
-          "pdfjs-dist/es5/web/pdf_viewer"
-        ],
-        "outputPath": "dist/isa-app",
-        "index": "apps/isa-app/src/index.html",
-        "browser": "apps/isa-app/src/main.ts",
-        "polyfills": ["zone.js"],
-        "tsConfig": "apps/isa-app/tsconfig.app.json",
-        "inlineStyleLanguage": "scss",
-        "assets": [
-          "apps/isa-app/src/favicon.ico",
-          "apps/isa-app/src/assets",
-          "apps/isa-app/src/config",
-          "apps/isa-app/src/silent-refresh.html",
-          "apps/isa-app/src/manifest.webmanifest",
-          {
-            "glob": "**/*",
-            "input": "node_modules/scandit-web-datacapture-barcode/build/engine",
-            "output": "scandit"
-          }
-        ],
-        "styles": [
-          "@angular/cdk/overlay-prebuilt.css",
-          "apps/isa-app/src/tailwind.scss",
-          "apps/isa-app/src/styles.scss"
-        ],
-        "scripts": []
-      },
-      "configurations": {
-        "production": {
-          "budgets": [
-            {
-              "type": "initial",
-              "maximumWarning": "2mb",
-              "maximumError": "5mb"
-            },
-            {
-              "type": "anyComponentStyle",
-              "maximumWarning": "25kb"
-            }
-          ],
-          "fileReplacements": [
-            {
-              "replace": "apps/isa-app/src/environments/environment.ts",
-              "with": "apps/isa-app/src/environments/environment.prod.ts"
-            }
-          ],
-          "outputHashing": "all",
-          "serviceWorker": "apps/isa-app/ngsw-config.json"
-        },
-        "development": {
-          "optimization": false,
-          "extractLicenses": false,
-          "sourceMap": true
-        }
-      },
-      "defaultConfiguration": "production",
-      "outputs": ["{options.outputPath}"]
-    },
-    "serve": {
-      "executor": "@angular-devkit/build-angular:dev-server",
-      "configurations": {
-        "production": {
-          "buildTarget": "isa-app:build:production"
-        },
-        "development": {
-          "buildTarget": "isa-app:build:development"
-        }
-      },
-      "defaultConfiguration": "development",
-      "continuous": true
-    },
-    "extract-i18n": {
-      "executor": "@angular-devkit/build-angular:extract-i18n",
-      "options": {
-        "buildTarget": "isa-app:build"
-      }
-    },
-    "lint": {
-      "executor": "@nx/eslint:lint"
-    },
-    "test": {
-      "executor": "@nx/jest:jest",
-      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
-      "options": {
-        "jestConfig": "apps/isa-app/jest.config.ts"
-      }
-    },
-    "serve-static": {
-      "executor": "@nx/web:file-server",
-      "options": {
-        "buildTarget": "isa-app:build",
-        "staticFilePath": "dist/apps/isa-app/browser",
-        "spa": true
-      }
-    },
-    "storybook": {
-      "executor": "@storybook/angular:start-storybook",
-      "options": {
-        "port": 4400,
-        "configDir": "apps/isa-app/.storybook",
-        "browserTarget": "isa-app:build",
-        "compodoc": false,
-        "open": false,
-        "assets": [
-          {
-            "glob": "**/*",
-            "input": "apps/isa-app/src/assets",
-            "output": "/assets"
-          }
-        ],
-        "styles": [
-          "@angular/cdk/overlay-prebuilt.css",
-          "apps/isa-app/src/tailwind.scss",
-          "apps/isa-app/src/styles.scss"
-        ]
-      },
-      "configurations": {
-        "ci": {
-          "quiet": true
-        }
-      }
-    },
-    "build-storybook": {
-      "executor": "@storybook/angular:build-storybook",
-      "outputs": ["{options.outputDir}"],
-      "options": {
-        "outputDir": "dist/storybook/isa-app",
-        "configDir": "apps/isa-app/.storybook",
-        "browserTarget": "isa-app:build",
-        "compodoc": false,
-        "styles": [
-          "@angular/cdk/overlay-prebuilt.css",
-          "apps/isa-app/src/tailwind.scss",
-          "apps/isa-app/src/styles.scss"
-        ]
-      },
-      "configurations": {
-        "ci": {
-          "quiet": true
-        }
-      }
-    }
-  }
-}
+{
+  "name": "isa-app",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "projectType": "application",
+  "prefix": "app",
+  "sourceRoot": "apps/isa-app/src",
+  "tags": ["skip:ci"],
+  "targets": {
+    "build": {
+      "executor": "@angular-devkit/build-angular:application",
+      "options": {
+        "allowedCommonJsDependencies": [
+          "lodash",
+          "moment",
+          "jsrsasign",
+          "pdfjs-dist/build/pdf",
+          "pdfjs-dist/web/pdf_viewer",
+          "pdfjs-dist/es5/build/pdf",
+          "pdfjs-dist/es5/web/pdf_viewer"
+        ],
+        "outputPath": "dist/isa-app",
+        "index": "apps/isa-app/src/index.html",
+        "browser": "apps/isa-app/src/main.ts",
+        "polyfills": ["zone.js"],
+        "tsConfig": "apps/isa-app/tsconfig.app.json",
+        "inlineStyleLanguage": "scss",
+        "assets": [
+          "apps/isa-app/src/favicon.ico",
+          "apps/isa-app/src/assets",
+          "apps/isa-app/src/config",
+          "apps/isa-app/src/silent-refresh.html",
+          "apps/isa-app/src/manifest.webmanifest",
+          {
+            "glob": "**/*",
+            "input": "node_modules/scandit-web-datacapture-barcode/build/engine",
+            "output": "scandit"
+          }
+        ],
+        "styles": [
+          "@angular/cdk/overlay-prebuilt.css",
+          "apps/isa-app/src/tailwind.scss",
+          "apps/isa-app/src/styles.scss"
+        ],
+        "scripts": []
+      },
+      "configurations": {
+        "production": {
+          "budgets": [
+            {
+              "type": "initial",
+              "maximumWarning": "2mb",
+              "maximumError": "5mb"
+            },
+            {
+              "type": "anyComponentStyle",
+              "maximumWarning": "25kb"
+            }
+          ],
+          "fileReplacements": [
+            {
+              "replace": "apps/isa-app/src/environments/environment.ts",
+              "with": "apps/isa-app/src/environments/environment.prod.ts"
+            }
+          ],
+          "outputHashing": "all",
+          "serviceWorker": "apps/isa-app/ngsw-config.json"
+        },
+        "development": {
+          "optimization": false,
+          "extractLicenses": false,
+          "sourceMap": true
+        }
+      },
+      "defaultConfiguration": "production",
+      "outputs": ["{options.outputPath}"]
+    },
+    "serve": {
+      "executor": "@angular-devkit/build-angular:dev-server",
+      "configurations": {
+        "production": {
+          "buildTarget": "isa-app:build:production"
+        },
+        "development": {
+          "buildTarget": "isa-app:build:development"
+        }
+      },
+      "defaultConfiguration": "development",
+      "continuous": true
+    },
+    "extract-i18n": {
+      "executor": "@angular-devkit/build-angular:extract-i18n",
+      "options": {
+        "buildTarget": "isa-app:build"
+      }
+    },
+    "lint": {
+      "executor": "@nx/eslint:lint"
+    },
+    "test": {
+      "executor": "@nx/jest:jest",
+      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+      "options": {
+        "jestConfig": "apps/isa-app/jest.config.ts"
+      }
+    },
+    "serve-static": {
+      "executor": "@nx/web:file-server",
+      "options": {
+        "buildTarget": "isa-app:build",
+        "staticFilePath": "dist/apps/isa-app/browser",
+        "spa": true
+      }
+    },
+    "storybook": {
+      "executor": "@storybook/angular:start-storybook",
+      "options": {
+        "port": 4400,
+        "configDir": "apps/isa-app/.storybook",
+        "browserTarget": "isa-app:build",
+        "compodoc": false,
+        "open": false,
+        "assets": [
+          {
+            "glob": "**/*",
+            "input": "apps/isa-app/src/assets",
+            "output": "/assets"
+          }
+        ],
+        "styles": [
+          "@angular/cdk/overlay-prebuilt.css",
+          "apps/isa-app/src/tailwind.scss",
+          "apps/isa-app/src/styles.scss"
+        ]
+      },
+      "configurations": {
+        "ci": {
+          "quiet": true
+        }
+      }
+    },
+    "build-storybook": {
+      "executor": "@storybook/angular:build-storybook",
+      "outputs": ["{options.outputDir}"],
+      "options": {
+        "outputDir": "dist/storybook/isa-app",
+        "configDir": "apps/isa-app/.storybook",
+        "browserTarget": "isa-app:build",
+        "compodoc": false,
+        "styles": [
+          "@angular/cdk/overlay-prebuilt.css",
+          "apps/isa-app/src/tailwind.scss",
+          "apps/isa-app/src/styles.scss"
+        ]
+      },
+      "configurations": {
+        "ci": {
+          "quiet": true
+        }
+      }
+    }
+  }
+}

apps/isa-app/src/adapter/scan/scan.module.ts

@@ -1,19 +1,22 @@
-import { NgModule } from '@angular/core';
-import { DevScanAdapter } from './dev.scan-adapter';
-import { NativeScanAdapter } from './native.scan-adapter';
-import { SCAN_ADAPTER } from './tokens';
-
-@NgModule({})
-export class ScanAdapterModule {
-  static forRoot() {
-    return {
-      ngModule: ScanAdapterModule,
-      providers: [
-        { provide: SCAN_ADAPTER, useClass: NativeScanAdapter, multi: true },
-        { provide: SCAN_ADAPTER, useClass: DevScanAdapter, multi: true },
-      ],
-      // Use for testing:
-      // providers: [{ provide: SCAN_ADAPTER, useClass: dev ? DevScanAdapter : NativeScanAdapter, multi: true }],
-    };
-  }
-}
+import { NgModule } from '@angular/core';
+import { DevScanAdapter } from './dev.scan-adapter';
+import { NativeScanAdapter } from './native.scan-adapter';
+import { SCAN_ADAPTER } from './tokens';
+
+/**
+ * @deprecated Use '@isa/shared/scanner' instead.
+ */
+@NgModule({})
+export class ScanAdapterModule {
+  static forRoot() {
+    return {
+      ngModule: ScanAdapterModule,
+      providers: [
+        { provide: SCAN_ADAPTER, useClass: NativeScanAdapter, multi: true },
+        { provide: SCAN_ADAPTER, useClass: DevScanAdapter, multi: true },
+      ],
+      // Use for testing:
+      // providers: [{ provide: SCAN_ADAPTER, useClass: dev ? DevScanAdapter : NativeScanAdapter, multi: true }],
+    };
+  }
+}

apps/isa-app/src/adapter/scan/scandit/scandit-scan-adapter.module.ts

@@ -1,20 +1,25 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-
-import { ScanditOverlayComponent } from './scandit-overlay.component';
-import { ScanditScanAdapter } from './scandit.scan-adapter';
-import { SCAN_ADAPTER } from '../tokens';
-
-@NgModule({
-  imports: [CommonModule],
-  exports: [ScanditOverlayComponent],
-  declarations: [ScanditOverlayComponent],
-})
-export class ScanditScanAdapterModule {
-  static forRoot() {
-    return {
-      ngModule: ScanditScanAdapterModule,
-      providers: [{ provide: SCAN_ADAPTER, useClass: ScanditScanAdapter, multi: true }],
-    };
-  }
-}
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { ScanditOverlayComponent } from './scandit-overlay.component';
+import { ScanditScanAdapter } from './scandit.scan-adapter';
+import { SCAN_ADAPTER } from '../tokens';
+
+/**
+ * @deprecated Use @isa/shared/scanner instead.
+ */
+@NgModule({
+  imports: [CommonModule],
+  exports: [ScanditOverlayComponent],
+  declarations: [ScanditOverlayComponent],
+})
+export class ScanditScanAdapterModule {
+  static forRoot() {
+    return {
+      ngModule: ScanditScanAdapterModule,
+      providers: [
+        { provide: SCAN_ADAPTER, useClass: ScanditScanAdapter, multi: true },
+      ],
+    };
+  }
+}

apps/isa-app/src/adapter/scan/scandit/scandit.scan-adapter.ts

@@ -11,7 +11,7 @@ import { Config } from '@core/config';
 import { ComponentPortal } from '@angular/cdk/portal';
 import { ScanditOverlayComponent } from './scandit-overlay.component';
 import { EnvironmentService } from '@core/environment';
-import { injectNetworkStatus$ } from 'apps/isa-app/src/app/services/network-status.service';
+import { injectNetworkStatus$ } from '@isa/core/connectivity';
 import { toSignal } from '@angular/core/rxjs-interop';
 
 @Injectable()

apps/isa-app/src/app/app-domain.module.ts

@@ -1,19 +0,0 @@
-import { NgModule } from '@angular/core';
-import { DomainAvailabilityModule } from '@domain/availability';
-import { DomainCatalogModule } from '@domain/catalog';
-import { DomainIsaModule } from '@domain/isa';
-import { DomainCheckoutModule } from '@domain/checkout';
-import { DomainOmsModule } from '@domain/oms';
-import { DomainRemissionModule } from '@domain/remission';
-
-@NgModule({
-  imports: [
-    DomainIsaModule.forRoot(),
-    DomainCatalogModule.forRoot(),
-    DomainAvailabilityModule.forRoot(),
-    DomainCheckoutModule.forRoot(),
-    DomainOmsModule.forRoot(),
-    DomainRemissionModule.forRoot(),
-  ],
-})
-export class AppDomainModule {}

apps/isa-app/src/app/app-store.module.ts

@@ -1,34 +0,0 @@
-import { NgModule } from '@angular/core';
-import { EffectsModule } from '@ngrx/effects';
-import { ActionReducer, MetaReducer, StoreModule } from '@ngrx/store';
-import { StoreDevtoolsModule } from '@ngrx/store-devtools';
-import { environment } from '../environments/environment';
-import { rootReducer } from './store/root.reducer';
-import { RootState } from './store/root.state';
-
-export function storeInLocalStorage(
-  reducer: ActionReducer<any>,
-): ActionReducer<any> {
-  return function (state, action) {
-    if (action.type === 'HYDRATE') {
-      return reducer(action['payload'], action);
-    }
-    return reducer(state, action);
-  };
-}
-
-export const metaReducers: MetaReducer<RootState>[] = !environment.production
-  ? [storeInLocalStorage]
-  : [storeInLocalStorage];
-
-@NgModule({
-  imports: [
-    StoreModule.forRoot(rootReducer, { metaReducers }),
-    EffectsModule.forRoot([]),
-    StoreDevtoolsModule.instrument({
-      name: 'ISA Ngrx Application Store',
-      connectInZone: true,
-    }),
-  ],
-})
-export class AppStoreModule {}

apps/isa-app/src/app/app-swagger.module.ts

@@ -1,40 +0,0 @@
-import { HttpInterceptorFn, provideHttpClient, withInterceptors } from '@angular/common/http';
-import { NgModule } from '@angular/core';
-import { Config } from '@core/config';
-import { AvConfiguration } from '@generated/swagger/availability-api';
-import { CatConfiguration } from '@generated/swagger/cat-search-api';
-import { CheckoutConfiguration } from '@generated/swagger/checkout-api';
-import { CrmConfiguration } from '@generated/swagger/crm-api';
-import { EisConfiguration } from '@generated/swagger/eis-api';
-import { IsaConfiguration } from '@generated/swagger/isa-api';
-import { OmsConfiguration } from '@generated/swagger/oms-api';
-import { PrintConfiguration } from '@generated/swagger/print-api';
-import { RemiConfiguration } from '@generated/swagger/inventory-api';
-import { WwsConfiguration } from '@generated/swagger/wws-api';
-
-export function createConfigurationFactory(name: string) {
-  return function (config: Config): { rootUrl: string } {
-    return config.get(`@swagger/${name}`);
-  };
-}
-
-const serviceWorkerInterceptor: HttpInterceptorFn = (req, next) => {
-  return next(req.clone({ setHeaders: { 'ngsw-bypass': 'true' } }));
-};
-
-@NgModule({
-  providers: [
-    provideHttpClient(withInterceptors([serviceWorkerInterceptor])),
-    { provide: AvConfiguration, useFactory: createConfigurationFactory('av'), deps: [Config] },
-    { provide: CatConfiguration, useFactory: createConfigurationFactory('cat'), deps: [Config] },
-    { provide: CheckoutConfiguration, useFactory: createConfigurationFactory('checkout'), deps: [Config] },
-    { provide: CrmConfiguration, useFactory: createConfigurationFactory('crm'), deps: [Config] },
-    { provide: EisConfiguration, useFactory: createConfigurationFactory('eis'), deps: [Config] },
-    { provide: IsaConfiguration, useFactory: createConfigurationFactory('isa'), deps: [Config] },
-    { provide: OmsConfiguration, useFactory: createConfigurationFactory('oms'), deps: [Config] },
-    { provide: PrintConfiguration, useFactory: createConfigurationFactory('print'), deps: [Config] },
-    { provide: RemiConfiguration, useFactory: createConfigurationFactory('remi'), deps: [Config] },
-    { provide: WwsConfiguration, useFactory: createConfigurationFactory('wws'), deps: [Config] },
-  ],
-})
-export class AppSwaggerModule {}

apps/isa-app/src/app/app.component.html

@@ -1,28 +1,28 @@
-@if ($offlineBannerVisible()) {
-  <div [@fadeInOut] class="bg-brand text-white text-center fixed inset-x-0 top-0 z-tooltip p-4">
-    <h3 class="font-bold grid grid-flow-col items-center justify-center text-xl gap-4">
-      <div>
-        <ng-icon name="matWifiOff"></ng-icon>
-      </div>
-
-      <div>Sie sind offline, keine Verbindung zum Netzwerk.</div>
-    </h3>
-    <p>Bereits geladene Ihnalte werden angezeigt, Interaktionen sind aktuell nicht möglich.</p>
-  </div>
-}
-@if ($onlineBannerVisible()) {
-  <div [@fadeInOut] class="bg-green-500 text-white text-center fixed inset-x-0 top-0 z-tooltip p-4">
-    <h3 class="font-bold grid grid-flow-col items-center justify-center text-xl gap-4">
-      <div>
-        <ng-icon name="matWifi"></ng-icon>
-      </div>
-
-      <div>Sie sind wieder online.</div>
-    </h3>
-    <button class="fixed top-2 right-4 text-3xl w-12 h-12" type="button" (click)="$onlineBannerVisible.set(false)">
-      <ng-icon name="matClose"></ng-icon>
-    </button>
-  </div>
-}
-
-<router-outlet></router-outlet>
+<!-- @if ($offlineBannerVisible()) {
+  <div [@fadeInOut] class="bg-brand text-white text-center fixed inset-x-0 top-0 z-tooltip p-4">
+    <h3 class="font-bold grid grid-flow-col items-center justify-center text-xl gap-4">
+      <div>
+        <ng-icon name="matWifiOff"></ng-icon>
+      </div>
+
+      <div>Sie sind offline, keine Verbindung zum Netzwerk.</div>
+    </h3>
+    <p>Bereits geladene Ihnalte werden angezeigt, Interaktionen sind aktuell nicht möglich.</p>
+  </div>
+}
+@if ($onlineBannerVisible()) {
+  <div [@fadeInOut] class="bg-green-500 text-white text-center fixed inset-x-0 top-0 z-tooltip p-4">
+    <h3 class="font-bold grid grid-flow-col items-center justify-center text-xl gap-4">
+      <div>
+        <ng-icon name="matWifi"></ng-icon>
+      </div>
+
+      <div>Sie sind wieder online.</div>
+    </h3>
+    <button class="fixed top-2 right-4 text-3xl w-12 h-12" type="button" (click)="$onlineBannerVisible.set(false)">
+      <ng-icon name="matClose"></ng-icon>
+    </button>
+  </div>
+}
+
+<router-outlet></router-outlet> -->

apps/isa-app/src/app/app.component.scss

@@ -1,3 +0,0 @@
-:host {
-  @apply block;
-}

apps/isa-app/src/app/app.component.spec.ts

@@ -1,137 +0,0 @@
-import { Spectator, createComponentFactory, SpyObject, createSpyObject } from '@ngneat/spectator';
-import { RouterTestingModule } from '@angular/router/testing';
-import { AppComponent } from './app.component';
-import { Config } from '@core/config';
-import { ApplicationService } from '@core/application';
-import { of } from 'rxjs';
-import { Renderer2 } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { SwUpdate } from '@angular/service-worker';
-import { NotificationsHub } from '@hub/notifications';
-import { UserStateService } from '@generated/swagger/isa-api';
-import { UiModalService } from '@ui/modal';
-import { AuthService } from '@core/auth';
-
-describe('AppComponent', () => {
-  let spectator: Spectator<AppComponent>;
-  let config: SpyObject<Config>;
-  let renderer: SpyObject<Renderer2>;
-  let applicationServiceMock: SpyObject<ApplicationService>;
-  let notificationsHubMock: SpyObject<NotificationsHub>;
-  let swUpdateMock: SpyObject<SwUpdate>;
-  const createComponent = createComponentFactory({
-    component: AppComponent,
-    imports: [CommonModule, RouterTestingModule],
-    providers: [],
-    mocks: [Config, SwUpdate, UserStateService, UiModalService, AuthService],
-  });
-
-  beforeEach(() => {
-    applicationServiceMock = createSpyObject(ApplicationService);
-    applicationServiceMock.getSection$.and.returnValue(of('customer'));
-    applicationServiceMock.getActivatedProcessId$.and.returnValue(of(undefined));
-    renderer = jasmine.createSpyObj('Renderer2', ['addClass', 'removeClass']);
-
-    notificationsHubMock = createSpyObject(NotificationsHub);
-    notificationsHubMock.notifications$ = of({});
-    swUpdateMock = createSpyObject(SwUpdate);
-
-    spectator = createComponent({
-      providers: [
-        { provide: ApplicationService, useValue: applicationServiceMock },
-        {
-          provide: Renderer2,
-          useValue: renderer,
-        },
-        { provide: NotificationsHub, useValue: notificationsHubMock },
-        { provide: SwUpdate, useValue: swUpdateMock },
-      ],
-    });
-    config = spectator.inject(Config);
-  });
-
-  it('should create the app', () => {
-    expect(spectator.component).toBeTruthy();
-  });
-
-  it('should have a router outlet', () => {
-    expect(spectator.query('router-outlet')).toExist();
-  });
-
-  describe('ngOnInit', () => {
-    it('should call setTitle', () => {
-      const spy = spyOn(spectator.component, 'setTitle');
-      spectator.component.ngOnInit();
-      expect(spy).toHaveBeenCalled();
-    });
-
-    it('should call logVersion', () => {
-      const spy = spyOn(spectator.component, 'logVersion');
-      spectator.component.ngOnInit();
-      expect(spy).toHaveBeenCalled();
-    });
-  });
-
-  describe('setTitle', () => {
-    it('should call Title.setTitle()', () => {
-      const spyTitleSetTitle = spyOn(spectator.component['_title'], 'setTitle');
-      config.get.and.returnValue('test');
-      spectator.component.setTitle();
-      expect(spyTitleSetTitle).toHaveBeenCalledWith('test');
-    });
-  });
-
-  describe('logVersion', () => {
-    it('should call console.log()', () => {
-      const spyConsoleLog = spyOn(console, 'log');
-      config.get.and.returnValue('test');
-      spectator.component.logVersion();
-      expect(spyConsoleLog).toHaveBeenCalled();
-    });
-  });
-
-  // --------------------------------------------------------
-  // Unit Tests Implementation for Angular Version 13.x.x
-
-  // describe('updateClient()', () => {
-  //   it('should call checkForUpdate() if SwUpdate.isEnabled is True', () => {
-  //     spyOn(spectator.component, 'checkForUpdate');
-  //     spyOn(spectator.component, 'initialCheckForUpdate');
-  //     (swUpdateMock as any).isEnabled = true;
-  //     spectator.component.updateClient();
-  //     expect(spectator.component.initialCheckForUpdate).toHaveBeenCalled();
-  //     expect(spectator.component.checkForUpdate).toHaveBeenCalled();
-  //   });
-
-  //   it('should not call checkForUpdate() if SwUpdate.isEnabled is False', () => {
-  //     spyOn(spectator.component, 'checkForUpdate');
-  //     spyOn(spectator.component, 'initialCheckForUpdate');
-  //     (swUpdateMock as any).isEnabled = false;
-  //     spectator.component.updateClient();
-  //     expect(spectator.component.initialCheckForUpdate).not.toHaveBeenCalled();
-  //     expect(spectator.component.checkForUpdate).not.toHaveBeenCalled();
-  //   });
-  // });
-
-  // describe('checkForUpdate', () => {
-  //   it('should call swUpdate.checkForUpdate() and notifications.updateNotification() every second', fakeAsync(() => {
-  //     swUpdateMock.checkForUpdate.and.returnValue(Promise.resolve());
-  //     spectator.component.checkForUpdates = 1000;
-  //     spectator.component.checkForUpdate();
-
-  //     spectator.detectChanges();
-  //     tick(1100);
-
-  //     expect(notificationsHubMock.updateNotification).toHaveBeenCalled();
-  //     discardPeriodicTasks();
-  //   }));
-  // });
-
-  // describe('initialCheckForUpdate', () => {
-  //   it('should call swUpdate.checkForUpdate()', () => {
-  //     swUpdateMock.checkForUpdate.and.returnValue(new Promise(undefined));
-  //     spectator.component.initialCheckForUpdate();
-  //     expect(swUpdateMock.checkForUpdate).toHaveBeenCalled();
-  //   });
-  // });
-});

apps/isa-app/src/app/app.component.ts

@@ -1,206 +1,205 @@
-
-import {
-  Component,
-  effect,
-  HostListener,
-  inject,
-  Inject,
-  Injector,
-  OnInit,
-  Renderer2,
-  signal,
-  untracked,
-  DOCUMENT
-} from '@angular/core';
-import { Title } from '@angular/platform-browser';
-import { SwUpdate } from '@angular/service-worker';
-import { ApplicationService } from '@core/application';
-import { Config } from '@core/config';
-import { NotificationsHub } from '@hub/notifications';
-import packageInfo from 'packageJson';
-import { asapScheduler, interval, Subscription } from 'rxjs';
-import { UserStateService } from '@generated/swagger/isa-api';
-import { IsaLogProvider } from './providers';
-import { EnvironmentService } from '@core/environment';
-import { AuthService, LoginStrategy } from '@core/auth';
-import { UiMessageModalComponent, UiModalService } from '@ui/modal';
-import { injectOnline$ } from './services/network-status.service';
-import { toSignal } from '@angular/core/rxjs-interop';
-import { animate, style, transition, trigger } from '@angular/animations';
-
-@Component({
-  selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss'],
-  animations: [
-    trigger('fadeInOut', [
-      transition(':enter', [
-        // :enter wird ausgelöst, wenn das Element zum DOM hinzugefügt wird
-        style({ opacity: 0, transform: 'translateY(-100%)' }),
-        animate('300ms', style({ opacity: 1, transform: 'translateY(0)' })),
-      ]),
-      transition(':leave', [
-        // :leave wird ausgelöst, wenn das Element aus dem DOM entfernt wird
-        animate('300ms', style({ opacity: 0, transform: 'translateY(-100%)' })),
-      ]),
-    ]),
-  ],
-  standalone: false,
-})
-export class AppComponent implements OnInit {
-  readonly injector = inject(Injector);
-
-  $online = toSignal(injectOnline$());
-
-  $offlineBannerVisible = signal(false);
-
-  $onlineBannerVisible = signal(false);
-
-  private onlineBannerDismissTimeout: any;
-
-  onlineEffects = effect(() => {
-    const online = this.$online();
-    const offlineBannerVisible = this.$offlineBannerVisible();
-
-    untracked(() => {
-      this.$offlineBannerVisible.set(!online);
-
-      if (!online) {
-        this.$onlineBannerVisible.set(false);
-        clearTimeout(this.onlineBannerDismissTimeout);
-      }
-
-      if (offlineBannerVisible && online) {
-        this.$onlineBannerVisible.set(true);
-        this.onlineBannerDismissTimeout = setTimeout(() => this.$onlineBannerVisible.set(false), 5000);
-      }
-    });
-  });
-
-  private _checkForUpdates: number = this._config.get('checkForUpdates');
-
-  get checkForUpdates(): number {
-    return this._checkForUpdates ?? 60 * 60 * 1000; // default 1 hour
-  }
-
-  // For Unit Testing
-  set checkForUpdates(time: number) {
-    this._checkForUpdates = time;
-  }
-
-  subscriptions = new Subscription();
-
-  constructor(
-    private readonly _config: Config,
-    private readonly _title: Title,
-    private readonly _appService: ApplicationService,
-    @Inject(DOCUMENT) private readonly _document: Document,
-    private readonly _renderer: Renderer2,
-    private readonly _swUpdate: SwUpdate,
-    private readonly _notifications: NotificationsHub,
-    private infoService: UserStateService,
-    private readonly _environment: EnvironmentService,
-    private readonly _authService: AuthService,
-    private readonly _modal: UiModalService,
-  ) {
-    this.updateClient();
-    IsaLogProvider.InfoService = this.infoService;
-  }
-
-  ngOnInit() {
-    this.setTitle();
-    this.logVersion();
-    asapScheduler.schedule(() => this.determinePlatform(), 250);
-    this._appService.getSection$().subscribe(this.sectionChangeHandler.bind(this));
-
-    this.setupSilentRefresh();
-  }
-
-  // Setup interval for silent refresh
-  setupSilentRefresh() {
-    const silentRefreshInterval = this._config.get('silentRefresh.interval');
-    if (silentRefreshInterval > 0) {
-      interval(silentRefreshInterval).subscribe(() => {
-        if (this._authService.isAuthenticated()) {
-          this._authService.refresh();
-        }
-      });
-    }
-  }
-
-  setTitle() {
-    this._title.setTitle(this._config.get('title'));
-  }
-
-  logVersion() {
-    console.log(
-      `%c${this._config.get('title')}\r\nVersion: ${packageInfo.version}`,
-      'font-weight: bold; font-size: 20px;',
-    );
-  }
-
-  determinePlatform() {
-    if (this._environment.isNative()) {
-      this._renderer.addClass(this._document.body, 'tablet-native');
-    } else if (this._environment.isTablet()) {
-      this._renderer.addClass(this._document.body, 'tablet-browser');
-    }
-    if (this._environment.isTablet()) {
-      this._renderer.addClass(this._document.body, 'tablet');
-    }
-    if (this._environment.isDesktop()) {
-      this._renderer.addClass(this._document.body, 'desktop');
-    }
-  }
-
-  sectionChangeHandler(section: string) {
-    if (section === 'customer') {
-      this._renderer.removeClass(this._document.body, 'branch');
-      this._renderer.addClass(this._document.body, 'customer');
-    } else if (section === 'branch') {
-      this._renderer.removeClass(this._document.body, 'customer');
-      this._renderer.addClass(this._document.body, 'branch');
-    }
-  }
-
-  updateClient() {
-    if (!this._swUpdate.isEnabled) {
-      return;
-    }
-
-    this.initialCheckForUpdate();
-    this.checkForUpdate();
-  }
-
-  checkForUpdate() {
-    interval(this._checkForUpdates).subscribe(() => {
-      this._swUpdate.checkForUpdate().then((value) => {
-        console.log('check for update', value);
-        if (value) {
-          this._notifications.updateNotification();
-        }
-      });
-    });
-  }
-
-  initialCheckForUpdate() {
-    this._swUpdate.checkForUpdate().then((value) => {
-      console.log('initial check for update', value);
-      if (value) {
-        location.reload();
-      }
-    });
-  }
-
-  @HostListener('window:visibilitychange', ['$event'])
-  onVisibilityChange(event: Event) {
-    // refresh token when app is in background
-    if (this._document.hidden && this._authService.isAuthenticated()) {
-      this._authService.refresh();
-    } else if (!this._authService.isAuthenticated()) {
-      const strategy = this.injector.get(LoginStrategy);
-
-      return strategy.login('Sie sind nicht mehr angemeldet');
-    }
-  }
-}
+// import {
+//   Component,
+//   effect,
+//   HostListener,
+//   inject,
+//   Inject,
+//   Injector,
+//   OnInit,
+//   Renderer2,
+//   signal,
+//   untracked,
+//   DOCUMENT
+// } from '@angular/core';
+// import { Title } from '@angular/platform-browser';
+// import { SwUpdate } from '@angular/service-worker';
+// import { ApplicationService } from '@core/application';
+// import { Config } from '@core/config';
+// import { NotificationsHub } from '@hub/notifications';
+// import packageInfo from 'packageJson';
+// import { asapScheduler, interval, Subscription } from 'rxjs';
+// import { UserStateService } from '@generated/swagger/isa-api';
+// import { IsaLogProvider } from './providers';
+// import { EnvironmentService } from '@core/environment';
+// import { AuthService, LoginStrategy } from '@core/auth';
+// import { UiMessageModalComponent, UiModalService } from '@ui/modal';
+// import { injectNetworkStatus } from '@isa/core/connectivity';
+// import { animate, style, transition, trigger } from '@angular/animations';
+
+// @Component({
+//   selector: 'app-root',
+//   templateUrl: './app.component.html',
+//   styleUrls: ['./app.component.scss'],
+//   animations: [
+//     trigger('fadeInOut', [
+//       transition(':enter', [
+//         // :enter wird ausgelöst, wenn das Element zum DOM hinzugefügt wird
+//         style({ opacity: 0, transform: 'translateY(-100%)' }),
+//         animate('300ms', style({ opacity: 1, transform: 'translateY(0)' })),
+//       ]),
+//       transition(':leave', [
+//         // :leave wird ausgelöst, wenn das Element aus dem DOM entfernt wird
+//         animate('300ms', style({ opacity: 0, transform: 'translateY(-100%)' })),
+//       ]),
+//     ]),
+//   ],
+//   standalone: false,
+// })
+// export class AppComponent implements OnInit {
+//   readonly injector = inject(Injector);
+
+//   $networkStatus = injectNetworkStatus();
+
+//   $offlineBannerVisible = signal(false);
+
+//   $onlineBannerVisible = signal(false);
+
+//   private onlineBannerDismissTimeout: any;
+
+//   onlineEffects = effect(() => {
+//     const status = this.$networkStatus();
+//     const online = status === 'online';
+//     const offlineBannerVisible = this.$offlineBannerVisible();
+
+//     untracked(() => {
+//       this.$offlineBannerVisible.set(!online);
+
+//       if (!online) {
+//         this.$onlineBannerVisible.set(false);
+//         clearTimeout(this.onlineBannerDismissTimeout);
+//       }
+
+//       if (offlineBannerVisible && online) {
+//         this.$onlineBannerVisible.set(true);
+//         this.onlineBannerDismissTimeout = setTimeout(() => this.$onlineBannerVisible.set(false), 5000);
+//       }
+//     });
+//   });
+
+//   private _checkForUpdates: number = this._config.get('checkForUpdates');
+
+//   get checkForUpdates(): number {
+//     return this._checkForUpdates ?? 60 * 60 * 1000; // default 1 hour
+//   }
+
+//   // For Unit Testing
+//   set checkForUpdates(time: number) {
+//     this._checkForUpdates = time;
+//   }
+
+//   subscriptions = new Subscription();
+
+//   constructor(
+//     private readonly _config: Config,
+//     private readonly _title: Title,
+//     private readonly _appService: ApplicationService,
+//     @Inject(DOCUMENT) private readonly _document: Document,
+//     private readonly _renderer: Renderer2,
+//     private readonly _swUpdate: SwUpdate,
+//     private readonly _notifications: NotificationsHub,
+//     private infoService: UserStateService,
+//     private readonly _environment: EnvironmentService,
+//     private readonly _authService: AuthService,
+//     private readonly _modal: UiModalService,
+//   ) {
+//     this.updateClient();
+//     IsaLogProvider.InfoService = this.infoService;
+//   }
+
+//   ngOnInit() {
+//     this.setTitle();
+//     this.logVersion();
+//     asapScheduler.schedule(() => this.determinePlatform(), 250);
+//     this._appService.getSection$().subscribe(this.sectionChangeHandler.bind(this));
+
+//     this.setupSilentRefresh();
+//   }
+
+//   // Setup interval for silent refresh
+//   setupSilentRefresh() {
+//     const silentRefreshInterval = this._config.get('silentRefresh.interval');
+//     if (silentRefreshInterval > 0) {
+//       interval(silentRefreshInterval).subscribe(() => {
+//         if (this._authService.isAuthenticated()) {
+//           this._authService.refresh();
+//         }
+//       });
+//     }
+//   }
+
+//   setTitle() {
+//     this._title.setTitle(this._config.get('title'));
+//   }
+
+//   logVersion() {
+//     console.log(
+//       `%c${this._config.get('title')}\r\nVersion: ${packageInfo.version}`,
+//       'font-weight: bold; font-size: 20px;',
+//     );
+//   }
+
+//   determinePlatform() {
+//     if (this._environment.isNative()) {
+//       this._renderer.addClass(this._document.body, 'tablet-native');
+//     } else if (this._environment.isTablet()) {
+//       this._renderer.addClass(this._document.body, 'tablet-browser');
+//     }
+//     if (this._environment.isTablet()) {
+//       this._renderer.addClass(this._document.body, 'tablet');
+//     }
+//     if (this._environment.isDesktop()) {
+//       this._renderer.addClass(this._document.body, 'desktop');
+//     }
+//   }
+
+//   sectionChangeHandler(section: string) {
+//     if (section === 'customer') {
+//       this._renderer.removeClass(this._document.body, 'branch');
+//       this._renderer.addClass(this._document.body, 'customer');
+//     } else if (section === 'branch') {
+//       this._renderer.removeClass(this._document.body, 'customer');
+//       this._renderer.addClass(this._document.body, 'branch');
+//     }
+//   }
+
+//   updateClient() {
+//     if (!this._swUpdate.isEnabled) {
+//       return;
+//     }
+
+//     this.initialCheckForUpdate();
+//     this.checkForUpdate();
+//   }
+
+//   checkForUpdate() {
+//     interval(this._checkForUpdates).subscribe(() => {
+//       this._swUpdate.checkForUpdate().then((value) => {
+//         console.log('check for update', value);
+//         if (value) {
+//           this._notifications.updateNotification();
+//         }
+//       });
+//     });
+//   }
+
+//   initialCheckForUpdate() {
+//     this._swUpdate.checkForUpdate().then((value) => {
+//       console.log('initial check for update', value);
+//       if (value) {
+//         location.reload();
+//       }
+//     });
+//   }
+
+//   @HostListener('window:visibilitychange', ['$event'])
+//   onVisibilityChange(event: Event) {
+//     // refresh token when app is in background
+//     if (this._document.hidden && this._authService.isAuthenticated()) {
+//       this._authService.refresh();
+//     } else if (!this._authService.isAuthenticated()) {
+//       const strategy = this.injector.get(LoginStrategy);
+
+//       return strategy.login('Sie sind nicht mehr angemeldet');
+//     }
+//   }
+// }

apps/isa-app/src/app/app.config.ts

@@ -1,51 +1,52 @@
 import { version } from '../../../../package.json';
+import { IsaTitleStrategy } from '@isa/common/title-management';
 import {
   HTTP_INTERCEPTORS,
+  HttpInterceptorFn,
   provideHttpClient,
+  withInterceptors,
   withInterceptorsFromDi,
 } from '@angular/common/http';
 import {
+  ApplicationConfig,
   DEFAULT_CURRENCY_CODE,
   ErrorHandler,
+  importProvidersFrom,
   Injector,
   LOCALE_ID,
-  NgModule,
   inject,
   provideAppInitializer,
+  provideZoneChangeDetection,
   signal,
+  isDevMode,
 } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { PlatformModule } from '@angular/cdk/platform';
+import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
+import {
+  provideRouter,
+  TitleStrategy,
+  withComponentInputBinding,
+} from '@angular/router';
+import { ActionReducer, MetaReducer, provideStore } from '@ngrx/store';
+import { provideStoreDevtools } from '@ngrx/store-devtools';
 
 import { Config } from '@core/config';
 import { AuthModule, AuthService, LoginStrategy } from '@core/auth';
 import { CoreCommandModule } from '@core/command';
 
-import { AppRoutingModule } from './app-routing.module';
-import { AppComponent } from './app.component';
-import {
-  ApplicationService,
-  ApplicationServiceAdapter,
-  CoreApplicationModule,
-} from '@core/application';
-import { AppStoreModule } from './app-store.module';
+import { routes } from './app.routes';
+
+import { rootReducer } from './store/root.reducer';
+import { RootState } from './store/root.state';
 import { ServiceWorkerModule } from '@angular/service-worker';
 import { environment } from '../environments/environment';
-import { AppSwaggerModule } from './app-swagger.module';
-import { AppDomainModule } from './app-domain.module';
 import { UiModalModule } from '@ui/modal';
 import {
   NotificationsHubModule,
   NOTIFICATIONS_HUB_OPTIONS,
 } from '@hub/notifications';
 import { SignalRHubOptions } from '@core/signalr';
-import { CoreBreadcrumbModule } from '@core/breadcrumb';
+import { provideCoreBreadcrumb } from '@core/breadcrumb';
 import { UiCommonModule } from '@ui/common';
-import { registerLocaleData } from '@angular/common';
-
-import localeDe from '@angular/common/locales/de';
-import localeDeExtra from '@angular/common/locales/extra/de';
 import { HttpErrorInterceptor } from './interceptors';
 import { CoreLoggerModule, LOG_PROVIDER } from '@core/logger';
 import { IsaLogProvider } from './providers';
@@ -56,10 +57,8 @@ import {
   ScanditScanAdapterModule,
 } from '@adapter/scan';
 import * as Commands from './commands';
-import { PreviewComponent } from './preview';
 import { NativeContainerService } from '@external/native-container';
 import { ShellModule } from '@shared/shell';
-import { MainComponent } from './main.component';
 import { IconModule } from '@shared/components/icon';
 import { NgIconsModule } from '@ng-icons/core';
 import {
@@ -67,10 +66,9 @@ import {
   matWifi,
   matWifiOff,
 } from '@ng-icons/material-icons/baseline';
-import { NetworkStatusService } from './services/network-status.service';
+import { NetworkStatusService } from '@isa/core/connectivity';
 import { debounceTime, filter, firstValueFrom, switchMap } from 'rxjs';
-import { provideMatomo } from 'ngx-matomo-client';
-import { withRouter, withRouteData } from 'ngx-matomo-client';
+import { provideMatomo, withRouter, withRouteData } from 'ngx-matomo-client';
 import {
   provideLogging,
   withLogLevel,
@@ -87,14 +85,58 @@ import {
 import { Store } from '@ngrx/store';
 import { OAuthService } from 'angular-oauth2-oidc';
 import z from 'zod';
+import { provideScrollPositionRestoration } from '@isa/utils/scroll-position';
 import { TabNavigationService } from '@isa/core/tabs';
 
-registerLocaleData(localeDe, localeDeExtra);
-registerLocaleData(localeDe, 'de', localeDeExtra);
+// Domain modules
+import { provideDomainCheckout } from '@domain/checkout';
 
-export function _appInitializerFactory(config: Config, injector: Injector) {
+// Swagger API configurations
+import { AvConfiguration } from '@generated/swagger/availability-api';
+import { CatConfiguration } from '@generated/swagger/cat-search-api';
+import { CheckoutConfiguration } from '@generated/swagger/checkout-api';
+import { CrmConfiguration } from '@generated/swagger/crm-api';
+import { EisConfiguration } from '@generated/swagger/eis-api';
+import { IsaConfiguration } from '@generated/swagger/isa-api';
+import { OmsConfiguration } from '@generated/swagger/oms-api';
+import { PrintConfiguration } from '@generated/swagger/print-api';
+import { RemiConfiguration } from '@generated/swagger/inventory-api';
+import { WwsConfiguration } from '@generated/swagger/wws-api';
+import { UiIconModule } from '@ui/icon';
+
+// --- Store Configuration ---
+
+function storeHydrateMetaReducer(
+  reducer: ActionReducer<RootState>,
+): ActionReducer<RootState> {
+  return function (state, action) {
+    if (action.type === 'HYDRATE') {
+      return reducer(action['payload'], action);
+    }
+    return reducer(state, action);
+  };
+}
+
+const metaReducers: MetaReducer<RootState>[] = [storeHydrateMetaReducer];
+
+// --- Swagger Configuration ---
+
+const swaggerConfigSchema = z.object({ rootUrl: z.string() });
+
+function createSwaggerConfigFactory(name: string) {
+  return function () {
+    return inject(Config).get(`@swagger/${name}`, swaggerConfigSchema);
+  };
+}
+
+const serviceWorkerBypassInterceptor: HttpInterceptorFn = (req, next) => {
+  return next(req.clone({ setHeaders: { 'ngsw-bypass': 'true' } }));
+};
+
+// --- App Initializer ---
+
+function appInitializerFactory(_config: Config, injector: Injector) {
   return async () => {
-    // Get logging service for initialization logging
     const logger = loggerFactory(() => ({ service: 'AppInitializer' }));
     const statusElement = document.querySelector('#init-status');
     const laoderElement = document.querySelector('#init-loader');
@@ -105,7 +147,8 @@ export function _appInitializerFactory(config: Config, injector: Injector) {
       let online = false;
       const networkStatus = injector.get(NetworkStatusService);
       while (!online) {
-        online = await firstValueFrom(networkStatus.online$);
+        const status = await firstValueFrom(networkStatus.status$);
+        online = status === 'online';
 
         if (!online) {
           logger.warn('Waiting for network connection');
@@ -131,7 +174,10 @@ export function _appInitializerFactory(config: Config, injector: Injector) {
 
       const auth = injector.get(AuthService);
       try {
-        await auth.init();
+        const authenticated = await auth.init();
+        if (!authenticated) {
+          throw new Error('User is not authenticated');
+        }
       } catch {
         statusElement.innerHTML = 'Authentifizierung wird durchgeführt...';
         logger.info('Performing login');
@@ -157,7 +203,6 @@ export function _appInitializerFactory(config: Config, injector: Injector) {
       await userStorage.init();
 
       const store = injector.get(Store);
-      // Hydrate Ngrx Store
       const state = userStorage.get('store');
       if (state && state['version'] === version) {
         store.dispatch({ type: 'HYDRATE', payload: userStorage.get('store') });
@@ -167,7 +212,7 @@ export function _appInitializerFactory(config: Config, injector: Injector) {
           reason: state ? 'version mismatch' : 'no stored state',
         }));
       }
-      // Subscribe on Store changes and save to user storage
+
       auth.initialized$
         .pipe(
           filter((initialized) => initialized),
@@ -178,7 +223,6 @@ export function _appInitializerFactory(config: Config, injector: Injector) {
         });
 
       logger.info('Application initialization completed');
-      // Inject tab navigation service to initialize it
       injector.get(TabNavigationService).init();
     } catch (error) {
       logger.error('Application initialization failed', error as Error, () => ({
@@ -219,7 +263,7 @@ export function _appInitializerFactory(config: Config, injector: Injector) {
   };
 }
 
-export function _notificationsHubOptionsFactory(
+function notificationsHubOptionsFactory(
   config: Config,
   auth: AuthService,
 ): SignalRHubOptions {
@@ -253,80 +297,151 @@ const USER_SUB_FACTORY = () => {
   return signal(validation.data);
 };
 
-@NgModule({
-  declarations: [AppComponent, MainComponent],
-  bootstrap: [AppComponent],
-  imports: [
-    BrowserModule,
-    BrowserAnimationsModule,
-    ShellModule.forRoot(),
-    AppRoutingModule,
-    AppSwaggerModule,
-    AppDomainModule,
-    CoreBreadcrumbModule.forRoot(),
-    CoreCommandModule.forRoot(Object.values(Commands)),
-    CoreLoggerModule.forRoot(),
-    AppStoreModule,
-    PreviewComponent,
-    AuthModule.forRoot(),
-    CoreApplicationModule.forRoot(),
-    UiModalModule.forRoot(),
-    UiCommonModule.forRoot(),
-    NotificationsHubModule.forRoot(),
-    ServiceWorkerModule.register('ngsw-worker.js', {
-      enabled: environment.production,
-      registrationStrategy: 'registerWhenStable:30000',
-    }),
-    ScanAdapterModule.forRoot(),
-    ScanditScanAdapterModule.forRoot(),
-    PlatformModule,
-    IconModule.forRoot(),
-    NgIconsModule.withIcons({ matWifiOff, matClose, matWifi }),
-  ],
+export const appConfig: ApplicationConfig = {
   providers: [
+    provideZoneChangeDetection({ eventCoalescing: true }),
+    provideAnimationsAsync('animations'),
+    provideRouter(routes, withComponentInputBinding()),
+    provideHttpClient(
+      withInterceptorsFromDi(),
+      withInterceptors([serviceWorkerBypassInterceptor]),
+    ),
+    provideScrollPositionRestoration(),
+
+    // NgRx Store
+    provideStore(rootReducer, { metaReducers }),
+    provideCoreBreadcrumb(),
+    provideDomainCheckout(),
+    provideStoreDevtools({
+      name: 'ISA Ngrx Application Store',
+      connectInZone: true,
+    }),
+
+    // Swagger API configurations
+    {
+      provide: AvConfiguration,
+      useFactory: createSwaggerConfigFactory('av'),
+    },
+    {
+      provide: CatConfiguration,
+      useFactory: createSwaggerConfigFactory('cat'),
+    },
+    {
+      provide: CheckoutConfiguration,
+      useFactory: createSwaggerConfigFactory('checkout'),
+    },
+    {
+      provide: CrmConfiguration,
+      useFactory: createSwaggerConfigFactory('crm'),
+    },
+    {
+      provide: EisConfiguration,
+      useFactory: createSwaggerConfigFactory('eis'),
+    },
+    {
+      provide: IsaConfiguration,
+      useFactory: createSwaggerConfigFactory('isa'),
+    },
+    {
+      provide: OmsConfiguration,
+      useFactory: createSwaggerConfigFactory('oms'),
+    },
+    {
+      provide: PrintConfiguration,
+      useFactory: createSwaggerConfigFactory('print'),
+    },
+    {
+      provide: RemiConfiguration,
+      useFactory: createSwaggerConfigFactory('remi'),
+    },
+    {
+      provide: WwsConfiguration,
+      useFactory: createSwaggerConfigFactory('wws'),
+    },
+
+    // App initializer
     provideAppInitializer(() => {
-      const initializerFn = _appInitializerFactory(
+      const initializerFn = appInitializerFactory(
         inject(Config),
         inject(Injector),
       );
       return initializerFn();
     }),
+
+    // Notifications hub
     {
       provide: NOTIFICATIONS_HUB_OPTIONS,
-      useFactory: _notificationsHubOptionsFactory,
+      useFactory: notificationsHubOptionsFactory,
       deps: [Config, AuthService],
     },
+
+    // HTTP interceptors
     {
       provide: HTTP_INTERCEPTORS,
       useClass: HttpErrorInterceptor,
       multi: true,
     },
+
+    // Logging
     {
       provide: LOG_PROVIDER,
       useClass: IsaLogProvider,
       multi: true,
     },
+    provideLogging(
+      withLogLevel(isDevMode() ? LogLevel.Debug : LogLevel.Info),
+      withSink(ConsoleLogSink),
+    ),
+
+    // Error handling
     {
       provide: ErrorHandler,
       useClass: IsaErrorHandler,
     },
-    {
-      provide: ApplicationService,
-      useClass: ApplicationServiceAdapter,
-    },
+
+    // Locale settings
     { provide: LOCALE_ID, useValue: 'de-DE' },
-    provideHttpClient(withInterceptorsFromDi()),
+    { provide: DEFAULT_CURRENCY_CODE, useValue: 'EUR' },
+
+    // Analytics
     provideMatomo(
       { trackerUrl: 'https://matomo.paragon-data.net', siteId: '1' },
       withRouter(),
       withRouteData(),
     ),
-    provideLogging(withLogLevel(LogLevel.Debug), withSink(ConsoleLogSink)),
-    {
-      provide: DEFAULT_CURRENCY_CODE,
-      useValue: 'EUR',
-    },
+
+    // User storage
     provideUserSubFactory(USER_SUB_FACTORY),
+
+    // Title strategy
+    { provide: TitleStrategy, useClass: IsaTitleStrategy },
+
+    // Import providers from NgModules
+    importProvidersFrom(
+      // Core modules
+      CoreCommandModule.forRoot(Object.values(Commands)),
+      CoreLoggerModule.forRoot(),
+      AuthModule.forRoot(),
+
+      // UI modules
+      UiModalModule.forRoot(),
+      UiCommonModule.forRoot(),
+
+      // Hub modules
+      NotificationsHubModule.forRoot(),
+
+      // Service Worker
+      ServiceWorkerModule.register('ngsw-worker.js', {
+        enabled: environment.production,
+        registrationStrategy: 'registerWhenStable:30000',
+      }),
+
+      // Scan adapter
+      ScanAdapterModule.forRoot(),
+      ScanditScanAdapterModule.forRoot(),
+
+      UiIconModule.forRoot(),
+      IconModule.forRoot(),
+    ),
   ],
-})
-export class AppModule {}
+};

apps/isa-app/src/app/app.html

@@ -0,0 +1,3 @@
+<shell-layout>
+  <router-outlet />
+</shell-layout>

apps/isa-app/src/app/app.routes.ts

@@ -1,5 +1,4 @@
-import { isDevMode, NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
+import { Routes } from '@angular/router';
 import {
   CanActivateCartGuard,
   CanActivateCartWithProcessIdGuard,
@@ -7,32 +6,29 @@ import {
   CanActivateCustomerOrdersGuard,
   CanActivateCustomerOrdersWithProcessIdGuard,
   CanActivateCustomerWithProcessIdGuard,
-  CanActivateGoodsInGuard,
   CanActivateProductGuard,
   CanActivateProductWithProcessIdGuard,
-  CanActivateTaskCalendarGuard,
   IsAuthenticatedGuard,
 } from './guards';
-import { CanActivateAssortmentGuard } from './guards/can-activate-assortment.guard';
-import { CanActivatePackageInspectionGuard } from './guards/can-activate-package-inspection.guard';
-import { MainComponent } from './main.component';
-import { PreviewComponent } from './preview';
 import {
   BranchSectionResolver,
   CustomerSectionResolver,
   ProcessIdResolver,
 } from './resolvers';
-import { TokenLoginComponent, TokenLoginModule } from './token-login';
-import { ProcessIdGuard } from './guards/process-id.guard';
+import { TokenLoginComponent } from './token-login';
 import {
   ActivateProcessIdGuard,
   ActivateProcessIdWithConfigKeyGuard,
 } from './guards/activate-process-id.guard';
 import { MatomoRouteData } from 'ngx-matomo-client';
-import { tabResolverFn, processResolverFn } from '@isa/core/tabs';
-import { provideScrollPositionRestoration } from '@isa/utils/scroll-position';
+import {
+  tabResolverFn,
+  processResolverFn,
+  hasTabIdGuard,
+  deactivateTabGuard,
+} from '@isa/core/tabs';
 
-const routes: Routes = [
+export const routes: Routes = [
   { path: '', redirectTo: 'kunde/dashboard', pathMatch: 'full' },
   {
     path: 'login',
@@ -47,12 +43,12 @@ const routes: Routes = [
     children: [
       {
         path: 'kunde',
-        component: MainComponent,
         children: [
           {
             path: 'dashboard',
             loadChildren: () =>
               import('@page/dashboard').then((m) => m.DashboardModule),
+            canActivate: [deactivateTabGuard],
             data: {
               matomo: {
                 title: 'Dashboard',
@@ -70,7 +66,9 @@ const routes: Routes = [
             loadChildren: () =>
               import('@page/catalog').then((m) => m.PageCatalogModule),
             canActivate: [CanActivateProductWithProcessIdGuard],
-            resolve: { processId: ProcessIdResolver },
+            resolve: {
+              processId: ProcessIdResolver,
+            },
           },
           {
             path: 'order',
@@ -83,7 +81,9 @@ const routes: Routes = [
             loadChildren: () =>
               import('@page/customer-order').then((m) => m.CustomerOrderModule),
             canActivate: [CanActivateCustomerOrdersWithProcessIdGuard],
-            resolve: { processId: ProcessIdResolver },
+            resolve: {
+              processId: ProcessIdResolver,
+            },
           },
           {
             path: 'customer',
@@ -96,7 +96,9 @@ const routes: Routes = [
             loadChildren: () =>
               import('@page/customer').then((m) => m.CustomerModule),
             canActivate: [CanActivateCustomerWithProcessIdGuard],
-            resolve: { processId: ProcessIdResolver },
+            resolve: {
+              processId: ProcessIdResolver,
+            },
           },
           {
             path: 'cart',
@@ -109,11 +111,13 @@ const routes: Routes = [
             loadChildren: () =>
               import('@page/checkout').then((m) => m.PageCheckoutModule),
             canActivate: [CanActivateCartWithProcessIdGuard],
+            resolve: {
+              processId: ProcessIdResolver,
+            },
           },
           {
             path: 'pickup-shelf',
-            canActivate: [ProcessIdGuard],
-            // NOTE: This is a workaround for the canActivate guard not being called
+            canActivate: [ActivateProcessIdGuard],
             loadChildren: () =>
               import('@page/pickup-shelf').then((m) => m.PickupShelfOutModule),
           },
@@ -122,6 +126,9 @@ const routes: Routes = [
             canActivate: [ActivateProcessIdGuard],
             loadChildren: () =>
               import('@page/pickup-shelf').then((m) => m.PickupShelfOutModule),
+            resolve: {
+              processId: ProcessIdResolver,
+            },
           },
           { path: '**', redirectTo: 'dashboard', pathMatch: 'full' },
         ],
@@ -129,7 +136,6 @@ const routes: Routes = [
       },
       {
         path: 'filiale',
-        component: MainComponent,
         children: [
           {
             path: 'task-calendar',
@@ -137,12 +143,11 @@ const routes: Routes = [
               import('@page/task-calendar').then(
                 (m) => m.PageTaskCalendarModule,
               ),
-            canActivate: [CanActivateTaskCalendarGuard],
+            canActivate: [ActivateProcessIdWithConfigKeyGuard('taskCalendar')],
           },
           {
             path: 'pickup-shelf',
             canActivate: [ActivateProcessIdWithConfigKeyGuard('pickupShelf')],
-            // NOTE: This is a workaround for the canActivate guard not being called
             loadChildren: () =>
               import('@page/pickup-shelf').then((m) => m.PickupShelfInModule),
           },
@@ -150,27 +155,23 @@ const routes: Routes = [
             path: 'goods/in',
             loadChildren: () =>
               import('@page/goods-in').then((m) => m.GoodsInModule),
-            canActivate: [CanActivateGoodsInGuard],
+            canActivate: [ActivateProcessIdWithConfigKeyGuard('goodsIn')],
           },
-          // {
-          //   path: 'remission',
-          //   loadChildren: () =>
-          //     import('@page/remission').then((m) => m.PageRemissionModule),
-          //   canActivate: [CanActivateRemissionGuard],
-          // },
           {
             path: 'package-inspection',
             loadChildren: () =>
               import('@page/package-inspection').then(
                 (m) => m.PackageInspectionModule,
               ),
-            canActivate: [CanActivatePackageInspectionGuard],
+            canActivate: [
+              ActivateProcessIdWithConfigKeyGuard('packageInspection'),
+            ],
           },
           {
             path: 'assortment',
             loadChildren: () =>
               import('@page/assortment').then((m) => m.AssortmentModule),
-            canActivate: [CanActivateAssortmentGuard],
+            canActivate: [ActivateProcessIdWithConfigKeyGuard('assortment')],
           },
           { path: '**', redirectTo: 'task-calendar', pathMatch: 'full' },
         ],
@@ -180,9 +181,8 @@ const routes: Routes = [
   },
   {
     path: ':tabId',
-    component: MainComponent,
     resolve: { process: processResolverFn, tab: tabResolverFn },
-    canActivate: [IsAuthenticatedGuard],
+    canActivate: [IsAuthenticatedGuard, hasTabIdGuard],
     children: [
       {
         path: 'reward',
@@ -210,7 +210,6 @@ const routes: Routes = [
           },
         ],
       },
-
       {
         path: 'return',
         loadChildren: () =>
@@ -238,23 +237,3 @@ const routes: Routes = [
     ],
   },
 ];
-
-if (isDevMode()) {
-  routes.unshift({
-    path: 'preview',
-    component: PreviewComponent,
-  });
-}
-
-@NgModule({
-  imports: [
-    RouterModule.forRoot(routes, {
-      bindToComponentInputs: true,
-      enableTracing: false,
-    }),
-    TokenLoginModule,
-  ],
-  exports: [RouterModule],
-  providers: [provideScrollPositionRestoration()],
-})
-export class AppRoutingModule {}

apps/isa-app/src/app/app.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
+import { ShellLayoutComponent } from '@isa/shell/layout';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.html',
+  styleUrls: ['./app.css'],
+  imports: [RouterOutlet, ShellLayoutComponent],
+})
+export class App {}

apps/isa-app/src/app/guards/activate-process-id.guard.ts

@@ -1,47 +1,82 @@
-import { inject } from '@angular/core';
-import { ActivatedRouteSnapshot, CanActivateFn, RouterStateSnapshot } from '@angular/router';
-import { ApplicationService } from '@core/application';
-import { Config } from '@core/config';
-import { take } from 'rxjs/operators';
-
-export const ActivateProcessIdGuard: CanActivateFn = async (
-  route: ActivatedRouteSnapshot,
-  state: RouterStateSnapshot,
-) => {
-  const application = inject(ApplicationService);
-
-  const processIdStr = route.params.processId;
-
-  if (!processIdStr) {
-    return false;
-  }
-
-  const processId = Number(processIdStr);
-
-  // Check if Process already exists
-  const process = await application.getProcessById$(processId).pipe(take(1)).toPromise();
-
-  if (!process) {
-    application.createCustomerProcess(processId);
-  }
-
-  application.activateProcess(processId);
-
-  return true;
-};
-
-export const ActivateProcessIdWithConfigKeyGuard: (key: string) => CanActivateFn =
-  (key) => async (route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => {
-    const application = inject(ApplicationService);
-    const config = inject(Config);
-
-    const processId = config.get(`process.ids.${key}`);
-
-    if (isNaN(processId)) {
-      return false;
-    }
-
-    application.activateProcess(processId);
-
-    return true;
-  };
+import { inject } from '@angular/core';
+import {
+  ActivatedRouteSnapshot,
+  CanActivateFn,
+  RouterStateSnapshot,
+} from '@angular/router';
+import { ApplicationService } from '@core/application';
+import { Config } from '@core/config';
+import { take } from 'rxjs/operators';
+import z from 'zod';
+
+export const ActivateProcessIdGuard: CanActivateFn = async (
+  route: ActivatedRouteSnapshot,
+  state: RouterStateSnapshot,
+) => {
+  const application = inject(ApplicationService);
+
+  const processIdStr = route.params.processId;
+
+  if (!processIdStr) {
+    return false;
+  }
+
+  const processId = Number(processIdStr);
+
+  // Check if Process already exists
+  const process = await application
+    .getProcessById$(processId)
+    .pipe(take(1))
+    .toPromise();
+
+  if (!process) {
+    application.createProcess({
+      id: processId,
+      type: 'cart',
+      section: 'customer',
+      name: `Vorgang ${processId}`,
+    });
+  }
+
+  application.activateProcess(processId);
+
+  return true;
+};
+
+export const ActivateProcessIdWithConfigKeyGuard: (
+  key: string,
+) => CanActivateFn =
+  (key) =>
+  async (route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => {
+    const application = inject(ApplicationService);
+    const config = inject(Config);
+
+    const processId = config.get(`process.ids.${key}`, z.coerce.number());
+
+    if (typeof processId !== 'number' || isNaN(processId)) {
+      return false;
+    }
+
+    const processTitle = config.get(
+      `process.titles.${key}`,
+      z.string().default(key),
+    );
+
+    const process = await application
+      .getProcessById$(processId)
+      .pipe(take(1))
+      .toPromise();
+
+    if (!process) {
+      await application.createProcess({
+        id: processId,
+        type: key,
+        section: 'customer', // Not important anymore
+        name: processTitle,
+      });
+    }
+
+    application.activateProcess(processId);
+
+    return true;
+  };

apps/isa-app/src/app/guards/can-activate-goods-in.guard.ts

@@ -1,34 +1,34 @@
-import { Injectable } from '@angular/core';
-import { ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
-import { ApplicationService } from '@core/application';
-import { Config } from '@core/config';
-import { first } from 'rxjs/operators';
-import { z } from 'zod';
-
-@Injectable({ providedIn: 'root' })
-export class CanActivateGoodsInGuard {
-  constructor(
-    private readonly _applicationService: ApplicationService,
-    private readonly _config: Config,
-  ) {}
-
-  async canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
-    const pid = this._config.get('process.ids.goodsIn', z.number());
-    const process = await this._applicationService
-      .getProcessById$(pid)
-      .pipe(first())
-      .toPromise();
-    if (!process) {
-      await this._applicationService.createProcess({
-        id: this._config.get('process.ids.goodsIn'),
-        type: 'goods-in',
-        section: 'branch',
-        name: '',
-      });
-    }
-    this._applicationService.activateProcess(
-      this._config.get('process.ids.goodsIn'),
-    );
-    return true;
-  }
-}
+import { Injectable } from '@angular/core';
+import { ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
+import { ApplicationService } from '@core/application';
+import { Config } from '@core/config';
+import { first } from 'rxjs/operators';
+import { z } from 'zod';
+
+@Injectable({ providedIn: 'root' })
+export class CanActivateGoodsInGuard {
+  constructor(
+    private readonly _applicationService: ApplicationService,
+    private readonly _config: Config,
+  ) {}
+
+  async canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
+    const pid = this._config.get('process.ids.goodsIn', z.number());
+    const process = await this._applicationService
+      .getProcessById$(pid)
+      .pipe(first())
+      .toPromise();
+    if (!process) {
+      await this._applicationService.createProcess({
+        id: this._config.get('process.ids.goodsIn'),
+        type: 'goods-in',
+        section: 'branch',
+        name: 'Abholfach',
+      });
+    }
+    this._applicationService.activateProcess(
+      this._config.get('process.ids.goodsIn'),
+    );
+    return true;
+  }
+}

apps/isa-app/src/app/guards/is-authenticated.guard.ts

@@ -5,7 +5,7 @@ import { ScanAdapterService } from '@adapter/scan';
 import { AuthService as IsaAuthService } from '@generated/swagger/isa-api';
 import { UiConfirmModalComponent, UiErrorModalComponent, UiModalResult, UiModalService } from '@ui/modal';
 import { EnvironmentService } from '@core/environment';
-import { injectNetworkStatus$ } from '../services/network-status.service';
+import { injectNetworkStatus$ } from '@isa/core/connectivity';
 import { toSignal } from '@angular/core/rxjs-interop';
 
 @Injectable({ providedIn: 'root' })

apps/isa-app/src/app/interceptors/http-error.interceptor.ts

@@ -9,7 +9,7 @@ import {
 import { from, NEVER, Observable, throwError } from 'rxjs';
 import { catchError, filter, mergeMap, takeUntil } from 'rxjs/operators';
 import { AuthService, LoginStrategy } from '@core/auth';
-import { injectOnline$ } from '../services/network-status.service';
+import { injectNetworkStatus$ } from '@isa/core/connectivity';
 import { logger } from '@isa/core/logging';
 
 @Injectable()
@@ -17,7 +17,7 @@ export class HttpErrorInterceptor implements HttpInterceptor {
   #logger = logger(() => ({
     'http-interceptor': 'HttpErrorInterceptor',
   }));
-  #offline$ = injectOnline$().pipe(filter((online) => !online));
+  #offline$ = injectNetworkStatus$().pipe(filter((status) => status === 'offline'));
   #injector = inject(Injector);
   #auth = inject(AuthService);
 

apps/isa-app/src/app/main.component.html

@@ -1,3 +0,0 @@
-<shell-root>
-  <router-outlet></router-outlet>
-</shell-root>

apps/isa-app/src/app/main.component.ts

@@ -1,11 +0,0 @@
-import { Component, ChangeDetectionStrategy } from '@angular/core';
-
-@Component({
-  selector: 'app-main',
-  templateUrl: 'main.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: false,
-})
-export class MainComponent {
-  constructor() {}
-}

apps/isa-app/src/app/preview/index.ts

@@ -1,3 +0,0 @@
-// start:ng42.barrel
-export * from './preview.component';
-// end:ng42.barrel

apps/isa-app/src/app/preview/preview.component.css

@@ -1,3 +0,0 @@
-:host {
-  @apply grid min-h-screen content-center justify-center;
-}

apps/isa-app/src/app/preview/preview.component.html

@@ -1,10 +0,0 @@
-<h1>Platform: {{ platform | json }}</h1>
-<br />
-<h1>{{ appVersion }}</h1>
-<br />
-<h1>{{ userAgent }}</h1>
-<br />
-<h1>Navigator: {{ navigator | json }}</h1>
-<br />
-<br />
-<h1>Device: {{ device }}</h1>

apps/isa-app/src/app/preview/preview.component.ts

@@ -1,56 +0,0 @@
-import { Platform, PlatformModule } from '@angular/cdk/platform';
-import { CommonModule } from '@angular/common';
-import { Component } from '@angular/core';
-import { BranchDTO } from '@generated/swagger/checkout-api';
-import { BehaviorSubject } from 'rxjs';
-
-@Component({
-  selector: 'app-preview',
-  templateUrl: 'preview.component.html',
-  styleUrls: ['preview.component.css'],
-  imports: [CommonModule, PlatformModule],
-})
-export class PreviewComponent {
-  selectedBranch$ = new BehaviorSubject<BranchDTO>({});
-
-  get appVersion() {
-    return 'App Version: ' + (window.navigator as any).appVersion;
-  }
-
-  get userAgent() {
-    return 'User Agent: ' + (window.navigator as any).userAgent;
-  }
-
-  get navigator() {
-    const nav = {};
-    for (const i in window.navigator) nav[i] = navigator[i];
-    return nav;
-  }
-
-  get platform() {
-    return this._platform;
-  }
-
-  get device() {
-    const isIpadNative = this._platform.IOS && !this._platform.SAFARI;
-    const isIpadMini6Native = window?.navigator?.userAgent?.includes('Macintosh') && !this._platform.SAFARI;
-    const isNative = isIpadNative || isIpadMini6Native;
-    const isPWA = this._platform.IOS && this._platform.SAFARI;
-    const isDesktop = !isNative && !isPWA;
-    if (isNative) {
-      if (isIpadMini6Native) {
-        return 'IPAD mini 6 Native App';
-      } else if (isIpadNative) {
-        return 'IPAD mini 2 Native App or IPAD mini 5 Native App';
-      }
-    } else if (isPWA) {
-      return 'IPAD Safari PWA';
-    } else if (isDesktop) return 'Desktop or Macintosh';
-  }
-
-  constructor(private readonly _platform: Platform) {}
-
-  setNewBranch(branch: BranchDTO) {
-    this.selectedBranch$.next(branch);
-  }
-}

apps/isa-app/src/app/resolvers/index.ts

@@ -1,4 +1,2 @@
-// start:ng42.barrel
-export * from './process-id.resolver';
-export * from './section.resolver';
-// end:ng42.barrel
+export * from './process-id.resolver';
+export * from './section.resolver';

apps/isa-app/src/app/services/index.ts

@@ -1 +0,0 @@
-export * from './network-status.service';