frontend-dev-guidelines
Appliquer les meilleures pratiques frontend Next.js 15
متاح أيضًا من: BrianDai22,BOM-98,DojoCodingLabs,sickn33,Dimon94,diet103,0Chan-smc
Le code frontend requiert des patterns cohérents pour les fonctionnalités Next.js 15 comme les Server Components et l’App Router. Cette compétence fournit des directives complètes pour React 19, TypeScript, les composants Shadcn/ui et Tailwind CSS afin d’assurer des applications maintenables et performantes.
تنزيل ZIP المهارة
رفع في Claude
اذهب إلى Settings → Capabilities → Skills → Upload skill
فعّل وابدأ الاستخدام
اختبرها
استخدام "frontend-dev-guidelines". Create a product card component that displays an image, title, price, and add-to-cart button using Shadcn/ui components.
النتيجة المتوقعة:
- Server Component with typed props interface
- Card, CardHeader, CardTitle, CardContent from @/components/ui/card
- Image optimization with next/image component
- Button with variant prop from Shadcn/ui
- Tailwind utility classes for responsive layout
- TypeScript interface for Product type
- cn() utility for conditional styling
استخدام "frontend-dev-guidelines". Create a page for listing blog posts with data fetching, loading state, and error handling.
النتيجة المتوقعة:
- Page.tsx with async data fetching in Server Component
- loading.tsx with Suspense fallback and spinner
- error.tsx with error boundary and reset button
- Proper directory structure under app/posts/
- Metadata export for SEO
- PostList component import from features
التدقيق الأمني
آمنPure documentation skill containing only markdown guidelines. No executable code, scripts, network calls, file system access, or environment variable usage. All static findings are false positives from the analyzer misinterpreting markdown code formatting and JSON metadata fields as security issues.
عوامل الخطر
🌐 الوصول إلى الشبكة (3)
📁 الوصول إلى نظام الملفات (1)
⚙️ الأوامر الخارجية (95)
درجة الجودة
ماذا يمكنك بناءه
Construire des pages Next.js
Créer de nouvelles pages avec Server Components, routing, metadata et une structure de fichiers correcte
Styliser avec Shadcn/ui
Appliquer des composants UI accessibles avec Tailwind CSS et des utilitaires de classes conditionnelles
Migrer vers les Server Components
Convertir des patterns côté client en Server Components pour de meilleures performances
جرّب هذه الموجهات
Create a new Server Component for displaying user profiles using Shadcn/ui Card component with proper TypeScript interfaces.
Create a page that fetches posts from an API endpoint using Server Component pattern with loading.tsx and error.tsx boundaries.
Create a form component with Server Action for creating new posts, including zod validation and Shadcn/ui input components.
Review and optimize the following page component: identify opportunities to use Server Components, add Suspense streaming, and implement proper caching strategies.
أفضل الممارسات
- Utiliser par défaut les Server Components pour la récupération de données et le rendu afin de réduire la taille du bundle
- Utiliser les composants Shadcn/ui depuis @/components/ui avec Tailwind CSS pour un style cohérent
- Appliquer TypeScript en mode strict avec des types de props explicites et aucun any implicite
تجنب
- Éviter d’ajouter 'use client' inutilement - cela augmente la taille du bundle et désactive les avantages des Server Components
- Ne pas utiliser useEffect pour la récupération de données dans les Server Components - récupérer directement à la place
- Éviter les styles inline - utiliser les classes utilitaires Tailwind CSS et le helper cn() pour les classes conditionnelles