Next.js TypeScript Tailwind

Cursor-Regel für Next.js + TypeScript + Tailwind — sorgt für konsistenten, typsicheren Component-Code.

Original-Beschreibung der Autoren: Cursor rules for Next.js development with TypeScript and Tailwind CSS integration.

Die Regel

---
description: "Cursor rules for Next.js development with TypeScript and Tailwind CSS integration."
globs: **/*
alwaysApply: false
---
# 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/)

So nutzt du sie

Die Regel kopieren (Button oben) oder als Datei herunterladen und im Projekt unter .cursor/rules/ ablegen — Cursor lädt sie beim nächsten Start automatisch. Ältere Cursor-Versionen lesen alternativ eine einzelne .cursorrules-Datei im Projektstamm; dort einfach den Regel-Text ohne den Kopfblock zwischen den ----Zeilen einfügen.

Der Regel-Text ist englisch — Cursor versteht ihn unabhängig von der Sprache, in der Sie mit dem Editor chatten.

Im Detail

Cursor-Regel für Next.js-Projekte mit TypeScript und Tailwind CSS. Legt fest, wie Cursor Komponenten strukturiert, Typen sauber hält und Utility-Klassen statt eigener CSS-Dateien nutzt. Sinnvoll für alle, die ein modernes React/Next.js-Frontend bauen und wollen, dass generierter Code direkt zum eigenen Styling-Ansatz passt, statt Inline-Styles oder fremde UI-Konventionen zu erfinden. Spart Nacharbeit bei jedem Prompt, weil die KI von Anfang an im richtigen Stack denkt. Kein Ersatz für eigene Architekturentscheidungen, aber eine solide Basis für Konsistenz im Team.

Praxis-Tipp

Datei nach .cursor/rules/ legen und bei neuen Komponenten einfach “Erstelle eine Pricing-Card-Komponente” prompten — Cursor hält sich automatisch an Tailwind- und TS-Konventionen.

Lizenz & Quelle

• Lizenz: CC0 1.0
• Quelle: PatrickJS/awesome-cursorrules (GitHub)

Lade …