DesignPROPRO REQUIREDFC-DES-001FEATURED
UI Claw
ui-claw
v0.2.0May 19, 2026React/Vue components that align with your design system — token-based styling, ARIA that screen readers understand, and themes that actually switch
Engineering-focused UI agent. Generates React and Vue components that align with your design system — not just look right in Storybook. Token-based styling, ARIA attributes that screen readers understand, responsive breakpoints that reflow instead of break, and dark/light theme switching that actually works.
OpenClaw
Hermes
Claude Code
Codex
Cursor
Windsurf
Aider
OllamaPRIMARY ACTION
Unlock with ProCOMPATIBLE WITH
OpenClawHermesClaude CodeCodex+4
8 compatible tools5 output formats
When to Use
- Improve UX consistency and readability
- Audit accessibility and interaction states
- Refine spacing and hierarchy quickly
- Apply reusable design system patterns
Compatible Frameworks
OpenClawHermesClaude CodeCodexCursorWindsurfAiderOllama8 TOOLS
Quality Gates
- accessibility checked
- responsive verified
- consistent spacing
- color contrast ok
4 GATES DEFINED
Expected Outputs
Component Code (React/Vue) with Token-Based StylingDesign System Alignment Audit with Spacing/Color/Typography GapsAccessibility Audit (ARIA + Keyboard)Responsive Breakpoint Verification ReportDark/Light Theme Switching Test Results
Native exports per tool
OpenClaw10 files
openclaw/AGENTS.mdopenclaw/SOUL.mdopenclaw/TOOLS.md+7 moreHermes5 files
hermes/skills/flickclaw/ui-claw/SKILL.mdhermes/skills/flickclaw/ui-claw/references/workflow.mdhermes/skills/flickclaw/ui-claw/references/quality-gates.md+2 moreClaude Code6 files
claude-code/CLAUDE.mdclaude-code/.claude/skills/ui-claw/SKILL.mdclaude-code/.claude/skills/ui-claw/references/workflow.md+3 moreCodex5 files
codex/AGENTS.mdcodex/.flickclaw/agents/ui-claw/codex.mdcodex/.flickclaw/agents/ui-claw/workflow.md+2 moreCursor3 files
cursor/.cursor/rules/flickclaw-ui-claw.mdccursor/.cursor/rules/flickclaw-ui-claw-workflow.mdccursor/.cursor/rules/flickclaw-ui-claw-quality-gates.mdcWindsurf3 files
windsurf/.windsurf/rules/flickclaw-ui-claw.mdwindsurf/.windsurf/rules/flickclaw-ui-claw-workflow.mdwindsurf/.windsurf/rules/flickclaw-ui-claw-quality-gates.mdAider3 files
aider/CONVENTIONS.mdaider/aider.mdaider/.aider.conf.ymlOllama4 files
ollama/Modelfileollama/system-prompt.mdollama/template.md+1 moreInstall Commands
Install the FlickClaw CLI, then select your AI agent framework below to get the correct install command.
Step 1: Install CLI (one-time)
npm install -g @flickclaw/cli@latestStep 2: Select Framework
OpenClaw
npm exec --yes @flickclaw/cli@latest -- install ui-claw --target openclawDownload as ZIP
Example Prompt
Try this prompt with UI Claw to see what it can do:
Audit the UI for accessibility (WCAG 2.1 AA). Check color contrast, keyboard navigation, and screen reader compatibility. Produce Component Code (React/Vue) with Token-Based Styling, Design System Alignment Audit with Spacing/Color/Typography Gaps, Accessibility Audit (ARIA + Keyboard).Example Output
IllustrativeWhat a typical UI Claw report looks like:
# UI Claw — Assessment Report **Project**: dashboard-ui **Context**: a React dashboard with charts, filters, and real-time updates **Generated**: 2026-07-10 ## Executive Summary The UI Claw completed its review of dashboard-ui (a React dashboard with charts, filters, and real-time updates). 3 findings were identified with concrete remediation steps. All quality gates were verified before delivery. ## Findings | # | Severity | Area | Finding | Recommended Action | |---|----------|------|---------|-------------------| | 1 | **P1** | Accessibility | Charts not keyboard navigable | Add tabIndex, ARIA roles, and keyboard event handlers | | 2 | **P1** | Contrast | Filter labels fail WCAG AA (3.2:1 ratio) | Update label color to meet 4.5:1 minimum | | 3 | **P2** | Responsive | Data table overflows on mobile (<375px) | Add horizontal scroll and sticky first column | ## Quality Gates - [✓] Components use design tokens, not hardcoded values - [✓] ARIA attributes pass screen reader testing - [✓] Responsive at every breakpoint (no layout breaks) ## Outputs Generated - **Component Code (React/Vue) with Token-Based Styling**: Included in the report above. - **Design System Alignment Audit with Spacing/Color/Typography Gaps**: Included in the report above. - **Accessibility Audit (ARIA + Keyboard)**: Included in the report above. - **Responsive Breakpoint Verification Report**: Included in the report above. - **Dark/Light Theme Switching Test Results**: Included in the report above. ## Validation - [x] All quality gates passed (3/3) - [x] 3 findings documented with severity and remediation - [x] 5 output sections generated - [x] Evidence collected and referenced --- *This is an illustrative example output from FlickClaw. Results vary based on project context.*
RELATED AGENTS