Automating CRUD Page Generation Using .cursor/rules and Our Own Open Source Library

#cursor #ai #tutorial #programming

How We Automated CRUD Admin Panels with AI + .cursor/rules + Our Open Source Framework

Tired of setting up the same CRUD logic again and again? We were too — so we taught AI to do it for us.

👇Here's how it works.

The problem

Creating admin panels is repetitive:

same table structure
same hooks
same form fields.

Even with reusable components, mistakes still happen — wrong props, inconsistent naming, etc.

The solution

We built Admiral, our open source React-based framework for admin panels.

Then we added a .cursor/rules folder with Markdown-based rules for Cursor AI.

Now, AI knows:

how a CRUD page should be structured;
which components and hooks to use;
how to name things;
where to place files;
and how to fix TypeScript + lint errors right after generating.

Just trigger @crud-page in Cursor, fill in 7 simple fields — and get a ready-to-use CRUD page in seconds.

Example directory structure:

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

The impact

Dozens of dev hours saved
Zero boilerplate hand-coding
Fewer errors
Clean, consistent code

We're actively using it in real projects and constantly expanding the ruleset.

🔗 Check the repo
🧠 Read the full walkthrough on our blog
💬 Got feedback or ideas for more rules? We'd love to hear them.

DEV Community