We’ve never hidden the fact that we use AI in our development workflow. In fact, we believe tools like Cursor are real game-changers for developers. Cursor speeds up routine tasks and helps maintain high code quality when used correctly. Most importantly, it relieves teams of the constant burden of repetitive work.

At the same time, we have our own open-source project – Admiral. It is a component library designed for fast and efficient admin panel development. It includes a wide range of ready-to-use solutions.Just pick what you need, customize it, and launch your project with minimal overhead.

You can check it out here: https://github.com/dev-family/admiral

Recently, we came up with the idea of combining the strengths of both tools. That’s how we ended up integrating the .cursor/rules system directly into Admiral, which makes building admin panels even faster.

Now, you no longer need to manually verify that your CRUD pages are structured properly, that components are being used correctly, and that hook conventions are being followed. All of that is defined in the rules up front, and Cursor will guide you if something’s off. This saves time, reduces the chance of errors, and allows developers to focus on what really matters.

As a result, we streamlined and accelerated our development process and created a reusable set of AI instructions for working with Admiral. These instructions help us maintain high-quality code across all our Cursor-powered projects.

In this article, we’ll show you how automation works and how you can use our framework in your projects.

.cursor/rules – is a special directory that contains development guidelines written in Markdown format. These rules integrate with the Cursor IDE and help developers follow project-wide standards when writing code. You can learn more in the official documentation: https://docs.cursor.com/context/rules.

In its current implementation, Admiral includes three main rules:

1. crud-page.mdc – rules for creating CRUD pages along with the necessary logic.
2. admiral-components.mdc – documentation for working with components.
3. admiral-hooks.mdc – documentation for working with hooks.

These rules are automatically included with each request to clarify how the AI agent should use the library's components and hooks. This helps the agent avoid mistakes, such as using non-existent props or using a component for an unintended purpose.

Building CRUD pages is an essential part of any admin panel. The crud-page.mdc rule is responsible for:

• Enforcing a consistent structure across all CRUD pages;
• Standardizing variable and function naming conventions;
• Organizing files and directories in a predictable way;
• Restricting usage to approved components from the @devfamily/admiral library.

The only responsibility of developers is to name fields for forms, tables, filters, and other key UI elements. Everything else is generated by Cursor. This rule saves a significant amount of development time and lets you focus on what matters most in the project.

The `crud-page.mdc` rule gives Cursor's AI agent a complete set of instructions for creating CRUD pages and all the necessary supporting logic.

Now, let's break down how the process works and what requirements must be met to effectively use AI for CRUD development with Admiral.

1. **Core Principles**

The AI is explicitly instructed that all CRUD pages must follow a unified structure:

• File, variable, and function naming conventions are clearly defined;
• The page must be placed in a folder named according to the first item in the list provided by the user;
• A strict list of allowed form components from the @devfamily/admiral library is enforced.

2. **CRUD Page Structure**

The AI receives step-by-step guidance for how to build the page file, including:

• How to organize imports (React, hooks, components);
• How to structure the main configuration using `createCRUD`;
• Which sections are required (path, resource, index, filter, form);
• Which sections are optional (actions, create, update, filter, topContent, bottomContent).

3. **File Structure**

The AI also gets a clear understanding of how the associated files should be organized:

admin/
├── src/
│ └── crud/
│ └─── [resource]/
│ ├──── index.tsx # File with CRUD-page config
│ ├──── types.ts # Typescript
│ └────components/ # In case you need to use custom components
└── config/
└─── menu.tsx # A file describing how the navigation menu should look like


└── pages/ # Routing
└─── [resource]/
├──── index.tsx # A page with a table
├──── create.tsx # A page with a c
└──── [id].tsx # A page with an edit form

4. **Creation Process**

The AI knows that in order to generate a CRUD page, it must:

• Create the appropriate files in the correct directories;
• Configure routing within the pages directory;
• Add a menu item if required;
• Follow the typing conventions provided by the @devfamily/admiral library;
• Run TypeScript and linter checks on the newly created code, and fix any issues that arise.

5. **Development Recommendations**

The AI receives detailed instructions for best practices, including:

• Table configuration – setting column widths, rendering complex data types;
• Filter design – grouping filters, using allowClear in select inputs;
• Form structure – marking required fields, using columnSpan, and splitting form fields into modular components;
• Table actions – using TopToolbar to customize actions, adding icons where appropriate.

6. **Type Definitions**

The AI has access to information about where type definitions are located:

• Typing path: node_modules/@devfamily/admiral/lib/admiral/crud

To access these types, the @devfamily/admiral dependency must be installed in the project.

7. **User Interaction Process**

If the user hasn’t provided one already, the AI knows it should:

• Prompt the user for a list of 7 configuration items;
• Generate all necessary files and structure based on that list.

8. **Code Examples**

The AI has access to a real-world example of a CRUD page that includes:

• Component imports;
• Form setup;
• Filter configuration;
• Table configuration;
• Action handling;
• Usage examples for various components.

When a user requests the creation of a new CRUD page, the AI:

1. Validates that all required information has been provided.
2. Creates the correct folder and file structure.
3. Generates code according to all defined rules and standards.
4. Uses only the approved components from @devfamily/admiral.
5. Establishes all necessary links and imports between files.
6. Adds the corresponding menu items.
7. Detects and fixes any TypeScript or linter issues if present.

This allows the AI to generate high-quality, standardized CRUD pages that are easy to maintain and extend over time.

As a developer, you benefit from:

• Rapid page generation through a structured process;
• Consistent coding style across the project;
• Automatic type checking and lint fix integration;
• Partial project documentation embedded directly into the IDE.

If you need to generate CRUD pages, simply mention the @crud-page rule in your conversation.

The AI agent will then ask you a set of predefined questions. Alternatively, you can provide all the required information upfront in the following format:

1. Base name – this will be used in PascalCase for the component name, and in kebab-case for the route and folder names inside the pages directory.
2. Resource  – the endpoint used for server requests.
3. List of table columns – a list of field names such as name, age, address, phone.
4. List of required fields for the create form.
5. List of required fields for the edit form – if the fields are identical to step 4, leave this blank or indicate it explicitly.
6. List of fields that require filters.
7. List of fields that should appear as quick filters – If the list is the same as in step 6, you can leave it empty or mention that.

The AI agent will ask for your permission before creating any new files or directories – unless that permission has been granted in advance.

The admiral-components.mdc and admiral-hooks.mdc rules are automatically included as context for any AI prompt within the project directory. This ensures that the AI agent has a detailed understanding of how to properly use components and hooks from the @devfamily/admiral package.

First, we are calling for the rule in the chat.

The AI agent detects that no input data was provided and prompts us for the required information. We respond with a complete set of configuration parameters.

Next, the AI agent generates all the necessary files and re-checks the newly created code for type and linter errors. It identifies and automatically fixes any issues.

As a result, we get all the necessary files generated without a single error, and we can continue guiding the AI agent to edit or expand these files either through Cursor or manually.

We’re currently testing .cursor/rules on real projects and will continue refining them as needed. The Admiral team also plans to add more instructions to cover additional aspects of admin panel development. We believe this process will soon become even more efficient, standardized, and developer-friendly.