cfa137795b
* refactor: consolidate AGENTS.md and CLAUDE.md files, update tech stack and architecture details - Merged content from CLAUDE.md into AGENTS.md for better organization. - Updated tech stack section to reflect the current technologies used, including Next.js, Supabase, and Tailwind CSS. - Enhanced monorepo structure documentation with detailed directory purposes. - Streamlined multi-tenant architecture explanation and essential commands. - Added key patterns for naming conventions and server actions. - Removed outdated agent files related to Playwright and PostgreSQL, ensuring a cleaner codebase. - Bumped version to 2.23.7 to reflect changes.
72 lines
1.4 KiB
Markdown
72 lines
1.4 KiB
Markdown
# UI Components & Styling
|
|
|
|
## Skills
|
|
|
|
For forms:
|
|
- `/react-form-builder` - Forms with validation and server actions
|
|
|
|
## Import Convention
|
|
|
|
Always use `@kit/ui/{component}`:
|
|
|
|
```tsx
|
|
import { Button } from '@kit/ui/button';
|
|
import { Card } from '@kit/ui/card';
|
|
import { If } from '@kit/ui/if';
|
|
import { Trans } from '@kit/ui/trans';
|
|
import { toast } from '@kit/ui/sonner';
|
|
import { cn } from '@kit/ui/utils';
|
|
```
|
|
|
|
## Styling
|
|
|
|
- Tailwind CSS v4 with semantic classes
|
|
- Prefer: `bg-background`, `text-muted-foreground`, `border-border`
|
|
- Use `cn()` for class merging
|
|
- Never use hardcoded colors like `bg-white`
|
|
|
|
## Key Components
|
|
|
|
| Component | Usage |
|
|
|-----------|-------|
|
|
| `If` | Conditional rendering |
|
|
| `Trans` | Internationalization |
|
|
| `toast` | Notifications |
|
|
| `Form*` | Form fields |
|
|
| `Button` | Actions |
|
|
| `Card` | Content containers |
|
|
| `Alert` | Error/info messages |
|
|
|
|
## Conditional Rendering
|
|
|
|
```tsx
|
|
import { If } from '@kit/ui/if';
|
|
|
|
<If condition={isLoading} fallback={<Content />}>
|
|
<Spinner />
|
|
</If>
|
|
```
|
|
|
|
## Internationalization
|
|
|
|
```tsx
|
|
import { Trans } from '@kit/ui/trans';
|
|
|
|
<Trans i18nKey="namespace:key" values={{ name }} />
|
|
```
|
|
|
|
## Testing Attributes
|
|
|
|
Always add `data-test` for E2E:
|
|
|
|
```tsx
|
|
<button data-test="submit-button">Submit</button>
|
|
```
|
|
|
|
## Form Guidelines
|
|
|
|
- Use `react-hook-form` with `zodResolver`
|
|
- Never add generics to `useForm`
|
|
- Use `useWatch` instead of `watch()`
|
|
- Always include `FormMessage` for errors
|