Can I customize the design system of the generated UI?

Yes, the UI design system, including Tailwind CSS classes and component patterns, is defined within a single skill markdown file that you can customize to match your brand.

How does the agent interact with my application data?

The agent uses the Model Context Protocol (MCP) to call tools defined in your Python code, performing structured CRUD operations and retrieving JSON data to inform UI generation.

What is the primary benefit of the hexagonal architecture in this skill?

It decouples the AI agent's presentation logic from data operations (ports and adapters), making the application significantly more maintainable, testable, and flexible to architectural changes.

Do I need to write custom JavaScript for interactivity?

No, this skill leverages HTMX to handle interactive elements like form submissions and partial updates directly via HTML attributes, reducing the need for client-side scripting.

Hexagonal Agent UI Builder

Name: Hexagonal Agent UI Builder
Author: JoshuaOliphant

byJoshuaOliphant

•

디자인 도구

Constructs dynamic web applications where AI agents serve as the UI layer using hexagonal architecture and HTMX.

This skill empowers developers to build sophisticated web applications by positioning a Claude-powered agent as the central UI generator. By implementing a hexagonal (ports-and-adapters) architecture, it decouples data operations from presentation logic, allowing the agent to interpret user intent at runtime and generate interactive HTML components. Integrated with HTMX for seamless partial page updates and MCP tools for structured data management, it provides a robust framework for creating highly flexible, message-passing based applications that are easy to test and evolve.

주요 기능

01Structured Model Context Protocol (MCP) tool support for data operations.

02Native HTMX integration for reactive partial page updates without complex JavaScript.

03Dynamic HTML UI generation based on real-time user intent.

044 GitHub stars

05Hexagonal architecture (ports-and-adapters) for clean separation of concerns.

06Centralized UI vocabulary management via a single, modifiable skill file.

사용 사례

01Rapidly prototyping interactive admin dashboards or data-driven internal tools.

02Building AI-first applications where the interface adapts dynamically to complex user queries.

03Implementing clean, testable architectures for backend-driven frontend development.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add joshuaoliphant/claude-plugins hexagonal-agents

For use in Claude.ai and ChatGPT

Download Skill