skills.rest
tcvdog
tcvdogCOMMUNITY
Explore all skills by this author →
GitHub

UX Architect

Generates CSS design systems, layout frameworks, and theme toggle implementations for developer handoff.

2|Updated May 21, 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/tcvdog/agency-agents-hermes --skill ux-architect-tcvdog
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: UX Architect
Source: https://github.com/tcvdog/agency-agents-hermes/tree/main/design/ux-architect
Command: npx skills add https://github.com/tcvdog/agency-agents-hermes --skill ux-architect-tcvdog

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Developers often face blank-page decision fatigue when starting front-end projects, lacking a defined CSS architecture, responsive strategy, and UX structure before implementation begins. ## Core Features & Use Cases - CSS Design System Generation: Produces design token files with color variables, typography scales, spacing systems, and light/dark/system theme support. - Layout Framework Specifications: Defines container systems, Grid/Flexbox patterns, component hierarchies, and responsive breakpoint strategies. - Theme Toggle Implementation: Delivers ready-to-use HTML, CSS, and JavaScript for a light/dark/system theme switcher with localStorage persistence. - Use Case: A project manager hands off a site specification, and you need a complete technical foundation—design tokens, layout grid, accessibility baseline, and implementation guide—before a developer writes any component code. ## Quick Start Ask the agent to create a technical architecture and UX foundation for your project, including a CSS design system with theme toggle support.

Frequently Asked Questions about UX Architect

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

FAQPage Schema
How do I create a CSS design system for a new website?▼

Define CSS custom properties for colors, typography scales, and spacing in a design-system.css file, then build layout and component layers on top. This skill generates the full token structure including light and dark theme variants.

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 this pattern.

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

Use CSS Grid for two-dimensional page layouts like content grids and card arrangements, and Flexbox for one-dimensional alignment within components. The skill's layout specifications define which pattern fits each common section type.

Does this skill write production website code?▼

No, it produces architectural foundations and specifications rather than finished pages. It creates design tokens, layout frameworks, and handoff documentation that developers then implement and polish.

What accessibility requirements does the UX foundation cover?▼

The foundation addresses keyboard navigation with tab order and focus management, semantic HTML with ARIA labels for screen readers, and WCAG 2.1 AA color contrast as a minimum baseline.

Related Skills

Explore More Design & Creative Skills→
zivtechzivtech

copy-planner

Generate structured content briefs covering audience, goals, and success criteria.

Official
Intermediate
shirulotshirulot

ui-design

Define visual systems, color palettes, typography scales, and layout patterns for web UI.

Community
Advanced
flitzrrrflitzrrr
4

ux-design

Conduct user interviews, create personas, and run usability tests.

Community
Intermediate
sevenbelowllcsevenbelowllc

tailwind-design-system

Build scalable design systems with Tailwind CSS v4 and CVA.

Official
Advanced