일관되지 않은 스타일링과 분산된 컴포넌트 사용은 유지 관리 문제를 야기합니다. 이 스킬은 응집력 있는 인터페이스를 위한 토큰과 패턴이 포함된 통합 디자인 시스템을 제공합니다.
Télécharger le ZIP du skill
Importer dans Claude
Allez dans Paramètres → Capacités → Skills → Importer un skill
Activez et commencez à utiliser
Tester
Utilisation de "core-components". Create a settings screen header with title and icon
Résultat attendu:
제목 텍스트에 $textPrimary 색상을 사용하고 $3 간격으로 HStack에 배치된 아이콘과 함께 $4 패딩 및 $backgroundPrimary 배경이 있는 Box로 래핑된 ScreenHeader 컴포넌트입니다.
Utilisation de "core-components". Style a disabled button
Résultat attendu:
variant가 solid로 설정되고 isDisabled prop이 true로 설정된 Button 컴포넌트로, 레이블 색상에 대해 $textTertiary를 자동으로 사용하는 음영 스타일을 적용합니다.
Audit de sécurité
SûrStatic analyzer flagged 57 patterns (49 external_commands, 8 blocker) that are all false positives. The backtick detections are Markdown code fence delimiters (```tsx) used for syntax highlighting in documentation, not shell execution. No cryptographic code exists in this file. This is a documentation-only skill teaching React Native component library usage with design tokens. No security risks detected.
Score de qualité
Ce que vous pouvez construire
새로운 기능 구축 중인 프론트엔드 개발자
개발자가 폼과 목록이 있는 새 설정 화면을 추가해야 합니다. 이 스킬을 사용하여 기존 디자인 시스템과 일치하는 간격 토큰, 색상 토큰 및 컴포넌트 패턴을 적용합니다.
UI 컴포넌트를 표준화하는 팀
팀에서 앱 전체의 일관되지 않은 스타일링을 발견합니다. 이 스킬을 사용하여 디자인 토큰으로 레이아웃, 타이포그래피 및 상호작용 요소에 대한 공유 패턴을 수립합니다.
표준 적용 중인 코드 리뷰어
코드 리뷰 중 개발자가 하드코딩된 값과 원시 플랫폼 컴포넌트를 식별합니다. 이 스킬을 참조하여 기여자들이 올바른 토큰 사용과 핵심 컴포넌트를 사용하도록 안내합니다.
Essayez ces prompts
적절한 디자인 토큰을 사용하여 제목과 콘텐츠가 있는 카드를 핵심 컴포넌트 라이브러리로 만드는 방법을 보여주세요.
VStack, Input 컴포넌트 및 적절한 간격 토큰을 사용하여 이메일과 비밀번호 입력이 있는 로그인 폼을 만드세요. 제출 버튼을 포함하세요.
사용자 아바타, 이름 및 자막과 함께 Chevron 아이콘이 있는 목록 항목 컴포넌트를 만드세요. HStack, 적절한 간격 토큰 및 텍스트 계층 구조를 위한 의미론적 색상 토큰을 사용하세요.
이 컴포넌트 코드를 검토하고 디자인 토큰을 사용해야 하는 하드코딩된 값을 식별하세요. 간격, 색상 및 타이포그래피에 대한 올바른 토큰 사용이 포함된 수정된 버전을 보여주세요.
Bonnes pratiques
- 하드코딩된 값(16, #333333) 대신 항상 디자인 토큰($4, $textPrimary)을 사용하세요
- 원시 react-native primitives 대신 components/core에서 가져오세요
- 수동 flexbox 구성 대신 HStack과 VStack을 레이아웃에 사용하세요
Éviter
- 핵심 컴포넌트의 Box와 Text 대신 react-native의 View와 Text를 사용하세요
- 간격, 색상 또는 타이포그래피에 대해 픽셀 값을 하드코딩하세요
- 토큰 기반 prop을 사용하는 대신 인라인 스타일 객체를 만드세요