skills.rest
anavvanzin
anavvanzinCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

agency-ux-architect

Create a CSS design system with tokens, grids, and theming for web projects.

Updated Apr 15, 2026
Search Tags:#theming#architecture#css#handoff#responsive#design-system#ux-foundation
One-click install
npx skills add https://github.com/anavvanzin/Research --skill agency-ux-architect-anavvanzin
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: agency-ux-architect
Source: https://github.com/anavvanzin/Research/tree/main/cowork/integrations/antigravity/agency-ux-architect
Command: npx skills add https://github.com/anavvanzin/Research --skill agency-ux-architect-anavvanzin

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Teams often struggle with inconsistent CSS foundations and architectural guidance, leading to fragmented UX and slower development cycles.

Core Features & Use Cases

  • CSS design system foundations for scalable styling
  • Layout framework and responsive grid patterns
  • Architecture governance and developer handoff documentation
  • Theming support including light/dark modes

Quick Start

Define a CSS design system and layout foundation for your project using ArchitectUX starter templates and implement a system theme toggle for consistent UX across platforms.

Frequently Asked Questions about agency-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 web project?▼

A CSS design system establishes foundational typography, spacing, and responsive grids to ensure consistent UX. It provides developer-ready architecture guidance and design tokens for scalable styling across multiple teams.

How do I set up responsive grids and breakpoints for a new site build?▼

Responsive grids and breakpoints are set up by defining layout framework patterns within the CSS architecture. This establishes a scalable structural foundation that adapts correctly across various device sizes and platforms.

What is the best way to implement light and dark mode theming in CSS?▼

Light and dark mode theming is implemented using a structured CSS design system with defined design tokens. This enables a system theme toggle that maintains consistent visual UX across different platforms.

How do I generate developer handoff documentation for a front-end architecture?▼

Developer handoff documentation is generated by creating architecture governance guidelines alongside the CSS design system. This bridges the gap between project specs and implementable front-end foundations for development teams.

Can I use this CSS architecture approach for an existing component library redesign?▼

Yes, this CSS architecture approach applies to existing component libraries and redesigns. It delivers scalable styling foundations and theming support to resolve fragmented UX without requiring a completely new build.

Related Skills

Explore More Software Engineering Skills→
BekaChkhiroBekaChkhiro
1

planSpec

Convert technical specifications into a detailed PROJECT_PLAN.md with tasks and dependencies.

Community
Advanced
martind751martind751

tailwind-design-system

Build scalable design systems with Tailwind CSS v4 and design tokens.

Community
Advanced
saajunaidsaajunaid

design-system-tokens

Generate and validate design tokens as CSS variables across three-layer architectures.

Community
Intermediate
caiohbfurtadocaiohbfurtado

tailwindcss

Apply Tailwind CSS v4 utility classes and theme variables to style web applications.

Community
Intermediate