Fähigkeiten ui-skills
🎨

ui-skills

Sicher

디자인 제약조건으로 일관된 사용자 인터페이스 구축

AI 에이전트는 종종 다른 세션에서 일관되지 않은 UI 코드를 생성합니다. 이 스킬은 확고한 디자인 제약조건과 패턴을 제공하여 매번 일관되고 접근 가능한 인터페이스를 생성하도록 보장합니다.

Unterstützt: Claude Codex Code(CC)
📊 71 Angemessen
1

Die Skill-ZIP herunterladen

2

In Claude hochladen

Gehe zu Einstellungen → Fähigkeiten → Skills → Skill hochladen

3

Einschalten und loslegen

Teste es

Verwendung von "ui-skills". ui-skills 패턴을 사용하여 카드 컴포넌트 생성

Erwartetes Ergebnis:

일관된 패딩, 테두리 반경, 그림자 토큰이 포함되고 헤더, 본문, 푸터 슬롯을 지원하는 재사용 가능한 카드 컴포넌트입니다. 호�� 상태와 접근성 속성이 포함됩니다.

Verwendung von "ui-skills". ui-skills 제약조건에 따라 모달 대화상자 생성

Erwartetes Ergebnis:

포커스 트랩, 이스케이프 키 처리, 백드롭 클릭 감지, 스크린 리더를 위한 적절한 ARIA 역할이 포함된 모달 컴포넌트입니다.

Sicherheitsaudit

Sicher
v1 • 2/25/2026

This skill contains documentation-only content (SKILL.md) with no executable code. Static analysis flagged URLs and patterns that are false positives - the URLs are GitHub repository references in documentation, not network requests. No security risks detected.

1
Gescannte Dateien
23
Analysierte Zeilen
0
befunde
1
Gesamtzahl Audits
Keine Sicherheitsprobleme gefunden
Auditiert von: claude

Qualitätsbewertung

38
Architektur
100
Wartbarkeit
87
Inhalt
32
Community
100
Sicherheit
91
Spezifikationskonformität

Was du bauen kannst

디자인 시스템을 구축하는 프론트엔드 개발자

확립된 디자인 원칙과 접근성 표준을 따르는 일관된 컴포넌트 패턴을 생성하려면 이 스킬을 사용하세요.

UI 컴포넌트를 생성하는 AI 에이전트

AI 코딩 도우미가 팀의 디자인 제약조건과 패턴을 준수하는 UI 코드를 생성하도록 하세요.

UI 개발을 표준화하는 스타트업 팀

전용 디자인 리소스가 없는 소규모 팀을 위해 UI 패턴의 공통 어휘를 확립하세요.

Probiere diese Prompts

기본 버튼 컴포넌트 생성 
ui-skills 패턴을 사용하여 기본, 보조, 비활성화된 상태의 버튼 컴포넌트를 생성하세요. 접근성 속성과 포커스 상태를 포함하세요.
유효성 검사가 포함된 양식 입력 생성 
ui-skills 제약조건을 적용하여 레이블, 플레이스홀더, 오류 상태, 유효성 검사 메시지가 포함된 텍스트 입력 컴포넌트를 생성하세요. WCAG 가이드라인을 따르세요.
반응형 탐색 컴포넌트 구축 
ui-skills 패턴을 사용하여 데스크톱과 모바일 모두에서 작동하는 탐색 컴포넌트를 생성하세요. 키보드 탐색 및 스크린 리더 지원을 포함하세요.
정렬 기능이 포함된 데이터 테이블 디자인 
ui-skills 제약조건을 적용하여 정렬 가능한 열, 행 선택, 페이지네이션이 포함된 데이터 테이블 컴포넌트를 생성하세요. 접근성 준수를 보장하세요.

Bewährte Verfahren

  • 컴포넌트를 생성하기 전에 항상 디자인 토큰(간격, 색상, 타이포그래피)을 정의하세요
  • 개발 중에 키보드 탐색과 스크린 리더로 컴포넌트를 테스트하세요
  • 팀 일관성을 위해 컴포넌트 속성, 상태, 사용 예제를 문서화하세요

Vermeiden

  • 디자인 시스템 토큰을 사용하는 대신 색상 값 하드코딩
  • 대화형 요소에서 포커스 상태와 키보드 탐색 무시
  • 더 작은 단위로 분리해야 하는 지나치게 복잡한 컴포넌트 생성

Häufig gestellte Fragen

이 스킬은 어떤 프레임워크를 지원하나요?
이 스킬은 React 기반 컴포넌트 패턴에 집중하지만 디자인 원칙은 모든 프론트엔드 프레임워크에 적용할 수 있습니다.
이 스킬은 실제 CSS 코드를 생성하나요?
아니요, 컴포넌트 구조와 패턴만 제공합니다. 스타일은 기존 ��자인 시스템이나 CSS 프레임워크를 사용하여 적용해야 합니다.
기존 디자인 시스템과 어떻게 통합하나요?
컴포넌트를 생성하기 전에 디자인 토큰(간격, 색상, 타이포그래피)을 이 스킬의 패턴에 매핑하세요.
접근성 요구사항을 사용자 정의할 수 있나요?
네, 이 스킬은 WCAG를 기준으로 사용하지만 프롬프트에 추가 요구사항을 지정할 수 있습니다.
이 스킬은 모바일 우선 개발에 적합한가요?
네, 패턴은 적절한 제약조건을 통해 반응형 디자인과 모바일 우선 접근 방식을 지원합니다.
디자인 패턴은 얼마나 자주 업데이트되나요?
패턴은 커뮤니티 피드백과 UI 개발의 새로운 모범 사례를 기반으로 진화합니다.

Entwicklerdetails

Autor

sickn33

Lizenz

MIT

Repository

https://github.com/sickn33/antigravity-awesome-skills/tree/main/web-app/public/skills/ui-skills

Ref

main

Dateistruktur

📄 SKILL.md