@julianoczkowski/create-trimble-app 2.0.0 → 2.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (17) hide show
  1. package/package.json +1 -1
  2. package/templates/angular/AGENTS.MD +377 -0
  3. package/templates/angular/README.md +394 -51
  4. package/templates/react/AGENTS.MD +291 -0
  5. package/templates/react/README.md +376 -602
  6. package/templates/react/amplify.yml +25 -0
  7. package/templates/angular/.vscode/extensions.json +0 -4
  8. package/templates/angular/.vscode/launch.json +0 -20
  9. package/templates/angular/.vscode/tasks.json +0 -42
  10. package/templates/angular/public/angular-icon.svg +0 -12
  11. package/templates/angular/public/favicon.ico +0 -0
  12. package/templates/angular/public/modus-icons.css +0 -49
  13. package/templates/angular/public/vite.svg +0 -1
  14. package/templates/react/.env.production +0 -3
  15. package/templates/react/.vscode/extensions.json +0 -8
  16. package/templates/react/public/react.svg +0 -1
  17. package/templates/react/public/vite.svg +0 -1
package/templates/react/README.md CHANGED
@@ -1,728 +1,502 @@
1
- <!-- ![Modus React + Vite Boilerplate Hero](readme_assets/hero.png) -->
1
+ # Modus React Boilerplate
2
2
 
3
- [![CI](https://github.com/julianoczkowski/modus-react-app/actions/workflows/ci.yml/badge.svg)](https://github.com/julianoczkowski/modus-react-app/actions/workflows/ci.yml)
4
- [![node](https://img.shields.io/badge/node-%3E%3D20.0.0-brightgreen.svg)](https://nodejs.org/)
5
- [![License](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
3
+ ![React](https://img.shields.io/badge/React-19-61DAFB?logo=react&logoColor=white)
4
+ ![Vite](https://img.shields.io/badge/Vite-7-646CFF?logo=vite&logoColor=white)
5
+ ![Tailwind CSS](https://img.shields.io/badge/Tailwind_CSS-v3-06B6D4?logo=tailwindcss&logoColor=white)
6
+ ![TypeScript](https://img.shields.io/badge/TypeScript-5.9-3178C6?logo=typescript&logoColor=white)
7
+ ![Modus](https://img.shields.io/badge/Modus-2.0-00A3E0)
6
8
 
7
- # Modus React + Vite Boilerplate
9
+ A production-ready React 19 + Vite boilerplate with **Trimble Modus Design System** integration, featuring 49 wrapped components, comprehensive dev tools, and enforced design system compliance.
8
10
 
9
- A production-ready React 19 + Vite boilerplate/starter template with Modus 2 Web Components integration, featuring TypeScript support, comprehensive component examples, and modern development practices. Perfect for quickly bootstrapping new applications with the Modus Design System.
10
-
11
- ## Built-in Development Rules
12
-
13
- This boilerplate comes with comprehensive development rules and standards to ensure code quality and consistency:
14
-
15
- ### Always Applied Rules
16
-
17
- - **Color Usage** - Enforces the 9 approved Modus colors and prevents hardcoded values
18
- - **Modus Web Components** - Guidelines for proper component implementation with MCP documentation
19
- - **React Component Creation** - Best practices for React 19 component architecture and CSS patterns
20
-
21
- ### Context-Specific Rules
22
-
23
- - **Modus Icons** - Complete icon system with 500+ validated icon names
24
- - **Chrome DevTools Testing** - Browser debugging integration via MCP for implementation testing
25
-
26
- > **Location:** All rules are stored in `.cursor/rules/` and automatically guide your development workflow through AI assistants.
27
-
28
- <!-- ![Modus React + Vite Boilerplate Teaser](readme_assets/teaser.gif) -->
29
-
30
- ## AI Development Enhanced
31
-
32
- This boilerplate comes pre-configured with powerful AI development tools to supercharge your workflow:
33
-
34
- ### MCP Servers Included
35
-
36
- - **Context7** - Advanced context management for AI assistants
37
- - **Chrome DevTools** - Browser debugging integration via MCP
38
- - **Modus Documentation** - Direct access to complete Modus Web Components documentation through AI
39
-
40
- ### AI Skills (8 Skills)
41
-
42
- Pre-built skills in `.cursor/skills/` for common development tasks:
43
-
44
- - **create-modus-wrapper-component** - Scaffold new Modus component wrappers
45
- - **handle-modus-checkbox-value-bug** - Handle the checkbox value inversion bug
46
- - **implement-modus-modal-with-refs** - Implement modals with forwardRef pattern
47
- - **set-up-modus-event-listeners** - Set up proper useEffect event listeners
48
- - **integrate-modus-icons** - Integrate Modus icons correctly
49
- - **create-modus-form-component** - Create form components with validation
50
- - **fix-modus-component-event-issues** - Debug event handling problems
51
- - **style-modus-components-with-tailwind** - Apply custom border/opacity utilities
52
-
53
- ### Development Rules & Standards
11
+ ---
54
12
 
55
- - **Cursor Rules** - 40+ pre-configured development patterns and best practices
56
- - **Code Quality** - Automated linting, formatting, and type checking
57
- - **AI-Optimized Workflow** - Seamless integration with modern AI coding assistants
13
+ ## Quick Start
58
14
 
59
- > **Note:** The `.cursor/` directory contains MCP server configurations, development rules, and AI skills that enhance your AI-assisted development experience.
15
+ ```bash
16
+ # 1. Install dependencies
17
+ npm install
60
18
 
61
- ### GitHub Copilot Integration
19
+ # 2. Start development server
20
+ npm run dev
62
21
 
63
- This boilerplate includes GitHub Copilot instructions for VS Code and GitHub.com users:
22
+ # 3. Open in browser
23
+ open http://localhost:5173
24
+ ```
64
25
 
65
- - **Repository Instructions** - Located in `.github/copilot-instructions.md` with condensed development guidelines
66
- - **Path-Specific Instructions** - Five specialized instruction files in `.github/instructions/`:
67
- - `components.instructions.md` - Wrapper component patterns, event handling
68
- - `demos.instructions.md` - Demo page structure and examples
69
- - `pages.instructions.md` - Application page patterns
70
- - `styles.instructions.md` - Custom CSS utilities and design system
71
- - `typescript.instructions.md` - TypeScript patterns and event types
72
- - **Auto-Applied** - GitHub Copilot automatically reads these instructions to provide context-aware suggestions
26
+ Press <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>D</kbd> to open the **Dev Panel** and explore components, themes, and icons.
73
27
 
74
- > **Location:** All GitHub Copilot instructions are in `.github/copilot-instructions.md` and `.github/instructions/*.instructions.md`
28
+ ---
75
29
 
76
30
  ## What's Included
77
31
 
78
- This boilerplate provides a complete foundation for building React applications with Modus Web Components:
32
+ | Feature | Description |
33
+ | ------------------------- | -------------------------------------------------------------------------------------- |
34
+ | **49 Wrapper Components** | React wrappers for all Modus Web Components with TypeScript support |
35
+ | **48 Component Demos** | Interactive demos organized by category (Display, Feedback, Forms, Layout, Navigation) |
36
+ | **Dev Panel** | Floating panel with theme switcher, color palette, icon browser, and component gallery |
37
+ | **8 Lint Scripts** | Automated design system compliance checking (colors, icons, borders, opacity, styles) |
38
+ | **40+ AI Rules** | Cursor/Copilot rules for guided development with Modus patterns |
39
+ | **8 AI Skills** | Pre-built skills for common Modus development tasks |
40
+ | **6 Themes** | Classic, Modern, and Connect themes in light/dark variants |
41
+ | **Pre-commit Hooks** | Automatic linting on every commit via Husky |
79
42
 
80
- - **React 19 + Vite** - Modern framework with SWC for ultra-fast builds and full type safety
81
- - **Modus 2 Web Components** - Complete integration with the latest Modus design system
82
- - **49 Wrapper Components** - Pre-built React wrappers for all Modus components
83
- - **48 Component Demos** - Built-in interactive demos for every component
84
- - **Standard Icon Usage** - Official Modus icon implementation with CDN delivery (500+ icons)
85
- - **Theme Switching** - Support for all 6 Modus themes (Classic/Modern, Light/Dark, Connect)
86
- - **Accessibility** - WCAG 2.1 AA compliant with proper ARIA support
87
- - **Performance Optimized** - Vite's lightning-fast HMR and optimized builds
88
- - **Development Tools** - ESLint, TypeScript, comprehensive linting scripts
89
- - **Production Ready** - Optimized build configuration and deployment setup
90
- - **Dev Panel** - Floating development panel with theme switcher and demo navigation
91
- - **Icon Gallery** - Complete icon showcase with click-to-copy functionality
92
- - **Color Palette** - Visual reference for all 9 design system colors
93
- - **AI Integration** - 40+ Cursor rules, 8 AI skills, and GitHub Copilot instructions
94
-
95
- ## Figma to Code Integration
96
-
97
- ![Modus Figma MCP](readme_assets/modus_figma_mcp.png)
98
-
99
- If you're working with Figma designs and want AI-assisted coding that understands your design tokens and components, check out the official Modus Figma MCP integration. This powerful tool bridges the gap between design and development by providing direct access to your Figma designs through AI assistants.
100
-
101
- **Learn more:** [Modus Figma MCP Integration Guide](https://trimble-oss.github.io/modus-wc-2.0/main/?path=/docs/documentation-modus-figma-mcp-integration-guide--docs)
102
-
103
- > **Perfect for:** Design-to-code workflows, maintaining design system consistency, and accelerating development with AI-powered Figma integration.
104
-
105
- ## Getting Started
106
-
107
- ![Modus React + Vite Boilerplate Getting Started](readme_assets/getting_started_header.png)
108
-
109
- ### Prerequisites
43
+ ---
110
44
 
111
- - Node.js 20+ (required for React 19 compatibility)
112
- - npm or yarn
45
+ ## Tech Stack
113
46
 
114
- ### Installation
47
+ | Technology | Version | Package |
48
+ | ---------------------- | ------------- | ---------------------------------------- |
49
+ | React | 19.1.1 | `react` |
50
+ | Vite | 7.1.7 | `vite` |
51
+ | Modus Web Components | 1.0.6-react19 | `@trimble-oss/moduswebcomponents-react` |
52
+ | Modus Icons | 1.18.1 | `@trimble-oss/modus-icons` |
53
+ | Tailwind CSS | 3.4.18 | `tailwindcss` |
54
+ | TypeScript | 5.9.3 | `typescript` |
55
+ | React Router | 7.9.4 | `react-router-dom` |
115
56
 
116
- 1. **Clone or use this template:**
57
+ ---
117
58
 
118
- ```bash
119
- # Clone the repository
120
- git clone <your-repo-url> my-modus-app
121
- cd my-modus-app
59
+ ## Project Structure
122
60
 
123
- # Or use as a template on GitHub
124
- # Click "Use this template" button
125
- ```
61
+ ```
62
+ src/
63
+ ├── pages/ # Your application pages (START HERE)
64
+ │ └── HomePage.tsx # Home page - edit to build your app
65
+ ├── components/ # 49 Modus wrapper components (use as-is)
66
+ ├── demos/ # 48 component demos (reference only)
67
+ │ ├── button-demo/
68
+ │ ├── modal-demo/
69
+ │ └── ...
70
+ ├── dev/ # Dev Panel infrastructure
71
+ │ ├── DevPanel.tsx
72
+ │ └── DevPanelProvider.tsx
73
+ ├── dev-pages/ # Reference pages (dev only)
74
+ │ ├── ColorPalettePage.tsx
75
+ │ ├── IconsPage.tsx
76
+ │ └── ComponentsGalleryPage.tsx
77
+ ├── contexts/ # React contexts (ThemeContext)
78
+ ├── hooks/ # Custom React hooks
79
+ └── data/ # Shared data (icons list, etc.)
80
+ ```
126
81
 
127
- 2. **Install dependencies:**
82
+ ### Where to Build Your App
128
83
 
129
- ```bash
130
- npm install
131
- ```
84
+ | Directory | Action | Description |
85
+ | ----------------- | --------- | ------------------------------- |
86
+ | `src/pages/` | **WRITE** | Add your application pages here |
87
+ | `src/components/` | READ | Use wrapper components as-is |
88
+ | `src/demos/` | READ | Reference for component usage |
132
89
 
133
- 3. **Start the development server:**
90
+ ---
134
91
 
135
- ```bash
136
- npm run dev
137
- ```
92
+ ## Dev Panel
138
93
 
139
- 4. **Open your browser:**
140
- Navigate to your localhost usually it is [http://localhost:5173](http://localhost:5173)
94
+ Toggle with <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>D</kbd> (or <kbd>Cmd</kbd>+<kbd>Shift</kbd>+<kbd>D</kbd> on Mac)
141
95
 
142
- ### Build for Production
96
+ ### Features
143
97
 
144
- ```bash
145
- npm run build
146
- npm run preview
147
- ```
98
+ | Tab | Description |
99
+ | -------------- | ------------------------------------------------------------------ |
100
+ | **Themes** | Switch between 6 Modus themes (Classic/Modern/Connect, Light/Dark) |
101
+ | **Colors** | View the 9-color design system palette with CSS variables |
102
+ | **Icons** | Browse 700+ Modus icons with click-to-copy functionality |
103
+ | **Components** | Gallery of all 49 wrapped components |
104
+ | **Demos** | 48 interactive component demos |
148
105
 
149
- ## Project Structure
106
+ ### Dev Routes
150
107
 
151
- This boilerplate follows React + Vite best practices with a clean, scalable architecture:
152
-
153
- ```text
154
- modus-react-app/
155
- ├── src/
156
- │ ├── components/ # 49 Modus wrapper components
157
- │ │ ├── ModusButton.tsx
158
- │ │ ├── ModusModal.tsx
159
- │ │ ├── ModusIcon.tsx
160
- │ │ └── ...
161
- │ ├── pages/ # Your application pages
162
- │ │ └── HomePage.tsx # Start here for your app
163
- │ ├── demos/ # 48 component demo pages (dev only)
164
- │ │ ├── button-demo/
165
- │ │ ├── modal-demo/
166
- │ │ └── ...
167
- │ ├── dev/ # Dev Panel infrastructure
168
- │ │ ├── DevPanel.tsx
169
- │ │ ├── DevPanelProvider.tsx
170
- │ │ └── config.ts
171
- │ ├── dev-pages/ # Reference pages (dev only)
172
- │ │ ├── ColorPalettePage.tsx
173
- │ │ ├── IconsPage.tsx
174
- │ │ └── ComponentsGalleryPage.tsx
175
- │ ├── contexts/ # React contexts
176
- │ │ └── ThemeContext.tsx
177
- │ ├── hooks/ # Custom React hooks
178
- │ │ └── useTheme.ts
179
- │ ├── config/ # Configuration files
180
- │ │ └── routes.ts
181
- │ ├── data/ # Static data
182
- │ │ └── modusIcons.ts # 500+ icon definitions
183
- │ ├── App.tsx # Main app component
184
- │ ├── main.tsx # Application entry point
185
- │ └── index.css # Global styles and design system
186
- ├── scripts/ # Linting and utility scripts
187
- ├── docs/ # Project documentation
188
- ├── .cursor/
189
- │ ├── rules/ # 40+ development rules
190
- │ └── skills/ # 8 AI development skills
191
- ├── .github/
192
- │ ├── copilot-instructions.md # GitHub Copilot instructions
193
- │ ├── instructions/ # Path-specific Copilot instructions
194
- │ └── workflows/ # CI/CD workflows
195
- └── public/ # Public assets
196
- ```
108
+ | Route | Description |
109
+ | ----------------- | -------------------------- |
110
+ | `/dev/colors` | Color palette reference |
111
+ | `/dev/icons` | Icon library browser |
112
+ | `/dev/components` | Component gallery |
113
+ | `/dev/demos/*` | Individual component demos |
197
114
 
198
- > **Dev Panel:** Toggle with `Ctrl+Shift+D` or the floating button. Only renders in development mode.
115
+ > **Note:** Dev Panel and dev routes are automatically excluded from production builds.
199
116
 
200
- ## Using This Boilerplate
117
+ ---
201
118
 
202
- ### Customizing for Your Project
119
+ ## Available Components
120
+
121
+ ### Display (7)
122
+
123
+ | Component | Wrapper | Description |
124
+ | ---------- | -------------------- | ---------------------------------- |
125
+ | Avatar | `<ModusAvatar>` | User avatar with image or initials |
126
+ | Badge | `<ModusBadge>` | Status indicators and counters |
127
+ | Chip | `<ModusChip>` | Tags and filter chips |
128
+ | Icon | `<ModusIcon>` | 700+ Modus icons |
129
+ | Logo | `<ModusLogo>` | Trimble logo variants |
130
+ | Progress | `<ModusProgress>` | Linear and radial indicators |
131
+ | Table | `<ModusTable>` | Data tables with sorting |
132
+
133
+ ### Feedback (6)
134
+
135
+ | Component | Wrapper | Description |
136
+ | -------------- | ------------------------ | -------------------------- |
137
+ | Alert | `<ModusAlert>` | Notifications and messages |
138
+ | Input Feedback | `<ModusInputFeedback>` | Form validation messages |
139
+ | Input Label | `<ModusInputLabel>` | Form labels |
140
+ | Loader | `<ModusLoader>` | Loading spinners |
141
+ | Toast | `<ModusToast>` | Temporary notifications |
142
+ | Tooltip | `<ModusTooltip>` | Hover tooltips |
143
+
144
+ ### Forms (15)
145
+
146
+ | Component | Wrapper | Description |
147
+ | ------------- | ----------------------- | ----------------------- |
148
+ | Autocomplete | `<ModusAutocomplete>` | Search with suggestions |
149
+ | Button | `<ModusButton>` | Action buttons |
150
+ | Button Group | `<ModusButtonGroup>` | Grouped buttons |
151
+ | Checkbox | `<ModusCheckbox>` | Checkbox inputs |
152
+ | Date | `<ModusDate>` | Date picker |
153
+ | Dropdown Menu | `<ModusDropdownMenu>` | Dropdown selections |
154
+ | File Dropzone | `<ModusFileDropzone>` | File upload area |
155
+ | Number Input | `<ModusNumberInput>` | Numeric inputs |
156
+ | Radio | `<ModusRadio>` | Radio buttons |
157
+ | Select | `<ModusSelect>` | Select dropdowns |
158
+ | Slider | `<ModusSlider>` | Range sliders |
159
+ | Switch | `<ModusSwitch>` | Toggle switches |
160
+ | Text Input | `<ModusTextInput>` | Text fields |
161
+ | Textarea | `<ModusTextarea>` | Multi-line text |
162
+ | Time Input | `<ModusTimeInput>` | Time picker |
163
+
164
+ ### Layout (7)
165
+
166
+ | Component | Wrapper | Description |
167
+ | ------------- | ----------------------- | -------------------- |
168
+ | Accordion | `<ModusAccordion>` | Collapsible sections |
169
+ | Card | `<ModusCard>` | Content cards |
170
+ | Handle | `<ModusHandle>` | Resize handles |
171
+ | Panel | `<ModusPanel>` | Content panels |
172
+ | Skeleton | `<ModusSkeleton>` | Loading placeholders |
173
+ | Toolbar | `<ModusToolbar>` | Action toolbars |
174
+ | Utility Panel | `<ModusUtilityPanel>` | Slide-out panels |
175
+
176
+ ### Navigation (9)
177
+
178
+ | Component | Wrapper | Description |
179
+ | --------------- | ------------------------- | ------------------ |
180
+ | Breadcrumbs | `<ModusBreadcrumbs>` | Navigation trail |
181
+ | Menu | `<ModusMenu>` | Dropdown menus |
182
+ | Menu Item | `<ModusMenuItem>` | Individual items |
183
+ | Navbar | `<ModusNavbar>` | Top navigation bar |
184
+ | Pagination | `<ModusPagination>` | Page navigation |
185
+ | Side Navigation | `<ModusSideNavigation>` | Sidebar navigation |
186
+ | Stepper | `<ModusStepper>` | Multi-step flow |
187
+ | Tabs | `<ModusTabs>` | Tabbed content |
188
+
189
+ ### Overlay (1)
190
+
191
+ | Component | Wrapper | Description |
192
+ | --------- | -------------- | --------------- |
193
+ | Modal | `<ModusModal>` | Dialog windows |
194
+
195
+ ### System (4)
196
+
197
+ | Component | Wrapper | Description |
198
+ | ---------------------- | ---------------------------- | -------------------- |
199
+ | Provider | `<ModusProvider>` | Context provider |
200
+ | Theme Switcher | `<ModusThemeSwitcher>` | Theme selection |
201
+ | Theme Switcher Dropdown| `<ThemeSwitcherDropdown>` | Dropdown selector |
202
+ | Theme Toggle Simple | `<ThemeToggleSimple>` | Light/dark toggle |
203
203
 
204
- 1. **Update project information:**
204
+ ---
205
205
 
206
- - Modify `package.json` with your project details
207
- - Update the app title in `src/App.tsx`
208
- - Replace demo content in `src/pages/HomePage.tsx` with your application content
206
+ ## Design System
209
207
 
210
- 2. **Add your components:**
208
+ ### 9-Color Palette
211
209
 
212
- - Create new components in `src/components/`
213
- - Add new pages in `src/pages/`
214
- - Use React Router for navigation
210
+ #### Base Colors
215
211
 
216
- 3. **Configure your build:**
217
- - Modify `vite.config.ts` for your deployment needs
218
- - Update environment variables as needed
219
- - Configure additional build optimizations
212
+ | Color | Tailwind Class | Usage |
213
+ | ---------- | ----------------- | ------------------ |
214
+ | Background | `bg-background` | Page backgrounds |
215
+ | Card | `bg-card` | Card surfaces |
216
+ | Muted | `bg-muted` | Muted backgrounds |
217
+ | Secondary | `bg-secondary` | Secondary surfaces |
218
+ | Foreground | `text-foreground` | Primary text |
220
219
 
221
- ### Built-in Demos
220
+ #### Status Colors
222
221
 
223
- ![Modus Web Components Demo](readme_assets/teaser_comp.gif)
222
+ | Color | Tailwind Class | Usage |
223
+ | ------- | ----------------------------- | ---------------------------- |
224
+ | Primary | `bg-primary` / `text-primary` | Primary actions, info states |
225
+ | Success | `bg-success` / `text-success` | Success states |
226
+ | Warning | `bg-warning` / `text-warning` | Warning states |
227
+ | Error | `bg-destructive` / `text-destructive` | Error states |
224
228
 
225
- This boilerplate includes 48 comprehensive demo pages showcasing all Modus Web Components:
229
+ ### Usage Example
226
230
 
227
- - **Interactive Component Demos** - Live examples of all 49 Modus components
228
- - **Theme Showcases** - See components across all 6 supported themes
229
- - **Code Examples** - Each demo shows proper usage patterns
231
+ ```tsx
232
+ // Correct: Design system colors
233
+ <div className="bg-background text-foreground p-4">
234
+ <div className="bg-card rounded-lg p-4 border-default">
235
+ <div className="text-primary font-semibold">Title</div>
236
+ <div className="text-muted-foreground">Description</div>
237
+ </div>
238
+ </div>
230
239
 
231
- Access demos via the Dev Panel or navigate to `/dev/demos/*` routes in development mode.
240
+ // Wrong: Generic Tailwind colors (will fail lint)
241
+ <div className="bg-gray-100 text-gray-900"></div>
242
+ ```
232
243
 
233
- ### Available Modus Components (49 Components)
244
+ ### Opacity Utilities
234
245
 
235
- ![Modus Components](readme_assets/modus_comp.png)
246
+ Use custom opacity classes instead of Tailwind's `/80` syntax:
236
247
 
237
- This boilerplate includes 49 pre-built wrapper components ready to use:
248
+ ```tsx
249
+ // Correct
250
+ <div className="text-foreground-80">80% opacity text</div>
238
251
 
239
- #### **Form Components (15)**
252
+ // Wrong (doesn't work with CSS variables)
253
+ <div className="text-foreground/80"></div>
254
+ ```
240
255
 
241
- - **ModusAutocomplete** - Input with suggestions and multi-select
242
- - **ModusButton** - All variants, colors, sizes, and shapes
243
- - **ModusButtonGroup** - Grouped button controls with shared styling
244
- - **ModusCheckbox** - Multiple selection controls (note: value inversion bug)
245
- - **ModusDate** - Date input with validation
246
- - **ModusFileDropzone** - Drag-and-drop file upload area
247
- - **ModusNumberInput** - Numeric input with currency support
248
- - **ModusRadio** - Exclusive choice controls
249
- - **ModusRating** - Star, smiley, heart, and thumb ratings
250
- - **ModusSelect** - Single-select dropdown with dynamic options
251
- - **ModusSlider** - Interactive range inputs
252
- - **ModusSwitch** - Binary toggle controls
253
- - **ModusTextarea** - Multi-line text fields with helper messages
254
- - **ModusTextInput** - Single-line text fields with validation
255
- - **ModusTimeInput** - Time picker with min/max limits
256
+ ### Border Utilities
256
257
 
257
- #### **Layout Components (7)**
258
+ Use directional border utilities:
258
259
 
259
- - **ModusAccordion** - Collapsible content sections
260
- - **ModusCard** - Content containers with headers and actions
261
- - **ModusHandle** - Draggable handle for resizable elements
262
- - **ModusPanel** - Content panel containers
263
- - **ModusSkeleton** - Animated loading placeholders
264
- - **ModusToolbar** - Three-slot layout containers
265
- - **ModusUtilityPanel** - Collapsible side panels
260
+ ```tsx
261
+ // Correct
262
+ <div className="border-bottom-default">Bottom border</div>
266
263
 
267
- #### **Navigation Components (9)**
264
+ // Wrong
265
+ <div className="border-b border-default"></div>
266
+ ```
268
267
 
269
- - **ModusBreadcrumbs** - Hierarchical navigation trails
270
- - **ModusDropdownMenu** - Contextual menus
271
- - **ModusMenu** - Integrated menu systems
272
- - **ModusMenuItem** - Individual menu item component
273
- - **ModusNavbar** - Full-width application bars
274
- - **ModusPagination** - Page navigation controls
275
- - **ModusSideNavigation** - Collapsible left navigation
276
- - **ModusStepper** - Multi-step workflow indicators
277
- - **ModusTabs** - Tab navigation with icons
268
+ ---
278
269
 
279
- #### **Display Components (7)**
270
+ ## Commands
280
271
 
281
- - **ModusAvatar** - User profile images
282
- - **ModusBadge** - Status indicators and counters
283
- - **ModusChip** - Compact tags and filters
284
- - **ModusIcon** - Icon system with 500+ validated icons
285
- - **ModusLogo** - Trimble and product logos
286
- - **ModusProgress** - Linear and radial progress indicators
287
- - **ModusTable** - Data tables with sorting and selection
272
+ ### Development
288
273
 
289
- #### **Feedback Components (6)**
274
+ | Command | Description |
275
+ | ----------------- | ------------------------------------ |
276
+ | `npm run dev` | Start dev server on `localhost:5173` |
277
+ | `npm run build` | Production build to `dist/` |
278
+ | `npm run preview` | Preview production build |
279
+ | `npm run lint` | Run ESLint |
290
280
 
291
- - **ModusAlert** - Success, warning, error, and info messages
292
- - **ModusInputFeedback** - Form field feedback
293
- - **ModusInputLabel** - Form control labels
294
- - **ModusLoader** - Visual loading indicators
295
- - **ModusToast** - Transient notifications
296
- - **ModusTooltip** - Contextual helper messages
281
+ ### Linting
297
282
 
298
- #### **Overlay Components (1)**
283
+ | Command | Description |
284
+ | ------------------------- | ---------------------------- |
285
+ | `npm run lint:all` | Run all design system checks |
286
+ | `npm run type-check` | TypeScript validation |
287
+ | `npm run lint:colors` | Check color compliance |
288
+ | `npm run lint:styles` | Check for inline styles |
289
+ | `npm run lint:borders` | Check border patterns |
290
+ | `npm run lint:opacity` | Check opacity utilities |
291
+ | `npm run lint:icons` | Check icon library usage |
292
+ | `npm run lint:icon-names` | Validate icon names (700+) |
293
+ | `npm run lint:semantic` | Check semantic HTML usage |
299
294
 
300
- - **ModusModal** - Blocking dialog overlays (use forwardRef pattern)
295
+ ### Pre-commit Hooks
301
296
 
302
- #### **Theme Components (4)**
297
+ All lint commands run automatically on `git commit` via Husky. Commits are blocked if any check fails.
303
298
 
304
- - **ModusProvider** - Context provider for Modus components
305
- - **ModusThemeSwitcher** - Theme toggle controls
306
- - **ThemeSwitcherDropdown** - Dropdown theme selector
307
- - **ThemeToggleSimple** - Simple light/dark toggle
299
+ ---
308
300
 
309
- ## Modus Web Components Integration
301
+ ## Getting Started
310
302
 
311
- ### Basic Usage
303
+ ### 1. Build Your App
312
304
 
313
- Always use the wrapper components from `src/components/` instead of the web components directly:
305
+ Edit `src/pages/HomePage.tsx` to start building:
314
306
 
315
307
  ```tsx
316
- import { ModusButton, ModusIcon } from "@/components";
308
+ import { ModusButton } from '@/components';
317
309
 
318
- export default function MyComponent() {
310
+ export default function HomePage() {
319
311
  const handleClick = () => {
320
- console.log("Button clicked!");
312
+ console.log('Button clicked!');
321
313
  };
322
314
 
323
315
  return (
324
- <div className="flex gap-4">
325
- {/* Use wrapper components */}
316
+ <div className="bg-background text-foreground p-8">
317
+ <div className="text-2xl font-bold mb-4">My App</div>
326
318
  <ModusButton color="primary" onClick={handleClick}>
327
- <i className="modus-icons mr-2">save_disk</i>
328
- Save Changes
319
+ Get Started
329
320
  </ModusButton>
330
-
331
- {/* Icon wrapper with accessibility */}
332
- <ModusIcon
333
- name="settings"
334
- size="lg"
335
- decorative={false}
336
- ariaLabel="Settings"
337
- />
338
321
  </div>
339
322
  );
340
323
  }
341
324
  ```
342
325
 
343
- > **Important:** Never use `ModusWc*` components directly. The wrapper components handle event listeners, TypeScript types, and common patterns correctly.
344
-
345
- ### Component Usage Examples
346
-
347
- This boilerplate includes comprehensive examples of:
348
-
349
- - **Buttons** - All variants, colors, sizes, and shapes
350
- - **Icons** - Complete icon system with standard Modus implementation
351
- - **Alerts** - Success, warning, error, and info messages
352
- - **Theme Switching** - Dynamic theme changes
353
-
354
- ## Icon System
355
-
356
- ### Standard Modus Icons
357
-
358
- Icons are loaded from the Modus CDN and use the standard `<i class="modus-icons">icon_name</i>` pattern:
326
+ ### 2. Use Components
359
327
 
360
- ```typescript
361
- import "@trimble-oss/modus-icons/dist/field-systems/fonts/modus-icons.css";
362
- ```
363
-
364
- ### Usage Examples
328
+ Import from `@/components`:
365
329
 
366
330
  ```tsx
367
- import ModusIcon from "./components/ModusIcon";
368
- import type { ModusIconName } from "./types/modus";
369
-
370
- export default function IconExamples() {
371
- const iconName: ModusIconName = "settings";
372
-
373
- return (
374
- <div>
375
- {/* Basic icon usage */}
376
- <i className="modus-icons">settings</i>
377
-
378
- {/* Icon with styling */}
379
- <i className="modus-icons icon-lg icon-primary">{iconName}</i>
380
-
381
- {/* Using the ModusIcon wrapper */}
382
- <ModusIcon
383
- name="settings"
384
- size="lg"
385
- decorative={false}
386
- ariaLabel="Settings"
387
- />
388
- </div>
389
- );
390
- }
391
- ```
392
-
393
- ### Available Icon Categories
394
-
395
- The application now includes the complete list of all official Modus icons with full TypeScript support:
396
-
397
- - **Actions**: add, edit_combination, delete, save_disk, download, upload, copy_content, refresh, sync
398
- - **Navigation**: arrow_left, arrow_right, arrow_up, arrow_down, chevron_left, chevron_right, home, dashboard, menu, close
399
- - **Interface**: search, filter, settings, launch, more_horizontal, more_vertical, sort, view_grid, view_list
400
- - **Status**: check, check_circle, warning, info, alert, help, cancel_circle
401
- - **Content**: file, folder_open, folder_closed, document, image, video, camera
402
- - **User**: person, people_group, user_account, sign_in, sign_out, lock, lock_open
403
- - **Communication**: email, phone, chat, comment, notifications
404
- - **UI**: palette, brightness, visibility_on, visibility_off, toggle_on, toggle_off
405
-
406
- **Total Icons Available**: 500+ official Modus icons with complete TypeScript definitions
407
-
408
- ## Theme System
409
-
410
- ### Available Themes
411
-
412
- This boilerplate supports **6 themes** total:
413
-
414
- #### Standard Modus Themes (4 themes)
415
-
416
- - `modus-classic-light` (default)
417
- - `modus-classic-dark`
418
- - `modus-modern-light`
419
- - `modus-modern-dark`
420
-
421
- #### Trimble Connect Themes (2 themes)
422
-
423
- - `connect-light` - For Trimble Connect Web Applications
424
- - `connect-dark` - For Trimble Connect Web Applications
425
-
426
- > **Note:** Connect themes should only be used when building Trimble Connect Web Applications. For general applications, use the standard Modus themes.
427
-
428
- ### Theme Switching
429
-
430
- ```typescript
431
- // Programmatic theme switching
432
- const changeTheme = (theme: string) => {
433
- document.documentElement.setAttribute("data-theme", theme);
434
- localStorage.setItem("modus-theme", theme);
435
- };
331
+ import {
332
+ ModusButton,
333
+ ModusAlert,
334
+ ModusIcon,
335
+ ModusCard,
336
+ } from '@/components';
436
337
  ```
437
338
 
438
- ## TypeScript Support
339
+ ### 3. Test All Themes
439
340
 
440
- Full TypeScript support with:
341
+ Use the Dev Panel (<kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>D</kbd>) to test your UI in all 6 themes:
441
342
 
442
- - **Component Props** - Type-safe Modus component properties
443
- - **Event Handlers** - Proper CustomEvent typing with type casting
444
- - **Icon Names** - Validated icon name types
445
- - **Theme Values** - Type-safe theme switching
343
+ - Modus Classic Light / Dark
344
+ - Modus Modern Light / Dark
345
+ - Connect Light / Dark
446
346
 
447
- ```typescript
448
- import { ModusButton } from "@/components";
449
- import type { HTMLModusWcButtonElement } from "@trimble-oss/moduswebcomponents-react";
347
+ ---
450
348
 
451
- // Event handling with proper types
452
- const handleEvent = (event: Event) => {
453
- const customEvent = event as CustomEvent<MouseEvent | KeyboardEvent>;
454
- console.log("Button clicked!", customEvent.detail);
455
- };
349
+ ## Deployment
456
350
 
457
- // Theme types
458
- type ThemeName =
459
- | "modus-classic-light"
460
- | "modus-classic-dark"
461
- | "modus-modern-light"
462
- | "modus-modern-dark"
463
- | "connect-light"
464
- | "connect-dark";
465
-
466
- // Usage with wrapper components
467
- export default function MyComponent() {
468
- return (
469
- <ModusButton color="primary" variant="filled" onClick={handleEvent}>
470
- Click me
471
- </ModusButton>
472
- );
473
- }
351
+ ### AWS Amplify
352
+
353
+ Pre-configured `amplify.yml` included:
354
+
355
+ ```yaml
356
+ version: 1
357
+ frontend:
358
+ phases:
359
+ preBuild:
360
+ commands:
361
+ - npm ci
362
+ build:
363
+ commands:
364
+ - npm run build
365
+ artifacts:
366
+ baseDirectory: dist
367
+ files:
368
+ - '**/*'
369
+ cache:
370
+ paths:
371
+ - node_modules/**/*
372
+ customHeaders:
373
+ - pattern: '**/*'
374
+ headers:
375
+ - key: 'Cache-Control'
376
+ value: 'public, max-age=31536000, immutable'
377
+ - pattern: '*.html'
378
+ headers:
379
+ - key: 'Cache-Control'
380
+ value: 'public, max-age=0, must-revalidate'
474
381
  ```
475
382
 
476
- ## Performance Features
477
-
478
- ### Vite Optimization
383
+ **Important:** Configure rewrite rules in Amplify Console for React Router:
479
384
 
480
- - **Lightning-fast HMR** - Instant hot module replacement
481
- - **Code splitting** - Automatic chunking for optimal loading
482
- - **Tree shaking** - Unused code elimination
483
- - **Asset optimization** - Images and fonts are optimized
484
- - **Source maps** - Available for debugging
385
+ | Source | Target | Type |
386
+ | ------ | ------------- | ------------- |
387
+ | `/<*>` | `/index.html` | 200 (Rewrite) |
485
388
 
486
- ### Icon Optimization
487
-
488
- - **Critical icon preloading** - Essential icons load immediately
489
- - **Lazy loading** - Non-critical icons load on demand
490
- - **Font display optimization** - `font-display: swap` for better performance
491
-
492
- ### Build Optimization
493
-
494
- - **SWC compilation** - Ultra-fast TypeScript and JSX compilation
495
- - **ESBuild** - Lightning-fast bundling
496
- - **Rollup** - Optimized production builds
497
- - **Source maps** - Available for debugging
498
-
499
- ## Browser Support
500
-
501
- - **Modern browsers** - Chrome 90+, Firefox 88+, Safari 14+, Edge 90+
502
- - **Mobile support** - iOS Safari 14+, Chrome Mobile 90+
503
- - **Accessibility** - Screen readers and assistive technologies
504
- - **High contrast** - Windows high contrast mode support
505
-
506
- ## Development Scripts
389
+ ### Static Hosting (Netlify, Vercel, GitHub Pages)
507
390
 
508
391
  ```bash
509
- # Development server with Vite
510
- npm run dev
511
-
512
- # Type checking
513
- npm run type-check
514
-
515
- # Production build
516
392
  npm run build
517
-
518
- # Preview production build
519
- npm run preview
520
-
521
- # Check for non-Modus color usage
522
- npm run lint:colors
523
-
524
- # Check for border violations
525
- npm run lint:borders
526
-
527
- # Run all linting checks
528
- npm run lint:all
393
+ # Deploy the dist/ folder
529
394
  ```
530
395
 
531
- ## Dev Panel Features
532
-
533
- The boilerplate includes a floating Dev Panel (development mode only) with:
534
-
535
- - **Theme Switcher** - Switch between all 6 Modus themes
536
- - **Icon Gallery** - Browse 500+ icons with click-to-copy (5 icons per row)
537
- - **Color Palette** - View all 9 design system colors with values
538
- - **Component Gallery** - Browse all 49 available components
539
- - **Component Demos** - 48 interactive demos for all components
540
- - **Logo Showcase** - View all Trimble and Viewpoint product logos
541
-
542
- Toggle the Dev Panel with `Ctrl+Shift+D` or the floating button in the bottom-right corner.
543
-
544
- > **Note:** The Dev Panel only renders when `VITE_DEV_PANEL=true` (development mode). It is automatically excluded from production builds.
545
-
546
- ## Code Quality & Linting
547
-
548
- ### Modus Color Enforcement
549
-
550
- This boilerplate includes comprehensive linting that automatically checks for non-Modus color usage:
396
+ ---
551
397
 
552
- - **Detects Tailwind colors** - Flags usage of `red-400`, `blue-500`, etc.
553
- - **Detects hardcoded colors** - Catches hex codes like `#ff0000`, RGB values, and Modus hex values
554
- - **Suggests Modus alternatives** - Provides proper Modus CSS custom properties
555
- - **Runs on commit** - Automatically validates staged files before commit
398
+ ## AI-Powered Development
556
399
 
557
- **Example violations caught:**
400
+ ### Cursor/Copilot Rules
558
401
 
559
- ```css
560
- /* WRONG - Will be flagged */
561
- .button {
562
- background-color: red-500; /* Tailwind color */
563
- color: #f1f1f6; /* Hardcoded Modus hex */
564
- }
565
- .text {
566
- color: rgb(23, 28, 30); /* RGB equivalent of Modus color */
567
- }
402
+ 40+ development rules in `.cursor/rules/` covering:
568
403
 
569
- /* CORRECT - Modus usage */
570
- .button {
571
- background-color: var(--modus-wc-color-error);
572
- color: var(--modus-wc-color-base-100);
573
- }
574
- .text {
575
- color: var(--modus-wc-color-base-content);
576
- }
577
- ```
404
+ - Component patterns and state management
405
+ - Design system compliance
406
+ - React 19 best practices
407
+ - Known issues and workarounds
578
408
 
579
- **Available Modus Color Variables (9 colors total):**
409
+ ### AGENTS.MD
580
410
 
581
- **Base Colors (5 total):**
411
+ Comprehensive guide for AI agents in `AGENTS.MD`:
582
412
 
583
- - `var(--modus-wc-color-base-page)` - Background: #fff (light) / #000 (dark)
584
- - `var(--modus-wc-color-base-100)` - Light gray: #f1f1f6 (light) / #252a2e (dark)
585
- - `var(--modus-wc-color-base-200)` - Medium gray: #cbcdd6 (light) / #464b52 (dark)
586
- - `var(--modus-wc-color-base-300)` - Dark gray: #b7b9c3 (light) / #353a40 (dark)
587
- - `var(--modus-wc-color-base-content)` - Text: #171c1e (light) / #cbcdd6 (dark)
413
+ - Commands reference
414
+ - Design system rules
415
+ - Critical bug fixes
416
+ - Boundaries (Always/Ask/Never)
588
417
 
589
- **Semantic Colors (4 total - same in both themes):**
418
+ ### AI Skills
590
419
 
591
- - `var(--modus-wc-color-info)` - Blue: #0063a3
592
- - `var(--modus-wc-color-success)` - Green: #1e8a44
593
- - `var(--modus-wc-color-error)` - Red: #da212c
594
- - `var(--modus-wc-color-warning)` - Orange: #fbad26
420
+ 8 pre-built skills in `.cursor/skills/`:
595
421
 
596
- > **Note:** Component props like `primary`, `secondary`, `tertiary`, and `danger` map to these CSS variables internally.
422
+ | Skill | Description |
423
+ | ---------------------------------- | ---------------------------------- |
424
+ | `create-modus-wrapper-component` | Scaffold new component wrappers |
425
+ | `handle-modus-checkbox-value-bug` | Handle checkbox value inversion |
426
+ | `implement-modus-modal-with-refs` | Implement modals with forwardRef |
427
+ | `set-up-modus-event-listeners` | Set up useEffect event listeners |
428
+ | `integrate-modus-icons` | Integrate Modus icons correctly |
429
+ | `create-modus-form-component` | Create form components |
430
+ | `fix-modus-component-event-issues` | Debug event handling problems |
431
+ | `style-modus-components-with-tailwind` | Apply custom utilities |
597
432
 
598
- ## Deployment
433
+ ### MCP Servers
599
434
 
600
- This boilerplate is ready for deployment to various platforms:
435
+ Pre-configured Model Context Protocol servers:
601
436
 
602
- ### Static Hosting (Netlify, Vercel, GitHub Pages)
437
+ | Server | Purpose |
438
+ | ------------ | ---------------------------------- |
439
+ | `modus-docs` | Modus component documentation |
440
+ | `context7` | React, Tailwind, dependency docs |
603
441
 
604
- ```bash
605
- npm run build
606
- # Deploy the dist/ folder
607
- ```
608
-
609
- ## Customization
610
-
611
- ### Adding New Components
612
-
613
- 1. **Install additional Modus components** if needed
614
- 2. **Add TypeScript definitions** in `src/types/modus.d.ts`
615
- 3. **Create wrapper components** in `src/components/`
616
- 4. **Add examples** in the demo pages or remove demo content for production
442
+ ---
617
443
 
618
- ### Custom Styling
444
+ ## React 19 Patterns
619
445
 
620
- Use Modus CSS custom properties for consistent theming:
446
+ This boilerplate uses modern React patterns:
621
447
 
622
- ```css
623
- .custom-component {
624
- background-color: var(--modus-wc-color-base-100);
625
- color: var(--modus-wc-color-base-content);
626
- border: 1px solid var(--modus-wc-color-base-200);
627
- }
448
+ ```tsx
449
+ // useRef + useEffect for web component events
450
+ const buttonRef = useRef<HTMLModusWcButtonElement>(null);
628
451
 
629
- /* Status-specific styling */
630
- .success-message {
631
- color: var(--modus-wc-color-success);
632
- border-left: 3px solid var(--modus-wc-color-success);
633
- }
452
+ useEffect(() => {
453
+ const button = buttonRef.current;
454
+ const handleClick = (e: CustomEvent) => {
455
+ console.log('Clicked!', e.detail);
456
+ };
634
457
 
635
- .error-message {
636
- color: var(--modus-wc-color-error);
637
- border-left: 3px solid var(--modus-wc-color-error);
638
- }
458
+ button?.addEventListener('buttonClick', handleClick);
459
+ return () => button?.removeEventListener('buttonClick', handleClick);
460
+ }, []);
461
+
462
+ // forwardRef for modal control
463
+ const ModusModal = forwardRef((props, ref) => {
464
+ useImperativeHandle(ref, () => ({
465
+ open: () => dialog?.showModal(),
466
+ close: () => dialog?.close(),
467
+ }));
468
+ });
469
+
470
+ // Let Modus components manage their own state
471
+ <ModusAccordion allowMultiple>
472
+ <ModusAccordionItem header="Section 1">Content</ModusAccordionItem>
473
+ </ModusAccordion>
639
474
  ```
640
475
 
641
- ### Tailwind CSS Integration
476
+ ### Critical Bug: Checkbox Value Inversion
642
477
 
643
- This boilerplate includes Tailwind CSS 3 with design system integration:
478
+ The `value` property from `inputChange` event is inverted. Always invert:
644
479
 
645
480
  ```tsx
646
- // Use Tailwind classes with design system colors
647
- <div className="bg-card border-default rounded-lg p-6">
648
- <div className="text-2xl font-semibold text-foreground">Title</div>
649
- <div className="text-muted-foreground">Description</div>
650
- </div>
651
-
652
- // Use directional border utilities (not border-b border-default)
653
- <div className="border-bottom-default">Bottom border only</div>
654
- <div className="border-top-default">Top border only</div>
655
-
656
- // Use custom opacity utilities (not text-foreground/80)
657
- <div className="text-foreground-80">80% opacity text</div>
658
- <div className="text-foreground-60">60% opacity text</div>
481
+ const handleCheckboxChange = (event: CustomEvent) => {
482
+ const actualChecked = !event.detail.value; // MUST invert
483
+ };
659
484
  ```
660
485
 
661
- **Important:**
662
-
663
- - Use directional border utilities (`border-bottom-default`, `border-top-default`) instead of `border-b border-default`
664
- - Use opacity utilities (`text-foreground-80`) instead of Tailwind's `/80` syntax (CSS variables don't work with Tailwind opacity modifiers)
665
- - Use `<div>` elements only (no `h1`, `p`, `section`) to avoid Tailwind CSS conflicts
666
-
667
- ## Troubleshooting
668
-
669
- ### Icons Not Displaying
670
-
671
- 1. **Check font loading** - Ensure Modus icons CSS is imported
672
- 2. **Verify icon names** - Use only valid Modus icon names
673
- 3. **Check network** - CDN may be blocked in some environments
674
-
675
- ### Components Not Rendering
676
-
677
- 1. **Verify imports** - Ensure Modus components are imported
678
- 2. **Check custom elements** - Vite should recognize `modus-wc-*` tags
679
- 3. **Browser support** - Ensure browser supports web components
680
-
681
- ### Theme Issues
682
-
683
- 1. **HTML attribute** - Ensure `data-theme` is set on `<html>`
684
- 2. **CSS loading order** - Modus styles should load before custom styles
685
- 3. **Local storage** - Theme preference should persist across sessions
686
-
687
- ## Contributing
688
-
689
- When contributing to this boilerplate:
690
-
691
- 1. **Follow React 19 best practices**
692
- 2. **Maintain TypeScript strict mode**
693
- 3. **Use Modus design tokens**
694
- 4. **Test across all themes**
695
- 5. **Ensure accessibility compliance**
696
- 6. **Update documentation as needed**
697
-
698
- ## Support & Resources
699
-
700
- - [Modus Web Components Documentation](https://trimble-oss.github.io/modus-wc-2.0/main/)
701
- - [Vite Documentation](https://vitejs.dev/)
702
- - [React 19 Documentation](https://react.dev/)
703
- - [TypeScript Documentation](https://www.typescriptlang.org/)
704
- - [Tailwind CSS Documentation](https://tailwindcss.com/docs)
705
-
706
- ## License
707
-
708
- MIT License - see LICENSE file for details.
709
-
710
486
  ---
711
487
 
712
- ## Ready to Build
488
+ ## Resources
713
489
 
714
- **Ready to build amazing applications with Modus Design System and React + Vite!**
715
-
716
- This boilerplate provides everything you need to get started quickly while following best practices and maintaining high code quality.
490
+ | Resource | Description |
491
+ | ------------------------------------------------------------------------------------------------------------------------- | -------------------------------- |
492
+ | [Modus 2 Web Components](https://trimble-oss.github.io/modus-wc-2.0/main/?path=/docs/documentation-getting-started--docs) | Official component documentation |
493
+ | [Modus Design System](https://modus.trimble.com/) | Design guidelines and patterns |
494
+ | [React 19 Documentation](https://react.dev/) | React framework guide |
495
+ | [Vite Documentation](https://vitejs.dev/) | Build tool documentation |
496
+ | [Tailwind CSS v3](https://tailwindcss.com/docs) | Utility-first CSS framework |
717
497
 
718
498
  ---
719
499
 
720
- ## Creator
721
-
722
- ### Made by [Julian Oczkowski](https://github.com/julianoczkowski)
723
-
724
- Lead Product Designer bridging UX & Code - Building AI-driven tools, design systems, and digital products
725
-
726
- [YouTube](https://www.youtube.com/@julianoczkowski) | [LinkedIn](https://linkedin.com/in/julianoczkowski) | [Website](https://www.julianoczkowski.com)
500
+ ## License
727
501
 
728
- Created for the Trimble community and developers worldwide
502
+ MIT