AI SummaryCursor Rules for template-react-vite that enforces a minimalist tech design system with black/white palette and developer-focused aesthetics for React projects. Useful for teams building content creation or streaming platforms wanting consistent design language.
Install
Copy this and paste it into Claude Code, Cursor, or any AI assistant:
I want to add the "template-react-vite — Cursor Rules" prompt rules to my project. Repository: https://github.com/constROD/template-react-vite Please read the repo to find the rules/prompt file, then: 1. Download it to the correct location (.cursorrules, .windsurfrules, .github/prompts/, or project root — based on the file type) 2. If there's an existing rules file, merge the new rules in rather than overwriting 3. Confirm what was added
Description
Cursor Rules for template-react-vite
Core Aesthetic: "Minimalist Tech & Code"
The bossROD TV brand aesthetic sits at the intersection of Programming, Technology, and Content Creation. It is "Clean Code meets Visual Clarity." The design must instantly communicate four key pillars: • Technical Excellence: Clean, precise layouts that reflect code structure and logical thinking. • Minimalist Focus: Black and white palette that removes distraction and emphasizes content. • Developer Identity: Terminal aesthetics, monospace typography, and code-inspired UI patterns. • Content Creation: Video frames, streaming UI elements, and creator-focused components. Key Visual Metaphors: • The Terminal: Dark backgrounds, monospace fonts, command-line aesthetics. • The IDE: Syntax highlighting accents, tab-based navigation, panel layouts. • The Triangle: Logo-inspired angular shapes, geometric precision, sharp edges. • The Stream: Video frames, live indicators, recording UI elements. ---
Font Stack
• Primary: Inter (via Tailwind default sans) for UI and body text. • Code/Accent: JetBrains Mono or system monospace for technical elements and emphasis.
Text Colors (Theme-Aware)
CRITICAL: ALWAYS use semantic theme colors (text-foreground, text-muted-foreground, text-primary, bg-background, bg-card). NEVER use hardcoded colors like text-gray-900, text-gray-600, or bg-white (unless intentionally fixed, e.g., on a dark overlay). | Role | Class | Description | | -------------- | ----------------------- | ---------------------------------------- | | Headings | text-foreground | Main titles, high contrast. | | Body | text-muted-foreground | Descriptions and secondary text. | | Code/Tech | font-mono | Technical terms, code snippets. | | Emphasis | text-primary | Key brand moments or active states. |
The "Code Comment" Effect
Use this for section subtitles to emphasize the developer/tech identity. It simulates code comments. `tsx <p className="font-mono text-sm text-muted-foreground"> <span className="text-muted-foreground/60">// </span> Building the future, one commit at a time </p> `
Discussion
Health Signals
My Fox Den
Community Rating
Sign in to rate this booster
Works With
Any AI assistant that accepts custom rules or system prompts