MCPInstall

refine-dev

by itechmeatFrontend & Design

Refine.dev headless React framework for CRUD apps: data providers, resources, routing, authentication, hooks, and forms. Use when building admin panels, dashboards, or internal tools with React and various backends (REST, GraphQL, Supabase, Strapi), or configuring Refine data providers and authentication. Keywords: Refine, CRUD, admin panel, data provider, React.

Installs
206
Last 24h
—
Trending rank
—
Security
Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/itechmeat/llm-code --skill refine-dev
  1. 01

    Install

    Run the command in your project. The CLI asks which agents to install for.

  2. 02

    Describe the task

    Ask your agent for something this skill covers. It loads refine-dev automatically when relevant.

  3. 03

    Review the result

    The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

Refine.dev Framework

Refine is a headless React framework for building enterprise CRUD applications. It provides data fetching, routing, authentication, and access control out of the box while remaining UI-agnostic.

Core Concepts

Refine is built around these key abstractions:

  1. Data Provider — adapter for your backend (REST, GraphQL, etc.)
  2. Resources — entities in your app (e.g., posts, users, products)
  3. Hooks — useList, useOne, useCreate, useUpdate, useDelete, useForm, useTable
  4. Auth Provider — handles login, logout, permissions
  5. Router Provider — integrates with React Router, etc.

Quick Start (Vite)

Scaffold: npm create refine-app@latest (select Vite, Mantine, REST API). For manual setup, install @refinedev/core @refinedev/mantine @refinedev/react-router and Mantine packages.

Minimal App Structure

// src/App.tsx
import { Refine } from "@refinedev/core";
import { MantineProvider } from "@mantine/core";
import routerProvider from "@refinedev/react-router";
import dataProvider from "@refinedev/simple-rest";
import { BrowserRouter, Routes, Route } from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
      <MantineProvider>
        <Refine
          dataProvider={dataProvider("https://api.example.com")}
          routerProvider={routerProvider}
          resources={[
            {
              name: "posts",
              list: "/posts",
              create: "/posts/create",
              edit: "/posts/edit/:id",
              show: "/posts/show/:id",
            },
          ]}
        >
          <Routes>{/* Your routes here */}</Routes>
        </Refine>
      </MantineProvider>
    </BrowserRouter>
  );
}

Critical Prohibitions

  • Do NOT mix multiple UI libraries (pick Mantine and stick with it)
  • Do NOT bypass data provider — always use Refine hooks for data operations
  • Do NOT hardcode API URLs — use data provider configuration
  • Do NOT skip resource definition — all CRUD entities must be declared in resources
  • Do NOT ignore TypeScript types — Refine is fully typed, leverage it

Steps for New Feature

  1. Define the resource in <Refine resources={[...]}>
  2. Create page components (List, Create, Edit, Show)
  3. Set up routes matching resource paths
  4. Use appropriate hooks (useTable for lists, useForm for create/edit)
  5. Configure auth provider if authentication is needed

Definition of Done

  • Resource defined in Refine configuration
  • All CRUD pages implemented with proper hooks
  • Routes match resource configuration
  • TypeScript types for resource data defined
  • Error handling in place
  • Loading states handled

Release Note (5.0.12)

  • useList and useTable now preserve custom fields returned by getList, which matters when your data provider returns extra aggregate or pagination metadata alongside the row list.

References (Detailed Guides)

Core

  • data-providers.md — Data provider interface, available providers, custom implementation
  • resources.md — Resource definition and configuration
  • routing.md — React Router integration and route patterns

Hooks

  • hooks.md — All hooks: useList, useOne, useCreate, useUpdate, useDelete, useForm, useTable, useSelect

Security & Auth

  • auth.md — Auth provider, access control, RBAC/ABAC, Casbin/CASL integration

UI & Components

  • mantine-ui.md — Mantine components integration
  • inferencer.md — Auto-generate CRUD pages from API schema

Utilities & Features

  • notifications.md — Notification provider and useNotification hook
  • i18n.md — Internationalization with i18nProvider
  • realtime.md — LiveProvider for websocket/realtime subscriptions

Links

FAQ

What does the refine-dev skill do?

Refine.dev headless React framework for CRUD apps: data providers, resources, routing, authentication, hooks, and forms. Use when building admin panels, dashboards, or internal tools with React and various backends (REST, GraphQL, Supabase, Strapi), or configuring Refine data providers and authentication. Keywords: Refine, CRUD, admin panel, data provider, React.

How do I install refine-dev?

Run npx skills add https://github.com/itechmeat/llm-code --skill refine-dev in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/refine-dev/ (personal) or .claude/skills/refine-dev/ (project).

Which AI agents can use refine-dev?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is refine-dev safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains refine-dev?

It is published by itechmeat in itechmeat/llm-code. It has 206 recorded installs.

More from itechmeat/llm-code

View all →

react-testing-library

itechmeat/llm-code

React Testing Library: user-centric component testing with queries, user-event simulation, async utilities, and accessibility-first API. Use when writing React component tests, selecting elements by role/label/text, simulating user events, or testing async UI behavior. Keywords: React Testing Library, @testing-library/react, user-event, queries, render.

Frontend & Design1.4K installs

openspec

itechmeat/llm-code

OpenSpec artifact-driven workflow. Covers OPSX commands, schemas, project config. Use when applying the artifact-driven workflow (OPSX), planning or reviewing changes based on artifact dependencies, or working with OPSX commands and schema/template resolution. Keywords: OPSX, artifact graph, /opsx:.

Productivity & Automation840 installs

mantine-dev

itechmeat/llm-code

Mantine UI library for React: 100+ components, hooks, forms, theming, dark mode, CSS modules, and Vite/TypeScript setup. Use when building React applications with Mantine components, configuring theming/dark mode, or working with Mantine hooks and forms. Keywords: Mantine, React, UI components, CSS modules, theming.

Frontend & Design286 installs

social-writer

itechmeat/llm-code

Open the skill to read its SKILL.md instructions.

Docs & Writing265 installs

base-ui

itechmeat/llm-code

Base UI unstyled React components. Covers forms, menus, overlays, composition. Use when building accessible, unstyled React UI components with @base-ui/react, composing with render props, or implementing custom-styled form controls, menus, and overlays. Keywords: @base-ui/react, render props, unstyled components.

Frontend & Design228 installs

vitest

itechmeat/llm-code

Vitest testing framework: Vite-powered tests, Jest-compatible API, mocking, snapshots, coverage, browser mode, and TypeScript support. Use when writing or configuring tests with Vitest, setting up mocking/snapshots, configuring coverage, or running browser-mode tests. Keywords: Vitest, testing, Vite, Jest, mocking, coverage.

Testing & QA199 installs

Popular frontend & design skills

View category →

setup-matt-pocock-skills

mattpocock/skills

Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.

Frontend & Design1.1M installs

frontend-design

anthropics/skills

Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.

OfficialFrontend & Design1M installs

hyperframes-animation

heygen-com/hyperframes

All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.

Frontend & Design1M installs

prototype

mattpocock/skills

Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.

Frontend & Design999.2K installs

hyperframes-core

heygen-com/hyperframes

The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.

Frontend & Design930.5K installs

vercel-react-best-practices

vercel-labs/agent-skills

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.

OfficialFrontend & Design843.1K installs