Skills
.Work. You
Rest

developing-ui

Community

Brand-aligned UI that is accessible and robust.

Design & Creative#branding#accessibility#frontend#ui-development#design-tokens#component-patterns
Authoraagii9912
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This skill standardizes UI development by enforcing brand tokens, accessibility, and consistent component patterns.

Core Features & Use Cases

  • Brand-token enforcement: Ensures all components use tokens from the brand-identity skill for color, typography, and spacing.
  • Accessibility & Semantics: Promotes semantic HTML, ARIA attributes, keyboard navigation, and proper alt text.
  • 5 States & Reliability: Guides the implementation of Idle, Loading, Error, Empty, and Success states for robust UX.
  • Performance & Testing: Encourages responsive layouts, optimized assets, and testing (unit/integration) across browsers.
  • Use Case: When building a new dashboard page or a reusable UI component, follow this skill to ensure consistency and accessibility.

Quick Start

Follow the workflow to create a new UI element: analyze tokens, scaffold, style using design tokens, implement accessibility, verify with tests.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: developing-ui
Download link: https://github.com/aagii9912/smarthub/archive/main.zip#developing-ui

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.