К основному содержанию
правило

nextjs-typescript-tailwind-cursorrules-prompt-file

Правило для Cursor, которое задаёт агенту стандарты проекта на Next.js, TypeScript и Tailwind CSS. Пригодится, когда нужно, чтобы новый код ложился в существующую структуру.

Установить в Cursor · Вручную: положить файлы Все способы и платформы ↓
.cursor/rules/nextjs-typescript-tailwind-cursorrules-prompt-file.mdc
Открыть на GitHub

Что делает nextjs-typescript-tailwind-cursorrules-prompt-file

Файл описывает проект Astral — блок-эксплорер сети Autonomys на Next.js и TypeScript. Внутри перечислены разделы: компоненты, папка App для маршрутизации, кастомные хуки для состояния. Агент получает эту карту и опирается на неё при генерации кода.

Дальше идут требования к разработке: типизация через TypeScript, стандарты из конфигурации ESLint, адаптивность и доступность компонентов, стилизация через Tailwind CSS по заданной палитре. Отдельный блок про взаимодействие с ИИ: приоритет практик TypeScript и React, переиспользуемые компоненты по существующим шаблонам, минимум сгенерированных комментариев, валидация пользовательского ввода и обработка ошибок. Ещё в файле есть словарь терминов сети и ссылки на документацию Next.js, TypeScript, Tailwind и React.

Правило привязано к globs: **/*, но alwaysApply стоит в false — значит, его нужно подключать вручную, само оно не сработает. Часть содержимого заточена под конкретный проект: названия Astral и Autonomys, их URL и терминология. Для своего репозитория эти блоки придётся переписать, иначе агент будет тянуть чужие имена в ваш код.

Какие задачи решает

  • объяснить агенту структуру папок Next.js-проекта
  • заставить генерировать компоненты на TypeScript
  • удержать стили в рамках Tailwind CSS
  • получать переиспользуемые компоненты вместо одноразовых
  • добавить валидацию ввода и обработку ошибок в новый код

Примеры запросов агенту

  • Создай компонент карточки транзакции в папке Components, стили через Tailwind
  • Добавь кастомный хук для загрузки данных и типизируй его ответ
  • Перепиши этот компонент так, чтобы он был адаптивным и доступным

Как установить nextjs-typescript-tailwind-cursorrules-prompt-file

Вручную: положить файлы

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

Во frontmatter: description, globs, alwaysApply

По шагам, с командами для каждой платформы: Cursor rules: файлы .mdc, четыре режима и замена .cursorrules

Вопросы о nextjs-typescript-tailwind-cursorrules-prompt-file

Как установить nextjs-typescript-tailwind-cursorrules-prompt-file в Cursor?

Создайте файл .cursor/rules/nextjs-typescript-tailwind-cursorrules-prompt-file.mdc и вставьте в него содержимое правила.

Что делает это правило?

Задаёт агенту Cursor контекст проекта на Next.js и TypeScript: структуру папок, требования к типизации, стилизацию через Tailwind CSS и правила генерации кода.

Почему правило не применяется само?

В нём указано alwaysApply: false, поэтому его нужно включить вручную для нужных файлов или запросов.

Исходный текст

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

Похожие правила IDE

Все правила IDE по теме «Фронтенд и UI» →
nextjs-react-typescript Mindrally Скилл задаёт стиль кода для Next.js App Router, React, TypeScript, Shadcn UI и Tailwind. Агент пишет функциональные компоненты, серверные по умолчанию, с TypeScript-интерфейсами. CX Codex +1 5 200установок nextjs-typescript-tailwindcss-supabase Mindrally Скилл задаёт агенту правила для Next.js 14, TypeScript, TailwindCSS и Supabase: серверные компоненты, обработка ошибок, читаемый код. CX Codex +1 1 300установок nextjs-tailwind официальный github Правило задаёт стандарты для проектов на Next.js, TypeScript и Tailwind CSS. Оно пригодится, когда вы просите Copilot создавать или менять компоненты и маршруты. ★ 40 451звёзд репо react-nextjs-development sickn33 Ведёт разработку на React и Next.js 14+ через восемь фаз: от скаффолдинга до деплоя на Vercel. Пригодится, когда начинаете проект с нуля или переводите его на App Router. CX Codex +1 2 000установок nextjs-app-router-fundamentals wsimmonds Скилл ведёт агента по Next.js App Router: перенос с Pages Router, вложенные layout, метаданные, динамические маршруты. Пригодится при переходе на app/. CX Codex +1 2 200установок material-ui-nextjs mui Скилл для связки Material UI с Next.js: SSR, кеш Emotion, next/font, CSS-слои, Link и useSearchParams. Пригодится при настройке или отладке MUI в Next.js-приложении. CX Codex +1 727установок

Из того же набора140

node-express Правило задаёт Cursor ориентиры для Node.js и Express.js: структура проекта, API, безопасность, базы данных, тесты и деплой. ★ 41 024звёзд репо nextjs15-supabase-cursorrules-prompt-file Правило для Cursor, которое держит агента в рамках стека Next.js 15, Supabase и TypeScript strict — от проверки сессии до RLS и ключей Stripe. ★ 41 024звёзд репо nextjs Правило задаёт практики для Next.js с TypeScript и Tailwind UI. Оно пригодится для структуры проекта, компонентов, маршрутов, форм и загрузки данных. ★ 41 024звёзд репо nextjs-vercel-typescript-cursorrules-prompt-file Правило для Cursor, которое задаёт стиль кода и структуру проекта на Next.js с TypeScript, Vercel middleware и KV-базой. ★ 41 024звёзд репо nextjs-typescript-cursorrules-prompt-file Правило для Cursor задаёт стек Next.js с TypeScript и порядок работы агента: план, стиль кода, формат ответа. Пригодится, если вы пишете фронтенд на Next.js. ★ 41 024звёзд репо nextjs-tanstack-query-cursorrules-prompt-file Правило задаёт паттерны для Next.js App Router и TanStack Query v5: гидратация кэша, Server Actions и оптимистичные обновления. ★ 41 024звёзд репо nextjs-tailwind-typescript-apps-cursorrules-prompt Правило для Cursor, которое настраивает ассистента на Next.js, Tailwind CSS и TypeScript. Оно задаёт порядок работы: сначала план в псевдокоде, потом код. ★ 41 024звёзд репо nextjs-seo-dev-cursorrules-prompt-file Правило задаёт Cursor контекст для разработки Next.js с SEO-ориентиром, комментариями и фиксированными настройками проекта. ★ 41 024звёзд репо

Спонсоры проекта

Компании, которые помогают держать аналитику открытой