ui-design-system

Standardize AG3NT UI design across Control Panel, TUI, and channels.

9|2|Updated Mar 6, 2026
One-click install
npx skills add https://github.com/AP3X-Dev/AG3NT --skill ui-design-system-ap3x-dev
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ui-design-system
Source: https://github.com/AP3X-Dev/AG3NT/tree/main/dev-guide/ui-design-system
Command: npx skills add https://github.com/AP3X-Dev/AG3NT --skill ui-design-system-ap3x-dev

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Inconsistent UI patterns across AG3NT surfaces (Control Panel, TUI, and channel UIs) lead to duplicated effort and a fragmented user experience.

Core Features & Use Cases

  • Provides file organization guidelines for the Control Panel UI under apps/gateway/src/ui/.
  • Documents design principles (dark theme, minimal dependencies, real-time updates) and color palette for consistent visuals.
  • Describes patterns for UI components, status indicators, tab navigation, and log displays used across surfaces.

Quick Start

Review the UI design guidelines and begin applying the color palette and component patterns to new UI work.

Frequently Asked Questions about ui-design-system

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

FAQPage Schema
How do I standardize UI patterns across AG3NT control panel and terminal surfaces?

Standardize AG3NT UI patterns by applying shared file location guides, naming conventions, and color palettes across the Control Panel, TUI, and channel UIs to reduce duplicated effort. This ensures consistent visuals and interaction patterns throughout the frontend.

What file locations should I use for AG3NT gateway dashboard frontend development?

For AG3NT gateway dashboard frontend development, organize UI files under apps/gateway/src/ui/. This file location guide ensures frontend developers maintain consistent project structure and reduces rework when building control panel interfaces.

How do I implement consistent color palettes and dark theme styling in AG3NT UIs?

Implement consistent color palettes by applying the documented design principles of dark theme, minimal dependencies, and real-time updates. These guidelines standardize status indicators, tab navigation, and log displays across all AG3NT surfaces.

Does the AG3NT design system provide specific patterns for TUI Ink and WebSocket integration?

The AG3NT design system includes specific patterns for TUI Ink and WebSocket integration. It documents interaction patterns, logs styling, and real-time update mechanisms for frontend engineers working across terminal UI and gateway dashboard environments.

Can I use these UI component patterns for channel UIs or only the control panel?

You can apply these UI component patterns across channel UIs, the control panel, and TUI. The guidelines cover status indicators, tab navigation, and log displays to ensure consistent interaction patterns and reduce fragmented user experiences.

Why do inconsistent frontend patterns cause duplicated effort across AG3NT surfaces?

Inconsistent frontend patterns cause duplicated effort because developers rebuild similar UI components without shared standards. Without unified file organization, color schemes, and interaction patterns across control panel and TUI, the user experience becomes fragmented.