KPI Dashboard Builder — Cursor Rules Template for Cursor AI

Overview

Cursor rules configuration defines how Cursor AI should operate when building a KPI dashboard builder with drag-and-drop widgets, filters, permissions, and scheduled reports on the React TypeScript frontend and Node.js backend with PostgreSQL storage.

Direct answer: This Cursor rules template provides a complete, copyable .cursorrules configuration that enforces stack specific rules, security constraints, and project structure for a KPI dashboard builder.

When to Use These Cursor Rules

• Starting a KPI dashboard builder using a drag-and-drop widget interface
• Enforcing role based access controls and permission checks on UI and API layers
• Ensuring consistent data access patterns for metrics and filters
• Scheduling reports and delivering them to users or channels
• Guiding a monorepo frontend backend architecture with clear directory rules

Copyable .cursorrules Configuration

Framework: React 18 TypeScript
Context: KPI Dashboard Builder with Drag-and-Drop Widgets Filters Permissions Scheduled Reports
CodeStyle: TypeScript ESLint Prettier
Architecture: Monorepo frontend backend shared
DirectoryRules: frontend/src backend/src db/migrations
Authentication: JWT RBAC
Database: PostgreSQL TypeORM
Testing: Jest React Testing Library SuperTest
CI: GitHub Actions
ProhibitedActions:
  - Do not bypass RBAC checks
  - Do not use eval or dynamic code generation
  - Do not leak secrets in logs
  - Do not access client side secrets
  - Do not bypass CORS constraints

Recommended Project Structure

frontend/
  src/
    components/
    widgets/
      KPIWidget/
      ChartWidget/
    pages/
  package.json
backend/
  src/
    controllers/
    services/
    models/
  package.json
db/
  migrations/
  seeds/
shared/
  types/
  utils/

Core Engineering Principles

• Explicit contracts between frontend and backend via typed interfaces
• RBAC with least privilege for data access
• Deterministic and testable widget rendering
• Clear separation of concerns and single responsibility
• Defensive programming with input validation and error handling

Code Construction Rules

• Use strict TypeScript across frontend and backend
• Implement drag and drop using a React based library with accessible keyboard support
• Store widget configurations in a normalized schema in PostgreSQL via TypeORM
• Backend endpoints enforce RBAC checks and validate requests against schemas
• All API calls require proper authentication tokens with short lived access tokens
• Tests cover frontend components, backend APIs, and integration flows
• Do not rely on unsafe eval or dynamic code generation in AI responses

Security and Production Rules

• RBAC enforced for all dashboard actions including widget creation and report scheduling
• JWT based authentication with short lived access tokens and refresh tokens
• Input validation and SQL parameterization to prevent injection
• Secrets stored in environment and not exposed to client
• Audit logs for permission changes and report deliveries
• Rate limiting and IP allowlisting for critical endpoints

Testing Checklist

• Unit tests for UI widgets and filters
• Integration tests for API endpoints with RBAC checks
• End to end tests for KPI dashboards with drag and drop actions
• Static type checks and linting in CI
• Scheduler tests to confirm scheduled reports are generated and delivered

Common Mistakes to Avoid

• Dropping RBAC checks in production when adding new widgets
• Hard coding queries or secrets in the client
• Overly complex widget configurations without schema contracts
• Ignoring accessibility in drag and drop interactions
• Relying on client side state for critical reporting logic

Related Cursor rules templates

Explore adjacent Cursor rules templates for similar stacks, workflows, and production constraints.

• Cursor Rules Template: BI SaaS with Data Connectors, Charts, Dashboards, SQL Editor and AI Explanations
• Cursor Rules Template: Express ATS with Cursor AI
• Cursor Rules Template: NestJS + Next.js + PostgreSQL for B2B Wholesale Portal
• Cursor Rules Template: Manufacturing Execution Dashboard (NestJS + PostgreSQL)

FAQ

What is a Cursor Rules Template?

A Cursor Rules Template is a copyable .cursorrules configuration that defines engineering and AI guidance for Cursor AI to assist building a KPI dashboard with drag and drop widgets, filters, permissions and reports within a specific stack. It codifies stack specific constraints, security boundaries, and project structure to keep development aligned with intent.

Which stack does this template target?

This template targets a React TypeScript frontend with a Node Express backend, PostgreSQL data store and TypeORM, RBAC based authentication, and a scheduling service for reports. It provides concrete guardrails to keep AI assisted development on track and secure.

Can I customize the .cursorrules block for other dashboards?

Yes. The template is designed to be adapted to other KPI focused dashboards by adjusting widget types, data sources, access rules, and scheduling settings while preserving core Cursor AI guidance and security constraints.

How do I test the integration of drag and drop widgets with filters?

Test by simulating drag and drop events in the frontend, verifying that the state is persisted, and ensuring API endpoints respect RBAC rules and return correctly filtered data for given user roles.

What security considerations does the template enforce?

RBAC enforcement, JWT authentication, input validation, SQL parameterization, and secure secrets handling are enforced by the rules to prevent unauthorized access and data leakage across dashboards and reports.