المهارات frontend-dev-guidelines
🎨

frontend-dev-guidelines

آمن

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

متاح أيضًا من: Dimon94,sickn33,DojoCodingLabs,0Chan-smc,diet103,BrianDai22,BOM-98

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

يدعم: Claude Codex Code(CC)
⚠️ 67 ضعيف
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
المحتوى
22
المجتمع
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