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

agency-ux-architect

Generates CSS design systems, layout frameworks, and UX architecture specifications for developer handoff.

Updated Jul 27, 2026
Search Tags:#responsive design#design system#ux#css architecture#developer handoff#theme toggle#layout framework
One-click install
npx skills add https://github.com/imMamdouhaboammar/Mimera --skill agency-ux-architect-immamdouhaboammar
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: agency-ux-architect
Source: https://github.com/imMamdouhaboammar/Mimera/tree/main/.agents/skills/design-ux-architect
Command: npx skills add https://github.com/imMamdouhaboammar/Mimera --skill agency-ux-architect-immamdouhaboammar

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Developers often face blank-page paralysis and architectural decision fatigue when starting new web projects, leading to inconsistent CSS, conflicting styles, and poor responsive behavior. This Skill provides a complete technical foundation—design tokens, layout systems, and UX structure—before implementation begins. ## Core Features & Use Cases - CSS Design System Generation: Produces custom property-based token systems covering colors, typography scales, spacing, and container widths, with built-in light/dark/system theme support. - Layout Framework Specifications: Defines responsive container systems, Grid/Flexbox patterns, and component hierarchies with mobile-first breakpoints. - Theme Toggle Implementation: Delivers ready-to-use HTML, CSS, and JavaScript for a three-state (light/dark/system) theme switcher with localStorage persistence. - Use Case: A project manager hands off a site specification; the Skill converts it into a documented CSS architecture, information hierarchy, accessibility baseline, and a prioritized implementation guide ready for developers. ## Quick Start Ask the agent to create a technical architecture and UX foundation for your project based on your site specification document.

Frequently Asked Questions about agency-ux-architect

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

FAQPage Schema
How do I create a CSS design system with custom properties?▼

Define design tokens as CSS custom properties on :root covering colors, typography scale, and spacing based on a 4px grid. This Skill generates a complete variable system with semantic naming, plus dark theme overrides using a data-theme attribute.

How to implement a light dark system theme toggle in JavaScript?▼

Use a ThemeManager class that reads localStorage, falls back to the prefers-color-scheme media query, and sets a data-theme attribute on the document root. The Skill provides complete HTML, CSS, and JavaScript for a three-option toggle with ARIA radio roles.

When should I use CSS Grid vs Flexbox for layouts?▼

Use CSS Grid for two-dimensional page layouts like card grids and sidebar structures, and Flexbox for one-dimensional alignment within components. The Skill's layout specifications apply Grid for content sections and auto-fit card layouts with mobile collapse breakpoints.

Does this CSS architecture support responsive mobile-first design?▼

Yes, the layout framework defines a mobile-first breakpoint strategy starting at 320px, with tablet (768px), desktop (1024px), and large (1280px) container max-widths. Grid patterns collapse to single columns on smaller viewports.

What accessibility requirements does the UX foundation cover?▼

The foundation targets WCAG 2.1 AA color contrast, semantic HTML with ARIA labels for screen readers, and keyboard navigation with managed tab order and focus indicators. The theme toggle uses radiogroup roles with aria-checked states.

Related Skills

Explore More Design & Creative Skills→
mm88nl-webmm88nl-web

target-audience

Define a brand's target audience with personas, psychographics, and ICP profiles.

Community
Intermediate
dobrinz123dobrinz123

frontend-design

Create distinctive frontend interfaces with HTML/CSS/JS and CSS variables.

Community
Advanced
code-yeongyucode-yeongyu
68.6k

visual-qa

Validate rendered web and terminal UI fidelity using automated pixel diffing and layout analysis.

Community
Intermediate
carrilloappscarrilloapps

tailwind-design-system

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

Community
Advanced