angular-ui-patterns
검증된 패턴으로 강력한 Angular UI 구축
안정적인 Angular 인터페이스를 구축하려면 로딩 상태, 오류, 빈 상태를 일관되게 처리해야 합니다. 이 스킬은 사용자가 애플리케이션에서 항상 무슨 일이正在进行 중인지 이해할 수 있도록 검증된 패턴을 제공합니다.
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 "angular-ui-patterns". 사용자 게시물을 가져와서 표시하는 컴포넌트
Résultat attendu:
- 초기 로드 시 스keleton 로더 표시 (아직 데이터가 없음)
- 데이터가 비어 도착하면 '게시물 작성' 버튼과 함께 빈 상태 표시
- API가 오류를 반환하면 캐시된 데이터를 계속 표시하면서 재시도 옵션과 함께 오류 배너 표시
- 로드 성공 시 적절한 접근성 속성과 함께 전체 게시물 목록 렌더링
Utilisation de "angular-ui-patterns". 설정 폼의 저장 버튼
Résultat attendu:
- 버튼은 폼이 유효할 때만 활성화됨
- 클릭하면 버튼이 비활성화되고 '저장 중...' 텍스트와 함께 스피너 표시
- 성공 시 녹색 체크마크와 '저장됨!'을 표시한 후 2초 후 원래대로 복원
- 오류 시 빨간색 X와 오류 메시지를 표시하고 재시도를 위해 버튼을 다시 활성화
Audit de sécurité
SûrDocumentation-only skill containing Angular UI pattern guidance. All 63 static analysis findings are false positives: URLs are documentation references (not network calls), backticks are markdown code fencing (not shell execution), and crypto detections are text pattern misidentifications. No executable code, network requests, or command execution present.
Score de qualité
Ce que vous pouvez construire
데이터 기반 대시보드를 구축하는 프론트엔드 개발자
다양한 지연 시간을 가진 여러 API에서 데이터를 가져오는 대시보드 위젯 전반에 걸쳐 일관된 로딩, 오류, 빈 상태를 구현합니다.
UI 표준을 수립하는 팀 리드
팀 전반에 걸쳐 일관된 사용자 경험을 보장하기 위해 상태 관리, 오류 처리, 사용자 피드백에 대한 조직 전체 패턴을 정의합니다.
Angular 컴포넌트를 생성하는 AI 어시스턴트
Claude 또는 Codex를 유도하여 상태 처리에 검증된 패턴을 따르고 자동 오류나 누락된 로딩 상태와 같은 일반적인 함정을 피하는 Angular 컴포넌트를 생성합니다.
Essayez ces prompts
항목 목록을 표시하는 Angular 컴포넌트를 만드세요. 데이터 없이 로딩 중일 때 스keleton 로더를 표시하고, 목록이 비어있을 때 빈 상태를 표시하고, 로딩이 실패했을 때 재시도가 있는 오류 상태를 표시하고, 데이터를 사용할 수 있을 때 실제 데이터를 표시하세요. Angular 시그널과 최신 제어 흐름을 사용하세요.
반응형 폼 검증이 있는 Angular 폼 컴포넌트를 만드세요. 잘못된 필드에 대해 인라인 오류 메시지를 표시하고, 폼 제출 중 제출 버튼을 비활성화하고, 버튼에 로딩 인디케이터를 표시하고, 비동기 작업이 완료된 후 성공 또는 오류 토스트 알림을 표시하세요.
중요한 콘텐츠를 즉시 로드하고 @defer를 사용하여 댓글, 관련 항목 또는 분석과 같은 중요하지 않은 섹션을 지연하는 Angular 페이지를 구현하세요. 적절한 최소 로딩 시간과 함께 각 지연된 블록에 플레이스홀더, 로딩, 오류 상태를 포함하세요.
확인을 요청하는 모달을 표시하고 확인되면 낙관적 UI 업데이트를 적용하고, 서버 요청이 실패하면 변경 사항을 롤백하고, 전체 과정에서 사용자에게 적절한 피드백을 표시하는 삭제 확인 다이얼로그 패턴을 만드세요.
Bonnes pratiques
- 항상 사용자에게 오류를 표시하세요 - 피드백 없이 예외를 조용히 Catch하지 마세요
- 기존 데이터가 있을 때만 로딩 인디케이터를 표시하여 컨텐츠 플래시를 방지하세요
- 중복 제출을 방지하기 위해 비동기 작업 중 작업 버튼을 비활성화하세요
Éviter
- 캐시된 데이터가 있을 때 스피너 표시 - 다시 가져올 때 불필요한 시각적 플래시 발생
- catch 블록에서 오류를 삼키지 않고 사용자에게 실패를 알리지 않음
- 처리 중 비활성화하지 않고 제출 버튼의 다중 빠른 클릭 허용