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

Kombiniert Next.js, TypeScript und Tailwind CSS in einer Cursor-Regel und sorgt dafür, dass generierte Komponenten sowohl typsicher als auch stilistisch konsistent sind — also Utility-Klassen statt Inline-Styles oder CSS-Module, korrekte Props-Typisierung und einheitliche Benennung. Der Vorteil gegenüber generischen Next.js-Regeln liegt darin, dass Styling-Entscheidungen (z. B. Klassenreihenfolge, Verzicht auf beliebige eigene CSS-Dateien) direkt mit abgedeckt sind. Lohnt sich für Projekte, die Tailwind bereits als Styling-Standard festgelegt haben und verhindern wollen, dass die KI aus Gewohnheit andere Ansätze vorschlägt. Für Projekte ohne Tailwind ist diese Regel weniger passend als eine reine TypeScript-Variante.

Praxis-Tipp

Nutzen Sie Prompts wie „Baue eine Card-Komponente mit Tailwind-Klassen für Titel, Bild und Button“ — die Regel sorgt dafür, dass dabei keine zusätzlichen CSS-Dateien entstehen.

Lizenz & Quelle

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

Lade …