mirror of
https://dev.azure.com/hugendubel/ISA/_git/ISA-Frontend
synced 2025-12-28 22:42:11 +01:00
♻️ refactor(claude): migrate skills to new skill-creator format
Recreate all 11 skills using the updated skill-creator tooling: - api-sync, arch-docs, architecture-validator, css-animations - git-workflow, library-creator, logging, state-patterns - tailwind, template-standards, test-migration Key changes: - Updated YAML frontmatter structure - Reorganized logging references into references/ subdirectory - Applied progressive disclosure patterns where applicable
This commit is contained in:
Lorenz Hilpert
@@ -9,15 +9,6 @@ description: This skill should be used when regenerating Swagger/OpenAPI TypeScr
|
||||
|
||||
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.
|
||||
|
||||
## When to Use This Skill
|
||||
|
||||
Invoke when user requests:
|
||||
- API client regeneration or sync
|
||||
- "Check breaking changes" before API update
|
||||
- Backend API changes need frontend updates
|
||||
- Impact assessment of API changes
|
||||
- "Regenerate swagger" or "update API clients"
|
||||
|
||||
## Available APIs
|
||||
|
||||
availability-api, cat-search-api, checkout-api, crm-api, eis-api, inventory-api, isa-api, oms-api, print-api, wws-api
|
||||
|
||||
@@ -3,35 +3,29 @@ 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 Skill
|
||||
# Architecture Documentation
|
||||
|
||||
Generate comprehensive architecture documentation using modern frameworks and best practices.
|
||||
|
||||
## When to Use
|
||||
|
||||
- Creating or updating architecture documentation
|
||||
- Generating C4 model diagrams (Context, Container, Component, Code)
|
||||
- Writing Architecture Decision Records (ADRs)
|
||||
- Documenting system design and component relationships
|
||||
- Creating PlantUML or Mermaid diagrams
|
||||
|
||||
## Available Frameworks
|
||||
|
||||
### C4 Model
|
||||
Best for: Visualizing software architecture at different abstraction levels
|
||||
Visualize software architecture at different abstraction levels.
|
||||
|
||||
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)
|
||||
|
||||
See: `@references/c4-model.md` for patterns and examples
|
||||
**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
|
||||
Best for: Comprehensive architecture documentation
|
||||
Comprehensive architecture documentation covering all aspects.
|
||||
|
||||
Sections:
|
||||
**Sections:**
|
||||
1. Introduction and Goals
|
||||
2. Constraints
|
||||
3. Context and Scope
|
||||
@@ -45,16 +39,22 @@ Sections:
|
||||
11. Risks and Technical Debt
|
||||
12. Glossary
|
||||
|
||||
See: `@references/arc42.md` for template structure
|
||||
**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)
|
||||
Best for: Documenting individual architectural decisions
|
||||
Document individual architectural decisions with context and consequences.
|
||||
|
||||
See: `@references/adr-template.md` for format and examples
|
||||
**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"
|
||||
@@ -73,7 +73,7 @@ ls -la docs/adr/ docs/decisions/
|
||||
- Map data flow from API definitions
|
||||
|
||||
### 3. Documentation Phase
|
||||
Based on the request, create appropriate documentation:
|
||||
Choose appropriate output format based on request:
|
||||
|
||||
**For C4 diagrams:**
|
||||
```
|
||||
@@ -100,7 +100,7 @@ docs/architecture/
|
||||
└── ...
|
||||
```
|
||||
|
||||
## ISA-Frontend Specific Context
|
||||
## ISA-Frontend Context
|
||||
|
||||
### Monorepo Structure
|
||||
- **apps/**: Angular applications
|
||||
@@ -169,3 +169,9 @@ graph TD
|
||||
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
|
||||
|
||||
@@ -9,16 +9,6 @@ description: This skill should be used when validating architecture compliance,
|
||||
|
||||
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.
|
||||
|
||||
## When to Use This Skill
|
||||
|
||||
Invoke when user wants to:
|
||||
- Validate import boundaries or architectural rules
|
||||
- Detect circular dependencies or dependency cycles
|
||||
- Find layer violations (Feature→Feature, Data Access→Feature)
|
||||
- Check cross-domain dependencies
|
||||
- Resolve build failures with circular import warnings
|
||||
- Mentioned "check architecture", "validate boundaries", "circular dependencies", or "dependency cycles"
|
||||
|
||||
## Architectural Rules
|
||||
|
||||
**Allowed Dependencies:**
|
||||
|
||||
@@ -9,17 +9,6 @@ description: This skill should be used when writing or reviewing CSS animations
|
||||
|
||||
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.
|
||||
|
||||
## When to Use This Skill
|
||||
|
||||
Apply this skill when:
|
||||
- **Writing Angular components** with entrance/exit animations
|
||||
- **Converting @angular/animations** to native CSS @keyframes
|
||||
- **Implementing animate.enter/animate.leave** in Angular 20+ templates
|
||||
- **Creating staggered animations** for lists or collections
|
||||
- **Debugging animation issues** (snap-back, wrong starting positions, choppy playback)
|
||||
- **Optimizing animation performance** for GPU acceleration
|
||||
- **Reviewing animation code** for accessibility and best practices
|
||||
|
||||
## Quick Start
|
||||
|
||||
### Basic Animation Setup
|
||||
@@ -311,41 +300,6 @@ element.addEventListener('animationend', (e) => {
|
||||
});
|
||||
```
|
||||
|
||||
## 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">
|
||||
```
|
||||
|
||||
## Migration from @angular/animations
|
||||
|
||||
### Before (Angular Animations)
|
||||
@@ -390,3 +344,38 @@ import { trigger, state, style, transition, animate } from '@angular/animations'
|
||||
- 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">
|
||||
```
|
||||
|
||||
@@ -9,13 +9,6 @@ description: This skill should be used when creating feature/data-access/ui/util
|
||||
|
||||
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.
|
||||
|
||||
## 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
|
||||
|
||||
## Required Parameters
|
||||
|
||||
Collect these parameters from the user:
|
||||
@@ -279,6 +272,6 @@ Run lint to check for violations: npx nx lint [library-name]
|
||||
- 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-enforcer (boundary validation)
|
||||
- .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
|
||||
|
||||
@@ -3,17 +3,10 @@ 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 Helper Skill
|
||||
# Logging
|
||||
|
||||
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
|
||||
@@ -228,45 +221,14 @@ describe('MyComponent', () => {
|
||||
});
|
||||
```
|
||||
|
||||
## 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`
|
||||
**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`
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
# Logging Quick Reference
|
||||
# Logging API Reference
|
||||
|
||||
## API Signatures
|
||||
|
||||
@@ -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:**
|
||||
- **[template-standards](../template-standards/SKILL.md)** - Angular template syntax, E2E testing attributes, and ARIA accessibility
|
||||
- **[logging](../logging/SKILL.md)** - MANDATORY logging in all Angular files
|
||||
|
||||
When building Angular components, these skills work together:
|
||||
1. Use **template-standards** for Angular syntax, `data-*`, and ARIA attributes
|
||||
2. Use **tailwind** (this skill) for styling with the ISA design system
|
||||
3. Use **logging** for all component/service logging
|
||||
|
||||
## Core Design System Principles
|
||||
|
||||
### 0. Component Libraries First (Most Important)
|
||||
|
||||
@@ -7,20 +7,6 @@ description: This skill should be used when writing or reviewing Angular compone
|
||||
|
||||
Comprehensive guide for Angular templates covering modern syntax, E2E testing attributes, and ARIA accessibility.
|
||||
|
||||
## When to Use
|
||||
|
||||
- Creating or reviewing component templates
|
||||
- Refactoring legacy `*ngIf/*ngFor/*ngSwitch` to modern syntax
|
||||
- Implementing `@defer` lazy loading
|
||||
- Designing reusable components with `ng-content`
|
||||
- Adding E2E testing attributes for automated tests
|
||||
- Ensuring WCAG accessibility compliance
|
||||
- Template performance optimization
|
||||
|
||||
**Related Skills:**
|
||||
- **[tailwind](../tailwind/SKILL.md)** - ISA design system styling (colors, typography, spacing, layout)
|
||||
- **[logging](../logging/SKILL.md)** - MANDATORY logging in all Angular files using `@isa/core/logging`
|
||||
|
||||
## Overview
|
||||
|
||||
This skill combines three essential aspects of Angular template development:
|
||||
@@ -31,7 +17,9 @@ This skill combines three essential aspects of Angular template development:
|
||||
|
||||
**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
|
||||
|
||||
@@ -81,6 +69,8 @@ This skill combines three essential aspects of Angular template development:
|
||||
}
|
||||
```
|
||||
|
||||
**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
|
||||
@@ -97,7 +87,7 @@ This skill combines three essential aspects of Angular template development:
|
||||
}
|
||||
```
|
||||
|
||||
#### Triggers
|
||||
#### Common Triggers
|
||||
|
||||
| Trigger | Use Case |
|
||||
|---------|----------|
|
||||
@@ -111,18 +101,15 @@ This skill combines three essential aspects of Angular template development:
|
||||
**Multiple triggers:** `@defer (on interaction; on timer(5s))`
|
||||
**Prefetching:** `@defer (on interaction; prefetch on idle)`
|
||||
|
||||
#### Requirements
|
||||
#### 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)
|
||||
|
||||
#### 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
|
||||
**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
|
||||
|
||||
@@ -156,12 +143,9 @@ This skill combines three essential aspects of Angular template development:
|
||||
</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`.
|
||||
|
||||
#### 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
|
||||
|
||||
@@ -193,6 +177,8 @@ Groups elements without DOM footprint:
|
||||
</p>
|
||||
```
|
||||
|
||||
**See [template-reference.md](references/template-reference.md) for programmatic rendering, ViewContainerRef patterns, context scoping, and common pitfalls.**
|
||||
|
||||
### Variables
|
||||
|
||||
#### @let (Angular 18.1+)
|
||||
@@ -226,16 +212,14 @@ Groups elements without DOM footprint:
|
||||
**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
|
||||
- **`data-which`**: Unique identifier for specific instances
|
||||
- **`data-*`**: Additional contextual information
|
||||
- **`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
|
||||
|
||||
@@ -259,9 +243,8 @@ Enable automated end-to-end testing by providing stable selectors for QA automat
|
||||
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
|
||||
|
||||
---
|
||||
**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
|
||||
|
||||
@@ -290,7 +273,7 @@ Ensure web applications are accessible to all users, including those using assis
|
||||
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
|
||||
|
||||
@@ -342,18 +325,6 @@ Ensure web applications are accessible to all users, including those using assis
|
||||
}
|
||||
```
|
||||
|
||||
### Link with All Attributes
|
||||
|
||||
```html
|
||||
<a
|
||||
[routerLink]="['/orders', orderId]"
|
||||
data-what="order-link"
|
||||
[attr.data-which]="orderId"
|
||||
[attr.aria-label]="'View order ' + orderNumber">
|
||||
View Order #{{ orderNumber }}
|
||||
</a>
|
||||
```
|
||||
|
||||
### Dialog with All Attributes
|
||||
|
||||
```html
|
||||
@@ -387,109 +358,7 @@ Ensure web applications are accessible to all users, including those using assis
|
||||
</div>
|
||||
```
|
||||
|
||||
### Complete Form Example
|
||||
|
||||
```html
|
||||
<form
|
||||
(ngSubmit)="onSubmit()"
|
||||
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"
|
||||
name="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"
|
||||
name="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"
|
||||
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>
|
||||
```
|
||||
|
||||
### Conditional Rendering with Attributes
|
||||
|
||||
```typescript
|
||||
@if (isLoading()) {
|
||||
<div
|
||||
data-what="loading-spinner"
|
||||
data-which="user-profile"
|
||||
role="status"
|
||||
aria-live="polite"
|
||||
aria-label="Loading user profile">
|
||||
<mat-spinner />
|
||||
</div>
|
||||
} @else if (error()) {
|
||||
<div
|
||||
data-what="error-message"
|
||||
data-which="user-profile"
|
||||
role="alert"
|
||||
aria-live="assertive">
|
||||
{{ error() }}
|
||||
</div>
|
||||
} @else {
|
||||
<div
|
||||
data-what="profile-content"
|
||||
data-which="user-profile"
|
||||
role="region"
|
||||
aria-labelledby="profile-title">
|
||||
<h2 id="profile-title">{{ user().name }}</h2>
|
||||
<!-- profile content -->
|
||||
</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
|
||||
|
||||
@@ -501,7 +370,6 @@ Before considering template complete:
|
||||
- [ ] 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)
|
||||
- [ ] Template references using # for local variables
|
||||
- [ ] Using @let for template-scoped variables (Angular 18.1+)
|
||||
|
||||
### E2E Attributes
|
||||
@@ -510,7 +378,6 @@ Before considering template complete:
|
||||
- [ ] 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
|
||||
- [ ] Additional `data-*` attributes for contextual information (if needed)
|
||||
|
||||
### ARIA Accessibility
|
||||
- [ ] All interactive elements have appropriate ARIA labels
|
||||
@@ -520,16 +387,13 @@ Before considering template complete:
|
||||
- [ ] Dialogs have `role="dialog"`, `aria-modal`, and label relationships
|
||||
- [ ] Dynamic state changes reflected in ARIA attributes
|
||||
- [ ] Keyboard accessibility (tabindex, enter/space handlers where needed)
|
||||
- [ ] Screen reader testing completed (if applicable)
|
||||
|
||||
### Combined Standards
|
||||
- [ ] Every interactive element has BOTH E2E and ARIA attributes
|
||||
- [ ] Attributes organized logically in template (Angular directives → data-* → aria-*)
|
||||
- [ ] 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
|
||||
@@ -549,31 +413,27 @@ Before considering template complete:
|
||||
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` - @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
|
||||
- `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 and conventions
|
||||
- `references/e2e-attributes.md` - Complete E2E attribute patterns, naming conventions, testing integration
|
||||
|
||||
### ARIA Accessibility References
|
||||
- `references/aria-attributes.md` - Comprehensive ARIA guidance and WCAG compliance
|
||||
- `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
|
||||
- `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:**
|
||||
|
||||
Reference in New Issue
Block a user