Tanstack Start TypeScript State Mgmt .cursorrules prompt file
About .cursorrules prompt file
What you can build
Optimized State Management Dashboard - Develop a web app that visualizes and manages global state, showcasing efficient use of modern state management solutions like TanStack React Query and Zustand, complete with dynamic imports and a mobile-first approach.
Dynamic Image Optimizer - Create a service that optimizes images on the fly, converting them to WebP format, providing size data, and implementing lazy loading for better performance in web projects.
Error Handling Utility Library - Build a library that provides a set of tools for consistent error handling in TypeScript applications, including custom error types and guard clauses for catching edge cases efficiently.
SSR-Enhanced Blogging Platform - Design a blogging platform utilizing SSR with React Query SSR features to fetch and render data, ensuring minimal use of
useEffect
andsetState
for optimal performance.Responsive E-commerce Template - Develop a responsive e-commerce template that uses Tailwind CSS for styling, ensuring a consistent and modern UI across all devices by following a mobile-first approach.
Authentication Starter Kit - Create an authentication starter kit using Clerk integrated with TanStack Start, providing secure handling of user credentials and input validation using Zod.
Real-time Data Fetching Dashboard - Implement a dashboard app that showcases real-time data fetching and state management using React Query, implementing code splitting and lazy loading for optimal performance.
Performance Monitoring Tool - Craft a tool that helps in monitoring and improving performance metrics in web applications, with features to analyze load times and rendering efficiencies.
Custom TypeScript Utilities Toolkit - Build a toolkit with a collection of custom utilities and helpers for TypeScript that follow clean code principles, aiding in maintainability and readability.
UI Components Library - Develop a library of reusable UI components styled with Shadcn UI and Radix UI, promoting a consistent and modern visual design for web applications.
Schema Validation Service - Offer a service that performs schema validation using Zod, ensuring robust and secure data handling in TypeScript-based applications.
Unit Testing Framework Template - Provide a framework template for setting up unit tests using Jest and React Testing Library, promoting a test-driven development process in projects.
Analytical Project Planner - Create a tool for project planning utilizing System 2 Thinking methodologies, helping developers break down tasks effectively and plan architectural structures.
Documentation Generator - Build a documentation generator that creates comprehensive JSDoc comments and clear documentation for TypeScript functions and components, enhancing IDE intellisense.
Iterative Improvement Platform - Design a platform that encourages and tracks iterative improvements in codebases by identifying potential enhancements and optimizations systematically.
Benefits
- Prioritize system thinking and exploratory methods, fostering thorough analysis, and innovative solutions for robust code architecture.
- Emphasize enhanced error handling, leveraging guard clauses, custom error types, and early returns for consistency.
- Integrate modern state management and data fetching with optimized SSR features, responsive mobile-first design, and lazy-loaded web-optimized imagery.
Synopsis
Developers seeking to build efficient, maintainable full-stack applications using the latest in TypeScript, React, Tanstack Start, and modern UI/UX frameworks can leverage this prompt for structured guidance and industry-standard practices.
Overview of .cursorrules prompt
The .cursorrules file outlines guidelines for full-stack developers to create optimized and maintainable code using Tanstack Start with modern UI/UX frameworks and TypeScript. It specifies best practices in code style, optimization, error handling, UI styling, state management, security, performance, testing, and documentation. Developers are advised to use functional programming patterns, responsive design, and modern state management solutions, while adhering to secure coding and performance optimization techniques. The file also emphasizes a structured methodology involving deep dive analysis, planning, implementation, review, and finalization to ensure robust solutions.