Building a new dashboard feature sounds simple, but often it isn't. Adding a page or integrating a module like chat or kanban quickly leads to managing routes, updating navigation, structuring layouts, and fitting everything into the current architecture. Most of the time is spent on setup and integration, not the feature itself.
AI tools can help, but only to a certain extent. Generic prompts often generate code that does not match your project structure, which means you still spend time fixing and adapting the output.
Shadcn Space Admin Dashboard approaches this differently. It provides a dedicated prompts/ directory filled with structured .prompt.md files designed specifically for the dashboard architecture. These prompts guide AI Agents to generate code that fits directly into your project, whether you are creating a new dashboard page, adding a module, or updating navigation.
In this guide, you will learn how to use these prebuilt prompts to build real dashboard features faster, reduce repetitive setup work, and maintain consistency across your application.
Who is this for?
This guide is for developers working with React or Next.js who are building admin dashboard templates, SaaS platforms, or internal tools and want to speed up feature development without breaking their existing structure. If you frequently add new dashboard pages, integrate app modules, or manage navigation and layouts, these prebuilt prompts can help you move faster while keeping everything consistent.
The Problem: Manual Dashboard Development
Creating a new dashboard page or adding an app module involves more work than expected. You need to define routes, register the page in navigation, structure the layout, and connect it with existing components. If the feature includes data visualization or complex UI, that adds another layer of setup and configuration.
Even when using good component libraries, this process is repetitive. Developers often rewrite similar logic for dashboards, menus, and layouts across different features. Small mistakes in navigation or structure can break the user experience, and maintaining consistency becomes harder as the project grows.
As a result, a significant amount of development time is spent on setup and integration instead of actually building useful features.
What does the prompts directory consist of?
To reduce repetitive setup work, Shadcn Space Admin Dashboard provides a structured system of prebuilt AI prompts. Instead of manually wiring every part of a feature, you can use these prompts to guide AI agents in generating code that fits your project.
The prompts/ directory contains a collection of .prompt.md files, each designed for a specific task within the dashboard. These prompts include predefined instructions that reflect the project’s structure, component patterns, and integration points.
Because of this, you don’t need to write detailed prompts from scratch or explain your codebase every time. The AI agent already has enough context to generate code that works within your existing setup, which reduces the amount of manual adjustment required.
Each prompt focuses on a clear use case, such as creating a dashboard page, adding navigation, generating a data table, or isolating an app module. The directory is organized into categories like dashboard, navigation, apps, and theming, making it easier to locate the right prompt for the task.
This approach simplifies how you work with AI and helps maintain consistency across your codebase as your project grows.
How to use Prebuilt Prompts (Step-by-Step)
Instead of manually copying prompt content, you can work directly with AI agents inside modern code editors like VS Code (with AI extensions), Cursor, or Windsurf. These tools allow you to interact with your codebase and prompt files more naturally.
You can ask the AI agent to read a specific prompt file from the prompts/ directory or drag the file into the agent interface, depending on the tool you are using. Once the prompt is loaded, you provide your requirement, such as creating an analytics dashboard shell, adding a new app module, or updating navigation.
Many of these prompts are designed to be interactive. Based on the task, the AI agent may ask follow-up questions to gather the necessary details before generating code. For example, a dashboard prompt might ask what type of data you want to display or which components are required, while a theming prompt may ask for specific color values or branding preferences. This helps ensure the generated output matches your exact use case.
The AI agent combines your input with the structured instructions from the prompt file and generates code that fits your project. Because the prompt already includes the necessary context, the output is more aligned with your existing architecture.
After that, you review the generated code and integrate it into your codebase. In most cases, only minor adjustments are needed before the feature is ready to use.
This workflow makes it easier to move from idea to implementation, especially when working on features that involve multiple parts of the dashboard, like pages, navigation, and shadcn components.
The AI Prompts Directory: What can you automate?
The prompts/ directory is structured to cover the most common tasks you deal with while building a dashboard. Instead of setting everything up manually, you can pick a prompt based on what you want to build and let the AI handle most of the heavy lifting.
Here’s how it’s organized and where each set of prompts is useful:
Apps (prompts/apps/)
This section is useful when you’re working with prebuilt modules inside the dashboard.
- isolate-app.prompt.mdUse this when you only want specific apps like Chat or Kanban and need to remove the rest without breaking shared dependencies. It helps keep the project clean as you scale.
Authentication (prompts/auth/)
Handles all aspects of login and access flows.
- create-auth-page.prompt.mdGenerates login, register, and password reset pages that follow the existing UI and routing setup.
Branding (prompts/branding/)
Used when you want to customize the dashboard for your product.
- update-branding.prompt.mdUpdates things like logo, app name, and other brand elements across the project without missing spots.
Components (prompts/components/)
For building reusable UI components.
- create-data-table.prompt.mdCreates a complete data table with sorting, filtering, pagination, and proper TypeScript support. This is especially useful since setting up tables manually takes time.
Dashboard (prompts/dashboard/)
Focused on building actual dashboard screens and widgets.
- dashboard-master.prompt.mdGenerates a full dashboard page like analytics or metrics with proper layout and structure.
- update-dashboard-component.prompt.mdUseful when you only need to add or update a specific part of a dashboard, such as a chart or KPI card.
Forms (prompts/forms/)
Simplifies form creation.
- create-form-component.prompt.mdGenerates forms with React Hook Form and Zod validation already wired up, so you don’t have to handle validation logic manually.
Language & i18n (prompts/language/)
For handling localization.
- add-new-language.prompt.mdAdds a new language and updates the required configuration.
- remove-language.prompt.mdCleans up a language and removes related files and references.
Navigation (prompts/navigation/)
Helps manage routes and menus safely.
- add-page-with-menu.prompt.mdAdds a new page and connects it to both the sidebar and the top navigation.
- manage-menu.prompt.mdLet's you reorganize or update existing navigation.
- menu-nesting.prompt.mdUseful when you need multi-level or nested menus.
- configure-menu-badges.prompt.mdAdds badges like notifications or counts to menu items.
Theming (prompts/theming/)
For styling and layout control.
- change-theme-colors.prompt.mdUpdates theme colors and keeps them consistent across light and dark modes.
- toggle-dark-light.prompt.mdHandles dark and light mode behavior.
- change-direction.prompt.mdHelps configure layout direction for LTR and RTL support.
Why This Matters
Instead of setting up each part of the dashboard manually, you can rely on these prompts to handle the structure and boilerplate. This not only saves time but also keeps everything consistent as your project grows.
Real Example: Building a Dashboard Feature Using Prompts
To understand how these prompts work in practice, let’s walk through a real example of creating a new dashboard page and integrating it into the application.
Goal :
Create a User Analytics Dashboard that includes:
- A new dashboard page
- KPI metrics
- A chart or activity section
- A data table
- Navigation entry in the sidebar
Step 1: Use the Right Prompt
For this task, we use:
prompts/dashboard/dashboard-master.prompt.md
In your editor, you can ask the AI agent to read this file or drag it directly into the agent interface.
Step 2: Provide Required Input
Once the prompt is loaded, the AI agent follows a structured flow based on predefined inputs. It will either use your input or guide you where needed.
The prompt expects:
- Dashboard Name: The display name for the page. If not provided, the agent will pause and ask you to define it before continuing.
- Dashboard Icon: A Lucide icon name. If not provided, the agent automatically selects a relevant icon based on the context.
- KPI Metrics: Key metrics to display in summary cards. If not provided, the agent generates suitable metrics based on common patterns.
- Data Table Info: Table columns and data. If not provided, the agent creates a structured table with mock data aligned to the dashboard.
In most cases, you only need to provide a simple instruction like:
Create a user analytics dashboard.
The agent then handles the rest by asking only when required and filling in missing details intelligently.
Step 3: AI Generates the Feature
Based on the prompt and inputs, the AI generates a complete feature that typically includes:
- A new dashboard page file
- KPI cards with relevant metrics
- Charts or activity components
- A data table with structured data
- Navigation updates to register the page
Example (simplified):
import { Metadata } from "next";
import SaasKpiCards from "@/app/components/dashboards/saas/saas-kpi-cards";
import MrrGrowth from "@/app/components/dashboards/saas/mrr-growth";
import SubscriptionPlans from "@/app/components/dashboards/saas/subscription-plans";
import ChurnRate from "@/app/components/dashboards/saas/churn-rate";
import UserActivity from "@/app/components/dashboards/saas/user-activity";
import CustomerLifetime from "@/app/components/dashboards/saas/customer-lifetime";
import TopCustomers from "@/app/components/dashboards/saas/top-customers";
export const metadata: Metadata = {
title: "SaaS Dashboard",
description: "SaaS metrics dashboard with MRR, churn, subscriptions, and customer data.",
};
const page = () => {
return (
<div className="grid grid-cols-12 gap-4 lg:gap-6">
{/* Row 1: Full-width KPI cards */}
<div className="col-span-12">
<SaasKpiCards />
</div>
{/* Row 2+3: MRR chart (8 cols) | SubscriptionPlans donut (4 cols, row-span-2) */}
<div className=" col-span-6">
<MrrGrowth />
</div>
{/* Row 4: Customer LTV chart */}
<div className="xl:col-span-6 col-span-12">
<CustomerLifetime />
</div>
<div className="xl:col-span-4 md:col-span-6 col-span-12 row-span-1">
<SubscriptionPlans />
</div>
{/* Row 3: Churn + User Activity stacked alongside donut (row-span-2 fills) */}
<div className="xl:col-span-4 md:col-span-6 col-span-12">
<ChurnRate />
</div>
<div className="xl:col-span-4 md:col-span-6 col-span-12">
<UserActivity />
</div>
{/* Row 5: Full-width customer table */}
<div className="col-span-12">
<TopCustomers />
</div>
</div>
);
};
export default page;
The structure follows your existing dashboard patterns, so it fits directly into your project.
Step 4: Review and Integrate
After generation, you review the output and make any necessary adjustments. Since the prompt already enforces structure and patterns, the code is usually close to production-ready.
You can then:
- Add the page to your project.
- Verify navigation updates
- Replace mock data with real data if needed.
Result
Instead of manually setting up layout, metrics, tables, and navigation, you get a complete dashboard feature generated in minutes.
More importantly, the output is not generic. It is aligned with your project structure, naming conventions, and UI patterns.
Why This Matters
This example shows how prompts act as structured workflows rather than simple instructions. They guide the AI, handle missing inputs intelligently, and ensure consistency across different parts of the dashboard.
This makes it possible to build complete features faster without compromising on structure or quality.
The AI Skills Directory: How the AI Understands Your Project
So far, you’ve seen how prompts help generate features. However, prompts alone are not enough to ensure consistent and high-quality output.
This is where the skills/ directory comes in.
While prompts define what to build, the skills/ system defines how it should be built. Together with the agent configuration, this creates a structured environment where the AI can generate code that aligns with your project instead of producing generic output.
Core Skill Definition
At the center of this setup is the SKILL.md file. This acts as the main instruction layer for the AI, defining how it should approach development inside your project. It enforces rules like reusing existing components, composing UI instead of duplicating logic, and following the defined color system.
CLI and Customization Awareness
The AI agent is also aware of how your tooling works.
The cli.md file teaches it how to work with the Shadcn CLI, including adding or managing components without requiring manual setup. This allows the agent to suggest or use CLI-based workflows when needed.
The customization.md file defines how theming should be handled. When you ask for changes like colors or layout adjustments, the AI follows these rules to update CSS variables and Tailwind configuration correctly.
The mcp.md file enables integration with external sources through the Model Context Protocol. This allows the AI to fetch up-to-date component references or documentation when required.
The Rules Engine
The _rules/_ directory acts as a strict validation layer that ensures the generated code follows consistent standards.
Files like _styling.md_ enforce Tailwind best practices, encouraging the use of semantic tokens and modern layout techniques.
The _forms.md_ file ensures that all forms follow a consistent structure using react-hook-form and Zod.
The _composition.md_ file guides how components should be combined to build larger features.
The _base-vs-radix.md_ file ensures the correct usage of base elements and accessible UI primitives.
The _icons.md_ file standardizes how icons are used across the project.
Because of these rules, the output remains clean and consistent even when generating complex features.
Agent Configuration and Evaluation
The .agents/ setup also includes configuration and evaluation layers.
The agents/ folder defines how different AI models interact with your project and apply the available skills.
The evals/ folder contains test cases used to validate the quality of generated output, helping ensure that prompts consistently produce reliable results.
Why This Matters
Without this layer, AI-generated code is often inconsistent and requires cleanup. With the skills system in place, the AI operates within clearly defined boundaries, producing code that aligns with your architecture, follows your standards, and integrates smoothly into your project.
This is what makes the combination of prompts, agents, and skills effective as a complete development workflow rather than just a collection of AI commands.
Pro Tips for Using Prompts and Skills Effectively
To get the best results from this system, it’s important to understand that prompts, skills, and agents work together. When used correctly, they allow the AI to generate code that is not only fast but also consistent with your project structure.
Start by making sure your AI agent is aware of the project context, including the agents.md file and the skills/ directory. This ensures the agent follows the defined rules, uses the correct components, and respects your design system while generating code.
Focus on clear intent rather than detailed instructions. The prompts already include structure, and the skills system enforces how things should be built, so a simple input like “create a SaaS analytics dashboard” is often enough. The agent will handle defaults such as icons, KPI metrics, and table structure, and will only ask for input when required.
Let the agent guide the process when needed. Some prompts are designed to pause and request specific inputs, such as the dashboard name. Responding to these prompts instead of bypassing them leads to more accurate results.
Use prompts together when building complete features. For example, you can generate a dashboard page, then follow up with navigation and theming prompts to fully integrate it into your application. The skills system ensures all parts follow the same structure.
Rely on the skills system for consistency. Since the AI is guided by rules for styling, composition, and component usage, you don’t need to manually enforce these standards every time. This reduces the chances of inconsistent code across different features.
Review the generated output before using it. Even though the system is structured, you should still verify logic, data handling, and integration with your project.
Start simple and iterate. Generate a basic version first, then refine it with additional instructions if needed. This keeps the workflow predictable and easier to manage.
As you continue using this setup, you’ll notice that the combination of prompts and skills reduces repetitive work while keeping your codebase structured and maintainable.
Common Mistakes to Avoid
To get consistent and reliable results, avoid these common mistakes when using prompts and the skills system:
Not loading project context first
Before using any prompt, always instruct the AI agent to read the agents.md file and the skills/ directory. Without this, the AI may generate generic code that does not follow your project structure.
Giving vague instructions
Inputs like “create dashboard” are too broad. Use clearer intent, such as “create a SaaS analytics dashboard with user metrics,” to get more accurate results.
Overriding the system unnecessarily
Prompts and skills are designed to work together. Forcing custom patterns or heavily modifying generated code can break consistency across the project.
Ignoring agent follow-up questions
Some prompts require specific inputs, like the dashboard name. Skipping or partially answering these questions can lead to incomplete or incorrect output.
Using prompts in isolation
Generating only one part of a feature (like a dashboard page) without updating navigation or theming can leave the implementation incomplete. Combine prompts for full features.
Skipping code review
Even though the output is structured, always review logic, data handling, and integration before using it in your project.
Trying to do everything in one step
Generating overly complex features in a single instruction can reduce accuracy. Start simple and iterate for better control.
Following these practices will help you get better results and maintain consistency across your dashboard.
Final Thoughts
Building dashboard features does not have to involve repetitive setup and manual configuration. By combining structured prompts with a well-defined skills system and agent setup, you can significantly reduce the time required to implement new features.
Instead of writing boilerplate code for pages, navigation, and components, you can focus on defining what you want to build and let the system handle the structure and consistency. This approach not only speeds up development but also helps maintain a clean and scalable codebase.
If you are working on admin dashboards or SaaS platforms, this workflow can make a noticeable difference in how quickly you move from idea to implementation.
You can explore the full setup, including both the prebuilt prompts and the AI skills system, in this Shadcn Admin Dashboard.
Start by trying a simple prompt to generate a feature, then refine it using the agent-driven workflow. As you get familiar with the system, you will be able to build more complex features with less effort while keeping everything aligned with your project standards.
Top comments (0)