agentsclimarketplace

Webcraft ui

Skill frankguodev/webcraft-skills/skills/webcraft-ui

Webcraft Skills empowers AI to not only generate web pages, but also critique and perfect them — helping AI create interfaces that feel production-ready and aesthetically pleasing.

Install
npx -y skills add frankguodev/webcraft-skills --skill webcraft-ui

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

  • 1 stars1 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

UI quality, generation, review, audit, and polish skill for Codex. Use when building, redesigning, reviewing, auditing, or fixing web pages, websites, landing pages, dashboards, portfolios, frontend prototypes, visual systems, component states, responsive layouts, typography, colors, borders, radius, modals, and AI-generated UI that feels rough, generic, inconsistent, or template-like.

SKILL.md

4.5 KB, as published. Nobody here has run it

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.

Keep looking

Skills are one crate of 328,083. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.