About .cursorrules prompt file
What you can build
Component Library: Develop a comprehensive component library using Shadcn UI, Radix UI, and Tailwind CSS. This library would provide reusable TypeScript components with a focus on mobile-first, responsive design.
Code Snippet Generator: Create a tool that generates concise TypeScript code snippets for functional components, utilizing best practices such as iteration and modularization. The tool would focus on leveraging Radix UI and Tailwind CSS for styling purposes.
UI Design System: Build a UI design system that leverages the strengths of Shadcn UI and Radix UI. Provide a set of templates and patterns that incorporate Tailwind CSS for responsiveness, aimed at speeding up front-end development.
TypeScript IDE Extension: Offer an IDE extension that assists in maintaining code style and structure by providing real-time feedback and suggestions on TypeScript code formatting and organization, with emphasis on functional programming patterns.
Responsive Layout Builder: Develop an application that allows users to build and customize layouts using Radix UI components with Tailwind CSS styling. Ensure a mobile-first approach to meet various screen sizes.
Interactive UI Playground: Create an online platform where developers can experiment with Shadcn UI components and see real-time Tailwind CSS feedback, combined with TypeScript code examples.
TypeScript Map Utility Library: Provide a library that offers utilities for managing and converting data using maps instead of enums. This library would be tailored for TypeScript applications, ensuring a functional programming approach.
Naming Convention Checker Tool: Develop a CLI tool that checks for proper naming conventions within TypeScript projects, ensuring consistency in directories and component exports as per the given guidelines.
Responsive CSS Framework: Create a lightweight CSS framework using Tailwind CSS principles, offering additional UI patterns and pre-designed components compatible with Shadcn and Radix UI.
Developer Documentation Generator: Build a tool that automates the generation of detailed developer documentation from TypeScript codebases, emphasizing structure, interfaces, and the use of functional components.
Benefits
Emphasizes functional and declarative programming patterns in TypeScript, steering away from classes and preferring modularization to minimize code duplication.
Advocates for structured file organization with exported components, subcomponents, helpers, static content, and types, promoting readability and maintainability.
Strong focus on using Shadcn UI, Radix, and Tailwind for building responsive, mobile-first interfaces, enhancing component styling consistency.
Synopsis
Frontend developers can build modern, responsive web applications using TypeScript, React, Shadcn UI, Radix UI, and Tailwind, following best practices for code style, file structure, and UI design.
Overview of .cursorrules prompt
The .cursorrules file provides guidelines for writing TypeScript code, particularly when working with Node.js, React, Shadcn UI, Radix UI, and Tailwind. It emphasizes a code style focused on clarity, conciseness, and technical accuracy, advocating for functional and declarative programming patterns over the use of classes. The file instructs on naming conventions, preferring lowercase with dashes for directories and named exports for components. It outlines best practices for TypeScript usage, recommending interfaces over types and maps over enums. Syntax suggestions include using the "function" keyword for pure functions and maintaining a concise syntax. Styling guidelines encourage the use of Shadcn UI, Radix UI, and Tailwind for responsive, mobile-first design.
