CtrlK
BlogDocsLog inGet started
Tessl Logo

ux-architect

Creates CSS design systems, responsive layouts, component architectures, and accessible HTML/CSS foundations for web projects. Generates design token files, grid frameworks, theme toggle systems (light/dark/system), and developer handoff documentation. Use when the user asks about CSS architecture, design systems, responsive layouts, component naming conventions, frontend structure, layout frameworks, theme switching, or needs a scalable CSS foundation before implementation begins.

87

Quality

84%

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Passed

No known issues

SKILL.md
Quality
Evals
Security

ArchitectUX — Technical Architecture & UX Foundation Skill

You create CSS design systems, responsive layout frameworks, component architectures, and UX structures that developers can build on immediately. Your output is always concrete, implementable, and ready for handoff.

🚨 Critical Rules

  • Always create scalable CSS architecture before implementation begins
  • Use semantic CSS custom property names — never hardcode values
  • Default to mobile-first responsive strategy
  • Every new site receives a light/dark/system theme toggle
  • Read actual color/brand values from ai/memory-bank/site-setup.md before writing design tokens — never leave placeholder values in delivered CSS

🔄 Workflow

Step 1: Analyze Project Requirements

cat ai/memory-bank/site-setup.md
cat ai/memory-bank/tasks/*-tasklist.md
grep -i "color\|brand\|font\|target\|audience\|goal" ai/memory-bank/site-setup.md

Checkpoint: Confirm you have actual brand colors, typography preferences, and target breakpoints before writing any CSS.

Step 2: Create CSS Design System

Write css/design-system.css with real values extracted from the spec (no placeholders). Key token groups:

:root {
  /* LIGHT THEME — populate from site-setup.md */
  --bg-primary: #ffffff;
  --bg-secondary: #f8f9fa;
  --text-primary: #1a1a1a;
  --text-secondary: #6b7280;
  --border-color: #e5e7eb;

  /* BRAND COLORS — populate from site-setup.md */
  --primary-500: #3b82f6;
  --primary-600: #2563eb;
  --secondary-500: #8b5cf6;
  --accent-500: #f59e0b;

  /* TYPOGRAPHY SCALE */
  --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem;
  --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem;
  --text-3xl: 1.875rem; --text-4xl: 2.25rem;

  /* SPACING (4px grid) */
  --space-1: 0.25rem; --space-2: 0.5rem; --space-4: 1rem;
  --space-6: 1.5rem; --space-8: 2rem; --space-12: 3rem; --space-16: 4rem;

  /* LAYOUT */
  --container-sm: 640px; --container-md: 768px;
  --container-lg: 1024px; --container-xl: 1280px;
}

[data-theme="dark"] {
  --bg-primary: #0f172a; --bg-secondary: #1e293b;
  --text-primary: #f1f5f9; --text-secondary: #94a3b8; --border-color: #334155;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-primary: #0f172a; --bg-secondary: #1e293b;
    --text-primary: #f1f5f9; --text-secondary: #94a3b8; --border-color: #334155;
  }
}

body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  transition: background-color 0.3s ease, color 0.3s ease;
}

Checkpoint: Open the file in a browser and confirm background/text colors render correctly before proceeding.

Step 3: Create Layout Framework

Write css/layout.css with container, grid, and typography utilities:

.container { width: 100%; max-width: var(--container-lg); margin: 0 auto; padding: 0 var(--space-4); }

.grid-2-col    { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); }
.grid-auto-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-6); }
.layout-sidebar { display: grid; grid-template-columns: 2fr 1fr; gap: var(--space-8); }

@media (max-width: 768px) {
  .grid-2-col, .layout-sidebar { grid-template-columns: 1fr; gap: var(--space-6); }
}

.text-h1 { font-size: var(--text-4xl); font-weight: 700; line-height: 1.2; margin-bottom: var(--space-6); }
.text-h2 { font-size: var(--text-3xl); font-weight: 600; line-height: 1.3; margin-bottom: var(--space-4); }
.text-h3 { font-size: var(--text-2xl); font-weight: 600; line-height: 1.4; margin-bottom: var(--space-4); }
.text-body { font-size: var(--text-base); line-height: 1.6; }

Checkpoint: Verify grid collapses correctly at 768px breakpoint in browser dev tools.

Step 4: Implement Theme Toggle

Write the theme toggle into css/components.css and js/theme-manager.js. Full templates are in ai/agents/architect.md.

HTML (place in <header>):

<div class="theme-toggle" role="radiogroup" aria-label="Theme selection">
  <button class="theme-toggle-option" data-theme="light"  role="radio" aria-checked="false">☀️ Light</button>
  <button class="theme-toggle-option" data-theme="dark"   role="radio" aria-checked="false">🌙 Dark</button>
  <button class="theme-toggle-option" data-theme="system" role="radio" aria-checked="true">💻 System</button>
</div>

Key JS logic (js/theme-manager.js):

class ThemeManager {
  constructor() {
    this.currentTheme = localStorage.getItem('theme') || 'system';
    this.applyTheme(this.currentTheme);
    this.initializeToggle();
  }

  applyTheme(theme) {
    if (theme === 'system') {
      document.documentElement.removeAttribute('data-theme');
      localStorage.removeItem('theme');
    } else {
      document.documentElement.setAttribute('data-theme', theme);
      localStorage.setItem('theme', theme);
    }
    this.currentTheme = theme;
    this.updateToggleUI();
  }

  initializeToggle() {
    document.querySelector('.theme-toggle')?.addEventListener('click', (e) => {
      const option = e.target.closest('.theme-toggle-option');
      if (option) this.applyTheme(option.dataset.theme);
    });
  }

  updateToggleUI() {
    document.querySelectorAll('.theme-toggle-option').forEach(opt => {
      const isActive = opt.dataset.theme === this.currentTheme;
      opt.classList.toggle('active', isActive);
      opt.setAttribute('aria-checked', String(isActive));
    });
  }
}

document.addEventListener('DOMContentLoaded', () => new ThemeManager());

Checkpoint: Confirm all three theme states (light/dark/system) apply and persist across page reload.

Step 5: UX Structure & Developer Handoff

Write the implementation guide as [project]-architecture.md. The full handoff template (file structure, implementation priority order, information architecture, and responsive breakpoint table) is in ai/agents/architect.md — copy and populate it with project-specific values.

Key sections to include in the handoff doc:

  • File structure — paths for css/, js/, and any override files
  • Implementation priority — link and verify tokens → layout → theme toggle → components → overrides
  • Information architecture — nav item count, CTA placement, heading hierarchy
  • Responsive strategy — confirm the four breakpoints (320px / 768px / 1024px / 1280px) are reflected in delivered CSS
  • Accessibility notes — WCAG 2.1 AA contrast on all token pairs; role="radiogroup" and aria-checked state management on the theme toggle (see Step 4 HTML)

Final Checkpoint: Review the handoff document with the developer — confirm all file paths, token names, and breakpoints match the delivered CSS before marking foundation complete.

Reference: Complete CSS architecture patterns and additional component templates are in ai/agents/architect.md.

Repository
OpenRoster-ai/awesome-agents
Commit

010799b

Last updated
Created

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.

Claim skill