.cursorrules Next.js TypeScript Tailwind

by @Marc-Aurele Besner

# 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

- [Next.js Documentation](https://nextjs.org/docs)
- [TypeScript Handbook](https://www.typescriptlang.org/docs/)
- [Tailwind CSS Documentation](https://tailwindcss.com/docs)
- [React Documentation](https://reactjs.org/docs/getting-started.html)
- [Autonomys Overview](https://autonomys.xyz/)

Autonomys Network Development Toolkit

A collection of tools and services designed to enhance the development and deployment of decentralized applications (dApps) on the Autonomys network, focusing on ease of use, scalability, and AI integration.

Core Tools

Decentralized Application Template Creator:
Provides standardized templates for building dApps on the Autonomys network, simplifying development.
AI-Powered Documentation Generator:
Automatically generates comprehensive documentation for applications using the code structure.
Responsive UI Component Library:
Offers reusable UI components designed for the Autonomys network, ensuring accessibility and adherence to Tailwind CSS guidelines.

Code Quality & Debugging

AI-Driven Code Review Service:
Reviews code for TypeScript and Next.js projects, suggesting improvements for maintainability and performance.
Real-time Error Handling Dashboard:
Displays real-time error logs and user input validation for efficient debugging.

Storage & Compute Management

Distributed Storage File Manager:
Manages files on the Autonomys network’s distributed storage system with features for uploading and ensuring data integrity.
Compute Resource Allocation Viewer:
Visualizes the allocation and usage of distributed compute resources for efficient management.

Collaboration & Learning

H+AI Collaboration Platform:
Facilitates human-AI interaction for developing and deploying AI applications on the deAI ecosystem.
Academy Learning Tracker:
Tracks user progress through learning materials, providing personalized recommendations and achievements.
Autonomys Network Status Monitor:
Monitors network health, activity, and blockchain data for developers and users.

Key Technologies:

Autonomys Network
TypeScript
Next.js
Tailwind CSS
AI Integration

Overview of .cursorrules prompt

The .cursorrules file outlines the structure and development guidelines for a project named Astral, which is a Block Explorer for the Autonomys network. It is built using Next.js and TypeScript, incorporating libraries for state management, UI components, and data fetching. The file lists key URLs related to the project, provides an overview of the project structure, and specifies development guidelines emphasizing TypeScript, responsiveness, accessibility, and style using Tailwind CSS. It details important scripts for development and production builds, AI interaction guidelines adhering to React best practices, and includes terminology relevant to the Autonomys ecosystem. Additional resources are linked for further reference.

Updated: March 17, 2025

Blockchain developers and web developers could use this prompt to build a decentralized block explorer application for the Autonomys network, leveraging Next.js and TypeScript.

Usefull for: