@julianoczkowski/create-trimble-app 2.0.0

package/templates/angular/.cursor/rules/modus-angular-icons.mdc

@@ -0,0 +1,137 @@
+---
+description: Modus Icons usage guide for Angular applications
+globs: ["**/*.ts", "**/*.html", "**/*.scss", "**/*.css"]
+alwaysApply: false
+---
+
+# Modus Icons Usage Guide for Angular Applications
+
+## Overview
+
+Modus Icons use **icon font ligatures** with **underscore naming convention**.
+
+## Icon Naming Convention
+
+**CRITICAL: Modus Icons use UNDERSCORES (\_), not hyphens (-)**
+
+### CORRECT Icon Names
+
+```html
+<i class="modus-icons">save_disk</i>
+<i class="modus-icons">arrow_left</i>
+<i class="modus-icons">arrow_right</i>
+<i class="modus-icons">add_circle</i>
+<i class="modus-icons">user_permissions</i>
+```
+
+### INCORRECT Icon Names
+
+```html
+<!-- Don't use hyphens -->
+<i class="modus-icons">save-disk</i>
+<i class="modus-icons">arrow-left</i>
+```
+
+## Usage Patterns
+
+### Angular Component Integration
+
+```html
+<!-- Icon with text (left position) -->
+<modus-button icon="save_disk" iconPosition="left">Save File</modus-button>
+
+<!-- Icon with text (right position) -->
+<modus-button icon="download" iconPosition="right">Download</modus-button>
+
+<!-- Icon only (requires aria-label) -->
+<modus-button icon="settings" iconPosition="only" ariaLabel="Open settings"></modus-button>
+```
+
+### Direct HTML Usage
+
+```html
+<!-- Decorative icon (not announced by screen readers) -->
+<i class="modus-icons text-lg" aria-hidden="true">user_add</i>
+
+<!-- Informational icon (announced by screen readers) -->
+<i class="modus-icons text-base" role="img" aria-label="Settings">settings</i>
+```
+
+### Sizing Icons
+
+Use Tailwind text utilities mapped to Modus font sizes:
+
+| Tailwind Class | Size | Usage                  |
+| -------------- | ---- | ---------------------- |
+| `text-2xs`     | 8px  | Micro icons, badges    |
+| `text-xs`      | 10px | Small labels, captions |
+| `text-sm`      | 12px | Secondary icons        |
+| `text-base`    | 14px | **Modus default size** |
+| `text-lg`      | 16px | Body text icons        |
+| `text-xl`      | 18px | Large icons            |
+| `text-2xl`     | 20px | Prominent icons        |
+| `text-3xl`     | 24px | Display icons          |
+| `text-4xl`     | 30px | Hero icons             |
+
+### Coloring Icons
+
+Use design system color classes:
+
+```html
+<i class="modus-icons text-primary">info</i>
+<i class="modus-icons text-success">check_circle</i>
+<i class="modus-icons text-warning">warning</i>
+<i class="modus-icons text-error">error</i>
+<i class="modus-icons text-muted-foreground">help</i>
+```
+
+## Common Icon Names
+
+### Navigation Icons
+
+`arrow_left`, `arrow_right`, `arrow_up`, `arrow_down`, `chevron_left`, `chevron_right`, `menu`, `close`
+
+### Action Icons
+
+`add`, `add_circle`, `edit`, `delete`, `save_disk`, `download`, `upload`, `copy`, `cut`, `paste`
+
+### Status Icons
+
+`check`, `check_circle`, `error`, `warning`, `info`, `help`
+
+### File Icons
+
+`file`, `file_upload`, `file_download`, `folder`, `image`, `document`
+
+## Accessibility Guidelines
+
+### Decorative Icons
+
+```html
+<button>
+  <i class="modus-icons mr-2" aria-hidden="true">save_disk</i>
+  Save Document
+</button>
+```
+
+### Informational Icons
+
+```html
+<i class="modus-icons" role="img" aria-label="Warning">warning</i>
+```
+
+### Icon-Only Buttons
+
+```html
+<modus-button icon="settings" iconPosition="only" ariaLabel="Open settings menu"></modus-button>
+```
+
+---
+
+**Key Takeaways:**
+
+1. **Always use underscores** in icon names (`save_disk`, not `save-disk`)
+2. **Load font via HTML link**, not CSS import
+3. **Use `modus-icons` class** with icon name as text content
+4. **Provide accessibility labels** for informational and icon-only usage
+5. **Test visually** to ensure icons render as glyphs, not text

package/templates/angular/.cursor/rules/modus-angular-implementation-guides-short.mdc

@@ -0,0 +1,36 @@
+---
+description: Create comprehensive implementation guides for major feature development in Angular + Vite
+globs: ["**/.cursor/rules/implementation-guides/**/*.md"]
+alwaysApply: true
+---
+
+# Implementation Guides - Short
+
+Create comprehensive implementation guides for major feature development.
+
+## Key Rules
+
+- **Create guides for major features** - Any feature requiring 2+ hours of development
+- **Document before coding** - Plan architecture and approach first
+- **Use required template sections** - Overview, architecture, plan, testing, review
+- **Store in `implementation_guides/`** - Organized by feature name and date
+- **Update status throughout development** - Planning > In Progress > Complete > Archived
+- **Include post-implementation review** - Document lessons learned and improvements
+- **Reference in commits** - Link to implementation guide in commit messages
+
+## When to Create
+
+**Create guides for:**
+- New page/view components with complex functionality
+- New reusable components or design system additions
+- API integrations
+- Features requiring 2+ hours of development
+
+**Skip for:**
+- Simple bug fixes (< 30 minutes)
+- Minor text or styling tweaks
+- Documentation updates
+
+## Reference
+
+For detailed template structure and lifecycle management, fetch the full rule: `modus-angular-implementation-guides`

package/templates/angular/.cursor/rules/modus-angular-implementation-guides.mdc

@@ -0,0 +1,301 @@
+---
+description: Create comprehensive implementation guides for major feature development in Angular + Vite
+globs: ["**/.cursor/rules/implementation-guides/**/*.md"]
+alwaysApply: false
+---
+
+# Implementation Guide Documentation Rules for Angular + Vite
+
+## Pre-Development Documentation Requirements
+
+### MANDATORY: Implementation Guide Creation
+
+**BEFORE starting ANY major feature development, you MUST:**
+
+1. **Create a comprehensive implementation guide** in `/implementation_guides/`
+2. **Document the complete approach** before writing any code
+3. **Get stakeholder review** of the implementation plan
+4. **Update guides with lessons learned** during and after implementation
+
+### What Constitutes a "Major Feature"
+
+**Always create implementation guides for:**
+
+- New page/view components with complex functionality
+- New reusable component libraries or design system additions
+- Integration with external APIs or services
+- Authentication, authorization, or security features
+- Data management patterns (stores, state management)
+- Routing or navigation changes
+- Performance optimization initiatives
+- Accessibility improvements or compliance work
+- Build process, tooling, or infrastructure changes
+- Any feature requiring more than 2 hours of development time
+
+**Skip implementation guides for:**
+
+- Simple bug fixes (< 30 minutes)
+- Minor text or styling tweaks
+- Documentation updates
+- Dependency version updates (unless breaking changes)
+
+## Implementation Guide Structure
+
+### File Location & Naming
+
+```text
+implementation_guides/
+├── feature-name-YYYY-MM-DD.md          # New feature guides
+├── integration-api-name-YYYY-MM-DD.md  # API integration guides
+├── component-library-YYYY-MM-DD.md     # Component development guides
+└── performance-optimization-YYYY-MM-DD.md # Performance guides
+```
+
+**Naming Convention:**
+
+- Use kebab-case for file names
+- Include date for chronological tracking
+- Be descriptive but concise
+
+### Required Implementation Guide Template
+
+```markdown
+# [Feature Name] Implementation Guide
+
+**Date:** YYYY-MM-DD  
+**Author:** [Your Name]  
+**Status:** [Planning | In Progress | Complete | Archived]
+
+## Overview & Objectives
+
+### Problem Statement
+
+- What problem are we solving?
+- Why is this feature needed?
+- What are the success criteria?
+
+### Goals & Requirements
+
+- [ ] Functional requirement 1
+- [ ] Functional requirement 2
+- [ ] Non-functional requirement 1 (performance, accessibility, etc.)
+
+## Technical Architecture
+
+### Component Architecture
+
+- High-level component structure
+- Data flow diagrams
+- State management approach (signals, services)
+
+### Angular-Specific Patterns
+
+- Standalone components used
+- Signal-based state management
+- Service patterns
+- Routing configuration
+
+### Dependencies & Integrations
+
+- New dependencies required
+- External API integrations
+- Modus Web Components usage
+
+### File Structure Changes
+
+```text
+src/app/
+├── components/
+│   └── new-component.component.ts
+├── pages/
+│   └── new-page/
+│       └── new-page.component.ts
+├── services/
+│   └── new-feature.service.ts
+└── app.routes.ts
+```
+
+## Design System Integration
+
+### Modus Components Used
+
+- List specific Modus Web Components
+- Color variables and theming approach
+- Accessibility considerations
+
+## Implementation Plan
+
+### Phase 1: Foundation
+
+- [ ] Task 1
+- [ ] Task 2
+- [ ] Task 3
+
+### Phase 2: Core Features
+
+- [ ] Task 1
+- [ ] Task 2
+
+### Phase 3: Polish & Testing
+
+- [ ] Task 1
+- [ ] Task 2
+
+## Testing Strategy
+
+### Unit Testing
+
+- Components to test
+- Test scenarios
+- Mock requirements
+
+### Integration Testing
+
+- API integration tests
+- Component interaction tests
+
+### Accessibility Testing
+
+- WCAG compliance checklist
+- Screen reader testing
+- Keyboard navigation testing
+
+## Post-Implementation Review
+
+### Lessons Learned
+
+_[Update this section during/after implementation]_
+
+#### What Went Well
+
+-
+
+#### Challenges Encountered
+
+-
+
+#### Solutions & Workarounds
+
+-
+
+#### Future Improvements
+
+-
+```
+
+## Implementation Guide Lifecycle
+
+### Pre-Development Phase
+
+1. **Create Implementation Guide**
+
+   ```bash
+   # Create new guide with proper naming
+   touch implementation_guides/feature-name-$(date +%Y-%m-%d).md
+   ```
+
+2. **Fill Out Complete Template**
+
+   - All sections must be completed before coding begins
+   - Get team/stakeholder review of the plan
+
+### During Implementation Phase
+
+#### Update guides in real-time as you encounter issues
+
+#### When You Encounter Problems
+
+1. **Document the Issue**
+
+   ```markdown
+   #### Challenge: [Brief Description]
+
+   **Date:** YYYY-MM-DD
+   **Problem:** Detailed description of what went wrong
+   **Impact:** How this affected the implementation
+   ```
+
+2. **Document the Solution**
+
+   ```markdown
+   **Solution:** Step-by-step solution implemented
+   **Code Changes:** Link to commits or describe changes
+   **Time Impact:** Additional time required
+   **Prevention:** How to avoid this in future implementations
+   ```
+
+### Quality Standards
+
+**Every implementation guide must:**
+
+- [ ] **Complete Template**: All required sections filled out
+- [ ] **Technical Accuracy**: Architecture matches actual implementation
+- [ ] **Lessons Learned**: Post-implementation section completed
+- [ ] **Performance Data**: Actual metrics recorded
+- [ ] **Accessibility Results**: WCAG compliance documented
+
+## Angular + Vite Specific Considerations
+
+### Component Architecture Patterns
+
+```typescript
+@Component({
+  selector: 'app-new-component',
+  template: `
+    <div class="bg-background text-foreground">
+      @if (isLoading()) {
+        <modus-loader />
+      } @else {
+        <div>{{ content() }}</div>
+      }
+    </div>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class NewComponent {
+  private service = inject(NewFeatureService);
+  
+  readonly isLoading = signal(false);
+  readonly content = signal('');
+}
+```
+
+### State Management Patterns
+
+```typescript
+@Injectable({ providedIn: 'root' })
+export class FeatureService {
+  private readonly featureState = signal(initialState);
+  
+  readonly state = this.featureState.asReadonly();
+  
+  updateState(newState: Partial<FeatureState>): void {
+    this.featureState.update(current => ({ ...current, ...newState }));
+  }
+}
+```
+
+### Routing Patterns
+
+```typescript
+export const routes: Routes = [
+  {
+    path: 'feature',
+    loadComponent: () => import('./feature/feature.component').then(m => m.FeatureComponent),
+  },
+];
+```
+
+## Common Anti-Patterns to Avoid
+
+### Don't Skip Implementation Guides
+
+- **Never start major development without a guide**
+- **Don't create guides after the fact** - they lose their planning value
+- **Don't leave guides incomplete** - they become technical debt
+
+### Don't Create Shallow Guides
+
+- **Avoid vague descriptions** - be specific about technical approaches
+- **Don't skip the architecture section** - future developers need this context
+- **Don't ignore lessons learned** - this is the most valuable section

package/templates/angular/.cursor/rules/modus-angular-integration-short.mdc

@@ -0,0 +1,60 @@
+---
+description: Integration patterns for Modus Web Components with Angular standalone wrapper components
+globs: ["**/*.ts", "**/*.html", "**/*.scss", "**/*.css"]
+alwaysApply: true
+---
+
+# Modus Angular Integration - Short
+
+Essential integration patterns for Modus Web Components with Angular.
+
+## Key Rules
+
+- **Use wrapper components** - Always use `<modus-button>`, not `<modus-wc-button>` directly
+- **Signal-based API** - Use `input()`, `output()`, `signal()`, `computed()`
+- **OnPush change detection** - All components use `ChangeDetectionStrategy.OnPush`
+- **Event handling** - Extract `event.detail` from CustomEvent when needed
+- **Modern control flow** - Use `@if`, `@for`, `@switch`, not `*ngIf`, `*ngFor`
+- **inject() for DI** - Use `inject()` function, not constructor injection
+
+## Wrapper Pattern
+
+```typescript
+@Component({
+  selector: 'modus-button', // Users use <modus-button>
+  template: `
+    <modus-wc-button
+      [color]="color()"
+      [variant]="variant()"
+      (buttonClick)="handleButtonClick($event)"
+    >
+      <ng-content />
+    </modus-wc-button>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ModusButtonComponent {
+  readonly color = input<ButtonColor>('primary');
+  readonly buttonClick = output<MouseEvent | KeyboardEvent>();
+
+  handleButtonClick(event: CustomEvent<MouseEvent | KeyboardEvent>): void {
+    this.buttonClick.emit(event.detail);
+  }
+}
+```
+
+## Template Usage
+
+```html
+<!-- CORRECT: Use wrapper component -->
+<modus-button [color]="'primary'" (buttonClick)="handleClick($event)">
+  Click Me
+</modus-button>
+
+<!-- WRONG: Never use web component directly -->
+<modus-wc-button>Don't do this</modus-wc-button>
+```
+
+## Reference
+
+For detailed integration patterns and component list, fetch the full rule: `modus-angular-integration`