plugin87/ux-ui-agent-skills

gate

Run the one-command quality gate and report the real N/N result.

소스 보기

사용 방법

  1. 설치 명령을 복사하고 자신의 에이전트 환경에 설치하기 전에 소스 패키지를 확인하세요.
  2. 필요한 도구, 인증 정보, 지원 환경은 원본 문서에서 확인하세요.
  3. 입력과 원하는 산출물을 설명하고 출처와 결과를 대조하세요.
npx skills add https://github.com/plugin87/ux-ui-agent-skills --skill gate

시작 전 확인

  • 설치에는 모델 구독, API 한도, 파일 접근 권한이 포함되지 않습니다.
  • 별점 수와 설치 수는 활동 지표이며 독립적인 품질·보안 검증이 아닙니다.
원본 Skill 문서

원본 저장소의 제목, 예시, 코드, 표, 링크, 이미지를 유지해 표시합니다.

Step 0 — is the kit here? This skill reads files from the kit. Check once: ls ${CLAUDE_SKILL_DIR}/../../../tokens >/dev/null 2>&1 && echo KIT_OK || echo KIT_MISSING On KIT_MISSING only the skill folders were installed, which is what npx skills add does. Say so plainly, point the user at npx ux-ui-agent-skills init or the plugin install, and stop. Do not guess the contents of a file you could not open.

Run the full quality gate and report the ACTUAL output — never a remembered or reasoned number.

  1. Run: node ${CLAUDE_SKILL_DIR}/../../../scripts/accuracy_report.mjs

(tokens + contrast + spec + no-hardcode + theme-refs + no-emoji + real-render WCAG + state-aware, light and dark — all-or-nothing).

  1. Report the exact N/N line it prints.
  2. If it is not fully green:
  • List each failing check verbatim.
  • Fix the cause (do not suppress the check).
  • Re-run until green. Do not announce success between failures.
  1. For any rendered HTML touched this session, also run the pixel-truth checks

the gate cannot prove:

  • node ${CLAUDE_SKILL_DIR}/../../../scripts/verify_states.mjs <file> [--dark]
  • node ${CLAUDE_SKILL_DIR}/../../../scripts/verify_responsive.mjs <file>
  • RENDER-AND-LOOK: screenshot the harness, park the pointer off it, inspect

every state, click each control to confirm the state changed.

Honest scope: these gates prove objective correctness (tokens, a11y, no drift). They do not prove taste. Pair with node ${CLAUDE_SKILL_DIR}/../../../scripts/taste_audit.mjs + human review; never claim auto-100% on aesthetics.

같은 저장소의 Skills

더 많은 Skills

모든 Skills
plugin87
커뮤니티

a11y-audit

Audit a UI or design against WCAG 2.2 AA/AAA and ARIA patterns, returning criterion-referenced findings with severity and specific fixes. Use when the user wants an accessibility check, contrast verification, keyboard/screen-reader review, or wants to confirm a component meets POUR.

설치 수
1
GitHub Stars
2.8천
업데이트
10월 20일
plugin87
커뮤니티

apply-aesthetic

Apply a visual direction — an archetype (high-end agency, editorial minimal, brutalist, soft-SaaS, dark-tech) or one of 138 named design systems (apple, linear-app, stripe, vercel, notion, material, shadcn, spotify, tesla…) — by resolving it into the token system. Use when the user wants a specific look/vibe/brand feel, or asks to make a design feel premium/expensive/non-generic.

설치 수
1
GitHub Stars
2.8천
업데이트
10월 20일
plugin87
커뮤니티

brandkit

Generate a complete, accessible brand design system from a brief — primitive → semantic → component DTCG tokens (color, type, spacing, radius, shadow, motion), light + dark, plus a single theme.css — verified for WCAG. Use when the user wants a from-scratch brand/design foundation, a new palette + type system, or a themeable token kit for a product.

설치 수
1
GitHub Stars
2.8천
업데이트
10월 20일
plugin87
커뮤니티

critique

Adversarial design critique of the current work — render it, look at it, and argue for rejection. Run after the gates are green, never instead of them.

설치 수
1
GitHub Stars
2.8천
업데이트
10월 20일