React 19 + Tailwind v4 + Shadcn UI Financial Dashboard .cursorrules
Transforms Cursor, Windsurf, and Claude into a Senior Design Systems Engineer. Enforces accessible Radix primitives, dark mode tokens, and fluid responsive charts.
Parametric Customizer & Compiler Live Tool
Adjust the variables below. The prompt code and API payload update dynamically in real time.
Specifies chart engine.
Handles filter persistence.
You are a Principal Frontend Design Systems Engineer specializing in high-performance analytics dashboards. STACK MANDATES: - Framework: Next.js 15 App Router / React 19 - Styling: Tailwind CSS v4 with modern CSS theme variables and container queries - Component Primitives: Shadcn UI (Radix UI accessible primitives) - Icons: `lucide-react` - Data Visualization: Shadcn Charts (built on Recharts with responsive SVG tooltips and theme integration) - State Management: nuqs (Type-safe URL search params for React state synchronization) STRICT CODING RULES: 1. ACCESSIBILITY: Every interactive widget must support full keyboard navigation (Tab, Arrow keys, Enter, Space) and ARIA attributes. 2. MODULAR COMPONENT DESIGN: Deconstruct complex dashboard views into isolated atoms (Card, StatBadge, Sparkline, DataTable, FilterBar). 3. THEME SYSTEM: Never hardcode arbitrary hex colors in component classes. Use semantic tokens like `bg-card`, `text-card-foreground`, `border-border`. 4. LOADING STATES: Provide matching skeleton placeholders (`<Skeleton />`) for every asynchronously fetched KPI metric.
Build modern React 19 dashboards with AI code completion in Cursor.
Leonardo Phoenix & Flux: Generate photorealistic studio assets with 150 daily free credits. Zero setup required.
πΈ Real Sample Outputs & Verified Results
Visual evidence and benchmark responses generated using this exact prompt formula.
π¬ Prompt Engineering Anatomy
Why this prompt consistently delivers high-tier results: technical parameter breakdown.
nuqs Type-Safe Search Params Synchronizes dashboard date range pickers and dropdown filters directly into browser query parameters, making every chart view bookmarkable and shareable.
Tailwind v4 CSS Theme Variables Tailwind v4 replaces `tailwind.config.js` with direct `@theme` directives in CSS, enabling faster builds and seamless dark/light theme switching.
π¬ Frequently Asked Questions
Troubleshooting common edge cases, model incompatibilities, and best practices.
Does this work in Cursor and Windsurf?
Yes! Save this into `.cursorrules` in your project root to keep AI completions strictly aligned with Shadcn UI and Tailwind CSS best practices.
Can I use this with Vite instead of Next.js?
Yes! Shadcn UI components work identically in Vite React SPAs; simply adapt the router imports to React Router or TanStack Router.
Cursor AI & Claude 3.5 Sonnet Pro Bundle
Supercharge your workflow with instant codebase indexing, multi-file edits, and automated system rules.
Explore Related AI Coding & Architecture Prompts View all β
Claude 3.5 Sonnet Senior Staff Full-Stack Refactoring Architect
Specialized prompt framework for Claude 3.5 Sonnet and Claude 3.7. Transforms messy legacy codebases into modular, testable, high-performance systems with automated regression tests.
cursorCursor AI (.cursorrules) for Next.js 15, React 19 & Tailwind CSS
Stops Cursor from writing outdated Next.js 13 patterns, Pages Router syntax, or deprecated React hooks. Enforces strict TypeScript, Server Actions, and modular clean architecture.
deepseekDeepSeek-R1 Autonomous Deep Research & Synthesis Engine
DeepSeek-R1 chain-of-thought framework designed to force deep reflection, counterfactual auditing, and hypothesis testing before producing production-ready research reports.