nextjs typescript tailwind
via PatrickJS/awesome-cursorrules
Next.js + TypeScript + Tailwind CSS setup for Autonomys block explorer development.
What is nextjs typescript tailwind?
Cursor rule for developing Astral, the Autonomys network block explorer, using Next.js with TypeScript and Tailwind CSS. Provides project structure, development guidelines, and coding standards to maintain consistency and best practices across the codebase.
- Enforces TypeScript for type safety across components and hooks
- Guides Tailwind CSS styling with adherence to defined color palette
- Establishes reusable component patterns and design consistency
- Provides ESLint-based coding standards and accessibility requirements
- Includes development scripts (dev, build) and project structure reference
- Directs AI code generation toward React best practices and minimal comments
Applies to
File patterns this rule matches.
Rule definition (reference)
Source of truth, from the repository.
Project Overview
This project, named Astral, the Block Explorer of Autonomys network, is built using Next.js and TypeScript. It integrates various libraries for state management, UI components, and data fetching.
Key URLs
- Astral Block Explorer: https://explorer.autonomys.xyz/
- GitHub Repository: https://github.com/autonomys/astral
- Autonomys: https://autonomys.xyz/
- Academy: https://academy.autonomys.xyz/
- Documentation: https://docs.autonomys.xyz/
Project Structure
- Components: Contains reusable UI components.
- App: Next.js app for routing.
- Hooks: Custom React hooks for state management.
Development Guidelines
- Use TypeScript for type safety.
- Follow the coding standards defined in the ESLint configuration.
- Ensure all components are responsive and accessible.
- Use Tailwind CSS for styling, adhering to the defined color palette.
Important Scripts
dev: Starts the development server.build: Builds the application for production.
AI Interaction Guidelines
- When generating code, prioritize TypeScript and React best practices.
- Ensure that any new components are reusable and follow the existing design patterns.
- Minimize the use of AI generated comments, instead use clearly named variables and functions.
- Always validate user inputs and handle errors gracefully.
- Use the existing components and pages as a reference for the new components and pages.
Lexicon of Terms and Concepts
- H+AI (Human + Artificial Intelligence): The collaboration between humans and AI to enhance capabilities and ensure a harmonious coexistence.
- Autonomys Network: A decentralized network designed to provide infrastructure for AI-powered decentralized applications (dApps).
- deAI Ecosystem: A stack of components that includes distributed storage, compute, and a dApp/agent layer for building and deploying AI applications.
- Distributed Storage: A system ensuring data integrity and availability for AI-related data.
- Distributed Compute: Scalable computational resources for AI training and inference.
- dApp (Decentralized Application): Applications that run on a decentralized network, providing enhanced security and transparency.
Additional Resources
Related rules
Next.js + Vercel + Supabase stack guide for BA Copilot, a BPMN diagram assistant for business analysts.
Next.js + TypeScript + Vercel development with AI SDK RSC, middleware, and KV database integration.
Next.js 15, React 19, Vercel AI, and Tailwind CSS development guide with TypeScript best practices.
27 architecture rules for Next.js 15 + Supabase preventing auth, params, and security hallucinations
Node.js and Express.js best practices for backend development
Node.js + MongoDB + Express setup guide for multi-entry pool management with JWT auth and admin approval workflows.