About .cursorrules prompt file
What you can build
DevSpeed Web IDE: A lightweight web-based IDE powered by Hono for an ultra-fast coding experience using Bun to execute JavaScript code quickly, with TypeScript support and React JSX for building UI components. Tailwind CSS can provide stylish and responsive designs for developers working on projects.
React Component Library: A curated library of pre-built and performance-optimized React components using TypeScript and styled with Tailwind CSS. Each component follows best practices like memoization, file naming, and destructured props to ensure efficient reusability in projects.
TypeScript Starter Kit: A project starter template utilizing Hono, Bun, and TypeScript. It includes React JSX components styled with Tailwind CSS and a structured layout for breaking components into reusable sections, retaining a focus on performance through tools like React.memo.
Web Performance Optimizer: A tool that allows developers to input their React projects and get suggestions or automatic refactoring to improve performance. This could include applying virtual scrolling, pagination, reacting with optimized event handling, and component memoization recommendations.
Interactive TypeScript Tutorial: An interactive learning platform using Node.js and Bun that teaches developers TypeScript, React, and Tailwind CSS best practices. The platform would host exercises and real-time feedback using a fast execution environment to facilitate a hands-on learning experience.
API Pagination Utility: A library that simplifies adding paginated requests to projects. Using async/await syntax, this utility exports functions to efficiently fetch API data in a paginated manner and uses TypeScript for static typing.
UI Kit for Fast Prototyping: A collection of reusable React components styled with Tailwind CSS that developers can assemble quickly into prototypes. Each component would follow code style guidelines ensuring ease of use and performance efficiency.
React Performance Analyzer: A browser extension or web tool that profiles React websites. It identifies potential optimizations like unnecessary rerenders, opportunities for component memoization, and suggests debouncing for rapidly firing events.
Tailwind CSS Theming Tool: A tool allowing developers to create and manage Tailwind CSS themes in line with existing color palettes, helping teams maintain consistent UI design across large applications.
Async/Await Code Examples Hub: A website hosting a variety of code examples and tutorials focused on async/await usage in JavaScript and TypeScript. It would include performance tips, such as effective ways to handle asynchronous operations and debugging common pitfalls.
Benefits
- Emphasis on using ultra-fast technologies like Bun and lightweight frameworks such as Hono for optimal performance.
- Strict TypeScript enforcement with detailed naming conventions and code structure for maintainability.
- Strong focus on UI performance with techniques like React.memo, virtualization, and API pagination.
Synopsis
Developers building performant, type-safe web applications using Hono, Bun, and React would benefit from this prompt to establish consistent coding standards and optimize component reuse and styling.
Overview of .cursorrules prompt
The .cursorrules file outlines coding standards and best practices for a development project using Hono, Bun, TypeScript, and React JSX. It emphasizes using TypeScript for type safety and prescribes specific naming conventions for components, hooks, types, and interfaces to maintain consistency. UI styling relies on Tailwind CSS, and code structure adheres to a layout of Layout, Page, and Component tiers. The file also outlines syntax preferences, such as using semicolons, arrow functions, and async/await. Performance optimization suggestions include using React.memo, virtualizing long lists, and debouncing events. Overall, it serves as a guideline to ensure code quality, readability, and performance efficiency.
