What is the UI Architect skill?

It is a specialized Claude Code capability that helps users design structured front-end architectures specifically for UK legaltech applications, focusing on layer separation and component hierarchy.

Does this skill write the actual React code?

It focuses on the architectural planning and documentation phase, providing a detailed structural blueprint that developers can use to build the application correctly from the start.

How does it handle AI compliance?

It integrates mandatory architectural decisions for EU AI Act compliance, including AI transparency badges, human approval steps, and audit logging requirements.

Which design systems are supported?

The skill supports specific 45Black systems including Trustee Edition (client-facing), Saville Clarity (data-dense for daily use), and Saville Core (admin-focused).

Can non-developers use this skill?

Yes, it is specifically designed to help non-coders plan UI structures, separate product layers, and make informed design system choices before development begins.

Legaltech UI Architect

Name: Legaltech UI Architect
Author: 45black

by45black

•

Design Tools

Designs structured component architectures and design system strategies for high-compliance legaltech applications.

This skill streamlines the planning phase of legaltech UI development by guiding users through design system selection, multi-layer architectural mapping, and compliance-driven component hierarchies. Specifically tailored for the 45Black 'Apex' ecosystem, it helps both non-coders and developers define clear data flows between presentation, interaction, and data access layers while ensuring strict adherence to EU AI Act transparency and UK legal standards. By automating the creation of comprehensive UI architecture documentation, it bridges the gap between product vision and technical implementation.

Key Features

01Automated design system selection based on user personas and usage patterns

02Built-in compliance framework for EU AI Act transparency markers and audit trails

031 GitHub stars

04Multi-layer architectural mapping including Presentation, Interaction, Data, and Compliance layers

05Automated generation of standardized UI_ARCHITECTURE.md documentation

06Pre-configured component hierarchies for legal domains like trustees, researchers, and admins

Use Cases

01Defining state management and API proxy patterns for high-security legal research tools

02Restructuring existing UI architecture to improve data density and user efficiency

03Planning the front-end structure for a new pension trustee portal or legal dashboard

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add 45black/uk-legal-plugins ui-architect

For use in Claude.ai and ChatGPT

Key Features

01Automated design system selection based on user personas and usage patterns

02Built-in compliance framework for EU AI Act transparency markers and audit trails

031 GitHub stars

04Multi-layer architectural mapping including Presentation, Interaction, Data, and Compliance layers

05Automated generation of standardized UI_ARCHITECTURE.md documentation

06Pre-configured component hierarchies for legal domains like trustees, researchers, and admins

Use Cases

01Defining state management and API proxy patterns for high-security legal research tools

02Restructuring existing UI architecture to improve data density and user efficiency

03Planning the front-end structure for a new pension trustee portal or legal dashboard