ui-architect

Designs UI architecture and defines component hierarchies for legaltech products.

1|Updated Feb 12, 2026
One-click install
npx skills add https://github.com/45black/uk-legal-plugins --skill ui-architect
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ui-architect
Source: https://github.com/45black/uk-legal-plugins/tree/main/skills/ui-architect
Command: npx skills add https://github.com/45black/uk-legal-plugins --skill ui-architect

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Design UI architecture for 45Black legaltech products to improve maintainability, scalability, and cross-team collaboration.

Core Features & Use Cases

  • Define layer separation (Presentation, Interaction, Data Access, Compliance) and guide component hierarchies for new products.
  • Select appropriate design system variants based on user roles and usage patterns (trustees, admins, developers).
  • Produce a living architecture guide to support onboarding, feature work, and redesigns.

Quick Start

Outline the target product, users, and required layers to begin shaping the architecture.

Frequently Asked Questions about ui-architect

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

FAQPage Schema
How do I plan UI architecture for a new legaltech product?

To plan UI architecture for a new legaltech product, define layer separation across Presentation, Interaction, Data Access, and Compliance, then guide component hierarchies and select design system variants based on user roles like trustees or admins.

What is layer separation in UI architecture and when do I need it?

Layer separation in UI architecture divides your product into Presentation, Interaction, Data Access, and Compliance tiers. You need it during new product initiatives or UI refactors to enforce module separation, improve maintainability, and ensure cross-team collaboration.

How do I select a design system variant for different user roles?

Select a design system variant for user roles by analyzing usage patterns for trustees, admins, and developers. Aligning the design system with specific role requirements ensures interface consistency and scalability across complex legaltech products.

Can I use this UI architecture planning process for a large-scale redesign?

Yes, you can use this UI architecture planning process for a large-scale redesign. It produces a living architecture guide that supports onboarding and feature work, applying architectural documentation and design-system alignment to govern the refactor.

What's the best way to document component hierarchy for legaltech applications?

The best way to document component hierarchy for legaltech applications is to produce a living architecture guide. This guide enforces module separation, aligns with your design system choices, and supports ongoing feature work and team onboarding.

Why does my legaltech UI architecture need a dedicated compliance layer?

Your legaltech UI architecture needs a dedicated compliance layer to govern data access and interaction rules effectively. Separating compliance ensures that module boundaries are maintained and regulatory requirements are met during UI refactors or new feature development.