skills.rest
augustoheiss
augustoheissCOMMUNITY
Explore all skills by this author →
GitHub

agency-ui-designer

Create tokenized UI design systems with WCAG AA accessibility and developer handoff packages.

Updated Feb 11, 2026
Search Tags:#accessibility#ui-design#design-system#responsive-design#design-tokens#component-library#developer-handoff
One-click install
npx skills add https://github.com/augustoheiss/LogicDefense --skill agency-ui-designer-augustoheiss
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: agency-ui-designer
Source: https://github.com/augustoheiss/LogicDefense/tree/main/.gemini/skills/agency-ui-designer
Command: npx skills add https://github.com/augustoheiss/LogicDefense --skill agency-ui-designer-augustoheiss

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It removes inconsistency, accessibility gaps, and developer handoff friction by providing a complete, production-ready UI design system and component library that teams can adopt across web and mobile products.

Core Features & Use Cases

  • Design system foundations: design tokens, color, typography, spacing, shadow and transition systems for cross-platform consistency.
  • Component library & documentation: pixel-precise components with states, responsive behaviors, and developer-ready specifications for handoff.
  • Accessibility & performance: WCAG AA contrast guidance, keyboard navigation patterns, reduced-motion support, and optimized asset/export recommendations.
  • Use Case: Standardize a product’s UI by delivering a tokenized theme, a documented component set, and a QA checklist so engineers can implement features with minimal design revisions.

Quick Start

Create a responsive design system with tokens, core components, accessibility rules, and a developer handoff package for the primary product.

Frequently Asked Questions about agency-ui-designer

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

FAQPage Schema
How do I create a UI design system that ensures accessibility and developer handoff?▼

To create a UI design system for developer handoff, you need tokenized theming, documented component states, WCAG AA accessibility compliance, and responsive breakpoint rules, delivering a production-ready package that engineers can implement with minimal revisions.

What are design tokens and how do they standardize a component library?▼

Design tokens are standardized variables for color, typography, spacing, shadows, and transitions, standardizing a component library by maintaining cross-platform consistency so web and mobile interfaces share a single source of truth for visual properties.

How do I make responsive layouts that meet WCAG AA accessibility requirements?▼

To make responsive layouts meeting WCAG AA accessibility, apply keyboard navigation patterns, reduced-motion support, and color contrast guidance across responsive breakpoints, ensuring components remain accessible and functional across all viewport sizes.

Can I use this UI design system approach for both web and mobile products?▼

Yes, you can use this UI design system approach for both web and mobile products, generating cross-platform tokenized themes and documented component sets that satisfy specific responsive behaviors and accessibility requirements for each platform.

What is the best way to document component states for developer handoff?▼

The best way to document component states for developer handoff is to generate pixel-precise specifications alongside responsive behaviors and accessibility rules, providing engineers with developer-ready specifications and a QA checklist for immediate implementation.

Why does my component library have inconsistent theming across different product interfaces?▼

Your component library has inconsistent theming because it lacks a unified token system, so implementing design tokens for color, typography, and spacing creates a shared foundation that resolves visual gaps and ensures consistency across web and mobile products.

Related Skills

Explore More Design & Creative Skills→
howdeployhowdeploy
15

design-consultation

Generate a DESIGN.md design system with typography, color, spacing, and motion guidelines.

Community
Advanced
decocmsdecocms
5

deco-storefront-test-checklist

Generate context-aware QA checklists from Deco storefront sections, routes, and components.

Official
Advanced
bykoleksii-hardobykoleksii-hardo

ckm:design-system

Generate CSS variables from design tokens JSON configurations.

Community
Advanced
apexradiusapexradius

a11y-check

Audit web content accessibility against WCAG 2.2 AA standards.

Official
Advanced