@julianoczkowski/create-trimble-app 2.0.0

package/templates/angular/tsconfig.app.json

@@ -0,0 +1,15 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/app",
+    "types": []
+  },
+  "include": [
+    "src/**/*.ts"
+  ],
+  "exclude": [
+    "src/**/*.spec.ts"
+  ]
+}

package/templates/angular/tsconfig.json

@@ -0,0 +1,35 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "skipLibCheck": true,
+    "isolatedModules": true,
+    "experimentalDecorators": true,
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "esnext",
+    "moduleResolution": "bundler"
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "typeCheckHostBindings": true,
+    "strictTemplates": true
+  },
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ]
+}

package/templates/angular/tsconfig.spec.json

@@ -0,0 +1,14 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/spec",
+    "types": [
+      "jasmine"
+    ]
+  },
+  "include": [
+    "src/**/*.ts"
+  ]
+}

package/templates/config.json

@@ -0,0 +1,23 @@
+{
+  "frameworks": {
+    "react": {
+      "name": "React + Vite + Modus 2.0 Components",
+      "description": "Theming + Icons + MCP + Skills",
+      "supportsTypeScript": true,
+      "badge": "●",
+      "note": "Most Popular"
+    },
+    "angular": {
+      "name": "Angular + Modus 2.0 Web Components",
+      "description": "Theming + Icons + MCP + Skills",
+      "supportsTypeScript": true,
+      "badge": "■",
+      "note": "Enterprise Grade"
+    }
+  },
+  "meta": {
+    "configVersion": "2.0.0",
+    "templatesIncluded": true,
+    "lastUpdated": "2026-01-28"
+  }
+}

package/templates/react/.cursor/commands/remove-dev-content.md

@@ -0,0 +1,311 @@
+# Remove Dev Content
+
+Remove all development and exploration content from this Modus React app, preparing it for production use while keeping all core Modus wrapper components intact.
+
+## Overview
+
+This command removes:
+- Dev Panel (floating development panel)
+- All 48 component demo pages
+- Reference pages (colors, icons, components gallery)
+- Dev-only helper components
+- Icon reference data (`src/data/modusIcons.ts`)
+
+And updates:
+- Icon names validation script to handle missing icon reference file gracefully
+
+While preserving:
+- All 45 Modus wrapper components
+- Theme system (ThemeProvider, useTheme)
+- Core infrastructure (ModusProvider, main.tsx, index.css)
+
+---
+
+## Step 1: Delete Entire Directories
+
+Remove these directories completely:
+
+```
+src/demos/           # 48 component demo pages
+src/dev/             # Dev panel infrastructure
+src/dev-pages/       # Colors, Icons, Components gallery pages
+src/data/            # modusIcons.ts (only used by IconsPage)
+src/config/          # Deprecated routes.ts
+```
+
+---
+
+## Step 2: Delete Dev-Only Files from src/components/
+
+Remove these 4 files from `src/components/`:
+
+```
+src/components/DemoPage.tsx
+src/components/DemoExample.tsx
+src/components/ThemeSwitcherDropdown.tsx
+src/components/ThemeToggleSimple.tsx
+```
+
+---
+
+## Step 3: Update src/App.tsx
+
+Remove all dev panel imports and usage. The file should become:
+
+```tsx
+import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
+import ModusProvider from "./components/ModusProvider";
+import { ThemeProvider } from "./contexts/ThemeContext";
+
+// Your pages
+import HomePage from "./pages/HomePage";
+
+/**
+ * Main Application Component.
+ *
+ * Structure:
+ * - ThemeProvider: Manages Modus themes (6 themes available)
+ * - ModusProvider: Provides Modus Web Components CSS
+ * - Router: React Router for navigation
+ *
+ * Add your routes below.
+ */
+function App() {
+  return (
+    <ThemeProvider>
+      <ModusProvider>
+        <Router>
+          <Routes>
+            {/* Your application routes */}
+            <Route path="/" element={<HomePage />} />
+            {/* Example: <Route path="/about" element={<AboutPage />} /> */}
+          </Routes>
+        </Router>
+      </ModusProvider>
+    </ThemeProvider>
+  );
+}
+
+export default App;
+```
+
+**What was removed:**
+- Import: `import { DevPanelProvider, DevPanel, DevRoutes, isDevPanelEnabled } from "./dev";`
+- Variable: `const showDevPanel = isDevPanelEnabled();`
+- Component: `<DevPanelProvider>` wrapper
+- Route: `{showDevPanel && <Route path="/dev/*" element={<DevRoutes />} />}`
+- Component: `{showDevPanel && <DevPanel />}`
+
+---
+
+## Step 4: Update src/pages/HomePage.tsx
+
+Remove all Dev Panel references from the HomePage. Specifically remove:
+
+1. The "Open Dev Panel" button (the ModusButton that dispatches a keyboard event)
+2. The "Use the Dev Panel" getting started item mentioning Ctrl+Shift+D
+3. Any references to the Dev Panel keyboard shortcut
+
+Keep the overall page structure as a starting template for the user's app.
+
+**Example of cleaned HomePage structure:**
+
+```tsx
+import ModusButton from "../components/ModusButton";
+
+export default function HomePage() {
+  return (
+    <div className="min-h-screen flex flex-col bg-background">
+      <div className="flex-1 flex flex-col items-center p-8">
+        <div className="max-w-4xl w-full space-y-8">
+          {/* Header */}
+          <div className="text-center space-y-4">
+            <div className="flex items-center justify-center gap-3">
+              <i className="modus-icons text-5xl text-primary">launch</i>
+            </div>
+            <div className="text-4xl font-bold text-foreground">
+              Modus React App
+            </div>
+            <div className="text-xl text-foreground-60">
+              A production-ready React boilerplate with Modus Design System
+              integration.
+            </div>
+          </div>
+
+          {/* Getting Started - without Dev Panel references */}
+          <div className="bg-card border-default rounded-lg p-6 space-y-4">
+            <div className="text-lg font-semibold text-foreground">
+              Getting Started
+            </div>
+            <div className="space-y-4 text-foreground-80">
+              <div className="flex gap-3">
+                <div className="flex-shrink-0 w-6 h-6 rounded-full bg-primary text-primary-foreground flex items-center justify-center text-sm font-bold">
+                  1
+                </div>
+                <div>
+                  <div className="font-medium text-foreground">
+                    Build Your App
+                  </div>
+                  <div className="text-sm text-foreground-60">
+                    Start developing in src/pages/ - add your routes in App.tsx.
+                  </div>
+                </div>
+              </div>
+              <div className="flex gap-3">
+                <div className="flex-shrink-0 w-6 h-6 rounded-full bg-primary text-primary-foreground flex items-center justify-center text-sm font-bold">
+                  2
+                </div>
+                <div>
+                  <div className="font-medium text-foreground">
+                    Use Modus Components
+                  </div>
+                  <div className="text-sm text-foreground-60">
+                    Import components from src/components/ to build your UI.
+                  </div>
+                </div>
+              </div>
+              <div className="flex gap-3">
+                <div className="flex-shrink-0 w-6 h-6 rounded-full bg-primary text-primary-foreground flex items-center justify-center text-sm font-bold">
+                  3
+                </div>
+                <div>
+                  <div className="font-medium text-foreground">Deploy</div>
+                  <div className="text-sm text-foreground-60">
+                    Run npm run build for a production-ready bundle.
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Keep other sections as needed */}
+        </div>
+      </div>
+    </div>
+  );
+}
+```
+
+---
+
+## Step 5: Update Icon Names Validation Script
+
+Since `src/data/modusIcons.ts` is deleted (it was only used by the dev panel's IconsPage), we need to update the icon names validation script to handle the missing file gracefully.
+
+Update `scripts/check-icon-names.js` to check if the file exists before reading it:
+
+**Find this section near the top of the file:**
+
+```javascript
+import fs from "fs";
+import path from "path";
+import { glob } from "glob";
+
+// Read and parse the Modus icons data from TypeScript file
+const iconsContent = fs.readFileSync(
+  path.join(process.cwd(), "src/data/modusIcons.ts"),
+  "utf8"
+);
+```
+
+**Replace it with:**
+
+```javascript
+import fs from "fs";
+import path from "path";
+import { glob } from "glob";
+
+// Colors for console output
+const colors = {
+  red: "\x1b[31m",
+  green: "\x1b[32m",
+  yellow: "\x1b[33m",
+  blue: "\x1b[34m",
+  magenta: "\x1b[35m",
+  cyan: "\x1b[36m",
+  white: "\x1b[37m",
+  reset: "\x1b[0m",
+  bold: "\x1b[1m",
+  dim: "\x1b[2m",
+};
+
+// Check if modusIcons.ts exists (it may have been removed in production builds)
+const iconsFilePath = path.join(process.cwd(), "src/data/modusIcons.ts");
+if (!fs.existsSync(iconsFilePath)) {
+  console.log(
+    `${colors.bold}${colors.yellow}⚠️  Icon names validation skipped:${colors.reset}`
+  );
+  console.log(
+    `${colors.dim}The icon reference file (src/data/modusIcons.ts) is not present.${colors.reset}`
+  );
+  console.log(
+    `${colors.dim}This is normal if dev content has been removed.${colors.reset}\n`
+  );
+  process.exit(0);
+}
+
+// Read and parse the Modus icons data from TypeScript file
+const iconsContent = fs.readFileSync(iconsFilePath, "utf8");
+```
+
+**Also remove the duplicate colors definition** that appears later in the file (around line 46-58), since we've moved it to the top.
+
+**What this does:**
+- Moves the `colors` object definition to the top (before it's used)
+- Checks if `modusIcons.ts` exists before trying to read it
+- Gracefully skips validation with an informative message if the file is missing
+- Exits with code 0 (success) so `npm run lint:all` continues without errors
+
+---
+
+## Files to KEEP (Do Not Touch)
+
+These are core production files that must remain:
+
+### Modus Wrapper Components (45 files in src/components/)
+- `ModusAccordion.tsx` through `ModusUtilityPanel.tsx`
+- `ModusProvider.tsx` (required for Modus CSS)
+
+### Theme System
+- `src/contexts/ThemeContext.tsx`
+- `src/contexts/ThemeContextData.tsx`
+- `src/hooks/useTheme.ts`
+
+### Core Infrastructure
+- `src/main.tsx`
+- `src/index.css`
+- `src/App.css`
+- `src/vite-env.d.ts`
+
+### Configuration
+- `vite.config.ts`
+- `package.json`
+- `tsconfig.json` and related
+- `.env.development` / `.env.production`
+
+### Cursor Rules and Skills
+- `.cursor/rules/` (all files)
+- `.cursor/skills/` (all files)
+
+---
+
+## Verification Checklist
+
+After removal, verify:
+
+- [ ] `npm run dev` starts without errors
+- [ ] `npm run build` completes successfully
+- [ ] `npm run type-check` passes without errors
+- [ ] `npm run lint:all` completes successfully (icon names validation will skip gracefully)
+- [ ] No import errors in App.tsx
+- [ ] HomePage renders without Dev Panel button
+- [ ] All Modus wrapper components are still present
+- [ ] Theme switching still works (if you kept ThemeSwitcher component usage)
+
+---
+
+## Notes
+
+- The Dev Panel is automatically hidden in production builds anyway (controlled by VITE_DEV_PANEL env var)
+- This command is for users who want a clean codebase without any dev exploration code
+- All Modus wrapper components remain fully functional for building your app

package/templates/react/.cursor/mcp.json

@@ -0,0 +1,13 @@
+{
+  "mcpServers": {
+    "context7": {
+      "url": "https://mcp.context7.com/mcp",
+      "headers": {}
+    },
+
+    "modus-docs": {
+      "command": "npx",
+      "args": ["-y", "@julianoczkowski/mcp-modus"]
+    }
+  }
+}

package/templates/react/.cursor/rules/README.md

@@ -0,0 +1,240 @@
+# Cursor Rules Index
+
+This directory contains all Cursor rules for the Modus React application. Rules provide persistent, reusable context to guide AI assistance.
+
+## Rule Structure
+
+### Rule Types
+
+We use a **short/full rule pattern** for optimal performance and clarity:
+
+1. **Short Rules** (`*-short.mdc`):
+   - `alwaysApply: true` - Always included in chat context
+   - Concise summaries (<50 lines)
+   - Essential patterns only
+   - Reference full rules for details
+
+2. **Full Rules** (`*.mdc` without `-short`):
+   - `alwaysApply: false` - Apply intelligently based on context
+   - Detailed patterns and examples (<500 lines recommended)
+   - Comprehensive guidance
+   - Activated by file patterns (`globs`) or description matching
+
+### Rule Application
+
+Rules are applied in this order (per Cursor documentation):
+
+1. **Team Rules** (if applicable)
+2. **Project Rules** (this directory)
+   - Always Apply rules (`alwaysApply: true`)
+   - Apply Intelligently rules (`alwaysApply: false` with descriptions)
+   - Apply to Specific Files (via `globs` patterns)
+3. **User Rules** (global preferences)
+
+### Rule File Format
+
+All rules use frontmatter metadata:
+
+```yaml
+---
+description: Brief contextual description for intelligent application
+globs: ["**/*.tsx", "**/*.ts"]  # File patterns that trigger this rule
+alwaysApply: false  # true = always apply, false = apply intelligently
+---
+```
+
+## Rule Categories
+
+### Component-Specific Rules
+
+Rules for specific Modus components with targeted file patterns:
+
+| Rule | Short | Full | Description |
+|------|-------|------|-------------|
+| Accordion | `modus-accordion-state-management-react-short.mdc` | `modus-accordion-state-management-react.mdc` | State management patterns |
+| Button Group | `modus-button-group-usage-react-short.mdc` | `modus-button-group-usage-react.mdc` | Button group styling patterns |
+| Checkbox | `modus-checkbox-value-inversion-react-short.mdc` | `modus-checkbox-value-inversion-react.mdc` | Value inversion bug handling |
+| Modal | `modus-modal-implementation-react-short.mdc` | `modus-modal-implementation-react.mdc` | Modal implementation patterns |
+| Navbar + Side Nav | `modus-navbar-side-navigation-react-short.mdc` | `modus-navbar-side-navigation-react.mdc` | Navigation integration |
+| Select/Dropdown | `modus-select-vs-dropdown-menu-react-short.mdc` | `modus-select-vs-dropdown-menu-react.mdc` | Dropdown menu patterns |
+
+**Globs Pattern**: `["**/components/Modus[Component]*.tsx", "**/demos/**/page.tsx"]`
+
+### Design System Rules
+
+Rules for design system usage (colors, icons, borders, etc.):
+
+| Rule | Short | Full | Description |
+|------|-------|------|-------------|
+| Colors | `modus-color-usage-react-short.mdc` | `modus-color-usage-react.mdc` | Color system usage |
+| Icons | `modus-icons-react-short.mdc` | `modus-icons-react.mdc` | Icon usage patterns |
+| Borders | `border-usage-guidelines-short.mdc` | `border-usage-guidelines.mdc` | Border utilities |
+| Opacity | `modus-opacity-utilities-react-short.mdc` | `modus-opacity-utilities-react.mdc` | Opacity utilities |
+| Semantic HTML | `modus-semantic-html-react-short.mdc` | `modus-semantic-html-react.mdc` | HTML element usage |
+| Tailwind | `modus-tailwind-usage-react-short.mdc` | `modus-tailwind-usage-react.mdc` | Tailwind integration |
+| Themes | `modus-themes-react-short.mdc` | `modus-themes-react.mdc` | Theme implementation |
+
+**Globs Pattern**: `["**/*.tsx", "**/*.ts"]` or `["**/*.tsx", "**/*.css"]`
+
+### Integration & Best Practices
+
+Rules for React integration and development patterns:
+
+| Rule | Short | Full | Description |
+|------|-------|------|-------------|
+| Integration | `modus-react-integration-short.mdc` | `modus-react-integration.mdc` | React + Modus integration |
+| Best Practices | `modus-react-best-practices-short.mdc` | `modus-react-best-practices.mdc` | React best practices |
+| Key Warnings | `modus-react-key-warnings-short.mdc` | `modus-react-key-warnings.mdc` | React key prop patterns |
+| Essentials | N/A | `modus-react-essentials.mdc` | Comprehensive essentials |
+
+**Globs Pattern**: `["**/*.tsx", "**/*.ts"]`
+
+### Workflow & Testing
+
+Rules for development workflow and testing:
+
+| Rule | Short | Full | Description |
+|------|-------|------|-------------|
+| Development Workflow | `development-workflow-react-short.mdc` | `development-workflow-react.mdc` | Linting and quality checks |
+| Chrome DevTools | `chrome-devtools-testing-react-short.mdc` | `chrome-devtools-testing-react.mdc` | Browser testing patterns |
+| Implementation Guides | `implementation-guides-react-short.mdc` | `implementation-guides-react.mdc` | Feature development guides |
+
+**Globs Pattern**: `["**/*.tsx", "**/*.ts", "**/*.css"]` or specific patterns
+
+### UX Rules
+
+Rules in `ux/` subdirectory:
+
+| Rule | Description |
+|------|-------------|
+| `ux-ui-foundations.mdc` | UI/UX foundations with Modus 2 + Tailwind |
+| `gestalt-laws-detailed.mdc` | Gestalt Laws implementation guide |
+
+**Globs Pattern**: `["**/*.tsx", "**/*.ts"]`
+
+### Reference Files
+
+Reference documentation (not rules, but referenced by rules):
+
+| File | Purpose |
+|------|---------|
+| `modus-icon-names.mdc` | Complete list of valid Modus icon names |
+| `modus-components-reference.mdc` | Component reference guide |
+
+## Using Rules
+
+### Automatic Application
+
+- **Short rules** (`alwaysApply: true`) are always included
+- **Full rules** apply when:
+  - File matches `globs` pattern
+  - Description matches context
+  - Agent determines relevance
+
+### Manual Application
+
+Reference rules in chat using `@` mentions:
+
+```
+@modus-modal-implementation-react How do I implement a modal?
+@modus-color-usage-react What colors should I use?
+```
+
+### Referencing Rules in Rules
+
+Rules can reference other rules or files:
+
+```markdown
+For detailed patterns, see: `modus-button-group-usage-react`
+For icon names, see: `modus-icon-names`
+```
+
+## Rule Best Practices
+
+Based on [Cursor documentation](https://cursor.com/docs/context/rules):
+
+### ✅ Do
+
+- Keep rules focused and actionable
+- Provide concrete examples
+- Reference files instead of copying contents
+- Keep rules under 500 lines (split if needed)
+- Use clear, specific descriptions
+- Cross-reference related rules
+
+### ❌ Don't
+
+- Copy entire style guides (use linters)
+- Document every possible command
+- Add instructions for rare edge cases
+- Duplicate what's in your codebase
+
+## Current Rule Status
+
+### Rule Length Compliance
+
+⚠️ **Rules exceeding 500 lines** (recommended limit):
+
+- `modus-modal-implementation-react.mdc`: 831 lines
+- `modus-react-key-warnings.mdc`: 805 lines
+- `modus-tailwind-usage-react.mdc`: 642 lines
+- `modus-react-integration.mdc`: 509 lines
+- `modus-react-best-practices.mdc`: 508 lines
+- `modus-themes-react.mdc`: 506 lines
+
+**Recommendation**: Consider splitting these into focused sub-rules.
+
+### Rule Coverage
+
+- ✅ All short rules have `alwaysApply: true`
+- ✅ All full rules have `alwaysApply: false`
+- ✅ All rules have `description:` and `globs:`
+- ✅ Descriptions match between short and full rules
+- ✅ References point to correct full rules
+
+## Quick Reference
+
+### Most Common Rules
+
+1. **Design System Colors**: `modus-color-usage-react-short.mdc` (always applied)
+2. **Icons**: `modus-icons-react-short.mdc` (always applied)
+3. **Component Patterns**: Component-specific rules apply when working with those components
+4. **React Integration**: `modus-react-integration.mdc` (applies intelligently)
+
+### Finding Rules
+
+- **Component issues?** → Check component-specific rules
+- **Styling questions?** → Check design system rules
+- **React patterns?** → Check integration/best practices rules
+- **Workflow help?** → Check workflow/testing rules
+
+## Maintenance
+
+### Adding New Rules
+
+1. Create short rule (`*-short.mdc`) with `alwaysApply: true`
+2. Create full rule (`.mdc`) with `alwaysApply: false`
+3. Add `description:` and `globs:` to both
+4. Update this README with new rule entry
+5. Ensure descriptions match between short and full
+
+### Updating Rules
+
+1. Update short rule summary
+2. Update full rule details
+3. Keep descriptions synchronized
+4. Verify globs patterns are appropriate
+5. Test rule application
+
+### Rule Naming Convention
+
+- Short rules: `[name]-react-short.mdc`
+- Full rules: `[name]-react.mdc`
+- Reference files: `modus-[name].mdc`
+- UX rules: `ux/[name].mdc`
+
+## Related Documentation
+
+- [Cursor Rules Documentation](https://cursor.com/docs/context/rules)
+- [Modus Design System](https://modus-web-components.trimble.com/)
+- [Project CLAUDE.md](../CLAUDE.md) - Project-specific guidance

package/templates/react/.cursor/rules/border-usage-guidelines-short.mdc

@@ -0,0 +1,22 @@
+---
+description: Essential border usage rules for Modus Design System integration
+globs: ["**/*.tsx", "**/*.css"]
+alwaysApply: true
+---
+
+# Border Usage Guidelines - Short
+
+Essential border usage rules for Modus Design System integration.
+
+## Key Rules
+
+- **Use design system border utilities only** - `border-default`, `border-success`, `border-warning`, `border-destructive`, `border-primary`
+- **Never use Tailwind color classes in borders** - No `border-blue-500`, `border-gray-300`, etc.
+- **Use `border-thick` for emphasis** - For important borders and separators
+- **Use directional borders** - `border-t`, `border-b`, `border-l`, `border-r` with design system colors
+- **No inline styles for borders** - Use Tailwind classes exclusively
+- **Context-specific usage** - Cards use `border-default`, alerts use semantic colors, forms use `border-input`
+
+## Reference
+
+For detailed border usage patterns, examples, and advanced techniques, fetch the full rule: `border-usage-guidelines`