new features

.claude/commands/convert-icons.md

@@ -0,0 +1,36 @@
+# Convert Icons
+
+Convert raw SVG icons to React TSX components using SVGR.
+
+## Usage
+
+```
+/convert-icons
+```
+
+## Instructions
+
+1. Check that raw SVG files exist in `src/shared/assets/raw-icons/`. If the directory doesn't exist or is empty, inform the user and ask them to place SVG files there first.
+
+2. Run the conversion:
+   ```bash
+   bun run gicons
+   ```
+   This executes:
+   ```
+   npx @svgr/cli --ext tsx --typescript --no-prettier --icon --ref --no-svgo ./src/shared/assets/raw-icons/ --out-dir ./src/shared/ui/Icons/
+   ```
+
+3. Report which icon components were generated in `src/shared/ui/Icons/`.
+
+4. The generated components can be imported as:
+   ```tsx
+   import { IconName } from "@shared/ui/Icons/IconName"
+   ```
+
+## Notes
+
+- Raw SVGs go in: `src/shared/assets/raw-icons/`
+- Generated TSX components output to: `src/shared/ui/Icons/`
+- SVGR flags: TypeScript, icon mode (scales with font-size), forwardRef support, no Prettier formatting, no SVGO optimization
+- The primary icon library is `lucide-react` — custom SVG icons are for icons not available in Lucide

.claude/commands/gc.md

@@ -0,0 +1,55 @@
+# Generate Component (gc)
+
+Generate an FSD component using the project's generator script.
+
+## Usage
+
+```
+/gc <layer> <ComponentName>
+```
+
+**Arguments:**
+- `$ARGUMENTS` — expects `<layer> <ComponentName>`, e.g. `shared Button`, `entity ProjectCard`, `feature CreateProjectModal`
+
+## Layers
+
+| Alias | Path |
+|-------|------|
+| `shared` | `src/shared/ui/` |
+| `entity` / `entities` | `src/entities/` |
+| `feature` / `features` | `src/features/` |
+| `widget` / `widgets` | `src/widgets/` |
+| `page` / `pages` | `src/pages/` |
+
+## Instructions
+
+1. Parse `$ARGUMENTS` to extract `<layer>` and `<ComponentName>`. If arguments are missing or unclear, ask the user.
+
+2. Run the generator:
+   ```bash
+   bun run gc <layer> <ComponentName>
+   ```
+
+3. This creates 4 files:
+   - `index.ts` — re-exports the component
+   - `<ComponentName>.tsx` — component implementation with `FunctionComponent`, `JSX.Element`, SCSS module import, `data-testid`
+   - `<ComponentName>.d.ts` — props interface `I<ComponentName>Props` with `className?: string`
+   - `<ComponentName>.module.scss` — empty `.root {}` class
+
+4. After generation, report the created files and the full path.
+
+5. If the user provides additional context about what the component should do or look like, modify the generated files accordingly:
+   - Add props to the `.d.ts` file
+   - Implement the component logic in `.tsx`
+   - Add styles to `.module.scss`
+   - Use existing project patterns: `classnames` as `cs`, typography/mixin includes from auto-injected SCSS partials, Radix UI primitives or Themes where appropriate, `lucide-react` icons
+
+## Project Conventions
+
+- Props interface: `I<ComponentName>Props` in a `.d.ts` file
+- Import types with `import type { ... }`
+- Import order: types → react/libs → path aliases (`@shared/`, `@entities/`, etc.) → local
+- Use `cs()` from `classnames` for combining classes
+- Root element gets `className={styles.root}` and `data-testid="<ComponentName>"`
+- SCSS auto-injected namespaces: `variables`, `breakpoints`, `typography`, `mixins`
+- Use `"use client"` directive only when component uses hooks or browser APIs

.claude/commands/gen-api-types.md

@@ -0,0 +1,51 @@
+# Generate API Types
+
+Fetch the OpenAPI schema from the backend and generate TypeScript types.
+
+## Usage
+
+```
+/gen-api-types
+```
+
+## Instructions
+
+1. Ensure the backend server is running at `http://127.0.0.1:8000`. If the command fails with a connection error, inform the user that the backend must be running first.
+
+2. Run the type generation:
+   ```bash
+   bun run gen:api-types
+   ```
+   This executes:
+   ```
+   openapi-typescript http://127.0.0.1:8000/api/schema/ --output src/shared/api/__generated__/openapi.types.ts
+   ```
+
+3. Report success and note that the generated types are at `src/shared/api/__generated__/openapi.types.ts`.
+
+4. The generated file exports:
+   - `paths` — all API endpoints with request/response types
+   - `components` — schema definitions (used as `components["schemas"]["ModelName"]`)
+   - `operations` — operation-level types
+
+## Usage in Code
+
+```tsx
+// Import schema types
+import type { components } from "@shared/api/__generated__/openapi.types"
+
+type ProjectRead = components["schemas"]["ProjectRead"]
+
+// Use with the API client
+import api from "@shared/api"
+
+api.useQuery("get", "/api/projects/")
+api.useMutation("post", "/api/projects/", { onSuccess, onError })
+```
+
+## Notes
+
+- Requires the backend running at `http://127.0.0.1:8000`
+- Uses `openapi-typescript` to generate types from the `/api/schema/` endpoint
+- The API client (`src/shared/api/index.ts`) uses `openapi-fetch` + `openapi-react-query` with these generated types
+- After regeneration, check for any TypeScript errors in components that use the API types, as schema changes may break existing code