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

🖥️

frontend-dev-guidelines

Name: frontend-dev-guidelines
Author: BOM-98

آمن ⚙️ الأوامر الخارجية⚡ يحتوي على سكربتات📁 الوصول إلى نظام الملفات🌐 الوصول إلى الشبكة

Next.js 및 React 프론트엔드 가이드라인 적용

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

이 스킬은 Next.js, React 19, shadcn/ui를 사용하여 현대적인 프론트엔드 애플리케이션을 구축하기 위한 포괄적인 가이드라인을 제공합니다. Server Components, 데이터 페칭, 폼, 스타일링, 성능 최적화를 포함한 필수 패턴을 다룹니다.

يدعم: Claude Codex Code(CC)

📊 69 كافٍ

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

رفع في Claude

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

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

اختبرها

استخدام "frontend-dev-guidelines". Next.js App Router에서 새 페이지를 만드는 방법은 무엇인가요?

النتيجة المتوقعة:

기본적으로 Server Component로 app/[route]/page.tsx 생성
컴포넌트에서 직접 데이터 페칭 (훅 불필요)
Suspense 기반 로딩 상태를 위한 loading.tsx 추가
에러 바운더리 처리를 위한 error.tsx 추가
SEO 목적으로 metadata 내보내기
모든 스타일링에 Tailwind CSS 사용

استخدام "frontend-dev-guidelines". Server와 Client Components를 언제 사용해야 하나요?

النتيجة المتوقعة:

더 나은 성능을 위해 기본적으로 Server Components 사용
다음의 경우에만 'use client' 지시문 추가:
- React 훅 (useState, useEffect, useContext)
- 이벤트 핸들러 (onClick, onChange)
- 브라우저 전용 API
클라이언트 번들을 줄이기 위해 무거운 계산은 서버에서 수행

استخدام "frontend-dev-guidelines". shadcn/ui로 컴포넌트 스타일을 지정하는 방법은 무엇인가요?

النتيجة المتوقعة:

@/components/ui/[component]에서 컴포넌트 가져오기
조건부 클래스에 cn() 유틸리티 사용
엘리먼트에 직접 Tailwind 클래스 적용
컴포넌트 props를 통해 variants 커스터마이징
접근성을 위해 Radix UI primitives 활용

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

آمن

v5 • 1/16/2026

This skill is pure documentation containing markdown files with frontend development guidelines. All 628 static findings are false positives - the scanner detected patterns in documentation (markdown backticks, TypeScript code examples, file path references) that were misidentified as security risks. The skill contains no executable code, no network calls, no file system operations, and no command execution.

الملفات التي تم فحصها

5,791

الأسطر التي تم تحليلها

النتائج

إجمالي عمليات التدقيق

عوامل الخطر

⚙️ الأوامر الخارجية (480)

⚡ يحتوي على سكربتات (19)

resources/complete-examples.md:301 resources/complete-examples.md:504 resources/complete-examples.md:505 resources/complete-examples.md:506 resources/complete-examples.md:613 resources/component-patterns.md:65 resources/component-patterns.md:70 resources/component-patterns.md:86 resources/component-patterns.md:134 resources/component-patterns.md:370 resources/component-patterns.md:491 resources/loading-and-error-states.md:38 resources/performance.md:377 resources/performance.md:383 resources/routing-guide.md:56 resources/routing-guide.md:99 resources/routing-guide.md:111 resources/routing-guide.md:323 resources/routing-guide.md:354

📁 الوصول إلى نظام الملفات (33)

🌐 الوصول إلى الشبكة (5)

resources/data-fetching.md:269 resources/data-fetching.md:453 resources/data-fetching.md:461 resources/performance.md:224 skill-report.json:6

تم تدقيقه بواسطة: claude عرض سجل التدقيق →

درجة الجودة

الهندسة المعمارية

100

قابلية الصيانة

المحتوى

المجتمع

100

الأمان

الامتثال للمواصفات

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

Next.js 애플리케이션 구축

App Router, Server Components 및 현대적인 React 패턴을 사용하여 Next.js 앱을 구조화하는 방법에 대한 가이드를 받으세요.

컴포넌트 패턴 학습

Client와 Server Components를 언제 사용해야 하는지, Suspense를 사용하여 지연 로딩을 구현하는 방법을 이해하세요.

Supabase 통합

인증 및 데이터 페칭을 위한 서버 측 및 클라이언트 측 Supabase 통합 패턴을 학습하세요.

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

컴포넌트 기본

Next.js App Router에서 shadcn/ui와 Tailwind CSS를 사용하여 새 Server Component를 만드는 방법을 보여주세요

데이터 페칭

Server Component에서 Supabase로부터 데이터를 가져오고 로딩 상태를 처리하는 방법은 무엇인가요?

폼 유효성 검사

shadcn/ui 컴포넌트를 사용하여 React Hook Form과 Zod 유효성 검사로 로그인 폼을 만들어주세요

성능

React.lazy와 Suspense를 사용하여 무거운 DataGrid 컴포넌트를 지연 로딩하는 방법은 무엇인가요?

أفضل الممارسات

Server Components로 시작하고 React 훅이나 이벤트 핸들러가 필요할 때만 'use client' 추가
일관되고 접근 가능한 UI를 위해 Tailwind CSS와 함께 shadcn/ui 컴포넌트 사용
각 라우트 세그먼트에 대해 loading.tsx 및 error.tsx 파일 구현

تجنب

모든 컴포넌트에 'use client' 추가하지 않기 - 서버 렌더링의 이점을 무효화합니다
Tailwind CSS를 사용할 수 있을 때 인라인 스타일 사용하지 않기
Client Components에서 직접 데이터베이스 쿼리 피하기 - 대신 Server Components 또는 Server Actions 사용