“alexvisualmakers”
600552c858
Replace the manual "read .claude/agents/*.md" workflow with native Claude Code features for a more efficient, scalable development experience: - **Skills** (.claude/skills/): 7 auto-discovered slash commands (/requirements, /architecture, /frontend, /backend, /qa, /deploy, /help) with forked sub-agents for heavy tasks and inline execution for interactive ones - **Rules** (.claude/rules/): 4 modular rule files (general, frontend, backend, security) auto-applied based on file context - **Sub-Agents** (.claude/agents/): Lightweight configs for frontend-dev, backend-dev, and qa-engineer with model, tool, and turn limit settings - **Context Engineering**: Layered context loading, context isolation via forked skills, built-in context recovery after compaction, and "always read, never guess" rules to prevent hallucinated code references - **CLAUDE.md**: Auto-loaded project context replacing PROJECT_CONTEXT.md - **Feature tracking**: features/INDEX.md as persistent state across sessions - **Production guides**: docs/production/ for error tracking, security, performance, database optimization, and rate limiting - **Init Mode**: /requirements detects empty PRD and bootstraps full project setup (PRD + all feature specs) from a single project description Removed: 6 monolithic agent files, PROJECT_CONTEXT.md, HOW_TO_USE_AGENTS.md, TEMPLATE_CHANGELOG.md Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
27 lines
1.3 KiB
Markdown
27 lines
1.3 KiB
Markdown
# Frontend Development Rules
|
|
|
|
## shadcn/ui First (MANDATORY)
|
|
- Before creating ANY UI component, check if shadcn/ui has it: `ls src/components/ui/`
|
|
- NEVER create custom implementations of: Button, Input, Select, Checkbox, Switch, Dialog, Modal, Alert, Toast, Table, Tabs, Card, Badge, Dropdown, Popover, Tooltip, Navigation, Sidebar, Breadcrumb
|
|
- If a shadcn component is missing, install it: `npx shadcn@latest add <name> --yes`
|
|
- Custom components are ONLY for business-specific compositions that internally use shadcn primitives
|
|
|
|
## Import Pattern
|
|
```tsx
|
|
import { Button } from "@/components/ui/button"
|
|
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card"
|
|
```
|
|
|
|
## Component Standards
|
|
- Use Tailwind CSS exclusively (no inline styles, no CSS modules)
|
|
- All components must be responsive (mobile 375px, tablet 768px, desktop 1440px)
|
|
- Implement loading states, error states, and empty states
|
|
- Use semantic HTML and ARIA labels for accessibility
|
|
- Keep components small and focused
|
|
- Use TypeScript interfaces for all props
|
|
|
|
## Auth Best Practices (Supabase)
|
|
- Use `window.location.href` for post-login redirect (not `router.push`)
|
|
- Always verify `data.session` exists before redirecting
|
|
- Always reset loading state in all code paths (success, error, finally)
|