AIKraft/AI/Войти
AIKraft/Skills/nextjs react typescript

nextjs react typescript

Expert in TypeScript, Node.js, Next.js App Router, React, Shadcn UI, Radix UI and Tailwind

mindrally official Дизайн

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

Эксперт по TypeScript, Node.js, Next.js App Router, React, Shadcn UI, Radix UI и Tailwind, специализирующийся на написании лаконичного и модульного кода. Решает задачи по созданию высокопроизводительных веб-приложений с использованием серверных компонентов и оптимизацией Web Vitals.

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

  • Разработка компонентов интерфейса с использованием Shadcn UI, Radix UI и Tailwind CSS.
  • Оптимизация производительности Next.js за счет минимизации использования 'use client' и 'useEffect'.
  • Управление состоянием URL через параметр поиска с использованием библиотеки 'nuqs'.
  • Создание адаптивных интерфейсов с подходом mobile-first.
  • Рефакторинг кода для соблюдения соглашений о наименовании и структуре файлов.

Как работает

  1. Применять функциональный и декларативный стиль программирования, избегая классов.
  2. Использовать TypeScript интерфейсы вместо типов и мапы вместо перечислений (enums).
  3. Организовывать файлы, экспортируя основной компонент, а вспомогательные функции и типы размещая отдельно.
  4. Предпочитать React Server Components, сводя к минимуму использование 'use client', 'useEffect' и setState.
  5. Оборачивать клиентские компоненты в Suspense с указанием fallback.
  6. Оптимизировать изображения, используя формат WebP, указывая размеры и реализуя ленивую загрузку.

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

Создай компонент авторизации на Next.js App Router с использованием Shadcn UI и Tailwind.
Оптимизируй загрузку страницы, заменив клиентские компоненты на серверные и добавив Suspense.
Реализуй управление состоянием URL для фильтрации списка товаров с помощью nuqs.

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

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

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

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