ui-craft

Design, redesign, polish, and review production interfaces against density, typography, motion, and accessibility rules.

Updated Sep 14, 2026

Search Tags:#typography #accessibility #WCAG #design tokens #ui design #motion design #interface review

One-click install

npx skills add https://github.com/Suge8/skills --skill ui-craft-suge8

Or copy as Structured Prompt for Agent▼

Please help me install this Agent Skill.
Skill: ui-craft
Source: https://github.com/Suge8/skills/tree/main/frontend/ui-craft
Command: npx skills add https://github.com/Suge8/skills --skill ui-craft-suge8

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Interfaces built without a design system often end up with inconsistent control sizes, weak visual hierarchy, broken motion, and accessibility gaps. This Skill provides a complete, opinionated rulebook for building and reviewing UI so every screen meets WCAG 2.2 AA and follows consistent density, typography, copy, and animation discipline. ## Core Features & Use Cases - Density and sizing system: Choose compact, comfortable, or touch profiles with concrete pixel values for buttons, inputs, rows, and hit targets aligned to WCAG 2.5.8. - Motion recipes: Ready-made enter/exit timings for dialogs, popovers, toasts, and view transitions, plus spring parameters, press feedback scales, and gesture-driven interaction rules. - Deep reference routing: On-demand guides for OKLCH color palettes and APCA contrast, typography and variable fonts, forms and feedback placement, icons, gestures, and accessibility patterns. - Structured review output: Audit an existing UI and get findings grouped by severity (HIGH/MEDIUM/LOW) with Before/After evidence and a Block/Needs changes/Approve verdict. - Use Case: Ask the agent to redesign a settings page; it reads existing components and tokens, picks a density profile, applies the sizing and motion rules, and verifies keyboard and reduced-motion behavior before finishing. ## Quick Start Use the ui-craft skill to review this page's component density, typography, and accessibility and report findings by severity.

Frequently Asked Questions about ui-craft

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

Why does iOS Safari zoom in when focusing input fields?▼

Safari zooms the page when input text is smaller than 16px because it considers smaller text hard to read while typing. Set mobile input font-size to 16px and shrink padding instead; never use maximum-scale=1, which blocks pinch zoom and fails WCAG.