skills.rest
aagii9912
aagii9912COMMUNITY
Explore all skills by this author →
GitHub

developing-ui

Enforce brand tokens, accessibility, and component patterns in UI development.

Updated Jan 5, 2026
Search Tags:#branding#accessibility#frontend#ui-development#design-tokens#component-patterns
One-click install
npx skills add https://github.com/aagii9912/smarthub --skill developing-ui
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: developing-ui
Source: https://github.com/aagii9912/smarthub/tree/main/skills/developing-ui
Command: npx skills add https://github.com/aagii9912/smarthub --skill developing-ui

SYSTEM DOCUMENTATION & REQUIREMENTS

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.

Frequently Asked Questions about developing-ui

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

FAQPage Schema
How do I enforce brand consistency and accessibility in UI development?▼

Brand-aligned UI development is standardized by enforcing design tokens for color and typography, semantic HTML, ARIA compliance, and consistent component patterns across your application.

What are the five UI states I need to implement for robust frontend components?▼

The five UI states for robust frontend components are Idle, Loading, Error, Empty, and Success. Implementing these states ensures a reliable user experience across all interaction scenarios.

How do I scaffold a new UI element using design tokens?▼

To scaffold a new UI element using design tokens, analyze the available tokens, structure the semantic HTML, apply token-based styling for spacing and color, implement ARIA attributes, and verify with browser tests.

Can I apply component patterns and design tokens across different frontend frameworks?▼

Yes, component patterns and design tokens can be applied across different frontend frameworks. The approach standardizes styling and accessibility rules independently of the underlying framework implementation.

What is the best way to ensure ARIA compliance and keyboard navigation in web components?▼

The best way to ensure ARIA compliance and keyboard navigation is to enforce semantic HTML structures, apply proper ARIA attributes, and conduct unit and integration testing across multiple browsers.

Why does my UI styling break when I don't use design tokens?▼

UI styling breaks without design tokens because hard-coded values bypass brand consistency. Enforcing token usage for color, typography, and spacing ensures maintainable and standardized interfaces across teams.

Related Skills

Explore More Design & Creative Skills→
rwHiveAquarwHiveAqua

design-advisor

Translate brand strategy into visual identity assets with typography, color, and layout specs.

Community
Basic
AlenryuichiAlenryuichi
20

visual-testing-loop

Automate the visual regression testing loop for frontend interfaces with Playwright.

Community
Advanced
pelcherspelchers

ensuring-accessibility

Implement WCAG 2.1 AA-compliant accessibility patterns for web interfaces.

Community
Advanced
lumauilumaui
6

Lumo · Component Creation Protocol

Standardize Angular component creation for the Lumo Design System with Tailwind styling, ARIA attributes, and npm packaging

Official
Advanced