What problem does it solve? UI screens in the iWana portal and backoffice drift away from the corporate design system: untokenized brand hex values, forbidden dark-mode grays, lime color misused for urgency, and generic template-looking layouts. This Skill enforces the iWana visual identity with verifiable rules, real tokens, and a mechanical audit script so every screen is recognizable as iWana and passes basic WCAG AA checks. ## Core Features & Use Cases - Design mode playbook: Classifies the screen type, applies canonical component recipes (KPI cards, data tables, panels, empty states, forms), and requires at least two signature brand elements with real function before delivery. - Review mode with P0-P3 findings: Produces a standardized audit report with evidence (file:line), severity, impact, effort, quick wins, and a computed score from 0-100. - Mechanical audit script: Runs scripts/audit-ui.mjs to detect deterministic violations (dark:bg-gray-*, tailwind.config presence, raw brand hex, z-index wars) and heuristic flags requiring manual confirmation. - Use Case: Before shipping a new dashboard, run the audit script on the touched files, apply the component recipes from the references, and verify lime usage, focus visibility, and dark-surface tokens against the hard rules table. ## Quick Start Ask the agent to review the UI of a specific screen or component against the iWana identity and run the audit script on its files.
