@julianoczkowski/create-trimble-app 2.0.0

package/templates/react/.cursor/rules/modus-components-reference.mdc

@@ -0,0 +1,366 @@
+---
+description: Comprehensive reference guide for all Modus Design System components
+globs: ["**/components/**/*.tsx", "**/demos/**/*.tsx"]
+alwaysApply: false
+---
+
+# Modus Components Reference
+
+Comprehensive reference guide for all Modus Design System components available in this React + Vite application.
+
+## Component Categories
+
+### Layout & Navigation Components
+
+#### ModusAccordion
+
+- **Location**: `src/components/ModusAccordion.tsx`
+- **Purpose**: Collapsible content sections with expandable/collapsible panels
+- **Key Features**: Multiple accordion items, custom headers, bordered options, expand/collapse events
+- **Usage**: FAQ sections, content organization, collapsible forms
+
+#### ModusBreadcrumbs
+
+- **Location**: `src/components/ModusBreadcrumbs.tsx`
+- **Purpose**: Navigation breadcrumb trail showing current page hierarchy
+- **Key Features**: Clickable breadcrumb items, customizable size, aria-label support
+- **Usage**: Page navigation, showing user location in site hierarchy
+
+#### ModusNavbar
+
+- **Location**: `src/components/ModusNavbar.tsx`
+- **Purpose**: Main application navigation bar with user controls and menus
+- **Key Features**: User card, search, notifications, apps menu, condensed mode, multiple slots
+- **Usage**: Primary application header, user account management, global navigation
+
+#### ModusSideNavigation
+
+- **Location**: `src/components/ModusSideNavigation.tsx`
+- **Purpose**: Collapsible sidebar navigation menu
+- **Key Features**: Expandable/collapsible, auto-collapse on select, custom width, menu integration
+- **Usage**: Main application navigation, sidebar menus, mobile navigation
+
+#### ModusTabs
+
+- **Location**: `src/components/ModusTabs.tsx`
+- **Purpose**: Tabbed interface for organizing content into panels
+- **Key Features**: Multiple tab styles, icon support, disabled tabs, tab change events
+- **Usage**: Content organization, multi-step forms, settings panels
+
+#### ModusToolbar
+
+- **Location**: `src/components/ModusToolbar.tsx`
+- **Purpose**: Toolbar container with start, center, and end content slots
+- **Key Features**: Flexible content slots, accessibility support, custom styling
+- **Usage**: Action toolbars, form controls, content management interfaces
+
+#### ModusUtilityPanel
+
+- **Location**: `src/components/ModusUtilityPanel.tsx`
+- **Purpose**: Slide-out utility panel for additional content or controls
+- **Key Features**: Left/right positioning, push content option, custom width, header/footer slots
+- **Usage**: Settings panels, additional information, secondary content
+
+### Form & Input Components
+
+#### ModusAutocomplete
+
+- **Location**: `src/components/ModusAutocomplete.tsx`
+- **Purpose**: Text input with dropdown suggestions and multi-select capability
+- **Key Features**: Debounced search, multi-select, custom items, no results handling
+- **Usage**: Search inputs, tag selection, data filtering
+
+#### ModusCheckbox
+
+- **Location**: `src/components/ModusCheckbox.tsx`
+- **Purpose**: Checkbox input with label and validation support
+- **Key Features**: Indeterminate state, size variants, value inversion bug handling
+- **Usage**: Form checkboxes, agreement toggles, multi-select lists
+
+#### ModusDate
+
+- **Location**: `src/components/ModusDate.tsx`
+- **Purpose**: Date input with calendar picker and validation
+- **Key Features**: Min/max date constraints, feedback system, size variants
+- **Usage**: Date selection, birth date inputs, appointment scheduling
+
+#### ModusDropdownMenu
+
+- **Location**: `src/components/ModusDropdownMenu.tsx`
+- **Purpose**: Dropdown menu with button trigger and menu items
+- **Key Features**: Customizable button, menu positioning, item selection events
+- **Usage**: Action menus, option selection, context menus
+
+#### ModusNumberInput
+
+- **Location**: `src/components/ModusNumberInput.tsx`
+- **Purpose**: Number input with validation and currency support
+- **Key Features**: Min/max constraints, step values, currency symbols, feedback system
+- **Usage**: Quantity inputs, price fields, numeric data entry
+
+#### ModusRadio
+
+- **Location**: `src/components/ModusRadio.tsx`
+- **Purpose**: Radio button input for single selection from options
+- **Key Features**: Grouped selection, size variants, validation support
+- **Usage**: Single-choice forms, option selection, preference settings
+
+#### ModusSelect
+
+- **Location**: `src/components/ModusSelect.tsx`
+- **Purpose**: Dropdown select input with options list
+- **Key Features**: Option management, validation feedback, size variants
+- **Usage**: Country selection, category selection, option lists
+
+#### ModusSlider
+
+- **Location**: `src/components/ModusSlider.tsx`
+- **Purpose**: Range slider input for numeric value selection
+- **Key Features**: Min/max/step values, size variants, accessibility support
+- **Usage**: Volume controls, price ranges, preference sliders
+
+#### ModusSwitch
+
+- **Location**: `src/components/ModusSwitch.tsx`
+- **Purpose**: Toggle switch for boolean values
+- **Key Features**: On/off states, indeterminate state, size variants
+- **Usage**: Settings toggles, feature enable/disable, boolean preferences
+
+#### ModusTextarea
+
+- **Location**: `src/components/ModusTextarea.tsx`
+- **Purpose**: Multi-line text input with validation and feedback
+- **Key Features**: Row configuration, character limits, feedback system, size variants
+- **Usage**: Comments, descriptions, long-form text input
+
+#### ModusTextInput
+
+- **Location**: `src/components/ModusTextInput.tsx`
+- **Purpose**: Single-line text input with various types and features
+- **Key Features**: Multiple input types, clear/search buttons, validation, mobile optimization
+- **Usage**: Username, email, search, general text input
+
+#### ModusTimeInput
+
+- **Location**: `src/components/ModusTimeInput.tsx`
+- **Purpose**: Time input with time picker and validation
+- **Key Features**: 12/24 hour format, seconds support, datalist options, feedback system
+- **Usage**: Time selection, appointment times, duration inputs
+
+### Display & Feedback Components
+
+#### ModusAlert
+
+- **Location**: `src/components/ModusAlert.tsx`
+- **Purpose**: Alert messages with different severity levels
+- **Key Features**: Info/success/warning/error variants, dismissible option, custom icons
+- **Usage**: Notifications, validation messages, system alerts
+
+#### ModusBadge
+
+- **Location**: `src/components/ModusBadge.tsx`
+- **Purpose**: Small status indicators and labels
+- **Key Features**: Color variants, size options, filled/text/counter styles
+- **Usage**: Status indicators, notification counts, category labels
+
+#### ModusCard
+
+- **Location**: `src/components/ModusCard.tsx`
+- **Purpose**: Content container with header, body, and footer sections
+- **Key Features**: Multiple layouts, padding options, bordered styling, slot-based content
+- **Usage**: Content cards, product displays, information panels
+
+#### ModusChip
+
+- **Location**: `src/components/ModusChip.tsx`
+- **Purpose**: Small interactive elements for tags and selections
+- **Key Features**: Active/disabled states, remove functionality, size variants
+- **Usage**: Tags, filters, removable items, selection indicators
+
+#### ModusDivider
+
+- **Location**: `src/components/ModusDivider.tsx`
+- **Purpose**: Visual separator between content sections
+- **Key Features**: Horizontal/vertical orientation, thickness options, color variants
+- **Usage**: Content separation, visual hierarchy, layout structure
+
+#### ModusInputFeedback
+
+- **Location**: `src/components/ModusInputFeedback.tsx`
+- **Purpose**: Feedback messages for form inputs
+- **Key Features**: Error/info/success/warning levels, custom icons, size variants
+- **Usage**: Form validation, input guidance, status messages
+
+#### ModusInputLabel
+
+- **Location**: `src/components/ModusInputLabel.tsx`
+- **Purpose**: Label component for form inputs
+- **Key Features**: Required indicator, sub-label support, size variants
+- **Usage**: Form field labels, input descriptions, accessibility
+
+#### ModusLoader
+
+- **Location**: `src/components/ModusLoader.tsx`
+- **Purpose**: Loading indicators with various animations
+- **Key Features**: Multiple variants (spinner, ball, bars, dots, infinity, ring), color options
+- **Usage**: Loading states, async operations, progress indication
+
+#### ModusProgress
+
+- **Location**: `src/components/ModusProgress.tsx`
+- **Purpose**: Progress bars for showing completion status
+- **Key Features**: Linear/radial variants, indeterminate mode, custom labels
+- **Usage**: File uploads, process completion, step indicators
+
+#### ModusSkeleton
+
+- **Location**: `src/components/ModusSkeleton.tsx`
+- **Purpose**: Placeholder content while loading
+- **Key Features**: Circle/rectangle shapes, customizable dimensions
+- **Usage**: Loading placeholders, content previews, skeleton screens
+
+#### ModusToast
+
+- **Location**: `src/components/ModusToast.tsx`
+- **Purpose**: Temporary notification messages
+- **Key Features**: Multiple positions, auto-dismiss, action buttons, severity variants
+- **Usage**: Success messages, error notifications, temporary alerts
+
+#### ModusTooltip
+
+- **Location**: `src/components/ModusTooltip.tsx`
+- **Purpose**: Hover tooltips for additional information
+- **Key Features**: Multiple positions, disabled state, force open option
+- **Usage**: Help text, additional information, accessibility support
+
+### Data & Table Components
+
+#### ModusTable
+
+- **Location**: `src/components/ModusTable.tsx`
+- **Purpose**: Data table with sorting, pagination, and editing capabilities
+- **Key Features**: Column configuration, row selection, inline editing, pagination
+- **Usage**: Data display, data management, admin interfaces
+
+#### ModusPagination
+
+- **Location**: `src/components/ModusPagination.tsx`
+- **Purpose**: Page navigation for large datasets
+- **Key Features**: Page size options, custom button text, accessibility support
+- **Usage**: Table pagination, content pagination, data navigation
+
+### Interactive Components
+
+#### ModusButton
+
+- **Location**: `src/components/ModusButton.tsx`
+- **Purpose**: Interactive button with various styles and states
+- **Key Features**: Color variants, size options, icon support, disabled states
+- **Usage**: Actions, form submissions, navigation, user interactions
+
+#### ModusMenu
+
+- **Location**: `src/components/ModusMenu.tsx`
+- **Purpose**: Menu container with menu items
+- **Key Features**: Vertical/horizontal orientation, item selection, bordered styling
+- **Usage**: Navigation menus, context menus, option lists
+
+#### ModusMenuItem
+
+- **Location**: `src/components/ModusMenuItem.tsx`
+- **Purpose**: Individual menu item with selection and interaction
+- **Key Features**: Icons, sub-labels, disabled state, selection handling
+- **Usage**: Menu options, dropdown items, navigation links
+
+#### ModusRating
+
+- **Location**: `src/components/ModusRating.tsx`
+- **Purpose**: Star or emoji rating input
+- **Key Features**: Multiple variants (star, heart, smiley, thumb), half ratings, custom labels
+- **Usage**: Product ratings, feedback collection, satisfaction surveys
+
+#### ModusStepper
+
+- **Location**: `src/components/ModusStepper.tsx`
+- **Purpose**: Step indicator for multi-step processes
+- **Key Features**: Horizontal/vertical orientation, color variants, custom content
+- **Usage**: Multi-step forms, process indicators, workflow navigation
+
+### Media & Icon Components
+
+#### ModusAvatar
+
+- **Location**: `src/components/ModusAvatar.tsx`
+- **Purpose**: User profile image or initials display
+- **Key Features**: Image support, fallback to initials, size variants, shape options
+- **Usage**: User profiles, contact lists, user identification
+
+#### ModusIcon
+
+- **Location**: `src/components/ModusIcon.tsx`
+- **Purpose**: Icon display using Modus icon system
+- **Key Features**: Size variants, decorative/informative modes, custom colors
+- **Usage**: UI icons, status indicators, visual elements
+
+### System & Utility Components
+
+#### ModusProvider
+
+- **Location**: `src/components/ModusProvider.tsx`
+- **Purpose**: Root provider for Modus Design System integration
+- **Key Features**: CSS imports, theme support, component registration
+- **Usage**: App root wrapper, design system initialization
+
+#### ModusThemeSwitcher
+
+- **Location**: `src/components/ModusThemeSwitcher.tsx`
+- **Purpose**: Theme switching control for light/dark modes
+- **Key Features**: Theme configuration, change events, accessibility support
+- **Usage**: Theme controls, user preferences, dark mode toggle
+
+## Component Usage Patterns
+
+### Event Handling
+
+- Most components use `useEffect` with `useRef` for event listener management
+- Custom events are properly typed with TypeScript interfaces
+- Event cleanup is handled in useEffect return functions
+
+### State Management
+
+- Components follow controlled/uncontrolled patterns as appropriate
+- Modus Web Components manage their own internal state
+- React state is used for external control when needed
+
+### Accessibility
+
+- All components include proper ARIA attributes
+- Keyboard navigation is supported where applicable
+- Screen reader compatibility is maintained
+
+### Styling
+
+- Components use Modus Design System colors and utilities
+- Custom classes can be applied via `customClass` prop
+- Theme-aware styling is built-in
+
+## Import Pattern
+
+```typescript
+import ModusComponentName from "./components/ModusComponentName";
+```
+
+## Common Props
+
+- `customClass`: Additional CSS classes
+- `ariaLabel`: Accessibility label
+- `disabled`: Disabled state
+- `size`: Size variant (sm, md, lg)
+- Event handlers: `onEventName` pattern
+
+## Notes
+
+- All components are TypeScript-enabled with proper type definitions
+- Components follow React best practices and hooks patterns
+- Integration with Modus Web Components is handled through proper event binding
+- Components are designed to be composable and reusable

package/templates/react/.cursor/rules/modus-icon-names.mdc

@@ -0,0 +1,63 @@
+---
+description: Complete list of valid Modus icon names for reference
+globs: ["**/*.tsx", "**/*.ts"]
+alwaysApply: false
+---
+
+## 📋 Complete Icon Names List
+
+**Only these names are allowed** when using Modus icons. Always verify icon names against this list before using them.
+
+### A-C
+
+accessibility, accessibility_circle, add, add_bold, add_circle, add_heavy, address, advanced_instructions, alarm_add, alarm_off, alarm_on, alert, alert_outlined, align_bottom, align_center_horiz, align_center_vert, align_left, align_right, align_top, angle_90, antenna, apps, arc, arrow_back, arrow_down, arrow_down_circle, arrow_expand_diagonal_left, arrow_expand_diagonal_right, arrow_left, arrow_left_circle, arrow_next, arrow_right, arrow_right_circle, arrow_up, arrow_up_circle, artificial_intelligence, backup_restore_cloud, backup_restore_file, bar_graph, bar_graph_line, bar_graph_square, barcode, battery_0_horizontal, battery_0_vertical, battery_25_horizontal, battery_25_vertical, battery_50_horizontal, battery_50_vertical, battery_75_horizontal, battery_75_vertical, battery_charging_horizontal, battery_charging_vertical, battery_full_horizontal, battery_full_vertical, between, bolt, bookings, bookings_open, box_select, briefcase, brightness, brush, bug, bug_report, building_corporate, buildings, calculate, calculator, calculator_symbols, calendar, calendar_add, calendar_and_key, calendar_blank, calendar_booking, calendar_cancel, calendar_check, calendar_clock, calendar_event, calendar_loading_unloading, calendar_loading_unloading_date, calendar_plus, calendar_rebook, calendar_reserve, calendar_show, calendar_time_slot, calendar_week, camera, camera_disabled, camera_photo_add, cancel_circle, cancel_square, cancel_square_outlined, caret_down, caret_down_bold, caret_left, caret_left_bold, caret_right, caret_right_bold, caret_up, caret_up_bold, cell_merge, cell_properties, cell_split, certificate, chat, check, check_bold, check_circle, check_circle_outlined, check_heavy, chevron_double_down, chevron_double_left, chevron_double_right, chevron_double_up, chevron_left, chevron_left_bold, chevron_right, chevron_right_bold, circle_notch, circle_outline, clipboard, clipboard_actions, clipboard_check, clipboard_empty, clipboard_planning, clock, clock_add, clock_checkmark, clock_delay_warning, clock_delayed, clock_locked, clock_question_mark, close, close_bold, close_heavy, cloud, cloud_connected, cloud_disconnected, cloud_download, cloud_upload, code, coffee_cup, collapse, collapse_bold, color_picker, column_copy, column_cut, column_delete, column_insert_after, column_insert_before, column_paste_after, column_paste_before, column_properties, columns, combine, comment, comment_add, comment_empty, comment_message, comment_message_disabled, compare_arrows, compass, component, contacts, contrast, copy_content, costs, credit_card, crop, cube, curly_brackets, cursor, cursor_add, cursor_remove
+
+### D-H
+
+dashboard, data_missing, data_transfer_off, day_mostly_cloudy, day_partly_cloudy, delete, delivery_truck, delivery_truck_allocate, delivery_truck_motion, document, download, download_line, download_xls, drag_corner, drag_horizontal, drag_indicator, drag_vertical, drivers, drizzle, drone, earnings_statement, edit_combination, email, email_add, envelope, eraser, exclamation_mark, expand, expand_bold, expand_less, expand_less_bold, expand_less_circle, expand_more, expand_more_bold, expand_more_circle, export, factory, fast_forward, fast_rewind, file, file_bar_graph, file_check_in, file_check_out, file_cloud, file_copy, file_edit, file_merge, file_missing, file_new, file_secure, file_table, file_type_bmpf, file_type_csv, file_type_cur, file_type_doc, file_type_ico, file_type_key, file_type_log, file_type_numbers, file_type_pdf, file_type_pem, file_type_rfi, file_type_rfq, file_type_rtf, file_type_text, file_type_tif, file_type_tmp, file_type_xls, filter, filter_list, filter_off, first_page, flag, flag_finish, floorplan, flowchart, fog, folder_closed, folder_locked, folder_new, folder_open, folder_personal, folder_project, folder_public, folder_share, folder_unlocked, footprints, forestry, forklift, frame, freight_market, freight_matching, freight_trolley, full_screen, function, gantt_chart, gavel, gears, greater_than_equal_to, group_items, hail, hail_heavy, hail_light, hammer, hand, hard_hat, headset, heart, helicopter, help, help_outlined, history, home, hourglass
+
+### I-O
+
+ice, icons_shapes, image, image_add, image_disabled, image_scene, in_cab_device, in_field_device, info, info_outlined, info_token, inspect, invoice, invoice_euro, invoice_pound, invoice_yen, item_begins_with, item_contains, item_does_not_contain, item_does_not_equal, item_ends_with, item_equals, key, keyboard, keyboard_keys, labs, language, last_page, launch, launch_bold, layer, learn, less_than_equal_to, lightbulb_off, lightbulb_on, lightning, line_diagonal, line_graph, link, link_broken, link_off, list_bulleted, list_numbered, list_shapes, location, location_add, location_add_multiple, location_arrow, location_disabled, location_point, lock, lock_open, magic_wand, manage_accounts, manage_people, map, map_2d, map_marker, map_marker_circle, map_marker_multiple, map_markers, map_poi, master_data, megaphone, menu, menu_circle, mic, mix, mobile_app_version, monetarization, moon, more_circle, more_horizontal, more_vertical, mouse, move, move_last_down, move_last_left, move_last_right, move_last_up, night_mostly_cloudy, night_partly_cloudy, no_package, no_truck, not_synced_bold, notifications, notifications_off, object_mirror, object_outline, object_rotate, offers, overcast
+
+### P-S
+
+package, package_delivered, package_delivery, package_missing, package_pickup, package_sent, pager, paint_bucket, palette, pan, paper_plane, paperclip, password, pause_circle, payment_instant, pen, pencil, people_add, people_couple, people_group, person, person_account, person_add, person_clock, person_edit, person_remove, phone, phone_call, phone_hang_up, phone_mobile, pin, pin_add, pin_straight, pin_straight_cancel, play_circle, point_marker_tool, polygon, polygon_area_tool, polygon_concave, polygon_cone, polygon_drag_rectangle, polygon_line_tool, polygon_merge, polygon_select, printer, pulse, qr_code, question, quick_login, rain, rain_heavy, rain_icy, raindrop, redo, redo_bold, refresh, refresh_bold, remove, remove_bold, remove_circle, remove_heavy, reply, rewind, row_add, row_copy, row_cut, row_delete, row_highlighted, row_insert_after, row_insert_before, row_paste_after, row_paste_before, row_properties, row_remove, rows_show_less, rows_show_more, rss_feed, ruler, satellite, save_as, save_disk, scan_barcode, schema, scissors, screen, screenshot, search, server, server_round, settings, share, shield, shopping_cart, shopping_cart_minus, shopping_cart_plus, shortcut, shovel, show_less_caret, show_more_caret, sign_in, sign_out, signal, smiley_dissatisfied, smiley_dissatisfied_outlined, smiley_neutral, smiley_neutral_outlined, smiley_satisfied, smiley_satisfied_outlined, smiley_somewhat_dissatisfied, smiley_somewhat_dissatisfied_outlined, smiley_somewhat_satisfied, smiley_somewhat_satisfied_outlined, snow_heavy, snow_light, snow_particle, snowflake, snowflakes, sort, sort_alpha_down, sort_alpha_up, sort_arrow_down, sort_arrow_up, sort_down, sort_up, star, star_half, star_locked, star_northern, star_outlined, stars, stop_circle, street_measurement, submit_expense, sun, swap, switch_account, switch_left, switch_right, sync, sync_bold, sync_off
+
+### T-Z and Numbers
+
+table, tablet, tag, tag_disabled, template, text_align_left, text_align_right, text_bold, text_centered, text_grow, text_input, text_input_long, text_input_short, text_italic, text_marker, text_shrink, text_strikethrough, text_truncated, text_underlined, thermometer_cold, thermometer_hot, thumbs_down, thumbs_up, thunderstorm_heavy, thunderstorm_light, ticket, ticket_plane, time_off_work, time_slot_not_reserved, time_slot_reserved, timer, timer_countdown, timesheet, timesheet_approve, toggle_center, toggle_left_panel, toggle_off, toggle_on, toggle_right_panel, traffic_cone, tree_structure, triangle_down, triangle_left, triangle_right, triangle_up, trimble_logo, truck_add, truck_warning_delay, tune, tune_circle, uncombine, undo, undo_bold, unfold_less, unfold_more, unit_selector, unsorted_arrows, update, upload, upload_xls, user_account, user_active, user_guide, user_inactive, user_passkey, user_permissions, video, video_add, video_disabled, view_grid, view_list, visibility_off, visibility_on, volume_down, volume_mute, volume_up, vr_xr, warehouse, warning, warning_outlined, web, wheelbarrow, widgets, wifi, wifi_no_internet, wifi_off, wind, window, window_dock_undock, window_fit, window_resize, window_side_panel, window_template, window_views, window_wireframe, wintery_mix, wrench, zoom_box, zoom_in, zoom_out, 2_layers, 2_layers_off, 360, add_square, archive_square, auto_target, avoidance_zone, background_dark, background_light, base_station, bullseye, bullseye_off, bullseye_warning, clip, compactor, corner, dashboard_tiles, design_package, device_cb460, device_tsc7, devices_group, devices_status, dozer, easting, edit_mode, electric_meter_off, electric_meter_off_outline, electric_meter_outline_rounded, electric_meter_rounded, electric_meter_rounded_warn, elevation, gnss, gnss_r8, gnss_r8s_base, gnss_rpt, gnss_rts, gnss_sps986, gps, grader, hex, horizontal_accuracy, image_square, image_square_off, image_square_off_outline, image_square_outline, machine, machines, measure_up, northing, orbit, orthogonal, perspective, prism_pole, prism_pole_extend, receiver_generic_error_filled, receiver_generic_error_outline, receiver_generic_filled, receiver_generic_off_filled, receiver_generic_off_outline, receiver_generic_outline, receiver_generic_warn_filled, receiver_generic_warn_outline, ri, rpt, rts, rts_off, rts_rpt, select_area, sx10, sync_filled, todo, todo_add, total_station, total_station_lost, unarchive_square, vertical_accuracy, view_2_rows, view_3_column, visibility_part_outline, workers_queue, x12, x7, x7_card, x7_settings, xr10, zoom_center
+
+## 📖 Icon Categories by Usage
+
+### Navigation & UI
+
+`arrow_left`, `arrow_right`, `arrow_up`, `arrow_down`, `chevron_left`, `chevron_right`, `menu`, `close`, `home`, `settings`, `search`
+
+### Actions & Operations
+
+`add`, `remove`, `edit_combination`, `delete`, `save_disk`, `download`, `upload`, `copy_content`
+
+### Status & Feedback
+
+`check`, `check_circle`, `warning`, `alert`, `info`, `cancel_circle`, `help`
+
+### Files & Documents
+
+`file`, `folder_open`, `folder_closed`, `document`, `image`, `video`
+
+### Communication
+
+`email`, `phone`, `chat`, `comment`, `notifications`
+
+### Time & Calendar
+
+`calendar`, `clock`, `timer`, `history`
+
+### User & Account
+
+`person`, `people_group`, `user_account`, `key`, `lock`
+
+### Data & Analytics
+
+`bar_graph`, `line_graph`, `dashboard`

package/templates/react/.cursor/rules/modus-icons-react-short.mdc

@@ -0,0 +1,24 @@
+---
+description: Essential icon usage rules for Modus Design System
+globs: ["**/*.tsx", "**/*.ts"]
+alwaysApply: true
+---
+
+# Modus Icons - Short
+
+Essential icon usage rules for Modus Design System.
+**REFERENCE**: For allowed list of Modus icon names see `.cursor/rules/modus-icon-names.mdc`
+
+## Key Rules
+
+- **Use Modus icons exclusively** - `<i className="modus-icons">icon-name</i>`
+- **Never use other icon libraries** - No Font Awesome, Material Icons, Heroicons, etc.
+- **Use valid icon names only** - Check Modus Icons documentation for valid names
+- **Size with Tailwind classes** - `text-sm`, `text-lg`, `text-xl` for sizing
+- **Color with design system** - `text-primary`, `text-foreground`, `text-muted-foreground`
+- **Use CDN import** - Ensure Modus Icons CDN is loaded
+- **Test icon rendering** - Verify icons display correctly in all themes
+
+## Reference
+
+For detailed icon usage patterns, sizing guidelines, and advanced icon techniques, fetch the full rule: `modus-icons-react`