AIKraft/AI/Войти
AIKraft/Skills/Современная веб-разработка

Современная веб-разработка

Modern web development best practices for TypeScript, Next.js 14, React Server Components, Supabase, GraphQL, and Tailwind CSS.

mindrally official Разработка

Что делает навык

Набор правил для современной веб-разработки с использованием TypeScript, Next.js 14, React Server Components, Supabase, GraphQL, Tailwind CSS, Radix UI и Shadcn UI. Определяет стандарты кода, архитектуры, обработки ошибок и оптимизации производительности.

Когда применять

  • Разработка компонентов на Next.js 14 с акцентом на React Server Components и минимизацией использования 'use client' и 'setState'.
  • Взаимодействие с базой данных и аутентификацией через Supabase с применением Genql для типизированных GraphQL-запросов и политик RLS.
  • Стилизация интерфейсов с использованием Tailwind CSS, Radix UI и Shadcn UI, включая управление вариантами компонентов через Class Variance Authority (CVA).
  • Обеспечение доступности (WCAG) и оптимизация производительности, включая ленивую загрузку и оптимизацию изображений.

Как работает

  1. Структурировать файлы, экспортируя компонент, подкомпоненты, хелперы, статический контент и типы в указанном порядке.
  2. Применять функциональный подход и паттерн RORO (Receive an Object, Return an Object), используя function keyword для чистых функций и интерфейсы TypeScript вместо типов.
  3. Обрабатывать ошибки и граничные случаи на входах функций, используя ранние возвраты (early returns) и guard clauses для предотвращения глубокой вложенности.
  4. Использовать React Server Components для получения данных, применяя паттерн preload для предотвращения водопадов запросов.
  5. Валидировать формы с помощью Zod и оборачивать клиентские компоненты в Suspense с fallback-элементами.
  6. Обеспечивать доступность через семантическую разметку, ARIA-метки и клавиатурную навигацию, а также документировать код с помощью JSDoc.

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

Создай компонент формы входа на Next.js 14 с валидацией Zod, использованием Supabase Auth и стилизацией через Shadcn UI.
Напиши типизированный GraphQL-запрос для получения данных пользователя через Genql с учетом политик Row Level Security.
Реализуй серверный компонент для отображения списка товаров с оптимизацией изображений и ленивой загрузкой.

Что понадобится

  • Среда с TypeScript, Next.js 14, React, Supabase, GraphQL, Tailwind CSS, Radix UI, Shadcn UI, Zod, Genql, Class Variance Authority (CVA).

Описание составлено по SKILL.md навыка, сверено 05.10.2026.

Как подключить

1Скачать навык
# возьмите папку навыка «modern-web-development» из репозитория: # https://github.com/mindrally/skills
2Положить папку с SKILL.md к навыкам ассистента
# положите папку навыка туда, где ассистент ищет skills: cp -r modern-web-development/ ~/.claude/skills/modern-web-development/

Навык — папка с файлом SKILL.md (описание + инструкции) и опциональными скриптами. Ассистент (Claude, Claude Code и совместимые) подхватывает его по описанию и следует шагам.