opencode-agent-kit/template/.opencode/docs/frontend/react/CHEATSHEET.md

Multi-stack OpenCode agent toolkit — 33+ specialized AI agents, 200+ skills, 46 commands, 8 MCP servers (Nuxt, React, Node.js, Laravel, CI3, Android, Flutter, DevOps, SEO, SonarQube, and more)

# React Frontend Developer Agent — Cheatsheet

## Activation

```
@frontend-react [request]
@frontend-react Load skill `shadcn-ui` untuk build form components
@frontend-react Load skills: `building-components`, `security-review`, `tdd-workflow`
@frontend-react What skills are currently loaded?
```

## Component Development

```
@frontend-react Buat component Button dengan:
@frontend-react Buat DataTable component:
@frontend-react Buat LoginForm:
@frontend-react Implement design dari [screenshot]:
@frontend-react Add dark mode support:
@frontend-react Make [component] responsive:
```

## Performance

```
@frontend-react Load `vercel-react-best-practices` dan audit:
@frontend-react Add virtualization ke List untuk 500+ items
@frontend-react Lazy load semua components di bawah fold
@frontend-react Code split routes dan heavy components
```

## State Management

```
@frontend-react Create Zustand store untuk products:
@frontend-react Create TanStack Query hooks:
@frontend-react Setup data fetching untuk users page:
@frontend-react Setup data fetching untuk external API:
```

## Forms & Validation

```
@frontend-react Create Zod schema untuk form:
@frontend-react Implement form dengan React Hook Form:
@frontend-react Handle form submission dan validation:
```

## Design & Animation

```
@frontend-react Add micro-interactions dengan Framer Motion:
@frontend-react Add page transitions:
@frontend-react Create ErrorBoundary component:
```

## Code Review

```
@frontend-react Review components/ProductCard.tsx:
@frontend-react Review all changed files sebelum commit:
@frontend-react Audit accessibility:
```

## Debugging & Profiling

```
@frontend-react Debug ProductCard component:
@frontend-react Profile performance di dashboard page:
@frontend-react What's the current session context?
@frontend-react What's the best practice untuk [specific task]?
```

## Skills Available

| Skill | Description |
|-------|-------------|
| `coding-standards` | Universal coding standards |
| `frontend-patterns` | React/Next.js patterns |
| `impeccable` | Impeccable design intelligence |
| `web-design-guidelines` | UI/UX compliance |
| `shadcn-ui` | shadcn/ui components |
| `vercel-react-best-practices` | React performance |
| `vercel-composition-patterns` | Component composition |
| `building-components` | Component library creation |
| `security-review` | Auth/user input security |
| `tdd-workflow` | Test-driven development |