@julianoczkowski/create-trimble-app 2.0.0

package/templates/react/.cursor/rules/modus-semantic-html-react.mdc

@@ -0,0 +1,427 @@
+---
+description: Use div elements exclusively to avoid Tailwind CSS conflicts
+globs: ["**/*.tsx"]
+alwaysApply: false
+---
+
+# Semantic HTML Usage in React + Vite
+
+## 🚨 **CRITICAL: Use Div Elements Only**
+
+**MANDATORY**: This React + Vite application uses **div elements exclusively** for all content (except `<i>` for icons) to avoid conflicts with Tailwind CSS default browser styles.
+
+**Rule**: Use `div` elements with Tailwind classes instead of semantic HTML elements.
+
+## ❌ **FORBIDDEN: Semantic HTML Elements**
+
+### ❌ **Never Use Semantic HTML Elements**
+
+```tsx
+// ❌ WRONG: Semantic HTML elements
+<h1 className="text-4xl font-bold">Title</h1>
+<h2 className="text-3xl font-semibold">Subtitle</h2>
+<h3 className="text-2xl font-medium">Heading</h3>
+<p className="text-base">Paragraph text</p>
+<section className="mb-8 p-4">Content section</section>
+<header className="bg-background">Header content</header>
+<footer className="bg-muted">Footer content</footer>
+<nav className="flex space-x-4">Navigation</nav>
+<main className="flex-1">Main content</main>
+<aside className="w-64">Sidebar</aside>
+<article className="prose">Article content</article>
+<span className="text-sm">Inline text</span>
+```
+
+### ❌ **Never Use Form Elements**
+
+```tsx
+// ❌ WRONG: Form elements
+<form className="space-y-4">
+  <label className="block">Label</label>
+  <input type="text" className="w-full" />
+  <button type="submit">Submit</button>
+</form>
+
+// ❌ WRONG: List elements
+<ul className="space-y-2">
+  <li>List item 1</li>
+  <li>List item 2</li>
+</ul>
+
+<ol className="space-y-2">
+  <li>Ordered item 1</li>
+  <li>Ordered item 2</li>
+</ol>
+```
+
+## ✅ **CORRECT: Div Elements with Tailwind**
+
+### ✅ **Use Div Elements for All Content**
+
+```tsx
+// ✅ CORRECT: Div elements with Tailwind classes
+<div className="text-4xl font-bold">Title</div>
+<div className="text-3xl font-semibold">Subtitle</div>
+<div className="text-2xl font-medium">Heading</div>
+<div className="text-base">Paragraph text</div>
+<div className="mb-8 p-4">Content section</div>
+<div className="bg-background">Header content</div>
+<div className="bg-muted">Footer content</div>
+<div className="flex space-x-4">Navigation</div>
+<div className="flex-1">Main content</div>
+<div className="w-64">Sidebar</div>
+<div className="prose">Article content</div>
+<div className="text-sm">Inline text</div>
+```
+
+### ✅ **Form Elements as Divs**
+
+```tsx
+// ✅ CORRECT: Form elements as divs
+<div className="space-y-4">
+  <div className="block">Label</div>
+  <input type="text" className="w-full" />
+  <button type="submit">Submit</button>
+</div>
+
+// ✅ CORRECT: List elements as divs
+<div className="space-y-2">
+  <div>List item 1</div>
+  <div>List item 2</div>
+</div>
+
+<div className="space-y-2">
+  <div>Ordered item 1</div>
+  <div>Ordered item 2</div>
+</div>
+```
+
+## 🎯 **Component Patterns**
+
+### ✅ **Page Layout with Divs**
+
+```tsx
+// ✅ CORRECT: Page layout using divs
+function PageLayout({ children }: { children: ReactNode }) {
+  return (
+    <div className="min-h-screen flex flex-col">
+      <div className="bg-background border-b border-border">
+        <div className="container mx-auto px-4 py-4">
+          <div className="text-2xl font-bold text-foreground">App Title</div>
+        </div>
+      </div>
+
+      <div className="flex-1">{children}</div>
+
+      <div className="bg-muted border-t border-border">
+        <div className="container mx-auto px-4 py-4">
+          <div className="text-sm text-muted-foreground">Footer content</div>
+        </div>
+      </div>
+    </div>
+  );
+}
+```
+
+### ✅ **Card Component with Divs**
+
+```tsx
+// ✅ CORRECT: Card component using divs
+function Card({ title, content, children }: CardProps) {
+  return (
+    <div className="bg-card text-card-foreground border border-border rounded-lg p-6">
+      <div className="text-xl font-semibold mb-4">{title}</div>
+      <div className="text-base mb-4">{content}</div>
+      {children}
+    </div>
+  );
+}
+
+// Usage
+<Card title="Card Title" content="Card content">
+  <div className="text-sm text-muted-foreground">Additional content</div>
+</Card>;
+```
+
+### ✅ **Navigation with Divs**
+
+```tsx
+// ✅ CORRECT: Navigation using divs
+function Navigation() {
+  const navItems = [
+    { label: "Home", path: "/" },
+    { label: "About", path: "/about" },
+    { label: "Contact", path: "/contact" },
+  ];
+
+  return (
+    <div className="bg-background border-b border-border">
+      <div className="container mx-auto px-4 py-4">
+        <div className="flex space-x-6">
+          {navItems.map((item) => (
+            <a
+              key={item.path}
+              href={item.path}
+              className="text-foreground hover:text-primary transition-colors"
+            >
+              {item.label}
+            </a>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
+```
+
+### ✅ **Form with Divs**
+
+```tsx
+// ✅ CORRECT: Form using divs
+function ContactForm() {
+  const [formData, setFormData] = useState({
+    name: "",
+    email: "",
+    message: "",
+  });
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    console.log("Form data:", formData);
+  };
+
+  return (
+    <div className="max-w-md mx-auto p-6 bg-card border border-border rounded-lg">
+      <div className="text-2xl font-bold mb-6 text-card-foreground">
+        Contact Us
+      </div>
+
+      <div onSubmit={handleSubmit}>
+        <div className="mb-4">
+          <div className="block text-sm font-medium text-card-foreground mb-2">
+            Name
+          </div>
+          <input
+            type="text"
+            value={formData.name}
+            onChange={(e) =>
+              setFormData((prev) => ({ ...prev, name: e.target.value }))
+            }
+            className="w-full px-3 py-2 border border-input rounded bg-input text-foreground"
+            required
+          />
+        </div>
+
+        <div className="mb-4">
+          <div className="block text-sm font-medium text-card-foreground mb-2">
+            Email
+          </div>
+          <input
+            type="email"
+            value={formData.email}
+            onChange={(e) =>
+              setFormData((prev) => ({ ...prev, email: e.target.value }))
+            }
+            className="w-full px-3 py-2 border border-input rounded bg-input text-foreground"
+            required
+          />
+        </div>
+
+        <div className="mb-6">
+          <div className="block text-sm font-medium text-card-foreground mb-2">
+            Message
+          </div>
+          <textarea
+            value={formData.message}
+            onChange={(e) =>
+              setFormData((prev) => ({ ...prev, message: e.target.value }))
+            }
+            className="w-full px-3 py-2 border border-input rounded bg-input text-foreground h-32"
+            required
+          />
+        </div>
+
+        <button
+          type="submit"
+          className="w-full bg-primary text-primary-foreground py-2 px-4 rounded hover:bg-primary/90"
+        >
+          Send Message
+        </button>
+      </div>
+    </div>
+  );
+}
+```
+
+## 🎨 **Advanced Patterns**
+
+### ✅ **Typography with Divs**
+
+```tsx
+// ✅ CORRECT: Typography using divs
+function Typography() {
+  return (
+    <div className="space-y-4">
+      <div className="text-4xl font-bold text-foreground">Heading 1</div>
+      <div className="text-3xl font-semibold text-foreground">Heading 2</div>
+      <div className="text-2xl font-medium text-foreground">Heading 3</div>
+      <div className="text-xl font-medium text-foreground">Heading 4</div>
+      <div className="text-lg font-medium text-foreground">Heading 5</div>
+      <div className="text-base font-medium text-foreground">Heading 6</div>
+
+      <div className="text-base text-foreground">Regular paragraph text</div>
+      <div className="text-sm text-muted-foreground">Small text</div>
+      <div className="text-xs text-muted-foreground">Extra small text</div>
+    </div>
+  );
+}
+```
+
+### ✅ **List with Divs**
+
+```tsx
+// ✅ CORRECT: List using divs
+function ListComponent() {
+  const items = ["First item", "Second item", "Third item"];
+
+  return (
+    <div className="space-y-2">
+      {items.map((item, index) => (
+        <div key={index} className="flex items-center space-x-2">
+          <div className="w-2 h-2 bg-primary rounded-full"></div>
+          <div className="text-foreground">{item}</div>
+        </div>
+      ))}
+    </div>
+  );
+}
+```
+
+### ✅ **Table with Divs**
+
+```tsx
+// ✅ CORRECT: Table using divs
+function TableComponent() {
+  const data = [
+    { name: "John", age: 30, city: "New York" },
+    { name: "Jane", age: 25, city: "Los Angeles" },
+    { name: "Bob", age: 35, city: "Chicago" },
+  ];
+
+  return (
+    <div className="bg-card border border-border rounded-lg overflow-hidden">
+      <div className="bg-muted px-4 py-2 border-b border-border">
+        <div className="grid grid-cols-3 gap-4 font-medium text-foreground">
+          <div>Name</div>
+          <div>Age</div>
+          <div>City</div>
+        </div>
+      </div>
+
+      <div className="divide-y divide-border">
+        {data.map((row, index) => (
+          <div key={index} className="px-4 py-2">
+            <div className="grid grid-cols-3 gap-4 text-foreground">
+              <div>{row.name}</div>
+              <div>{row.age}</div>
+              <div>{row.city}</div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+```
+
+## 🚫 **Common Anti-Patterns**
+
+### ❌ **Don't Mix Semantic and Div Elements**
+
+```tsx
+// ❌ WRONG: Mixing semantic and div elements
+<div className="container">
+  <h1 className="text-2xl">Title</h1> {/* ❌ Semantic element */}
+  <div className="text-base">Content</div> {/* ✅ Div element */}
+  <p className="text-sm">Description</p> {/* ❌ Semantic element */}
+</div>
+```
+
+### ❌ **Don't Use Semantic Elements for Styling**
+
+```tsx
+// ❌ WRONG: Using semantic elements for styling
+<h1 className="text-sm text-muted-foreground">Small text</h1>  {/* ❌ Wrong element */}
+<p className="text-4xl font-bold">Large title</p>              {/* ❌ Wrong element */}
+```
+
+### ❌ **Don't Use Form Elements**
+
+```tsx
+// ❌ WRONG: Using form elements
+<form className="space-y-4">
+  <label className="block">Label</label> {/* ❌ Form element */}
+  <input type="text" /> {/* ❌ Form element */}
+  <button type="submit">Submit</button> {/* ❌ Form element */}
+</form>
+```
+
+## 🔧 **Validation**
+
+### ✅ **Linting Commands**
+
+```bash
+# Check for semantic HTML violations
+npm run lint:semantic
+
+# Check for inline styles
+npm run lint:styles
+```
+
+### ✅ **Semantic HTML Test**
+
+```tsx
+// ✅ CORRECT: Test semantic HTML compliance
+function SemanticHTMLTest() {
+  return (
+    <div className="space-y-4">
+      <div className="text-2xl font-bold text-foreground">Test Page</div>
+
+      <div className="bg-card p-4 border border-border rounded">
+        <div className="text-lg font-medium text-card-foreground mb-2">
+          Card Title
+        </div>
+        <div className="text-base text-card-foreground">Card content</div>
+      </div>
+
+      <div className="space-y-2">
+        <div className="text-sm font-medium text-foreground">List Items:</div>
+        <div className="text-base text-foreground">• Item 1</div>
+        <div className="text-base text-foreground">• Item 2</div>
+        <div className="text-base text-foreground">• Item 3</div>
+      </div>
+    </div>
+  );
+}
+```
+
+## 🎯 **Key Takeaways**
+
+1. **Use Div Elements Only**: Never use semantic HTML elements
+2. **Tailwind for Styling**: Use Tailwind classes for all styling
+3. **Consistent Structure**: Maintain consistent div-based structure
+4. **Accessibility**: Ensure proper accessibility with div elements
+5. **Form Handling**: Use div elements for form structure
+
+## 🔍 **Semantic HTML Compliance Checklist**
+
+- [ ] ✅ **No Semantic Elements**: No `h1`, `h2`, `p`, `section`, `header`, `footer`, `nav`, `main`, `aside`, `article`, `span`
+- [ ] ✅ **Div Elements Only**: All content uses `div` elements
+- [ ] ✅ **Icon Exception**: Only `<i>` elements allowed for icons
+- [ ] ✅ **Tailwind Styling**: All styling through Tailwind classes
+- [ ] ✅ **Consistent Structure**: Consistent div-based component structure
+- [ ] ✅ **Accessibility**: Proper accessibility with div elements
+
+---
+
+**Remember: This React + Vite application uses div elements exclusively for all content (except `<i>` for icons) to avoid conflicts with Tailwind CSS default browser styles. Never use semantic HTML elements like `h1`, `p`, `section`, `header`, `footer`, `nav`, `main`, `aside`, `article`, or `span`.**

package/templates/react/.cursor/rules/modus-tailwind-usage-react-short.mdc

@@ -0,0 +1,23 @@
+---
+description: Tailwind CSS v3 with Modus Design System integration
+globs: ["**/*.tsx", "**/*.css"]
+alwaysApply: true
+---
+
+# Modus Tailwind Usage - Short
+
+Tailwind CSS v3 with Modus Design System integration.
+
+## Key Rules
+
+- **Tailwind v3 with design system** - Use Tailwind v3 with Modus Design System integration
+- **No generic Tailwind colors** - Never use `bg-blue-500`, `text-gray-600`, etc.
+- **Use design system colors** - `bg-background`, `text-foreground`, `bg-primary`, etc.
+- **Custom utilities for borders** - Use `border-default`, `border-success`, `border-warning`, etc.
+- **Elevation utilities** - Use `elevation-1`, `elevation-2`, `elevation-3` for shadows
+- **Proper CSS import order** - Modus CSS before Tailwind CSS
+- **Test in all themes** - Ensure Tailwind classes work in all 6 themes
+
+## Reference
+
+For detailed Tailwind integration, custom utilities, and advanced styling patterns, fetch the full rule: `modus-tailwind-usage-react`