---
name: web-design-guidelines
description: NarmaForge Web Standards: keyboard accessibility, 44px hit targets, GPU motion, and file:line code audits.
---

# NarmaForge Web Interface Standards

This skill implements the NarmaForge production web interface standards and automated code auditing engine.

## 1. Interface Standards Matrix
- **Keyboard & Focus**: Complete WAI-ARIA keyboard navigation; visible `:focus-visible` rings; focus trapping in modals and sheets.
- **Hit Targets & Typography**: Minimum 44x44px touch targets on mobile ($\ge 24$px on desktop); mobile input `font-size \ge 16px`; tabular numbers (`font-variant-numeric: tabular-nums`) for currency/numbers; curly typographic quotes (“ ”).
- **GPU Motion**: Animate compositor properties only (`transform`, `opacity`). Never use `transition: all`. Honor `prefers-reduced-motion`.
- **Forms & Inputs**: Single-line enters submit; textareas submit with `Cmd/Ctrl + Enter`; explicit `<label>` connections; buttons disabled during in-flight submit.
- **Geometry**: Nested radii must satisfy `child_radius <= parent_radius - padding`.

## 2. Code Audit Output Format
Return findings formatted as concise, editor-friendly lines:
```text
FILE:LINE - [CATEGORY] Issue description -> Required fix
```
*Example*:
`components/Nav.tsx:32 - [INTERACTION] Generic div click -> Use semantic Link`