Навыки frontend-dev-guidelines
🎨

frontend-dev-guidelines

Безопасно

Применение лучших практик Frontend для Next.js 15

Также доступно от: diet103,Dimon94,BOM-98,BrianDai22,DojoCodingLabs,0Chan-smc

Код Frontend требует согласованных паттернов для функций Next.js 15, таких как Server Components и App Router. Этот навык предоставляет исчерпывающие рекомендации по React 19, TypeScript, компонентам Shadcn/ui и Tailwind CSS для обеспечения поддерживаемых и производительных приложений.

Поддерживает: Claude Codex Code(CC)
⚠️ 68 Плохо
1

Скачать ZIP навыка

2

Загрузить в Claude

Перейдите в Settings → Capabilities → Skills → Upload skill

3

Включите и начните использовать

Протестировать

Использование «frontend-dev-guidelines». Создайте компонент карточки продукта, который отображает изображение, название, цену и кнопку добавления в корзину с использованием компонентов Shadcn/ui.

Ожидаемый результат:

  • • Server Component с типизированным интерфейсом пропсов
  • • Card, CardHeader, CardTitle, CardContent из @/components/ui/card
  • • Оптимизация изображений с компонентом next/image
  • • Button с пропсом variant из Shadcn/ui
  • • Утилитарные классы Tailwind для адаптивной верстки
  • • TypeScript интерфейс для типа Product
  • • Утилита cn() для условной стилизации

Аудит безопасности

Безопасно
v2 • 1/10/2026

Pure documentation skill containing only markdown guidelines. No executable code, scripts, network calls, file system access, or environment variable usage. This is a prompt-based skill that provides development guidance to AI agents.

1
Просканировано файлов
653
Проанализировано строк
0
находки
2
Всего аудитов
Проблем безопасности не найдено
Проверено: claude Посмотреть историю аудитов →

Оценка качества

38
Архитектура
100
Сопровождаемость
83
Контент
31
Сообщество
100
Безопасность
70
Соответствие спецификации

Что вы можете построить

Создание страниц Next.js

Создавайте новые страницы с Server Components, маршрутизацией, метаданными и правильной файловой структурой

Стилизация с Shadcn/ui

Применяйте доступные UI компоненты с Tailwind CSS и утилитами условных классов

Миграция на Server Components

Преобразуйте клиентские паттерны в Server Components для улучшения производительности

Попробуйте эти промпты

Создать простой компонент 
Создайте новый Server Component для отображения профилей пользователей с использованием компонента Shadcn/ui Card с правильными TypeScript интерфейсами.
Создать страницу с получением данных 
Создайте страницу, которая получает посты из API эндпоинта с использованием паттерна Server Component с границами loading.tsx и error.tsx.
Реализовать форму с действиями 
Создайте компонент формы с Server Action для создания новых постов, включая валидацию zod и компоненты ввода Shadcn/ui.
Оптимизировать производительность 
Просмотрите и оптимизируйте следующий компонент страницы: найдите возможности использования Server Components, добавьте потоковую передачу Suspense и реализуйте правильные стратегии кэширования.

Лучшие практики

  • По умолчанию используйте Server Components для получения данных и рендеринга для уменьшения размера бандла
  • Используйте компоненты Shadcn/ui из @/components/ui с Tailwind CSS для согласованной стилизации
  • Применяйте строгий TypeScript с явными типами пропсов и без неявного any

Избегать

  • Избегайте необязательного добавления 'use client' - это увеличивает размер бандла и отключает преимущества Server Component
  • Не используйте useEffect для получения данных в Server Components - выполняйте fetch напрямую
  • Избегайте inline стилей - используйте утилитарные классы Tailwind CSS и хелпер cn() для условных классов

Часто задаваемые вопросы

Совместим ли этот навык со старыми версиями Next.js?
Этот навык ориентирован конкретно на Next.js 15. Некоторые паттерны, такие как Server Components и App Router, работают в Next.js 13+, но синтаксис может отличаться.
Каковы ограничения паттернов Server Component?
Server Components не могут использовать хуки, браузерные API или обработчики событий. Перенесите интерактивность в Client Components и оберните в Suspense.
Могу ли я использовать это с другими библиотеками UI компонентов?
Этот навык фокусируется на паттернах Shadcn/ui. Общие принципы применимы к другим библиотекам, но пути импорта и имена классов будут отличаться.
Безопасны ли мои данные при использовании Server Components?
Да. Server Components выполняются на вашей инфраструктуре. Данные никогда не покидают ваш сервер - они получаются и рендерятся перед отправкой HTML клиенту.
Почему мой компонент рендерится на клиенте вместо сервера?
Проверьте директиву 'use client' в начале. Если она отсутствует, убедитесь, что не используются хуки, браузерные API или обработчики событий. Удалите любые клиентские паттерны.
Как это сравнивается с другими Frontend навыками?
Этот навык предоставляет детальные паттерны Next.js 15. Комбинируйте с общими навыками React для жизненного цикла компонентов или навыками CSS для кастомной стилизации за пределами Tailwind.

Сведения для разработчиков

Автор

0Chan-smc

Лицензия

MIT

Репозиторий

https://github.com/0Chan-smc/claude-code-workflow-lab/tree/main/.claude/skills/frontend-dev-guidelines

Ссылка

main

Структура файлов

📄 SKILL.md