skills.rest
omeraltn
omeraltnCOMMUNITY
Explore all skills by this author →
GitHub

agency-ui-designer

Create design tokens, component specs, and WCAG AA accessibility guidance.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill solves the challenge of inconsistent, inaccessible, and unscalable user interfaces by producing a cohesive design system, reusable component library, and developer-ready specifications that reduce implementation ambiguity and visual debt.

Core Features & Use Cases

  • Design System Foundation: Establishes design tokens for color, typography, spacing, shadows, and transitions to ensure cross-platform consistency.
  • Component Library & Specs: Produces pixel-precise component definitions (buttons, forms, cards, navigation) with interactive states, responsive behavior, and dark-mode theming.
  • Accessibility & QA: Integrates WCAG AA contrast guidance, keyboard and screen-reader considerations, and a handoff checklist for design QA and developer implementation.
  • Use Case: Prepare a responsive component library and developer handoff for an e-commerce product catalog to streamline implementation and ensure accessibility compliance.

Quick Start

Create a responsive component library, design tokens, accessibility guidelines, and developer handoff for a product UI.

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 scalable UI design system with design tokens and component specs?▼

To create a scalable UI design system, you establish design tokens for color, typography, and spacing, then generate pixel-precise component definitions with interactive states, responsive behavior, and dark-mode theming for cross-platform consistency.

Can I generate WCAG AA accessibility guidelines for a responsive component library?▼

Yes, you can generate WCAG AA accessibility guidelines for a responsive component library by integrating contrast guidance, keyboard navigation considerations, and screen-reader compatibility directly into the component specifications.

What is the best way to prepare a developer handoff for a web and mobile interface?▼

The best way to prepare a developer handoff is to produce developer-ready documentation including design tokens, responsive breakpoints, interactive states, and a design QA checklist to reduce implementation ambiguity.

Does this approach work for building responsive e-commerce product catalogs?▼

Yes, this approach works for building responsive e-commerce product catalogs by producing a cohesive component library, accessibility compliance guidelines, and developer handoff specifications to streamline implementation.

How do I ensure visual consistency across cross-platform dark mode theming?▼

To ensure visual consistency across cross-platform dark mode theming, you define standardized design tokens for colors and shadows, then apply them to pixel-precise component definitions with responsive behavior specifications.

Why do I need design tokens for my component library?▼

You need design tokens for your component library to establish a single source of truth for color, typography, spacing, shadows, and transitions, ensuring cross-platform consistency and reducing visual debt across products.

Related Skills

Explore More Design & Creative Skills→
BellaBeBellaBe
37

product-design-wireframes

Convert user flows into wireframe specifications using atomic design hierarchy.

Community
Advanced
h4vzzh4vzz
33

Frontend Design

Generate accessible React, Vue, Svelte, or HTML components with design tokens.

Community
Advanced
basmawebinfo-hubbasmawebinfo-hub

UI Designer

Create scalable UI design systems with WCAG AA accessibility and developer handoff specifications.

Community
Advanced
tan-yong-shengtan-yong-sheng
4

ui-ux-designer

Create interface designs, wireframes, and design systems with accessibility standards.

Community
Advanced