frappe-frontendlisted
Install: claude install-skill prilk-consulting/frappe-agent-kit
# Modern Frontend Development for Frappe
## Usage
Use this skill when:
- Building a React or Vue SPA inside a Frappe app (Raven/CRM-style)
- Wiring Vite builds into `bench build` and Frappe routing
- Debugging prod asset 404s, dev boot failures, or silent realtime listeners
- Choosing between frappe-react-sdk, frappe-ui, and frappe-js-sdk
## Stack options
| Stack | Libraries | Reference apps |
|-------|-----------|----------------|
| **React** | frappe-react-sdk, SWR, Tailwind, Radix/shadcn | Raven |
| **Vue 3** | frappe-ui, Pinia, Tailwind | CRM, Helpdesk |
## frappe-js-sdk (any framework)
```typescript
import { FrappeApp } from 'frappe-js-sdk'
const frappe = new FrappeApp('https://site.example.com')
await frappe.auth.loginWithUsernamePassword({ username, password })
await frappe.db.getDoc('Customer', 'X')
await frappe.db.getDocList('Customer', { fields: ['name'], filters: [['disabled', '=', 0]], limit: 20 })
await frappe.call.post('module.method', { param: 'value' })
await frappe.file.uploadFile(file, { doctype: 'Customer', docname: 'X' })
```
## frappe-react-sdk (React)
```tsx
<FrappeProvider socketPort={import.meta.env.VITE_SOCKET_PORT || '9000'}>
<App />
</FrappeProvider>
// SWR-backed hooks — call mutate() to refetch after writes
const { data, error, isLoading, mutate } = useFrappeGetCall<{ message: Row[] }>(
'myapp.api.get_list', { status: 'Open', limit: 50 })
const rows = data?.message ?? []
const { data: doc, mutate } = useFrappeGetDoc<Shape>(doctype