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

agency-ux-architect

Generate CSS design systems, responsive layouts, and developer handoff guides for web front-ends.

Updated Feb 11, 2026
Search Tags:#accessibility#design-system#developer-handoff#ux-architecture#css-systems#layout-framework#theme-toggle
One-click install
npx skills add https://github.com/augustoheiss/LogicDefense --skill agency-ux-architect-augustoheiss
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: agency-ux-architect
Source: https://github.com/augustoheiss/LogicDefense/tree/main/.gemini/skills/agency-ux-architect
Command: npx skills add https://github.com/augustoheiss/LogicDefense --skill agency-ux-architect-augustoheiss

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill removes ambiguity between product specifications and front-end implementation by providing a ready-made technical architecture, CSS design system, and UX structure so developers can start building without architectural decision fatigue.

Core Features & Use Cases

  • Provide a CSS design system with semantic variables, typography scale, spacing tokens, and light/dark/system theme handling for consistent theming.
  • Define responsive layout frameworks using Grid and Flexbox patterns, container breakpoints, and common grid patterns (hero, content grid, card, sidebar).
  • Supply component hierarchy, naming conventions, accessibility considerations, and a developer handoff template to streamline implementation and reduce rework.
  • Include a theme management JavaScript specification and practical implementation notes for performance, documentation, and developer onboarding.

Quick Start

Use the agency-ux-architect skill to generate a project-specific CSS design system, responsive layout templates, and a developer handoff guide for my web app.

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 semantic variables and responsive layout patterns?▼

To create a CSS design system, you define semantic variables, typography scales, and spacing tokens, then establish responsive layout patterns using Grid and Flexbox with container breakpoints for consistent web front-end implementation.

What's the best way to implement light, dark, and system theme toggles using CSS variables?▼

Implementing theme toggles requires defining CSS variables for semantic tokens and applying a theme management JavaScript specification to handle light, dark, and system preferences dynamically across the front-end interface.

How do I structure a developer handoff template for front-end UX architecture?▼

A developer handoff template for UX architecture includes component hierarchy, naming conventions, accessibility considerations, and implementation documentation to streamline front-end development and reduce rework.

Can I use Grid and Flexbox layout frameworks for common web patterns like sidebars and content grids?▼

Yes, Grid and Flexbox layout frameworks support common web patterns including hero sections, content grids, card layouts, and sidebars by applying predefined container breakpoints and responsive structural rules.

Do I need predefined spacing and typography scales to build accessible web front-ends?▼

Predefined spacing and typography scales are essential for building accessible web front-ends, ensuring consistent visual hierarchy, predictable component sizing, and clear structural relationships across the application interface.

Related Skills

Explore More Software Engineering Skills→
jeffwweeejeffwweee

ui-designer

Generate HTML wireframes, React/MUI mockups, and design specifications.

Community
Intermediate
GemachDAOGemachDAO
4

gdex-ui-theming

Provide CSS variables, dark/light modes, and Tailwind integration for trading UI theming.

Official
Advanced
thec3ukthec3uk

Frontend Accessibility

Guide frontend code to meet accessibility standards like ARIA and keyboard navigation.

Official
Basic
mgd34msumgd34msu
4

tailwindcss

Style web applications with Tailwind CSS utility classes and responsive design.

Community
Intermediate