skills.rest
Dev-Dennis-040
Dev-Dennis-040COMMUNITY
Explore all skills by this author →
GitHub

design-ux-architect

Define a CSS design system and layout framework for frontend projects.

10|2|Updated Mar 10, 2026
Search Tags:#theming#architecture#accessibility#responsive-grid#css-design-system#developer-handoff#ux-foundation
One-click install
npx skills add https://github.com/Dev-Dennis-040/openclaw-agency-skills --skill design-ux-architect
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-ux-architect
Source: https://github.com/Dev-Dennis-040/openclaw-agency-skills/tree/main/skills/design/design-ux-architect
Command: npx skills add https://github.com/Dev-Dennis-040/openclaw-agency-skills --skill design-ux-architect

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Architects and dev teams often struggle to create scalable frontend foundations when projects grow, leading to inconsistent visuals and brittle code. ArchitectUX provides a disciplined framework to establish solid CSS systems, layout architectures, and UX patterns that scale with teams and products.

Core Features & Use Cases

  • CSS Design System Foundation: variables, tokens, typography scales, spacing, and theming across light/dark modes.
  • Layout Architecture: container/grid systems, responsive patterns, and component hierarchies to enable consistent layouts.
  • Developer Handoff & Documentation: clear specs, naming conventions, and implementation guides to accelerate delivery across teams.
  • Use Case: As a frontend lead, you can bootstrap a new product with a ready-to-use architecture and hands-off guidance for LuxuryDeveloper.

Quick Start

Define a CSS design system and layout framework for your project and begin implementing the architecture using the ArchitectUX starter templates.

Frequently Asked Questions about design-ux-architect

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

FAQPage Schema
How do I create a scalable CSS design system for a growing development team?▼

A scalable CSS design system establishes design tokens, typography scales, and spacing variables to maintain visual consistency. This framework provides layout conventions and naming rules to prevent brittle code as teams expand.

What is a design-token based CSS architecture and when do I need it?▼

A design-token based CSS architecture centralizes visual language variables for light and dark theming. You need this when multiple teams require consistent component styling and a unified responsive layout foundation across a product.

How do I set up a responsive grid and container system for frontend layouts?▼

Setting up a responsive grid system requires defined container conventions and component hierarchies. This framework provides layout architecture patterns and responsive rules to build consistent, scalable frontend structures.

Can I use this CSS framework to document developer handoff for multiple teams?▼

Yes, it supports developer handoff by generating clear implementation guides, component naming conventions, and documentation specs. This accelerates delivery by providing teams with structured architectural guidance.

What is the best way to structure CSS theming for light and dark modes?▼

The best way to structure CSS theming uses a design-token system that enforces variable-driven light and dark modes. This approach ensures consistent visual language and maintainable theme switching across layouts.

Do I need existing UI components to start using this CSS layout architecture?▼

No, you do not need existing components. You can bootstrap a new product using starter templates to define the CSS design system and layout framework before implementing any component architecture.

Related Skills

Explore More Design & Creative Skills→
gouravsingh311gouravsingh311

tailwind-v4

Configure Tailwind v4 design tokens using CSS-first @theme directives.

Community
Advanced
Higashi-KotaHigashi-Kota

styling

Standardize CSS styling with design tokens and grid-first layouts.

Community
Basic
Higashi-KotaHigashi-Kota

ui-component

Build accessible React UI components with design tokens and ARIA patterns.

Community
Advanced
flpbaladaflpbalada
280

code-architecture-tailwind-v4-best-practices

Guide Tailwind v4 component abstraction choices among utilities, CVA, and Tailwind Variants.

Community
Intermediate