skills.rest
rajyeole6
rajyeole6COMMUNITY
Explore all skills by this author →
GitHub

agency-ux-architect

Generate CSS design systems and responsive layout frameworks for web projects.

Updated Jul 23, 2026
Search Tags:#architecture#frontend#css#responsive#ux#design-system
One-click install
npx skills add https://github.com/rajyeole6/AI-RECRUITER --skill agency-ux-architect-rajyeole6
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: agency-ux-architect
Source: https://github.com/rajyeole6/AI-RECRUITER/tree/main/.agents/skills/design-ux-architect
Command: npx skills add https://github.com/rajyeole6/AI-RECRUITER --skill agency-ux-architect-rajyeole6

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill eliminates architectural decision fatigue and inconsistent design patterns by providing a systematic, developer-ready foundation for web projects.

Core Features & Use Cases

  • CSS Design System: Generates scalable variables for colors, typography, and spacing based on a 4px grid.
  • Layout Framework: Establishes responsive grid and container systems that work across all device types.
  • Developer Handoff: Provides clear, implementable specifications and component templates to bridge the gap between design and code.

Quick Start

Use the agency-ux-architect skill to generate a complete CSS design system and layout framework for a new project based on the provided requirements.

Frequently Asked Questions about agency-ux-architect

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

FAQPage Schema
How do I build a scalable CSS design system for a new web project?▼

To build a scalable CSS design system, generate standardized variables for colors, typography, and spacing using a 4px grid. This establishes a consistent developer-ready foundation that eliminates architectural decision fatigue and ensures consistent component naming across web projects.

What is the best way to standardize responsive layout frameworks across multiple device types?▼

Standardizing responsive layout frameworks requires establishing responsive grid and container systems that adapt across all device types. This creates a systematic UX foundation ensuring consistent information architecture specifications and accessibility compliance throughout the development lifecycle.

How do I create developer handoff documentation that bridges the gap between design and code?▼

Creating developer handoff documentation requires providing clear, implementable specifications and component templates. This bridges the gap between design and code by ensuring consistent component naming and developer-friendly documentation for frontend web development projects.

Can I use a 4px grid system to generate spacing and typography variables for my UX foundation?▼

Yes, you can use a 4px grid system to generate scalable CSS variables for spacing and typography. This approach provides a systematic UX foundation that standardizes web development projects and ensures visual consistency across all responsive layouts.

Why does inconsistent component naming cause issues in frontend CSS architecture?▼

Inconsistent component naming causes architectural decision fatigue and fragmented design patterns in frontend CSS architecture. Standardizing component naming through a formalized design system ensures accessibility compliance and maintains a unified developer experience across the project.

Related Skills

Explore More Design & Creative Skills→
SSiertsemaSSiertsema

scope-statement-writing

Generate a complete project scope statement with boundaries and change protocol.

Community
Intermediate
h4vzzh4vzz
33

Frontend Design

Generate accessible React, Vue, Svelte, or HTML components with design tokens.

Community
Advanced
AshesOfTheUndeadAshesOfTheUndead

paper

Standardize UI design with token-based spacing, color palettes, and font scales.

Community
Intermediate
FortiumPartnersFortiumPartners

styling-with-tailwind

Apply Tailwind CSS 3.x utility classes for responsive UI styling and theme configuration.

Official
Intermediate