This skill should be used when building web applications where an AI agent dynamically generates HTML UI, using the hexagonal/ports-and-adapters architecture with HTMX for interactivity and MCP tools for data operations.
View on GitHubFebruary 1, 2026
Select agents to install to:
npx add-skill https://github.com/JoshuaOliphant/claude-plugins/blob/main/plugins/hexagonal-agents/skills/hexagonal-agents/SKILL.md -a claude-code --skill hexagonal-agentsInstallation paths:
.claude/skills/hexagonal-agents/# Hexagonal Agent Application Skill Build web applications where an AI agent serves as the UI layer, dynamically generating HTML in response to user messages. This architecture combines the hexagonal (ports-and-adapters) pattern with the Claude Agent SDK. --- ## Philosophy This skill applies the **message-passing paradigm** from Smalltalk and object-oriented programming to AI agents. In this model, the agent is a "prompt object" that receives semantic messages from users and responds with appropriate behavior—in this case, generating UI. **Key Principles:** 1. **Semantic Late Binding**: The agent interprets user intent at runtime, choosing which tools to call and what UI to generate. This provides flexibility traditional code cannot match. 2. **Separation of Concerns**: Tools handle data operations (CRUD), the agent handles presentation logic (generating HTML), and the HTTP adapter handles transport (FastAPI/HTMX). 3. **Hexagonal Architecture**: The agent sits at the center, with ports (tool interfaces) connecting to adapters (MCP servers, HTTP endpoints). This makes testing and evolution straightforward. 4. **Single Source of Truth**: The skill file defines the agent's entire UI vocabulary. When you want to change behavior, you modify the skill—not scattered code. --- ## Architecture Overview ``` ┌─────────────────────────────────────────────────────────────┐ │ Browser │ │ ┌─────────────────────────────────────────────────────┐ │ │ │ Base HTML Template (static shell) │ │ │ │ ┌─────────────────────────────────────────────┐ │ │ │ │ │ #content (HTMX swap target) │ │ │ │ │ │ ← Agent-generated HTML goes here │ │ │ │ │ └─────────────────────────────────────────────┘ │ │ │ │ ┌─────────────────────────────────────────────┐ │ │ │ │ │ Input form: hx-post="/agent" │ │ │ │ │ └─────────────────────────────