frontend-mobile-development-component-scaffold
TypeScript 와 테스트를 포함한 React 컴포넌트 스캐폴딩
이 스킬은 전체 TypeScript 타입 지정, 접근성 기능, 테스트 설정 및 다양한 스타일링 옵션을 갖춘 프로덕션 준비 완료된 React 및 React Native 컴포넌트를 생성합니다. 컴포넌트 라이브러리 전반에 일관된 코드 품질을 보장합니다.
스킬 ZIP 다운로드
Claude에서 업로드
설정 → 기능 → 스킬 → 스킬 업로드로 이동
토글을 켜고 사용 시작
테스트해 보기
"frontend-mobile-development-component-scaffold" 사용 중입니다. variant, size, disabled props 를 포함한 Button 컴포넌트 생성
예상 결과:
TypeScript 인터페이스, CSS Modules 스타일, 접근성 속성 및 테스트 파일을 포함한 완전한 React 컴포넌트
"frontend-mobile-development-component-scaffold" 사용 중입니다. 이미지, 제목, 설명을 포함한 React Native 용 Card 컴포넌트 생성
예상 결과:
StyleSheet, TouchableOpacity, accessibilityLabel 및 적절한 TypeScript 타입을 포함한 React Native 컴포넌트
보안 감사
안전All static security findings are false positives. The detected patterns (external_commands, weak_crypto, obfuscation) are actually JavaScript template literals and standard array methods used in example code. The skill is a legitimate React component scaffolding tool with no security risks.
품질 점수
만들 수 있는 것
신속한 컴포넌트 프로토타이핑
개발 워크플로우를 가속화하기 위해 테스트와 문서화를 포함한 완전한 컴포넌트 파일을 빠르게 생성
팀 코드 표준화
모든 팀 멤버가 일관된 패턴과 모범 사례에 따라 컴포넌트를 생성하도록 보장
접근성 우선 개발
WCAG 준수 요구사항을 충족하기 위해 내장된 접근성 기능을 갖춘 컴포넌트 생성
이 프롬프트를 사용해 보세요
Create a functional React component called [ComponentName] with props for [prop1], [prop2]. Use TypeScript and CSS Modules for styling.
Generate a complete React component with TypeScript, including: component file, prop types, CSS Modules styles, Jest tests with Testing Library, and Storybook story. Make it accessible.
Create a React Native component for [ComponentName] that works on iOS and Android. Include TypeScript interfaces, StyleSheet styles, and accessibility props.
Generate a set of related components for a [ComponentName] feature including: main component, sub-components, types, styles, tests, and index file for clean imports.
모범 사례
- 애플리케이션 전반의 타입 안전성을 보장하기 위해 컴포넌트 props 에 항상 TypeScript 인터페이스 사용
- 나중에 추가하는 대신 처음부터 접근성 속성 포함
- 높은 테스트 커버리지를 유지하기 위해 컴포넌트와 함께 테스트 생성
피하기
- prop 타입 없는 컴포넌트 생성 금지 - 런타임 오류로 이어짐
- 구현 후 추가하기 어려우므로 접근성 기능을 생략하지 않음
- 동일한 컴포넌트에서 스타일링 접근법 혼합 금지