skills.rest
imMamdouhaboammar
imMamdouhaboammarCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

agency-ui-designer

Creates design token systems, component libraries, and responsive CSS specifications with WCAG AA accessibility compliance.

Updated Jul 27, 2026
Search Tags:#accessibility#responsive design#design system#css#component library#design tokens#ui design
One-click install
npx skills add https://github.com/imMamdouhaboammar/Mimera --skill agency-ui-designer-immamdouhaboammar
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: agency-ui-designer
Source: https://github.com/imMamdouhaboammar/Mimera/tree/main/.agents/skills/design-ui-designer
Command: npx skills add https://github.com/imMamdouhaboammar/Mimera --skill agency-ui-designer-immamdouhaboammar

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Designing consistent, accessible user interfaces from scratch is time-consuming and error-prone, often leading to visual fragmentation, inconsistent spacing, and accessibility failures that require costly rework during development. ## Core Features & Use Cases - Design Token Systems: Generates complete CSS custom property systems covering color palettes, typography scales, spacing units, shadows, and transitions, including dark theme variants. - Component Library Architecture: Produces base component styles (buttons, forms, cards) with all interactive states including hover, focus, disabled, and loading variants. - Responsive Frameworks: Delivers mobile-first breakpoint strategies with container widths and grid behaviors for screens from 320px to 1280px and beyond. - Use Case: A developer starting a new web product can request a full design system and receive production-ready CSS tokens, component specifications, and a developer handoff document with WCAG AA contrast ratios and accessibility guidelines. ## Quick Start Ask the agent to create a complete UI design system with color tokens, typography scale, and button components for your project.

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 token system in CSS?▼

Define CSS custom properties on the :root selector for colors, typography, spacing, and shadows using a consistent scale. This skill generates token systems with semantic naming like --color-primary-500 and --space-4, plus dark theme overrides via data-theme attributes.

How to make a component library accessible for WCAG AA?▼

WCAG AA requires 4.5:1 contrast for normal text, 3:1 for large text, visible focus indicators, and 44px minimum touch targets. The skill builds these into component foundations, including focus-visible outlines and keyboard navigation support.

What breakpoints should a responsive design system use?▼

A mobile-first approach typically uses 640px, 768px, 1024px, and 1280px breakpoints with fluid containers. The skill generates media queries that adjust container max-widths and grid columns at each breakpoint.

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 referencing the tokens automatically adapt without additional per-component changes.

What are the limitations of CSS-only design systems?▼

CSS-only systems define visual styling but not interactive behavior like form validation logic or state management. Complex components such as date pickers or data tables still require JavaScript frameworks for full functionality.

Related Skills

Explore More Design & Creative Skills→
nmoralescybernmoralescyber

ckmdesign

Design brand identity guidelines and visual systems for cybersecurity and B2B technology brands.

Community
Advanced
BeerspitnightBeerspitnight
1

frontend-designer

Converts UI/UX design inputs into structured frontend specifications for React, Vue, or HTML/CSS.

Community
Advanced
langgeniuslanggenius

rams

Reviews code files for WCAG accessibility violations and visual design issues.

Official
Intermediate
mujezmujez
47

brand-guidelines

Codify brand identity guidelines for visuals, copy, and product.

Official
Advanced