메뉴
디자인 품질이 높은 독특하고 프로덕션 급의 프론트엔드 인터페이스를 제작합니다. 사용자가 웹 컴포넌트, 페이지 또는 애플리케이션 구축을 요청하고 시각적 방향이 코드 품질만큼 중요할 때 사용하세요.
기본적으로 소스를 먼저 확인하는 Prompt가 선택됩니다. 직접 명령으로 전환하거나 로컬 사본을 다운로드할 수도 있습니다.
설치 여부를 결정하기 전에 SKILL.md와 SkillsMP에 표시된 보조 파일을 읽어 보세요.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
직접 명령은 검토 Prompt를 거치지 않습니다. 실행하기 전에 소스를 확인하세요.
npx skills add https://github.com/SAM42-Lab/everything-claude-code-kr --skill frontend-design명령은 한 줄로 유지됩니다. 복사하기 전에 가로로 스크롤해 전체 내용을 확인하세요.
로컬 사본을 원하시나요? SkillsMP에서 현재 제공할 수 있는 파일을 다운로드하세요.
캡처, 진단, 억제된 복구 및 인트로스펙션 보고서를 사용하여 AI 에이전트 실패에 대한 구조화된 셀프 디버깅 워크플로우를 수행합니다.
기술, 명령어, 규칙, 훅 및 기타 요소를 DAILY 대 LIBRARY 버킷으로 분류하여 특정 저장소에 대한 증거 기반의 ECC 설치 계획을 수립합니다. 전체 번들을 로드하는 대신 프로젝트에 실제로 필요한 것만 ECC를 트리밍해야 할 때 사용하세요.
리소스 명명, 상태 코드, 페이지네이션, 필터링, 에러 응답, 버전 관리 및 프로덕션 API를 위한 속도 제한을 포함한 REST API 설계 패턴.
SKILL.md 표시 중
SOC 직업 분류 기준
| name | frontend-design |
| description | 디자인 품질이 높은 독특하고 프로덕션 급의 프론트엔드 인터페이스를 제작합니다. 사용자가 웹 컴포넌트, 페이지 또는 애플리케이션 구축을 요청하고 시각적 방향이 코드 품질만큼 중요할 때 사용하세요. |
| origin | ECC |
단순히 "작동하게 만드는 것"이 아니라 "디자인된 것처럼 보이게 만드는 것"이 과제일 때 이 스킬을 사용하세요.
이 스킬은 일반적인 AI 느낌의 UI가 아닌 명확한 관점이 필요한 제품 페이지, 대시보드, 앱 쉘, 컴포넌트 또는 시각적 시스템을 위한 것입니다.
방향을 정하고 그것을 고수하세요.
안전하고 평범한 UI는 대담한 선택이 가미된 강력하고 일관된 미학보다 대개 좋지 않습니다.
코딩하기 전에 다음을 결정하세요:
가능한 방향:
방향을 무분별하게 섞지 마세요. 하나를 선택하고 깔끔하게 실행하세요.
다음을 정의하세요:
인터페이스가 확장되어도 일관성을 유지할 수 있도록 CSS 변수나 프로젝트의 토큰 시스템을 사용하세요.
다음을 선호하세요:
명확하게 적합한 경우가 아니면 기본 대칭 카드 그리드를 피하세요.
애니메이션을 사용하여 다음을 수행하세요:
일반적인 마이크로 인터랙션을 모든 곳에 흩뿌리지 마세요. 잘 연출된 하나의 로드 시퀀스가 스무 개의 무작위 호버 효과보다 대개 더 강력합니다.
분위기를 활용하세요:
단순히 비어 있는 평면 배경은 제품 중심 페이지에서 최선의 답인 경우가 드뭅니다.
다음을 기본으로 하지 마세요:
전달하기 전 확인 사항: