skills.rest
hellowind777
hellowind777COMMUNITY
Explore all skills by this author →
GitHub

hello-ui

Guides UI design, implementation mapping, and visual acceptance for explicit UI workflows.

702|99|Updated Sep 26, 2025
Search Tags:#visual validation# accessibility#Design system#screenshot testing#UI Design#Design tokens#Responsive design
One-click install
npx skills add https://github.com/hellowind777/helloagents --skill hello-ui
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: hello-ui
Source: https://github.com/hellowind777/helloagents/tree/main/skills/hello-ui
Command: npx skills add https://github.com/hellowind777/helloagents --skill hello-ui

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

UI tasks in AI coding workflows often lack consistent design contracts, skip visual verification, and drift from confirmed project decisions. This Skill enforces a structured UI workflow that honors project design contracts, maps design decisions to code structure, and closes the loop with visual acceptance checks.

Core Features & Use Cases

  • Design Contract Enforcement: Prioritizes confirmed UI decisions from plan.md, PRD, and DESIGN.md over generic aesthetic rules, and writes stable design system decisions back to DESIGN.md.
  • Implementation Mapping: Defines where design tokens live, how component boundaries are drawn, how state matrices (loading/empty/error/success) are handled, and how theming and responsive adaptation work before coding begins.
  • Visual Acceptance Loop: Uses screenshot tools like Playwright MCP for desktop and mobile viewport checks, or structured self-review when no browser tool exists, recording evidence via visual-state.mjs into artifacts/visual.json.
  • Use Case: When redesigning a dashboard across multiple components in an initialized project, the Skill reads DESIGN.md first, applies confirmed tokens and patterns, implements state coverage and accessibility requirements, then captures screenshots to verify the result matches the design intent.

Quick Start

Ask the agent to redesign the landing page following the hello-ui workflow and verify the result with screenshots on desktop and mobile viewports.

Frequently Asked Questions about hello-ui

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

FAQPage Schema
How do I enforce a design system when an AI builds UI pages?▼

Define a DESIGN.md contract covering surfaces, design tokens, components, states, and accessibility requirements, then have the agent read it before implementation. Confirmed decisions in plan.md or PRD take priority over generic aesthetic rules.

How to visually verify AI-generated UI with screenshots?▼

Use a browser tool such as Playwright MCP to capture desktop and mobile viewport screenshots, review composition and brand consistency against design intent, fix issues, and re-capture. Record the evidence with visual-state.mjs into artifacts/visual.json.

When should this UI workflow not be used?▼

Skip it for bug fixes, copy changes, or business logic edits that involve no visual changes. Standard-mode requests in uninitialized projects only follow the baseline UI quality rules without the full contract and acceptance workflow.

Does the UI workflow work without browser screenshot tools?▼

Yes. Without browser tools, the agent performs a structured self-review of the generated code against design intent, checking styles, layout, and motion. If the contract requires visual validation, it still writes a structured conclusion to artifacts/visual.json noting the tooling used.

What accessibility requirements apply to AI-generated interfaces?▼

Text contrast must be at least 4.5:1 for body text and 3:1 for large text, all interactive elements must support keyboard and assistive technology, information cannot rely on color alone, and reduced-motion preferences must be respected.

Related Skills

Explore More Design & Creative Skills→
shangyankejishangyankeji
273

super-dev

Manage the Super Dev pipeline inside Codex App/Desktop.

Community
Advanced
corca-aicorca-ai
9

spec

Convert ideation artifacts into executable contracts with acceptance criteria and deferred decisions mapped to implementation slices.

Official
Advanced
richardcbrichardcb
15

code-review

Audit implemented code against technical plans and AI-specific risks.

Community
Advanced
jongensutrechtjongensutrecht
1

bmad-micro

Apply small local code changes with governance checks and quality gates.

Community
Advanced