Does this skill support accessibility (a11y)?

Yes, it includes a mandatory Step 0 Quality Gate with a checklist for alt attributes, keyboard navigation, focus states, and contrast ratios.

What features are excluded from this skill?

The UI skill does not handle authentication, backend implementation, database operations, or core business logic; it focuses exclusively on presentation and interaction.

Can I request custom brand styles and animations?

While the skill defaults to standard UI constraints, it will apply brand-heavy styles like gradients, glows, and custom easing if you explicitly request them.

What is the UI skill for Claude Code?

It is a specialized capability within the opencode harness that allows Claude to generate high-quality frontend components while adhering to specific design references and accessibility standards.

Professional UI Architect

Name: Professional UI Architect
Author: Chachamaru127

byChachamaru127

•

160

•

Design Tools

Generates accessible, high-quality UI components and feedback forms following strict design constraints and accessibility standards.

The UI skill for Claude Code transforms the model into a specialized frontend engineer capable of creating production-ready components, hero sections, and interactive forms. It utilizes a tiered constraint system that prioritizes established design patterns while allowing for brand-heavy customizations like custom animations and gradients when explicitly requested. Crucially, the skill integrates a mandatory accessibility (a11y) quality gate, ensuring that all generated interfaces are keyboard-navigable, screen-reader friendly, and visually compliant with WCAG standards.

Key Features

01160 GitHub stars

02Smart classification of UI requests from hero sections to contact forms

03Support for advanced brand styling including custom easing and animations

04VibeCoder-compatible simplified design instructions for rapid prototyping

05Tiered design system application for consistent UI output

06Automated accessibility (a11y) check for every component

Use Cases

01Building complex, keyboard-navigable feedback and contact forms

02Rapidly prototyping accessible landing pages and hero sections

03Implementing brand-specific design systems with strict visual constraints

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add chachamaru127/claude-code-harness ui

For use in Claude.ai and ChatGPT

Key Features

01160 GitHub stars

02Smart classification of UI requests from hero sections to contact forms

03Support for advanced brand styling including custom easing and animations

04VibeCoder-compatible simplified design instructions for rapid prototyping

05Tiered design system application for consistent UI output

06Automated accessibility (a11y) check for every component

Use Cases

01Building complex, keyboard-navigable feedback and contact forms

02Rapidly prototyping accessible landing pages and hero sections

03Implementing brand-specific design systems with strict visual constraints

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add chachamaru127/claude-code-harness ui

For use in Claude.ai and ChatGPT