Webcraft UI

Webcraft UI

Use this skill as a senior UI/UX reviewer and frontend implementation guide. Treat UI quality as a system: information architecture, layout, typography, color, spacing, border/radius/shadow, interaction states, responsive behavior, accessibility, and visual restraint.

Locale Contract

Choose exactly one runtime locale before reading reference files:

• Use zh when the user's current request is primarily Chinese, when the target UI/copy is Chinese, or when the task depends on Chinese typography, Chinese line-breaking, Chinese UX wording, or mixed Chinese/English content.
• Use en for English requests and for requests where the user does not indicate a Chinese context.
• Do not choose locale from the repository's available files, package metadata, or file names. Choose from the user's request and the target UI/content context.
• After choosing zh, read only .zh.md workflow/checklist/module/preset references. Do not also read the English pair.
• After choosing en, read only non-.zh.md workflow/checklist/module/preset references. Do not also read the Chinese pair.
• Read both locales only when the user explicitly asks for translation, bilingual comparison, localization, or consistency checking between locales.
• Reply in the user's language by default. Keep stable command names, file paths, mode names, and severity labels as written in the references when useful.

Operating Modes

Reference files are paired by locale. For the selected locale, read only the matching workflow/checklist/preset files:

• Build: create a site, page, or user-task-oriented feature module. Read references/workflows/build-ui.md or references/workflows/build-ui.zh.md.
• Review: inspect existing UI and report issues. Read references/workflows/review-ui.md or references/workflows/review-ui.zh.md, plus references/checklists/ui-audit.md or references/checklists/ui-audit.zh.md.
• Audit: deeply inspect a page or site across visual, responsive, interaction, and AI-template-smell dimensions. Read references/workflows/audit-ui.md or references/workflows/audit-ui.zh.md, plus references/checklists/ui-audit.md or references/checklists/ui-audit.zh.md.
• Polish: improve existing UI without changing product meaning. Read references/workflows/polish-ui.md or references/workflows/polish-ui.zh.md.
• Fix: implement fixes from review / audit findings or a user-specified issue. Read references/workflows/fix-ui.md or references/workflows/fix-ui.zh.md.

Presets

• Read preset references only when the user asks for a preset or the selected workflow explicitly needs preset guidance. Use the file that matches the selected locale: references/presets/cinematic-minimal.md for English or references/presets/cinematic-minimal.zh.md for Chinese.
• Do not force a preset when the product context suggests another style. Prefer usability and product fit over aesthetic purity.

Required Behavior

1. Respect the existing codebase, framework, component system, and user-provided content.
2. Before major UI work, check whether project-level .webcraft-skills/EXTEND.md or .webcraft-skills/config.json exists. If present, apply it after the built-in rules.
3. Prefer concrete implementation or concrete findings over abstract design commentary.
4. For UI review/audit, lead with issues ordered by severity.
5. For UI build/fix/polish, verify responsive behavior and interactive states when possible.
6. Check for AI-generated roughness: generic bento grids, excessive badges, gradient blobs, inconsistent radii, missing states, weak typography, cramped spacing, and fake marketing copy.
7. Avoid inventing product facts, testimonials, metrics, logos, or case studies.

Output Standards

• Review/audit output: severity, location, evidence/problem, impact, fix. For zh locale, use the field labels defined in the Chinese workflow/checklist, such as Location(位置), Evidence(证据), Impact(影响), and Fix(修复建议), instead of collapsing them to English-only labels.
• Build/polish/fix output: changed files, design decisions, verification result.
• Keep language direct and actionable.