TypeScript Next.js Tailwind .cursorrules prompt file
About .cursorrules prompt file
What you can build
Vj0 Live Collaboration Platform: A platform that allows multiple users to collaborate on live visuals in real-time, where they can jointly modify prompts and see updates instantly. This would use Next.js App Router for real-time updates and Radix UI for user controls.
Generative Art Marketplace: An online marketplace where artists can sell or share their generative art created using vj0. Integration with React and Tailwind would allow a modern, responsive design.
Educational Platform for Generative Art: An educational tool that gives users tutorials and examples to learn generative art using vj0. This would use Radix UI for step-by-step tutorial guidance and Shadcn UI for a clean interface.
Vj0 Plugin API: An API allowing developers to create plugins that extend vj0 with new types of visual effects or integrations with other platforms. TypeScript interfaces would ensure strong type checks for plugins.
Customized Visual Templates Library: A library of pre-made visual templates that can be easily customized with user inputs, using Tailwind CSS for styling and Next.js for seamless integration.
Audio Synced Visual Experience App: An app that syncs animations and visuals with live audio inputs, perfect for live shows. Utilizes useMediaQuery for responsive design, and React Server Components for performance optimization.
AI-Powered Visual Prompt Generator: A tool that suggests prompts based on user input texts or images, using machine learning models. Would integrate with a Next.js server component for backend processing.
Interactive Event Visualization Tool: An interactive tool for event organizers to manage and project visuals live at events, with user-friendly controls developed using Shadcn UI and Radix UI components.
Automatic Visual Performance Recorder: A feature that records live visual performances generated in vj0, allowing users to save and review later. The implementation will use dynamic imports for efficient performance.
Customizable VJ Profile Page: A personal landing page for VJs to showcase their visuals, performances, and available creations. This would incorporate Tailwind RSS for dynamic content updates and declarative JSX.
Benefits
- Streamline UI/UX with cohesive Shadcn UI, Radix, and Tailwind integration for responsive designs.
- Prioritize efficient rendering with React Server Components and dynamic imports for performance.
- Adhere to scalable code practices using TypeScript interfaces, descriptive naming, and modularization.
Synopsis
Developers working on "vj0" could use this prompt to build a seamless and responsive live visual generation tool with Next.js, TypeScript, and modern UI frameworks, ensuring optimized performance and flexibility for creative users.
Overview of .cursorrules prompt
The .cursorrules file establishes guidelines for developing a project using TypeScript, Node.js, and a variety of modern web technologies including Next.js, React, Shadcn UI, Radix UI, and Tailwind CSS. It outlines a series of coding conventions focusing on type safety, functional programming patterns, and effective code structure. Emphasis is placed on using TypeScript interfaces, avoiding enums, and utilizing functional components. The file details naming conventions, syntax preferences, performance optimization techniques, and best practices for UI design and responsive styling. Additionally, it provides guidance on optimizing Web Vitals and highlights the preferred strategies for state management and data fetching using Next.js features. The file is designed for developing a web-based tool named "vj0" that enables users to create live visual experiences through simple prompt-based instructions.