frontend-dev-guidelines
최신 패턴을 활용한 프로덕션 React 앱 구축
也可從以下取得: 0Chan-smc,0Chan-smc,BrianDai22,diet103,Dimon94,DojoCodingLabs,BOM-98
프론트엔드 개발자들은 React 코드베이스에서 일관성 없는 패턴과 기술 부채로 고생합니다. 이 스킬은 Suspense 우선 데이터 페칭, 기능 기반 아키텍처, TypeScript 엄격성에 대한 견해 있는 표준을 제공합니다.
下載技能 ZIP
在 Claude 中上傳
前往 設定 → 功能 → 技能 → 上傳技能
開啟並開始使用
測試它
正在使用「frontend-dev-guidelines」。 Suspense 를 사용한 제품 목록 컴포넌트 생성
預期結果:
- ProductList 컴포넌트를 useSuspenseQuery 훅과 함께 생성
- 자동 로딩 상태를 위해 SuspenseLoader 경계로 감쌈
- Product 데이터 타입에 대한 TypeScript 인터페이스 정의
- v7 구문을 사용한 반응형 크기 조정과 MUI Grid 레이아웃
- 최적의 성능을 위한 cache-first 쿼리 구성
正在使用「frontend-dev-guidelines」。 인증 기능 코드를 어떻게 구성해야 하나요
預期結果:
- features/authentication 디렉토리 구조 생성
- typed responses 와 함께 api/authApi.ts 에 인증 API 호출 배치
- hooks/useAuth.ts 에 useAuth 훅 구현
- index.ts barrel exports 를 통해 공개 인터페이스 내보내기
- components/ 하위 디렉토리에 인증 컴포넌트 유지
安全審計
安全All 649 static analysis findings are false positives. The skill consists entirely of Markdown documentation files containing code examples for educational purposes. Patterns like external_commands, scripts, filesystem, and network references are illustrative code snippets teaching React TypeScript development, not executable code. No actual security risks detected.
品質評分
你能建構什麼
새 React 컴포넌트 개발
적절한 TypeScript 타입, 지연 로딩, MUI 스타일링을 갖춘 Suspense 우선 패턴에 따라 프로덕션 준비 완료 React 컴포넌트 생성
코드베이스 표준화
기능 기반 구성, 엄격한 TypeScript, 통합된 스타일링 접근 방식으로 팀 전반에 걸쳐 일관된 아키텍처 패턴 확립
레거시 코드 현대화
기존 컴포넌트를 useSuspenseQuery 채택, isLoading 조건부 제거, 적절한 지연 로딩 경계 구현을 위해 리팩토링
試試這些提示
사용자 프로필 데이터를 표시하는 React 컴포넌트를 생성하세요. useSuspenseQuery 를 사용하여 페칭하고, SuspenseLoader 로 감싸며, MUI sx prop 으로 스타일링하세요. 사용자 데이터에 대한 TypeScript 타입을 포함하세요.
분석, 사용자 관리, 설정 기능을 갖춘 대시보드 애플리케이션을 위한 기능 기반 폴더 구조를 설정하세요. 각 기능에 대한 api, components, hooks, helpers, types 하위 디렉토리를 index.ts exports 와 함께 표시하세요.
지연 로딩을 갖춘 대시보드 라우트에 대한 TanStack Router 설정을 구현하세요. 브레드크럼 메타데이터를 반환하고 초기 데이터 페칭을 위한 cache-first 쿼리 전략을 사용하는 로더 함수를 포함하세요.
isLoading 검사와 함께 useQuery 를 사용하는 이 레거시 컴포넌트를 useSuspenseQuery 대신 사용하도록 리팩토링하세요. 모든 조기 반환과 조건부 로딩 상태를 제거하세요. 설명과 함께 전후 코드를 표시하세요.
最佳實務
- isLoading 검사와 함께 useQuery 대신 useSuspenseQuery 를 기본 데이터 페칭 패턴으로 항상 사용
- 기술적 유형별보다 features 디렉토리의 기능 도메인별로 코드 구성
- 번들 크기를 최적화하기 위해 모든 라우트 컴포넌트나 데이터 그리드 및 차트와 같은 무거운 UI 요소 지연 로딩
避免
- Suspense 경계를 깨는 if isLoading return null 과 같은 로딩 상태에 대한 조기 반환 패턴
- features 대신 일반 components 디렉토리에 기능별 비즈니스 로직 배치
- 중앙 집중식 기능 API 서비스 계층 대신 컴포넌트 내부에서 직접 API 호출 수행