ui-ux-architect

Generate implementation-ready UI behavioral specifications with interaction states and accessibility requirements.

Updated Jun 24, 2026

Search Tags:#ui #accessibility #specification #interaction design #ux #behavioral blueprint

Ready to run

npx skills add https://github.com/mostafa-ismail-2004/codex-plugin --skill ui-ux-architect-mostafa-ismail-2004

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: ui-ux-architect
Source: https://github.com/mostafa-ismail-2004/codex-plugin/tree/main/skills/ui-ux-architect
Command: npx skills add https://github.com/mostafa-ismail-2004/codex-plugin --skill ui-ux-architect-mostafa-ismail-2004

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams turn vague interface ideas into precise behavioral specifications, reducing ambiguity before implementation begins and preventing costly rework.

Core Features & Use Cases

Interaction Blueprints: Defines component states, transitions, and feedback for interactive UI elements.
Visual and Information Structure: Organizes layout hierarchy, content priority, and responsive behavior for pages and components.
Accessibility Contract: Specifies ARIA roles, keyboard navigation, focus management, and screen reader behavior so the design is implementation-ready.
Use Case: A product team can use this Skill to document how a settings panel should open, behave in loading and error states, and remain accessible across keyboard and assistive technologies.

Quick Start

Ask for a detailed UI specification for your feature, including interaction states, layout structure, and accessibility requirements.

Frequently Asked Questions about ui-ux-architect

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

FAQPage Schema

How do I create a behavioral specification for UI components before coding?▼

A UI behavioral specification maps interaction states, transitions, and feedback for interactive elements before implementation. This process defines visual hierarchy, layout structure, and accessibility contracts to reduce ambiguity and prevent costly rework.

What is a UI accessibility contract and how does it handle keyboard navigation?▼

A UI accessibility contract specifies ARIA roles, keyboard navigation, focus management, and screen reader behavior. It ensures interface designs remain implementation-ready and accessible across assistive technologies during component design and UX planning.

How do I document interaction states and transitions for a settings panel?▼

Documenting interaction states for a settings panel requires mapping how the UI opens, behaves in loading and error states, and manages transitions. This behavioral blueprint organizes content priority and responsive behavior for implementation.

When do I need to define visual hierarchy and responsive behavior for page flows?▼

You need to define visual hierarchy and responsive behavior for page flows during UX planning before any code is written. This organizes layout structure and content priority, ensuring the interface has clear information structure and precise interaction blueprints.

Can I use this approach to design UX flows without writing any code?▼

Yes, you can design UX flows without writing code by producing implementation-ready behavioral specifications. This approach requires explicit mapping of states, transitions, keyboard navigation, focus handling, and screen reader semantics before development begins.

What is the best way to turn vague interface ideas into precise UX specifications?▼

The best way to turn vague interface ideas into precise UX specifications is to map explicit interaction states, visual hierarchy, and accessibility requirements. This reduces ambiguity before implementation begins and prevents costly rework during development.