skills.rest
OntoLedgy
OntoLedgyOFFICIAL
Explore all skills by this author →
GitHub

ui-architect

Enforce frontend architecture guardrails for UI design and review.

Updated Aug 27, 2026
Search Tags:#accessibility#design-system#frontend-design#component-architecture#ui-architecture#data-visualisation#ux-journeys
One-click install
npx skills add https://github.com/OntoLedgy/ol_ai_context_library --skill ui-architect-ontoledgy
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-architect
Source: https://github.com/OntoLedgy/ol_ai_context_library/tree/main/skills/ui-architect
Command: npx skills add https://github.com/OntoLedgy/ol_ai_context_library --skill ui-architect-ontoledgy

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill eliminates the risk of inconsistent, inaccessible, or poorly structured frontend architectures that lead to technical debt, poor user experience, and non-compliant interfaces. It extends the base software-architect skill with frontend-specific guardrails, ensuring UI components are fully decoupled from domain logic, UX journeys include explicit error paths and state preservation, and WCAG 2.2 AA accessibility requirements are baked into design rather than added as an afterthought.

Core Features & Use Cases

  • Component Architecture Pattern Selection: Choose and document the appropriate pattern (Atomic Design, Feature-Sliced Design, or Smart/Dumb) for your project, with clear rationale and enforcement of domain logic separation from UI components.
  • UX Journey Design for Process-Driven Flows: Map end-to-end user journeys for common frontend workflows (document upload, pipeline kick-off, results review) with explicit entry/exit states, error paths, progress indicators, and backward navigation state preservation.
  • Data Visualisation Strategy: Select chart types aligned to user questions, enforce a single chart library per application, and design real-time data update architectures with batching and reconnection strategies.
  • Design System and ol_ui_library Alignment: Audit existing component libraries to avoid redundant custom component builds, follow Atomic Design hierarchy for new library contributions, and enforce design token usage for consistent theming.
  • Accessibility Architecture: Embed WCAG 2.2 AA and POUR framework requirements into the design phase, including keyboard navigation paths, colour contrast rules, and screen reader compatibility for all user-facing surfaces.
  • Use Case: For a new document processing product, use this Skill to define the component architecture, map the upload and results review journeys, select a chart library for pipeline metrics, and ensure all interfaces meet accessibility standards before implementation begins.

Quick Start

Use the ui-architect skill to design the frontend architecture for the new customer onboarding portal, including component pattern selection, upload journey mapping, and WCAG 2.2 AA accessibility requirements.

Frequently Asked Questions about ui-architect

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

FAQPage Schema
How do I design a frontend architecture that meets WCAG 2.2 AA accessibility standards?▼

Design accessible frontend architecture by embedding WCAG 2.2 AA and POUR framework requirements directly into the design phase, including keyboard navigation paths, colour contrast rules, and screen reader compatibility for all user-facing surfaces.

What is the best way to decouple domain logic from UI components?▼

Decouple domain logic from UI components by selecting a structured component architecture pattern like Atomic Design, Feature-Sliced Design, or Smart/Dumb, enforcing strict separation guardrails during solution design and review.

How do I map UX journeys for process-driven interfaces with explicit error paths?▼

Map UX journeys for process-driven interfaces by defining end-to-end user workflows with explicit entry and exit states, error paths, progress indicators, and backward navigation state preservation.

How do I select a single chart library for data visualisation architecture?▼

Select a single chart library for data visualisation architecture by aligning chart types to specific user questions and enforcing a one-library-per-application rule to ensure consistent real-time data update architectures with batching and reconnection strategies.

Can I use this to audit an existing component library for design system alignment?▼

Yes, you can audit existing component libraries to avoid redundant custom builds, enforce Atomic Design hierarchy for new contributions, and mandate design token usage for consistent theming and design system alignment.

When should I not use a structured UI architecture pattern for frontend design?▼

Avoid structured UI architecture patterns when building simple, static web pages that do not require complex state preservation, process-driven UX journeys, or strict WCAG 2.2 AA accessibility compliance.

Related Skills

Explore More Software Engineering Skills→
shiroginshirogin
1

business-context

Capture project identity, principles, stakeholders, boundaries, and success criteria.

Community
Advanced
Bbeierle12Bbeierle12
8

form-accessibility

Implement WCAG 2.2 AA form accessibility patterns in React/TypeScript projects.

Community
Basic
apexradiusapexradius

a11y-check

Audit web content accessibility against WCAG 2.2 AA standards.

Official
Advanced
ruskibeatsruskibeats

zoom-out

Summarize software module interactions for high-level system architecture review.

Community
Intermediate