Codex 네이티브
성공
👍 0 · 투표하기
frontend-ui-engineering
Addy Osmani가 만든 엔지니어링 품질의 프런트엔드 skill입니다. 접근성 있고 반응형인 UI, 로딩·빈 상태·오류 상태, 시맨틱 토큰, 그리고 피해야 할 “AI 스타일” 기본값 표를 다룹니다. 지침만 있고 스크립트는 없습니다.
- 경로
skills/frontend-ui-engineering· SKILL.md- 고정 커밋
aeac41d4d0- 라이선스
- MIT
각 프롬프트는 Codex 네이티브, Codex + skill, Claude Code 네이티브, Claude Code + skill의 고정 2×2로 표시됩니다. 스크린샷을 클릭하면 전체 페이지를 볼 수 있습니다. 설치 및 사용 ↓
강점
skill의 자체 문서가 내세우는 강점을 출처와 함께 정리했습니다. 이는 주장일 뿐 결과가 아니므로, 아래의 실제 페이지와 비교해 보시기 바랍니다.
- 프로덕션 수준의, 접근성 있고 반응형인 사용자용 UI를 만든다 출처
- AI가 생성한 것이 아니라 일류 기업의 디자인 감각 있는 엔지니어가 만든 것처럼 보이는 UI 출처
- 키보드 탐색과 포커스 관리를 포함한 WCAG 2.1 AA 접근성 출처
- 의미 있는 빈 상태, 오류 상태, 로딩 상태 출처
- “AI 스타일”(보라색 그라데이션, 모든 곳의 둥근 모서리, 뻔한 히어로, 무거운 그림자)을 피한다 출처
테스트 범위: SaaS 랜딩 페이지, 데이터 대시보드, 개인 블로그 및 포트폴리오, 폼과 피드백 컴포넌트 상태. 범위 밖의 프롬프트는 ‘대기 중’이 아니라 ‘범위 밖’으로 표시합니다.
2차 실행 전에 skill 원문을 바탕으로 정했습니다. form-states는 이 skill의 접근성과 상태 처리를 보여 주려고 추가했습니다.
SaaS 랜딩 페이지
landing-saas
데이터 대시보드
dashboard
개인 블로그 및 포트폴리오
blog-portfolio
폼과 피드백 컴포넌트 상태 쇼케이스
form-states
설치 및 사용
프로젝트 수준 설치: skill 폴더(SKILL.md가 들어 있는 폴더)를 고정 커밋 기준으로 프로젝트에 복사합니다. 갤러리 실행에서도 같은 방식으로 설치했습니다.
Claude Code
설치
폴더를 <project>/.claude/skills/frontend-ui-engineering/에 복사합니다.
git clone https://github.com/addyosmani/agent-skills.git /tmp/frontend-ui-engineering-src
git -C /tmp/frontend-ui-engineering-src checkout aeac41d4d005999432bb7312f7ff06383a91d59d
mkdir -p .claude/skills
cp -R /tmp/frontend-ui-engineering-src/skills/frontend-ui-engineering .claude/skills/frontend-ui-engineering사용
# 대화형
/frontend-ui-engineering <작업 내용>
# 또는 요청 끝에 다음 문장 추가
Use the frontend-ui-engineering skill.
# 헤드리스(갤러리 실행과 동일)
claude -p '<작업 내용> Use the frontend-ui-engineering skill.'모든 프로젝트에서 사용하려면 대신 ~/.claude/skills/frontend-ui-engineering/에 폴더를 두면 됩니다. 요청이 skill 설명과 일치하면 Claude Code가 skill을 스스로 로드할 수도 있습니다.
Codex
설치
폴더를 <project>/.agents/skills/frontend-ui-engineering/에 복사합니다.
git clone https://github.com/addyosmani/agent-skills.git /tmp/frontend-ui-engineering-src
git -C /tmp/frontend-ui-engineering-src checkout aeac41d4d005999432bb7312f7ff06383a91d59d
mkdir -p .agents/skills
cp -R /tmp/frontend-ui-engineering-src/skills/frontend-ui-engineering .agents/skills/frontend-ui-engineering사용
# 대화형: 이름으로 언급하거나 /skills에서 선택
$frontend-ui-engineering <작업 내용>
# 헤드리스(갤러리 실행과 동일)
codex exec -s workspace-write '<작업 내용> Use the $frontend-ui-engineering skill.'모든 프로젝트에서 사용하려면 대신 ~/.agents/skills/frontend-ui-engineering/에 폴더를 두면 됩니다. Codex도 설명을 보고 skill을 스스로 선택할 수 있습니다.
참고
- The "See Also" link (../../references/accessibility-checklist.md) points outside the skill folder and is not copied.
- Part of a 25-skill repo; install only this folder, not the plugin.
- Its main strengths (accessibility, loading/empty/error states) are not visible in screenshots of the three standard prompts; see the form-states showcase prompt and each cell's a11y scan.
메타데이터: skills/frontend-ui-engineering/meta.yaml · Copyright (c) 2025 Addy Osmani