skills.rest
basmawebinfo-hub
basmawebinfo-hubCOMMUNITY
Explore all skills by this author →
GitHub

UX Architect

Translates requirements into CSS architecture, layout systems and implementation-ready UX foundation for websites/apps.

Updated Jun 14, 2026
Search Tags:#responsive design#design tokens#component architecture#developer handoff#ux architecture#theme toggle#css system
One-click install
npx skills add https://github.com/basmawebinfo-hub/lover-diet-center --skill ux-architect-basmawebinfo-hub
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: UX Architect
Source: https://github.com/basmawebinfo-hub/lover-diet-center/tree/main/.opencode/skills/design-ux-architect
Command: npx skills add https://github.com/basmawebinfo-hub/lover-diet-center --skill ux-architect-basmawebinfo-hub

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams turn vague product or visual requirements into a clear technical UX foundation that developers can implement with confidence. It reduces architectural guesswork by defining design tokens, layout systems, responsive behavior, accessibility expectations, and component structure before UI buildout begins.

Core Features & Use Cases

  • CSS System Design: Establishes semantic variables for color, spacing, typography, containers, and theming so interfaces stay consistent and maintainable.
  • Layout & Component Architecture: Defines responsive grids, container rules, component hierarchy, naming conventions, and implementation order to prevent front-end rework.
  • Theme & Accessibility Foundation: Requires light, dark, and system theme support while outlining keyboard navigation, visual hierarchy, and WCAG-aware baseline patterns.
  • Use Case: When a team has a project brief and task list but no front-end structure, this Skill creates the UX architecture and developer handoff needed to build a polished site without ad hoc CSS decisions.

Quick Start

Ask UX Architect to turn your project brief into a responsive CSS system, layout framework, information architecture, and developer-ready implementation guide.

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 responsive CSS system with design tokens for a new project?▼

To create a responsive CSS system with design tokens, define semantic variables for color, spacing, typography, and containers. This establishes a consistent, maintainable front-end foundation that prevents ad hoc CSS decisions during UI buildout.

What is the best way to structure component architecture for developer handoff?▼

The best way to structure component architecture for developer handoff is to define responsive grids, container rules, component hierarchy, and naming conventions. This prevents front-end rework by providing implementation-ready structure before coding begins.

How do I set up light, dark, and system theme support for a web application?▼

To set up light, dark, and system theme support, establish semantic design tokens that respond to theme toggles. This requires outlining accessibility-aware interaction patterns and visual hierarchy to ensure consistent behavior across system themes.

Can I use Grid and Flexbox layouts for accessible front-end architecture?▼

Yes, you can use Grid and Flexbox layouts for accessible front-end architecture. Define responsive grids and container rules while outlining keyboard navigation, visual hierarchy, and WCAG-aware baseline patterns to ensure accessible interaction.

When do I need a UX architecture foundation before building a website?▼

You need a UX architecture foundation before building a website when you have a project brief but lack front-end structure. It translates vague requirements into technical layout systems, component boundaries, and information architecture to guide development.

Does establishing a CSS system require existing repository structure guidance?▼

No, establishing a CSS system does not require existing repository structure guidance. The process generates repository structure guidance, layout systems, and implementation-ready structure directly from your project brief and task list.

Related Skills

Explore More Design & Creative Skills→
TrecekTrecek
1

plan-arc

Propose a target architecture with components, boundaries, and diagrams.

Community
Advanced
agnesk92agnesk92
5

frontend-design

Generates frontend interfaces with HTML/CSS/JS code and design tokens for given UI requirements.

Community
Advanced
AshesOfTheUndeadAshesOfTheUndead

lingo

Standardize design system implementation with semantic tokens and WCAG 2.2 AA compliance rules.

Community
Intermediate
GACLoveGACLove
2

tailwind-design-system

Generate Tailwind CSS v4 design system assets with @theme tokens and CVA patterns.

Community
Intermediate