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

设计工具

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.

主要功能

160 GitHub stars
Smart classification of UI requests from hero sections to contact forms
Support for advanced brand styling including custom easing and animations
VibeCoder-compatible simplified design instructions for rapid prototyping
Tiered design system application for consistent UI output
Automated accessibility (a11y) check for every component

使用场景

Building complex, keyboard-navigable feedback and contact forms
Rapidly prototyping accessible landing pages and hero sections
Implementing brand-specific design systems with strict visual constraints

关于

主要功能

160 GitHub stars
Smart classification of UI requests from hero sections to contact forms
Support for advanced brand styling including custom easing and animations
VibeCoder-compatible simplified design instructions for rapid prototyping
Tiered design system application for consistent UI output
Automated accessibility (a11y) check for every component

使用场景

Building complex, keyboard-navigable feedback and contact forms
Rapidly prototyping accessible landing pages and hero sections
Implementing brand-specific design systems with strict visual constraints