UX Architect

Define reusable CSS architecture and UX foundations for frontend development.

Updated Apr 16, 2026
One-click install
npx skills add https://github.com/jc180105/.opencode --skill ux-architect-jc180105
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: UX Architect
Source: https://github.com/jc180105/.opencode/tree/main/.opencode/skills/design-ux-architect
Command: npx skills add https://github.com/jc180105/.opencode --skill ux-architect-jc180105

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Addresses the need for scalable CSS architectures and UX foundations to guide development.

Core Features & Use Cases

  • CSS design system scaffolding and tokenization for consistent styling across projects.
  • Layout framework patterns and responsive grid systems for mobile-first development.
  • Developer handoff documentation to ensure smooth transition from design to implementation.
  • Use Case: When starting a new frontend project, ArchitectUX provides a ready-to-use CSS baseline and architectural guidelines.

Quick Start

Define a reusable CSS architecture and UX foundation to guide development.

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 scalable CSS architecture and design system for a new frontend project?

To create a scalable CSS architecture, you define reusable design tokens, layout frameworks, and responsive grid systems. This UX foundation provides a ready-to-use CSS baseline and architectural guidelines to ensure consistent styling across projects.

What is a developer handoff document for frontend architecture and UX design?

A developer handoff document is a formal deliverable that ensures a smooth transition from design to implementation. It provides clear guidelines covering the design system, layout framework, component patterns, and accessibility baselines for frontend developers.

How do I set up responsive grids and accessibility baselines in a frontend layout system?

You set up responsive grids and accessibility baselines by applying mobile-first layout framework patterns within your CSS architecture. This establishes a structured UX foundation that enforces consistent responsiveness and accessibility compliance across the project.

Does this CSS design system scaffolding work for any frontend project scale?

Yes, the CSS design system scaffolding is designed for scalable frontend initiatives. It provides reusable tokenization and architectural guidelines that adapt to various project scales, ensuring consistent styling and a standardized layout framework.

What is the best way to tokenize CSS components for a formal design system?

The best way to tokenize CSS components is through design system scaffolding. This process defines reusable design tokens that standardize styling attributes, ensuring a consistent UX foundation and seamless developer handoff.

Why do I need a formal UX foundation before starting frontend development?

You need a formal UX foundation to guide development with scalable CSS architectures. It establishes necessary design tokens, responsive layout systems, and accessibility baselines upfront, preventing inconsistent styling and structural issues later.