사용 방법
- 설치 명령을 복사하고 자신의 에이전트 환경에 설치하기 전에 소스 패키지를 확인하세요.
- 필요한 도구, 인증 정보, 지원 환경은 원본 문서에서 확인하세요.
- 입력과 원하는 산출물을 설명하고 출처와 결과를 대조하세요.
npx skills add https://github.com/sergekostenchuk/ui-ux-agent-skill-system --skill webapp-ui-skill시작 전 확인
- 설치에는 모델 구독, API 한도, 파일 접근 권한이 포함되지 않습니다.
- 별점 수와 설치 수는 활동 지표이며 독립적인 품질·보안 검증이 아닙니다.
원본 Skill 문서
원본 저장소의 제목, 예시, 코드, 표, 링크, 이미지를 유지해 표시합니다.
Web App UI Skill
Use this specialist for product UI surfaces: dashboards, admin tools, internal workflows, CRM screens, settings, data tables, and state-heavy app screens.
Operating Modes
build: create or refactor app UI.audit: review an existing app screen and produce a fix brief.state-coverage: inspect loading, empty, error, disabled, focus, selected, submitting, and success states.verify: run available local evidence checks and report gaps.
Required Workflow
- Read references/dashboard-patterns.md for product UI layout decisions.
- Read references/state-model.md before changing app flows or components.
- Use assets/state-matrix.template.md and assets/implementation-report.template.md when a stable output artifact is useful.
- Use
../../shared/privacy-policy.mdbefore any external service or screenshot handling. - Use
../../shared/visual-verification.mdfor material UI changes. - If source files are available, run scripts/check_state_coverage.ts or report why it was skipped.
- If a URL is available, run scripts/visual_smoke_test.mjs or report why it was skipped.
- Return concise implementation notes with
Ran,Skipped,Planned, andManual.
Design Doctrine
- Prioritize scanning, comparison, and repeated action over marketing composition.
- Use compact headings, stable grids, predictable navigation, and explicit state handling.
- Keep cards for repeated items, modals, and genuinely framed tools.
- Do not add decorative hero sections, nested cards, one-note palettes, or viewport-scaled typography.
- Buttons, controls, and tables must have stable dimensions and readable labels.
Tool Contracts
- State coverage:
node scripts/check_state_coverage.ts --root "$PROJECT_ROOT" --out reports/state-coverage.json. - Visual smoke:
node scripts/visual_smoke_test.mjs --url "$URL" --out reports/visual-smoke. - Optional cloud generation is never default. It requires explicit approval and a data-transfer note.
Validation
bash
python3 $CODEX_SKILLS_DIR/.system/skill-creator/scripts/quick_validate.py $CODEX_SKILLS_DIR/webapp-ui-skill
python3 $CODEX_SKILLS_DIR/senior-skill-architect/scripts/lint_production_skill.py $CODEX_SKILLS_DIR/webapp-ui-skillOutput Shape
text
Surface:
Primary workflow:
State coverage:
Ran:
Skipped:
Manual findings:
Files changed or proposed:
Verification required:
Risks:
