Initial commit

2025-11-30 08:39:17 +08:00
commit 8e4b6f55e3
8 changed files with 2286 additions and 0 deletions
--- a/commands/create-component.md
+++ b/commands/create-component.md
@@ -0,0 +1,113 @@
+---
+description: Create a custom React component with Tailwind styling
+---
+
+# Create Custom Component
+
+Generate a custom React component with Tailwind CSS and TypeScript.
+
+## Instructions
+
+1. Ask for component details:
+   - Component name
+   - Component type (functional, with state, etc.)
+   - Props needed
+   - Styling requirements
+2. Create component file in appropriate location:
+   - `src/components/` for shared components
+   - `src/features/` for feature-specific components
+   - `src/routes/` for route-specific components (TanStack Router)
+3. Generate component with:
+   - TypeScript interface for props
+   - Proper React patterns (hooks, composition, etc.)
+   - Tailwind CSS classes
+   - Accessibility attributes (ARIA labels, roles, etc.)
+   - Responsive design
+4. Use cn() utility for conditional classes
+5. Export component and types
+6. Provide usage example
+
+## Component Template
+
+### Basic Component
+
+```typescript
+import { cn } from "@/lib/utils";
+
+interface MyComponentProps {
+  title: string;
+  variant?: "default" | "primary" | "secondary";
+  className?: string;
+}
+
+export function MyComponent({
+  title,
+  variant = "default",
+  className,
+}: MyComponentProps) {
+  return (
+    <div
+      className={cn(
+        "rounded-lg p-4",
+        {
+          "bg-gray-100": variant === "default",
+          "bg-blue-500 text-white": variant === "primary",
+          "bg-gray-800 text-white": variant === "secondary",
+        },
+        className
+      )}
+    >
+      <h2 className="text-lg font-semibold">{title}</h2>
+    </div>
+  );
+}
+```
+
+### Interactive Component (with State)
+
+```typescript
+import { useState } from "react";
+import { cn } from "@/lib/utils";
+
+interface InteractiveComponentProps {
+  initialCount?: number;
+  className?: string;
+}
+
+export function InteractiveComponent({
+  initialCount = 0,
+  className,
+}: InteractiveComponentProps) {
+  const [count, setCount] = useState(initialCount);
+
+  return (
+    <div className={cn("flex items-center gap-2", className)}>
+      <button
+        onClick={() => setCount(count - 1)}
+        className="rounded bg-gray-200 px-4 py-2 hover:bg-gray-300 transition-colors"
+        aria-label="Decrease count"
+      >
+        -
+      </button>
+      <span className="text-lg font-semibold" aria-live="polite">
+        {count}
+      </span>
+      <button
+        onClick={() => setCount(count + 1)}
+        className="rounded bg-gray-200 px-4 py-2 hover:bg-gray-300 transition-colors"
+        aria-label="Increase count"
+      >
+        +
+      </button>
+    </div>
+  );
+}
+```
+
+## Framework-Specific Guidelines
+
+- **React + Vite**: All components are client-side by default. Use React hooks (useState, useEffect, etc.) freely without any special directives.
+- **TanStack Router**: Components integrate seamlessly with route loaders, route context, and navigation hooks.
+- **Component Organization**: Follow Clean Architecture - separate UI components (`components/`), feature logic (`features/`), and routes (`routes/`).
+
+Ensure proper typing, styling, and accessibility.