메뉴
Use when validating design system token compliance, detecting visual regressions, or analyzing responsive design consistency across breakpoints and modes
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Use playwright-cli to capture full-page screenshots, navigate complex flows, run Lighthouse audits, and test responsive design without writing code
Use this skill when verifying WCAG 2.1/3.0 compliance, mapping accessibility violations to specific criteria, or providing remediation guidance with code examples
Use this skill when aggregating design audit findings across multiple dimensions, deduplicating related issues, or synthesizing results into executive summaries with remediation roadmaps
Use this skill when assessing design system maturity, evaluating adoption health, analyzing component duplication, or calculating design debt ratios
Analyze images and videos with AI vision models. Detect objects with bounding boxes, compare multiple images, audit design compliance, and analyze video content using Google Gemini or Vertex AI. Supports CLI and MCP modes.
USE THIS SKILL whenever any topic related to access control, authorization, permissions, or security policy arises in any form. Triggers include — but are not limited to: RBAC, ABAC, PBAC, ACL, DAC, ReBAC, Zanzibar, OPA, Cedar, Casbin, SpiceDB, OpenFGA, Permify, Oso, Cerbos, Permit.io; any mention of "who can do what", "role", "permission", "policy", "authorization", "multi-tenant access", "least privilege", "Zero Trust", "IAM design", "SaaS permission modeling", "access audit", "compliance access control" (HIPAA, GDPR, SOC2, PCI-DSS, ISO27001); also trigger when designing any new feature that controls what users can see or do, or when reviewing, refactoring, or debugging any auth/authz system. When in doubt — trigger this skill. Access control is architectural and getting it wrong is expensive.
| name | visual-consistency-validation |
| description | Use when validating design system token compliance, detecting visual regressions, or analyzing responsive design consistency across breakpoints and modes |
Systematic approach to validating design system compliance across all breakpoints, modes, and interactive states.
Every violation must be: (1) mapped to a specific token, (2) quantified, (3) severity-categorized, and (4) provided with remediation. No rationalization allowed.
Every violation follows this template:
Property: [CSS property]
Current: [actual value]
Token: [token name from design system]
Expected: [token value]
Difference: [quantified: pixels, %, hex delta]
Validate everything:
| Level | When |
|---|---|
| CRITICAL | Accessibility/layout failures (WCAG contrast, broken states, layout shifts) |
| HIGH | Token violations with user impact (colors, spacing, typography) |
| MEDIUM | Minor deviations (< 10% difference) |
| LOW | Very minor (< 5% difference) |
Rule: All WCAG failures → CRITICAL (regardless of context).
| Red Flag | What to Do |
|---|---|
| "Close enough" | Measure it. Report every difference. |
| "Desktop is primary" | Analyze all breakpoints equally. |
| "Light mode is primary" | Analyze all modes equally. |
| "Minor refinement" | Categorize by severity and report. |
| "Typical for design systems" | Escalate accessibility failures to CRITICAL. |
| "Not evaluating hover states" | Validate all interactive states. |
| "Acceptable variance" | Quantify and report every deviation. |
Before completing analysis:
Detailed implementation guidance: