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

frontend-dev-guidelines

آمن

Appliquer les meilleures pratiques frontend de Next.js 15

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

Le code frontend requiert des patterns cohérents pour les fonctionnalités Next.js 15 telles que les Server Components et l’App Router. Cette compétence fournit des lignes directrices complètes pour React 19, TypeScript, les composants Shadcn/ui et Tailwind CSS afin d’assurer des applications maintenables et performantes.

يدعم: Claude Codex Code(CC)
⚠️ 67 ضعيف
1

تنزيل ZIP المهارة

2

رفع في Claude

اذهب إلى Settings → Capabilities → Skills → Upload skill

3

فعّل وابدأ الاستخدام

اختبرها

استخدام "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

التدقيق الأمني

آمن
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
الامتثال للمواصفات

ماذا يمكنك بناءه

Construire des pages Next.js

Créer de nouvelles pages avec Server Components, routing, métadonnées et une structure de fichiers appropriée

Styliser avec Shadcn/ui

Appliquer des composants UI accessibles avec Tailwind CSS et des utilitaires de classes conditionnelles

Migrer vers les Server Components

Convertir les patterns côté client en Server Components pour de meilleures performances

جرّب هذه الموجهات

Créer un composant simple 
Create a new Server Component for displaying user profiles using Shadcn/ui Card component with proper TypeScript interfaces.
Construire une page avec data fetching 
Create a page that fetches posts from an API endpoint using Server Component pattern with loading.tsx and error.tsx boundaries.
Implémenter un formulaire avec actions 
Create a form component with Server Action for creating new posts, including zod validation and Shadcn/ui input components.
Optimiser les performances 
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 le data fetching 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 un TypeScript strict avec des types de props explicites et sans 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 le data fetching dans les Server Components - fetch directement à la place
  • Éviter les styles inline - utiliser les classes utilitaires Tailwind CSS et l’aide cn() pour les classes conditionnelles

الأسئلة المتكررة

Cette compétence est-elle compatible avec d’anciennes versions de Next.js ?
Cette compétence cible spécifiquement Next.js 15. Certains patterns comme les Server Components et l’App Router fonctionnent dans Next.js 13+, mais la syntaxe peut différer.
Quelles sont les limites des patterns Server Component ?
Les Server Components ne peuvent pas utiliser de hooks, d’API navigateur ou de gestionnaires d’événements. Déplace l’interactivité dans des Client Components et enveloppe avec Suspense.
Puis-je l’utiliser avec d’autres bibliothèques de composants UI ?
Cette compétence se concentre sur les patterns Shadcn/ui. Les principes généraux s’appliquent à d’autres bibliothèques, mais les chemins d’import et les noms de classes diffèreront.
Mes données sont-elles en sécurité lors de l’utilisation des Server Components ?
Oui. Les Server Components s’exécutent sur votre infrastructure. Les données ne quittent jamais votre serveur - elles sont récupérées et rendues avant l’envoi du HTML au client.
Pourquoi mon composant est-il rendu côté client au lieu du serveur ?
Vérifie la directive 'use client' en haut. Si elle manque, assure-toi qu’aucun hook, API navigateur ou gestionnaire d’événement n’est utilisé. Retire tout pattern côté client.
Comment cela se compare-t-il à d’autres compétences frontend ?
Cette compétence fournit des patterns détaillés pour Next.js 15. Combine-la avec des compétences React générales pour le cycle de vie des composants ou des compétences CSS pour un style personnalisé au-delà de Tailwind.

تفاصيل المطور

المؤلف

0Chan-smc

الترخيص

MIT

المستودع

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

مرجع

main

بنية الملفات

📄 SKILL.md