К основному содержанию
скилл CX Codex

nextjs-typescript-tailwindcss-supabase — скилл для Claude Code

Скилл задаёт агенту правила для Next.js 14, TypeScript, TailwindCSS и Supabase: серверные компоненты, обработка ошибок, читаемый код.

Установить в Claude Code · Через Skills CLI (Vercel) Все способы и платформы ↓
npx skills add Mindrally/skills --skill nextjs-typescript-tailwindcss-supabase -a claude-code
Открыть на GitHub

Что делает nextjs-typescript-tailwindcss-supabase

Скилл превращает ассистента в разработчика, который пишет на Next.js 14 с TypeScript, TailwindCSS и Supabase. Внутри — набор технических предпочтений: имена компонентов в kebab-case, ставка на React Server Components и SSR, а 'use client' остаётся только для небольших изолированных мест. Для компонентов, которые тянут данные, агент добавляет состояния загрузки и ошибок, а также механизмы логирования.

Есть и общие правила. Агент следует вашим спецификациям, называет конкретные файлы в реализации, не оставляет заглушек и todo, а про незнакомые темы честно говорит, что не уверен. Читаемость здесь важнее оптимизации производительности — это стоит держать в голове, если вы ждёте от агента выжимания миллисекунд. Семантические HTML-элементы используются по всему коду.

Скилл ставится одной командой через npx skills add и работает в Claude, Codex, Cursor, GitHub Copilot, Gemini CLI и OpenCode. Для GitHub Copilot путь другой — gh skill install. Файл скилла лежит в каталоге вроде ~/.claude/skills/nextjs-typescript-tailwindcss-supabase/SKILL.md, так что при желании его можно править под свой проект.

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

  • писать компоненты Next.js 14 на TypeScript без лишних 'use client'
  • добавить состояния загрузки и ошибок к компонентам с запросами данных
  • выдержать kebab-case в именах файлов компонентов
  • собрать SSR-страницу с Supabase в качестве бэкенда
  • убрать из кода заглушки и незакрытые todo перед сдачей

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

  • Сделай страницу со списком заказов из Supabase — серверный компонент, с состоянием загрузки и обработкой ошибок
  • Отрефактори вот этот компонент: убери 'use client', если он не нужен
  • Напиши форму на TailwindCSS и подключи её к таблице Supabase

Как установить nextjs-typescript-tailwindcss-supabase

1Через Skills CLI (Vercel)

npx skills add Mindrally/skills --skill nextjs-typescript-tailwindcss-supabase -a claude-code

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

~/.claude/skills/nextjs-typescript-tailwindcss-supabase/SKILL.md

Папка скилла целиком; для одного проекта — .claude/skills/nextjs-typescript-tailwindcss-supabase/

По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов

Вопросы о nextjs-typescript-tailwindcss-supabase

Как установить nextjs-typescript-tailwindcss-supabase в Claude?

Выполните npx skills add Mindrally/skills --skill nextjs-typescript-tailwindcss-supabase -a claude-code. Скилл окажется в ~/.claude/skills/nextjs-typescript-tailwindcss-supabase/SKILL.md.

Что делает этот скилл?

Задаёт агенту правила для полного стека на Next.js 14: TypeScript, TailwindCSS и Supabase, с упором на серверные компоненты, SSR и читаемый код.

В каких платформах он работает?

Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI и OpenCode. Для Copilot установка идёт через gh skill install Mindrally/skills nextjs-typescript-tailwindcss-supabase.

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

SKILL.md · Apache-2.0
---
name: nextjs-typescript-tailwindcss-supabase
description: Full-stack Next.js 14 development with TypeScript, TailwindCSS, and Supabase for building production-ready web applications.
metadata:
  maintainer: Mindrally
  source: https://github.com/Mindrally/skills
---

# Next.js TypeScript TailwindCSS Supabase

You are an expert full-stack web developer focused on producing clear, readable Next.js code. You always use the latest stable versions of Next.js 14, Supabase, TailwindCSS, and TypeScript, and you are familiar with the latest features and best practices. You carefully provide accurate, factual, thoughtful answers, and are a genius at reasoning.

## Technical Preferences

- Employ kebab-case naming convention for components (example: my-component.tsx)
- Prioritize React Server Components and Next.js SSR capabilities
- Restrict client components ('use client') to minimal, isolated implementations
- Incorporate loading and error handling states for data-fetching components
- Establish error handling and error logging mechanisms
- Leverage semantic HTML elements throughout

## General Preferences

- Adhere precisely to user specifications
- Produce correct, current, bug-free, fully functional, secure, and efficient code
- Emphasize readability over performance optimization
- Implement all requested functionality completely
- Eliminate todos, placeholders, or incomplete code sections
- Reference specific file names in implementations
- Maintain conciseness with minimal extraneous content
- Acknowledge uncertainty rather than speculating on unfamiliar topics

© Mindrally · Apache-2.0 · Mindrally/skills

Похожие скиллы

Всё по теме «Фронтенд и UI» →
typescript-nextjs-supabase-cursorrules-prompt-file PatrickJS Правило для Cursor, которое держит TypeScript-код на Next.js App Router и Supabase в одном стиле: серверные компоненты, Shadcn UI, Tailwind. ★ 41 011звёзд репо nextjs-tailwind-typescript-apps-cursorrules-prompt PatrickJS Правило для Cursor, которое настраивает ассистента на Next.js, Tailwind CSS и TypeScript. Оно задаёт порядок работы: сначала план в псевдокоде, потом код. ★ 41 011звёзд репо nextjs-supabase-auth sickn33 Скилл настраивает Supabase Auth в Next.js App Router: клиенты, middleware, OAuth callback и Server Actions. Пригодится для защиты маршрутов и работы с сессиями. CX Codex +1 6 600установок bencium-code-conventions bencium Задаёт правила Bence для React и Next.js: стек, стиль кода, тесты и рабочий процесс. Нужен при создании или настройке проекта по этим соглашениям. CX Codex +1 3 300установок material-ui-nextjs mui Скилл для связки Material UI с Next.js: SSR, кеш Emotion, next/font, CSS-слои, Link и useSearchParams. Пригодится при настройке или отладке MUI в Next.js-приложении. CX Codex +1 727установок supabase-server supabase Подсказывает агенту, как писать Edge Functions, Hono-приложения и вебхуки на @supabase/server: режимы auth, клиенты, проверка входящих запросов. CX Codex +1 9 700установок

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

redux-toolkit Набор правил по архитектуре Redux Toolkit для React и Next.js на TypeScript. Пригодится при настройке хранилища, типизации хуков и написании слайсов. CX Codex +1 1 300установок front-end-developer Скилл превращает агента в старшего фронтенд-разработчика: React, Next.js, TypeScript, Tailwind, доступность. Пригодится, когда нужно писать компоненты, а не обсуждать их. CX Codex +1 1 300установок lua Задаёт агенту правила письма на Lua: таблицы, метатаблицы, обработка ошибок, игровой цикл и работа с памятью. Пригодится, если проект на Lua или Love2D. CX Codex +1 1 300установок tauri-development Скилл задаёт правила разработки десктопных программ на Tauri. Он настраивает связку Rust-бэкенда с фронтендом на TypeScript, React или Next.js. CX Codex +1 1 300установок electron-development Скилл задаёт агенту правила разработки десктопных приложений на Electron: разделение процессов, IPC, безопасность окон. CX Codex +1 1 300установок alpine-js Набор правил для создания реактивных интерфейсов на Alpine.js. Помогает писать лёгкий клиентский код в связке с Tailwind CSS, Laravel Livewire и Ghost CMS. CX Codex +1 1 300установок zod-schema-validation Скилл задаёт правила валидации данных через Zod и вывода типов TypeScript на границах системы: в API, формах и внешних ответах. Помогает писать схемы без лишнего дублирования. CX Codex +1 1 200установок kafka-development Скилл с практиками Apache Kafka: топики, партиции, producer/consumer, Schema Registry. Пригодится, когда агент пишет код для event-driven архитектуры. CX Codex +1 1 200установок

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

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