frontend-dev-guidelines
Создание современных приложений Next.js
Auch verfügbar von: Dimon94,sickn33,0Chan-smc,diet103,BrianDai22,BOM-98,0Chan-smc
Написание современного фронтенд-кода с Next.js, React 19 и shadcn/ui требует понимания Server Components, паттернов получения данных и оптимизации производительности. Этот навык предоставляет исчерпывающие руководства и проверенные паттерны для создания типобезопасных, производительных веб-приложений.
Die Skill-ZIP herunterladen
In Claude hochladen
Gehe zu Einstellungen → Fähigkeiten → Skills → Skill hochladen
Einschalten und loslegen
Teste es
Verwendung von "frontend-dev-guidelines". Создай новый компонент функции, который отображает список постов с функциональностью поиска
Erwartetes Ergebnis:
- - Используй паттерн React.FC с типизированным интерфейсом props
- - Получай данные с useSuspenseQuery в дочернем компоненте
- - Оберни в SuspenseLoader на родительском уровне
- - Добавь состояние поиска с useDebounce для производительности
- - Реализуй стратегию приоритета кеша для повторного использования данных списка
- - Включи правильные состояния загрузки и ошибок
- - Используй компоненты shadcn/ui (Card, Input, Button)
- - Примени Tailwind CSS для адаптивной стилизации
Verwendung von "frontend-dev-guidelines". Как структурировать маршрут Next.js с динамическими параметрами?
Erwartetes Ergebnis:
- - Создай app/posts/[id]/page.tsx для динамических маршрутов
- - Используй generateMetadata для динамических SEO-заголовков
- - Передай prop params для доступа к параметрам маршрута
- - Получай данные напрямую в Server Component
- - Добавь loading.tsx для состояния загрузки
- - Добавь error.tsx для обработки границ ошибок
- - Используй notFound() для сценариев с недействительными данными
Sicherheitsaudit
SicherPure documentation skill containing markdown files with TypeScript code examples. All 631 static findings are false positives triggered by markdown code fences, documentation examples, and file path patterns. No executable code, no network calls, no file system access beyond its own resources, no environment variable access, no command execution. This is a read-only knowledge base for frontend development guidance.
Risikofaktoren
⚙️ Externe Befehle (3)
Qualitätsbewertung
Was du bauen kannst
Изучение современных паттернов Next.js
Получение руководства по Server Components, Server Actions и архитектуре App Router для проектов Next.js
Создание типобезопасных приложений
Применение лучших практик TypeScript со строгой типизацией, интерфейсами props и утилитарными типами во всей кодовой базе
Оптимизация производительности компонентов
Реализация ленивой загрузки, Suspense boundaries и паттернов мемоизации для более быстрых и отзывчивых UI
Probiere diese Prompts
Создай новую страницу в app/dashboard/page.tsx, которая получает данные пользователя с использованием паттерна Server Component. Включи loading.tsx и error.tsx с правильными Suspense boundaries.
Создай компонент формы входа с использованием React Hook Form с валидацией Zod. Покажи, как обрабатывать состояние формы, сообщения об ошибках и отправку с правильными типами TypeScript.
Покажи, как реализовать получение данных с приоритетом кеша с помощью TanStack Query. Включи организацию ключей запросов, инвалидацию кеша и паттерны оптимистичных обновлений.
Добавь компонент Card из shadcn/ui с кастомной стилизацией с использованием Tailwind CSS. Покажи правильные импорты, использование props и паттерны адаптивного дизайна.
Bewährte Verfahren
- Используй Server Components по умолчанию; добавляй use client только когда нужны хуки или события
- Оборачивай все асинхронные компоненты в SuspenseLoader для предотвращения смещения макета и обеспечения плавного UX
- Определяй явные интерфейсы TypeScript для всех props; полностью избегай типа any
Vermeiden
- Использование use client на каждом компоненте; это сводит на нет преимущества SSR в Next.js
- Паттерны раннего возврата для состояний загрузки; вместо этого используй Suspense boundaries
- Пропуск типов TypeScript; полагайся только на вывод типов