Refine Dev

What it does

This skill enables AI agents to assist in building enterprise CRUD (Create, Read, Update, Delete) applications using the Refine.dev framework. It provides a headless React framework with built-in data fetching, routing, authentication, and access control, allowing developers to focus on application logic rather than boilerplate setup. The agent can help define resources, configure data providers, and generate basic app structures for rapid development.

When to use it

• When building CRUD applications that require robust data management and user authentication.
• For quickly scaffolding a new Refine.dev project with a REST or GraphQL API backend.
• To assist in defining resources (entities like posts, users, products) within the application.
• When needing help configuring routing and integrating with React Router.

Key capabilities

• Data Provider Configuration: Assists in setting up adapters for various backends (REST, GraphQL).
• Resource Definition: Helps define entities (resources) with associated CRUD operations (list, create, edit, show).
• Hook Utilization: Guides the use of Refine hooks like useList, useOne, useCreate, useUpdate, and useDelete.
• Routing Integration: Facilitates integration with React Router for managing application routes.
• Authentication Support: Helps configure authentication providers for login, logout, and permissions management.

Example prompts

• "Generate a basic Refine app structure using Vite and Mantine, connecting to https://api.example.com."
• "Define a 'posts' resource with list, create, edit, and show routes in my Refine application."
• "How do I use the useList hook to fetch data for a list view in Refine?"

Tips & gotchas

• UI Library Consistency: Refine.dev recommends sticking with a single UI library (like Mantine) once selected.
• Data Provider Reliance: Always utilize Refine hooks (useList, useCreate, etc.) for data operations; avoid bypassing the data provider directly.
• Dynamic API URLs: Avoid hardcoding API URLs; configure them within the data provider instead.