Initial commit

.claude/skills/scaffold-component/SKILL.md

@@ -0,0 +1,59 @@
+---
+name: scaffold-component
+description: Generate a new React component following project conventions
+disable-model-invocation: true
+---
+
+# Scaffold Component
+
+Generate a new component at the specified path with proper structure.
+
+## Usage
+
+`/scaffold-component ComponentName path/to/component`
+
+## Process
+
+1. **Parse Arguments**
+   - First argument: Component name (PascalCase)
+   - Second argument: Path relative to `src/components/`
+
+2. **Create Component File**
+
+   ```tsx
+   "use client";
+
+   import { cls } from "@/lib/utils";
+
+   interface $NAMEProps {
+     className?: string;
+   }
+
+   const $NAME = ({ className }: $NAMEProps) => {
+     return <div className={cls("", className)}>{/* TODO: Implement */}</div>;
+   };
+
+   export default $NAME;
+   ```
+
+3. **Determine if Hook is Needed**
+   - Ask user if component needs state/effects
+   - If yes, create hook file at `src/hooks/{domain}/use{Name}.ts`
+
+4. **Determine if Constants are Needed**
+   - Ask user if component has static text
+   - If yes, create constants file at `src/constants/{domain}/{name}.ts`
+
+## File Naming
+
+- Component: `ComponentName.tsx` (PascalCase)
+- Hook: `useComponentName.ts` (camelCase with use prefix)
+- Constants: `componentName.ts` (camelCase)
+
+## Output
+
+Report created files and remind user to:
+
+1. Add necessary imports
+2. Implement the component logic
+3. Add to parent component/page