nextjs-typescript-tailwindcss-supabase — скилл для Claude Code
Скилл задаёт агенту правила для Next.js 14, TypeScript, TailwindCSS и Supabase: серверные компоненты, обработка ошибок, читаемый код.
npx skills add Mindrally/skills --skill nextjs-typescript-tailwindcss-supabase -a claude-codeЧто делает 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-code2Вручную: положить файлы
~/.claude/skills/nextjs-typescript-tailwindcss-supabase/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/nextjs-typescript-tailwindcss-supabase/
1Через Skills CLI (Vercel)
npx skills add Mindrally/skills --skill nextjs-typescript-tailwindcss-supabase -a codex2Вручную: положить файлы
.agents/skills/nextjs-typescript-tailwindcss-supabase/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add Mindrally/skills --skill nextjs-typescript-tailwindcss-supabase -a cursor2Вручную: положить файлы
.cursor/skills/nextjs-typescript-tailwindcss-supabase/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install Mindrally/skills nextjs-typescript-tailwindcss-supabase2Вручную: положить файлы
.github/skills/nextjs-typescript-tailwindcss-supabase/SKILL.md1Через Skills CLI (Vercel)
npx skills add Mindrally/skills --skill nextjs-typescript-tailwindcss-supabase -a gemini-cli2Командой платформы
gemini skills install https://github.com/Mindrally/skills --path nextjs-typescript-tailwindcss-supabaseВручную: положить файлы
.devin/skills/nextjs-typescript-tailwindcss-supabase/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add Mindrally/skills --skill nextjs-typescript-tailwindcss-supabase -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в 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