react-admin

Guide building and debugging react-admin admin interfaces with providers and CRUD configuration.

1.2k|169|Updated Apr 17, 2019
One-click install
npx skills add https://github.com/Awesome-Technologies/synapse-admin --skill react-admin-awesome-technologies
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: react-admin
Source: https://github.com/Awesome-Technologies/synapse-admin/tree/main/.agents/skills/react-admin
Command: npx skills add https://github.com/Awesome-Technologies/synapse-admin --skill react-admin-awesome-technologies

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Developing, modifying, or debugging react-admin applications requires deep knowledge of its provider system, composition patterns, and built-in hooks, which can slow down development and lead to inconsistent implementations. This Skill eliminates that friction by providing clear, actionable guidance for all common react-admin development tasks.

Core Features & Use Cases

  • Provider implementation guidance: Helps correctly set up data, authentication, and i18n providers to handle API communication, user login, and translations without direct HTTP calls.
  • Component and hook best practices: Provides instructions for using pre-built react-admin components and controller hooks to avoid redundant custom code and follow framework conventions.
  • Relationship and form handling: Covers implementing related entity fields/inputs, form validation, and custom resource definitions for standard CRUD admin use cases. For example, use this Skill to build an admin panel for a user management system with correct team relationship references and email validation on user creation forms.

Quick Start

Use the react-admin skill to add a reference input for the "department" resource to the employee edit form and set up required validation for the employee ID field.

Frequently Asked Questions about react-admin

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I configure a data provider for a react-admin CRUD app?

Configuring a data provider in a react-admin CRUD app involves mapping the framework's data provider interface to your API, ensuring state management and data fetching comply with react-admin composition patterns without direct HTTP calls.

What is the best way to add reference inputs for related entities in react-admin forms?

The best way to add reference inputs for related entities in react-admin forms is using built-in components and controller hooks to handle entity relationships, ensuring proper configuration of custom resource definitions for standard CRUD operations.

How do I implement form validation and authorization logic in an admin panel?

To implement form validation and authorization logic in an admin panel, apply react-admin composition patterns, use built-in hooks for validation rules, and configure custom routing to control access based on user authentication states.

Does this guidance cover setting up authentication and internationalization providers?

Yes, this guidance covers setting up authentication and internationalization providers, detailing how to handle user login flows and translations by utilizing the react-admin provider system rather than managing direct HTTP requests.

Why should I use built-in react-admin hooks instead of writing custom code for my admin interface?

You should use built-in react-admin hooks instead of custom code to avoid redundant implementations, adhere to framework best practices for data fetching, and maintain consistency across your admin interface's API communication and composition patterns.