skills.rest
GQAdonis
GQAdonisCOMMUNITY
Explore all skills by this author →
Website𝕏@gqadonisctoGitHub

refine-ui

Automate PMPO-driven refinement of UI components for React and HTML.

Updated Mar 27, 2026
Search Tags:#ui#accessibility#react#prototyping#design-system#refine
One-click install
npx skills add https://github.com/GQAdonis/turboquant-rs --skill refine-ui
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: refine-ui
Source: https://github.com/GQAdonis/turboquant-rs/tree/main/.opencode/skills/artifact-refiner/skills/refine-ui
Command: npx skills add https://github.com/GQAdonis/turboquant-rs --skill refine-ui

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Quickly refine UI components and design system artifacts using a guided PMPO loop, reducing iteration time and ensuring accessibility from the start.

Core Features & Use Cases

  • Guided UI refinement: Orchestrates a PMPO loop to polish or bootstrap UI components for React, HTML, or other frameworks.
  • Design-system alignment: Supports design tokens and framework-specific templates to maintain consistency across projects.
  • Use Case: When designing a new interactive component, start from a domain adapter and a template to generate accessible, semantic UI.

Quick Start

Provide the initial component specification and run the refinement loop to produce a refined UI component.

Frequently Asked Questions about refine-ui

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

FAQPage Schema
How do I refine UI components for accessibility and responsive constraints?▼

Refine UI components by running an automated PMPO-driven loop that polishes designs and enforces accessibility and responsive constraints across React and HTML.

What is the best way to bootstrap accessible React components from a design system?▼

Bootstrap accessible React components by loading a domain adapter and a framework-specific component template to generate semantic UI that aligns with your design system tokens.

Can I use this guided refinement workflow for existing HTML components?▼

Yes, you can refine existing HTML components by applying the PMPO prompt controller to iterate on the UI and ensure it meets accessibility and responsive design constraints.

How does the PMPO loop improve UI component iteration?▼

The PMPO loop improves UI iteration by orchestrating guided prompts to evaluate and polish components, reducing iteration time and ensuring accessibility is integrated from the start.

Do I need a component template to start refining design system artifacts?▼

Providing a component template and a domain adapter configures the refinement workflow, but you can also start with an initial component specification to run the loop.

Why does my UI component refinement workflow need a domain adapter?▼

A domain adapter is needed to configure the refinement workflow, allowing the PMPO loop to accurately apply design tokens and framework-specific rules to your UI components.

Related Skills

Explore More Design & Creative Skills→
Ben1821Ben1821

design-system

Generate design tokens and component specifications from JSON configurations.

Community
Intermediate
Higashi-KotaHigashi-Kota

ui-component

Build accessible React UI components with design tokens and ARIA patterns.

Community
Advanced
Vivekmano27Vivekmano27

design-system-builder

Create scalable design systems with tokens, components, and documentation.

Community
Advanced
darthlinuxerdarthlinuxer

web-design-guidelines

Audit web frontend files against Web Interface Guidelines and output file:line findings.

Community
Intermediate