@julianoczkowski/create-trimble-app 2.0.0

package/templates/react/.cursor/rules/development-workflow-react.mdc

@@ -0,0 +1,292 @@
+---
+description: Essential linting and quality checks for React + Vite development
+globs: ["**/*.tsx", "**/*.ts", "**/*.css"]
+alwaysApply: false
+---
+
+# Development Workflow & Quality Assurance for React + Vite
+
+## 🚀 **MANDATORY: Always Run Linting Commands During Development**
+
+**CRITICAL**: Before making any code changes, always run these linting commands to ensure design system compliance:
+
+```bash
+# 🎨 Check for inline styles that should use Tailwind classes
+npm run lint:styles
+
+# 🎨 Check for non-Modus colors (hex, RGB, Tailwind colors)
+npm run lint:colors
+
+# 🎨 Check for non-Modus icons (Font Awesome, Material Icons, etc.)
+npm run lint:icons
+
+# 🎨 Check for semantic HTML elements (h1, section, header, etc.)
+npm run lint:semantic
+
+# 🎨 Check for border violations (Tailwind color classes in borders)
+npm run lint:borders
+
+# 🔍 Run all linting checks at once
+npm run lint:all
+```
+
+## 📋 **Pre-Development Checklist**
+
+Before starting any new feature or component:
+
+1. **✅ Run Design System Lints**:
+
+   ```bash
+   npm run lint:styles    # Check inline styles
+   npm run lint:colors    # Check color usage
+   npm run lint:icons     # Check icon usage
+   npm run lint:semantic  # Check semantic HTML elements
+   npm run lint:borders   # Check border violations
+   ```
+
+2. **✅ Verify Theme Compatibility**:
+
+   - Test with all 6 Modus themes (classic/modern, light/dark, connect themes)
+   - Ensure components work in both light and dark modes
+
+3. **✅ Check Component Architecture**:
+   - Use single configurable components (not multiple specific ones)
+   - Follow Modus Web Components patterns
+   - Use proper event handling with refs
+
+## 🔄 **Development Workflow**
+
+**Every time you make changes:**
+
+1. **Make your changes** to components/pages
+2. **Run linting commands** to catch violations early:
+   ```bash
+   npm run lint:all
+   ```
+3. **Fix any violations** before continuing
+4. **Test with Chrome DevTools** to validate visual changes
+5. **Commit only when all lints pass**
+
+## 🚨 **Common Violations to Watch For**
+
+### Inline Styles (lint:styles):
+
+```tsx
+// ❌ VIOLATION: Inline styles
+style={{ backgroundColor: "var(--modus-wc-color-base-page)" }}
+style={{ marginRight: "8px" }}
+style={{ color: "var(--modus-wc-color-base-content)" }}
+
+// ✅ CORRECT: Tailwind classes
+className="bg-background mr-2 text-foreground"
+```
+
+### Color Usage (lint:colors):
+
+```tsx
+// ❌ VIOLATION: Non-Modus colors
+style={{ backgroundColor: "#ffffff" }}
+className="bg-blue-500 text-red-400"
+
+// ✅ CORRECT: Modus design system colors
+className="bg-background text-foreground"
+```
+
+### Icon Usage (lint:icons):
+
+```tsx
+// ❌ VIOLATION: Non-Modus icons
+import { FaHome } from 'react-icons/fa';
+<i className="fa fa-home"></i>
+
+// ✅ CORRECT: Modus icons
+<i className="modus-icons">home</i>
+```
+
+### Semantic HTML (lint:semantic):
+
+```tsx
+// ❌ VIOLATION: Semantic HTML elements
+<h1 className="text-4xl font-bold">Title</h1>
+<section className="mb-8 p-4">Content</section>
+<header className="bg-background">Header</header>
+
+// ✅ CORRECT: Div elements with Tailwind classes
+<div className="text-4xl font-bold">Title</div>
+<div className="mb-8 p-4">Content</div>
+<div className="bg-background">Header</div>
+```
+
+### Border Violations (lint:borders):
+
+```tsx
+// ❌ VIOLATION: Tailwind color classes in borders
+<div className="border border-red-500">Error message</div>
+<div className="border-2 border-green-500">Success message</div>
+
+// ✅ CORRECT: Design system border utilities
+<div className="border-destructive">Error message</div>
+<div className="border-thick-success">Success message</div>
+```
+
+## 🎯 **Quality Gates**
+
+**Pre-commit Requirements:**
+
+- [ ] ✅ `npm run lint:styles` passes (0 violations)
+- [ ] ✅ `npm run lint:colors` passes (0 violations)
+- [ ] ✅ `npm run lint:icons` passes (0 violations)
+- [ ] ✅ `npm run lint:semantic` passes (0 violations)
+- [ ] ✅ `npm run lint:borders` passes (0 violations)
+- [ ] ✅ All 6 themes tested (classic/modern, light/dark, connect themes)
+- [ ] ✅ Chrome DevTools validation completed
+- [ ] ✅ No console errors or warnings
+
+## 🛠️ **Quick Fix Commands**
+
+**If you get violations, use these patterns:**
+
+```bash
+# Fix inline styles
+# Replace: style={{ backgroundColor: "var(--modus-wc-color-base-page)" }}
+# With: className="bg-background"
+
+# Fix colors
+# Replace: style={{ color: "#000000" }}
+# With: className="text-foreground"
+
+# Fix icons
+# Replace: <i className="fa fa-home"></i>
+# With: <i className="modus-icons">home</i>
+
+# Fix borders
+# Replace: className="border border-red-500"
+# With: className="border-destructive"
+```
+
+## 📊 **Linting Results Interpretation**
+
+### ✅ Success:
+
+```
+✅ All files are using Tailwind classes correctly!
+✅ All files are using Modus colors correctly!
+✅ All files are using Modus icons correctly!
+✅ All files are using div elements with Tailwind classes correctly!
+✅ All files are using design system border utilities correctly!
+```
+
+### ❌ Violations Found:
+
+```
+❌ Found 5 inline style violations:
+📄 src/components/MyComponent.tsx:
+  18:15 - Inline style detected: "style={{ backgroundColor: "var(--modus-wc-color-base-page)" }}"
+   💡 Suggestion: bg-background
+```
+
+**Fix each violation by following the suggestions provided.**
+
+## 🎯 **AI Assistant Instructions**
+
+**When working on this project, ALWAYS:**
+
+1. **Run linting commands before suggesting any code changes**
+2. **Include linting commands in your development workflow**
+3. **Validate changes with Chrome DevTools MCP**
+4. **Ensure all 6 Modus themes work correctly**
+5. **Follow the single configurable component pattern**
+6. **Use proper Modus Web Components event handling**
+7. **Maintain design system compliance at all times**
+
+## 🚀 **Vite + React Specific Workflow**
+
+### Development Server:
+
+```bash
+# Start development server
+npm run dev
+
+# Build for production
+npm run build
+
+# Preview production build
+npm run preview
+```
+
+### Hot Module Replacement (HMR):
+
+- Vite provides instant HMR for React components
+- Changes to components update immediately
+- State is preserved during HMR
+- CSS changes are applied instantly
+
+### TypeScript Integration:
+
+```bash
+# Type checking
+npm run type-check
+
+# All linting including TypeScript
+npm run lint:all
+```
+
+## 🔧 **React + Vite Best Practices**
+
+### Component Development:
+
+1. **Use functional components** with hooks
+2. **No "use client" directive needed** (everything is client-side)
+3. **Use React Router** for navigation
+4. **Leverage Vite's fast HMR** for rapid development
+
+### File Organization:
+
+```
+src/
+├── components/          # Reusable components
+├── pages/              # Page components
+├── contexts/           # React contexts
+├── hooks/              # Custom hooks
+├── config/             # Configuration files
+└── main.tsx            # Entry point
+```
+
+### Import Patterns:
+
+```tsx
+// ✅ CORRECT: Use import.meta.env for environment variables
+const apiUrl = import.meta.env.VITE_API_URL;
+
+// ✅ CORRECT: Import React components
+import { useState, useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+
+// ✅ CORRECT: Import Modus components
+import { ModusWcButton } from "@trimble-oss/moduswebcomponents-react";
+```
+
+## 📋 **Development Checklist**
+
+**Before Starting Development:**
+
+- [ ] ✅ **Run linting commands** to check current state
+- [ ] ✅ **Start dev server** (`npm run dev`)
+- [ ] ✅ **Open Chrome DevTools** for testing
+- [ ] ✅ **Verify theme switching** works
+
+**During Development:**
+
+- [ ] ✅ **Run linting after each change**
+- [ ] ✅ **Test in Chrome DevTools**
+- [ ] ✅ **Verify all themes work**
+- [ ] ✅ **Check responsive design**
+
+**Before Committing:**
+
+- [ ] ✅ **All linting passes** (`npm run lint:all`)
+- [ ] ✅ **No console errors**
+- [ ] ✅ **All themes tested**
+- [ ] ✅ **Performance validated**
+
+**Remember**: Quality gates are non-negotiable. All linting commands must pass before any code is considered complete.

package/templates/react/.cursor/rules/implementation-guides-react-short.mdc

@@ -0,0 +1,23 @@
+---
+description: Create comprehensive implementation guides for major feature development
+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, deployment, documentation, review
+- **Store in `.cursor/rules/implementation-guides/`** - Organized by feature name
+- **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
+
+## Reference
+
+For detailed template structure, lifecycle management, and implementation guide best practices, fetch the full rule: `implementation-guides-react`