Skip to main content

rule

nextjs-typescript-tailwind-cursorrules-prompt-file — Cursor rule

A Cursor rule that hands the agent the conventions of a Next.js, TypeScript and Tailwind CSS project. Useful when new code has to match what is already there.

Install into Cursor · Manually: put the files in place All methods and platforms ↓

.cursor/rules/nextjs-typescript-tailwind-cursorrules-prompt-file.mdc

What nextjs-typescript-tailwind-cursorrules-prompt-file does

The file maps out Astral, a block explorer for the Autonomys network written in Next.js and TypeScript. It names the parts of the codebase: reusable components, the App directory for routing, custom hooks for state. The agent reads that map before writing anything.

Development guidelines come next. TypeScript for type safety, the ESLint config as the coding standard, responsive and accessible components, Tailwind CSS for styling against a defined palette. A separate section covers how the AI should behave: favour TypeScript and React practice, keep new components reusable and shaped like the existing ones, skip generated comments in favour of clear names, validate input and handle errors. A glossary of network terms and links to the Next.js, TypeScript, Tailwind and React docs round it out.

The rule targets globs: **/* with alwaysApply: false, so nothing happens until you attach it yourself. Much of the text is tied to one project — the Astral and Autonomys names, their URLs, their vocabulary. On your own repo those sections need rewriting, or the agent will carry someone else's names into your code.

What it helps with

explain a Next.js folder layout to the agent
keep generated components typed with TypeScript
hold styling inside Tailwind CSS
get reusable components instead of one-off ones
add input validation and error handling to new code

Example prompts for the agent

Create a transaction card component in the Components folder, style it with Tailwind
Add a custom hook that fetches data and type its return value
Rewrite this component so it is responsive and accessible

How to install nextjs-typescript-tailwind-cursorrules-prompt-file

Manually: put the files in place

.cursor/rules/nextjs-typescript-tailwind-cursorrules-prompt-file.mdc

Frontmatter: description, globs, alwaysApply

Manually: put the files in place

.claude/rules/nextjs-typescript-tailwind-cursorrules-prompt-file.md

The paths frontmatter field limits the files: move globs from the source into paths

Manually: put the files in place

.github/instructions/nextjs-typescript-tailwind-cursorrules-prompt-file.instructions.md

The applyTo field sets which files it applies to: move globs from the source into applyTo

Manually: put the files in place

.devin/rules/nextjs-typescript-tailwind-cursorrules-prompt-file.md

Manually: put the files in place

.clinerules/nextjs-typescript-tailwind-cursorrules-prompt-file.md

Step by step, with commands for each platform: Cursor rules: .mdc files, four modes and what replaced .cursorrules

Questions about nextjs-typescript-tailwind-cursorrules-prompt-file

How do I install nextjs-typescript-tailwind-cursorrules-prompt-file in Cursor?

Create the file .cursor/rules/nextjs-typescript-tailwind-cursorrules-prompt-file.mdc and paste the rule contents into it.

What does this rule do?

It gives the Cursor agent context about a Next.js and TypeScript project: folder structure, typing requirements, Tailwind CSS styling and code generation guidelines.

Why doesn't the rule apply on its own?

It sets alwaysApply: false, so you have to enable it manually for the files or prompts you want it to cover.

Source text

nextjs-typescript-tailwind-cursorrules-prompt-file.mdc · CC0-1.0

---
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/)

© PatrickJS · CC0-1.0 · PatrickJS/awesome-cursorrules

Similar IDE rules

All IDE rules for Frontend and UI →

nextjs-react-typescript Mindrally A skill that sets code style for Next.js App Router, React, TypeScript, Shadcn UI and Tailwind. The agent writes functional components, server-first, with TypeScript interfaces. CX Codex +1 5,200installs nextjs-typescript-tailwindcss-supabase Mindrally A skill that steers your agent toward Next.js 14, TypeScript, TailwindCSS and Supabase: server components, error handling, readable code. CX Codex +1 1,300installs nextjs-tailwind official github This rule guides GitHub Copilot on Next.js, TypeScript, and Tailwind CSS projects. Use it when asking for changes to routes, components, data handling, or styling. ★ 40,451repo stars react-nextjs-development sickn33 Walks a React or Next.js 14+ build through eight phases, from scaffolding to a Vercel deploy. Handy when a project starts from scratch or moves to the App Router. CX Codex +1 2,000installs nextjs-app-router-fundamentals wsimmonds A skill that walks the agent through Next.js App Router: Pages Router migration, nested layouts, metadata, dynamic routes. Useful when moving to app/. CX Codex +1 2,200installs material-ui-nextjs mui A skill for wiring Material UI into Next.js: SSR, Emotion cache, next/font, CSS layers, Link, and useSearchParams. Use it when setting up or debugging MUI in a Next.js app. CX Codex +1 727installs

From the same set210

nextjs15-react19-vercelai-tailwind-cursorrules-prompt-file Defines architecture standards for Next.js 15, React 19, Tailwind CSS, and Vercel AI SDK in Cursor. Guides component design, async runtime APIs, and typed form handling. ★ 41,024repo stars nextjs This rule guides Next.js work with TypeScript and Tailwind UI. Use it when shaping project structure, components, routes, forms, and data loading. ★ 41,024repo stars nextjs-vercel-typescript-cursorrules-prompt-file A Cursor rule that sets code style and file structure for Next.js projects with TypeScript, Vercel middleware and a KV database. ★ 41,024repo stars nextjs-vercel-supabase-cursorrules-prompt-file Configures Cursor for building the BA Copilot app with Next.js App Router, Vercel AI, Supabase, and bpmn-js. Keeps the AI aligned with the chosen stack. ★ 41,024repo stars nextjs-typescript-cursorrules-prompt-file A Cursor rule that pins the Next.js and TypeScript stack and the agent's working order: plan first, one file at a time, fixed reply format. ★ 41,024repo stars nextjs-tanstack-query Enforces architecture patterns for Next.js App Router with TanStack Query v5. Guides Cursor on cache hydration, Server Actions as mutations, and optimistic UI updates. ★ 41,024repo stars nextjs-tanstack-query-cursorrules-prompt-file A Cursor rule for Next.js App Router and TanStack Query v5, with cache hydration, Server Actions as mutations, and optimistic updates. ★ 41,024repo stars nextjs-tailwind-typescript-apps-cursorrules-prompt A Cursor rule that points the assistant at Next.js, Tailwind CSS and TypeScript. It sets the working order: plan in pseudocode first, code after. ★ 41,024repo stars

Project sponsors

Companies that keep this analytics open

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor