Tailwind Shadcn UI Integration .cursorrules prompt file
About .cursorrules prompt file
What you can build
TypeScript NextJS Snippet Generator: A web tool that generates clear and readable TypeScript NextJS code snippets based on user inputs. Users can specify components, features, and desired styling using Tailwind CSS, which the tool translates into complete, ready-to-use code.
NextJS Project Scaffolding App: This application can generate a fully functional NextJS project setup, including commonly used pages, Tailwind CSS configuration, and pre-styled UI components using Shadcn UI. Users can select from templates like blog, e-commerce, or dashboard.
TypeScript Code Review Bot: A service for VSCode that analyzes TypeScript NextJS code to ensure it is clean, readable, and follows best practices. It suggests improvements, catches potential bugs, and ensures all dependencies are correctly imported.
Tailwind CSS Visual Builder: A web app where users can visually design components and export the Tailwind CSS code. It can integrate with a NextJS project, providing generated code that adheres to best practices in code readability and structure.
NextJS Component Library: A comprehensive library of pre-built, Shadcn-UI-styled components optimized for performance and readability in NextJS projects. Each component is accompanied by documentation and example usage in a NextJS application.
Performance and Security Audit Tool: An application that inspects NextJS projects for performance bottlenecks and security vulnerabilities. It provides a detailed report and suggests code changes to enhance both.
Interactive TypeScript Learning Platform: An educational app that uses interactive tutorials to teach TypeScript fundamentals with a focus on developing readable and maintainable NextJS applications. The platform includes quizzes and real-time code validation.
Dynamic Form Builder: A robust tool for creating and managing forms in NextJS applications. The builder uses TypeScript for robust type-checking and provides ready-made Shadcn UI components styled with Tailwind, ensuring both functionality and aesthetic design.
Shadcn UI Customization Service: A web service that allows developers to customize Shadcn UI components with Tailwind CSS and export them for integration with their NextJS projects, focusing on clean and readable code output.
NextJS API Endpoint Creator: An interactive interface for generating NextJS API endpoints with TypeScript. The tool assists in creating well-structured, secure, and performant endpoints, ensuring all necessary imports and best practices are followed.
Benefits
- Emphasis on detailed pseudocode planning before actual implementation ensures structured and well-thought-out code development.
- Prioritizes readability, security, and completeness, ensuring no placeholders or unfinished tasks, perfect for producing maintainable and reliable software.
- Utilizes modern tech stack, leveraging Tailwind and Shadcn UI within VSCode for seamless integration and development within the project environment.
Synopsis
Developers building a user-friendly web application using NextJS and Typescript, with a focus on maintainable and efficient UI components styled with Tailwind and Shadcn UI, would highly benefit.
Overview of .cursorrules prompt
The .cursorrules file serves as a guide for an AI programming assistant integrated into VSCode, specialized in generating clean and readable Typescript NextJS code. The assistant is designed to provide thoughtful and accurate support, with an emphasis on detailed planning, correctness, completeness, and readability. It outlines a step-by-step approach for crafting code, starting with detailed pseudocode before moving to implementation. The file stresses the importance of meeting user requirements, verifying code thoroughly, and ensuring all necessary imports and components are properly included. The tech stack includes Tailwind and Shadcn UI, with all files situated in the `src` directory.