skills.rest
GuyErreich
GuyErreichCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

ui-architecture

Design reusable UI architectures with component libraries and responsive variants.

Updated Mar 3, 2026
Search Tags:#design#ui#architecture#frontend#react#pattern#componentization
One-click install
npx skills add https://github.com/GuyErreich/PersonalWebsite --skill ui-architecture-guyerreich
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-architecture
Source: https://github.com/GuyErreich/PersonalWebsite/tree/main/.github/skills/ui-architecture
Command: npx skills add https://github.com/GuyErreich/PersonalWebsite --skill ui-architecture-guyerreich

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Designing and maintaining large UI codebases often leads to duplication, inconsistent patterns, and brittle layouts across responsive variants. This Skill provides a blueprint to create reusable primitives, enforce a shared architecture, and coordinate wrappers for desktop/mobile variants.

Core Features & Use Cases

  • Reuse-first approach: search for existing primitives before creating new ones to minimize duplication.
  • Abstraction patterns: organize common shells, hooks, and wrappers to compose features without duplicating logic.
  • Responsive architecture: structure UI with desktop/mobile wrappers and a section-shell layout to ensure consistent behavior across viewports.

Quick Start

Audit an existing UI module and extract reusable primitives into a common/ folder, then add desktop/mobile wrappers to support responsive variants.

Frequently Asked Questions about ui-architecture

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

FAQPage Schema
How do I design scalable UI architecture for a large frontend codebase?▼

Design scalable UI architecture by extracting reusable base primitives into a common folder and enforcing strict section-shell layout contracts to eliminate duplication and ensure consistent responsive behavior across desktop and mobile variants.

What is the best way to manage responsive layout variants in React without duplicating components?▼

Manage responsive layout variants by structuring your UI architecture with dedicated desktop and mobile wrappers. This section-shell approach coordinates responsive variant boundaries without duplicating component logic.

How do I stop UI component duplication when building a frontend component library?▼

Stop UI component duplication by applying a reuse-first approach that searches for existing primitives before creating new ones, organizing common shells and hooks to compose features without reinventing logic.

Does this UI architecture pattern work for projects requiring multi-version UI variants?▼

Yes, this UI architecture pattern explicitly supports multi-version UI variants. It coordinates section wrappers and responsive variant boundaries to maintain consistency across different viewports and project versions.

Related Skills

Explore More Software Engineering Skills→
ricablericable
1

Claude Flow Shared

Provide shared types, events, interfaces, and helper functions for Claude Flow modules.

Community
Intermediate
imkdwimkdw
1

Frontend Responsive

Implement Tailwind CSS v3 breakpoint-driven responsive UI layouts for Next.js applications.

Community
Intermediate
LuisSambranoLuisSambrano
7

wagmi

Integrate Celo blockchain wallet connections and contract interactions in React apps.

Community
Intermediate
naviktnavikt
1

aksel-spacing

Build responsive layouts using Aksel v8+ spacing tokens and layout primitives.

Official
Intermediate