skills.rest
AI-Staffing-Solution-Consultants-LLC
AI-Staffing-Solution-Consultants-LLCOFFICIAL
Explore all skills by this author →
WebsiteGitHub

agency-ui-designer

Creates design systems, component libraries, and accessible interface specifications with CSS design tokens.

Updated Jul 14, 2026
Search Tags:#accessibility#responsive design#design system#component library#wcag#ui design#css tokens
One-click install
npx skills add https://github.com/AI-Staffing-Solution-Consultants-LLC/core-engineering-system --skill agency-ui-designer-ai-staffing-solution-consultants-llc
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: agency-ui-designer
Source: https://github.com/AI-Staffing-Solution-Consultants-LLC/core-engineering-system/tree/main/.agents/skills/design-ui-designer
Command: npx skills add https://github.com/AI-Staffing-Solution-Consultants-LLC/core-engineering-system --skill agency-ui-designer-ai-staffing-solution-consultants-llc

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building consistent, accessible user interfaces without a unified design system leads to visual fragmentation, design debt, and costly rework during development handoff. ## Core Features & Use Cases - Design Token Systems: Generates CSS custom properties for colors, typography, spacing, shadows, and transitions, including dark theme variants. - Component Library Architecture: Produces base components (buttons, forms, cards) with interactive states, responsive breakpoints, and mobile-first grid frameworks. - Accessibility Compliance: Enforces WCAG AA standards including 4.5:1 contrast ratios, keyboard navigation, and 44px touch targets. - Use Case: A product team starting a new web app uses this Skill to generate a complete design system specification with tokens, component styles, and developer handoff documentation before writing any frontend code. ## Quick Start Ask the UI Designer to create a design system with color tokens, typography scale, and button components for your web application.

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 design system with CSS custom properties?▼

Define design tokens as CSS custom properties in :root for colors, typography, spacing, and shadows, then reference them in component styles. This Skill generates a complete token system including dark theme variants via a data-theme attribute selector.

How to make UI components WCAG AA accessible?▼

WCAG AA requires 4.5:1 contrast for normal text, 3:1 for large text, visible focus indicators, and full keyboard navigation. The generated components include focus-visible outlines, 44px minimum touch targets, and semantic state handling for disabled elements.

What breakpoints should a responsive design framework use?▼

This framework uses mobile-first breakpoints at 640px, 768px, 1024px, and 1280px with container max-widths at each tier. Grid column utilities expand from single-column mobile layouts to multi-column desktop arrangements.

Does this design system support dark mode theming?▼

Yes, dark mode is implemented through a [data-theme="dark"] attribute selector that overrides the color token values. Components automatically adapt because they reference the tokens rather than hardcoded colors.

What are the limitations of token-based design systems?▼

Token systems require disciplined adoption across the team; mixing hardcoded values with tokens breaks consistency. They also add a learning curve for developers unfamiliar with CSS custom property inheritance and theming patterns.

Related Skills

Explore More Design & Creative Skills→
Buntyarora97Buntyarora97

branding-generator

Create brand identity kits with color palettes, typography, and logo concepts.

Community
Advanced
SaiyedMuhammadAnasMaududiSaiyedMuhammadAnasMaududi

frontend-design

Design responsive, accessible frontend interfaces with HTML/CSS/JS or React.

Community
Intermediate
CleanExpoCleanExpo
3

ui-ux

Audit web application interfaces for WCAG 2.1 AA accessibility and usability issues.

Community
Advanced
carrilloappscarrilloapps

tailwind-design-system

Creates Tailwind CSS v4 design systems with semantic @theme tokens and CVA components.

Community
Advanced