$npx -y skills add andreibesleaga/GABBE --skill ai --agent claude-code
Installs into .claude/skills of the current project.
Are you the author of Ai?
Add the live security badge to your README. It updates with every re-scan.
[](https://www.skillsdirectory.com/skills/andreibesleaga-gabbe-250420c1)
---
name: agent-ui
description: Build specialized user interfaces for interacting with Agents
triggers: [build agent ui, create tracing dashboard, implement agent front-end]
tags: [ai]
context_cost: low
---
# agent-ui
## Goal
Create specialized, responsive, and intuitive UI elements for tracing, visualizing, and interacting with AI agents.
## Steps
1. **Component Design**: Design UI components (e.g., using ShadCN) to visualize agent thoughts, tools, and actions.
2. **State Connection**: Wire components to the backend agent state or streaming endpoints.
3. **UX Enhancement**: Add micro-animations to indicate agent "thinking" or "executing" states.
4. **Verification**: Verify that the UI flawlessly parses and renders unstructured or partially streamed markdown / JSON.
## Security & Guardrails
### 1. Skill Security
- **XSS Prevention**: Vigorously encode all agent output before rendering it in the UI, as LLM responses can contain malicious payloads.
- **Markdown Sandbox**: Ensure the markdown parser disables executable scripts or insecure HTML tags.
### 2. System Integration Security
- **Access Control**: Hide administrative agent actions (e.g., "approve PR", "deploy") behind rigorous user authentication/RBAC.
- **Secret Masking**: The UI must automatically detect and mask sensitive data (like API keys) that the agent might accidentally log or stream.
### 3. LLM & Agent Guardrails
- **Hallucinated Actions**: The UI must not blindly execute client-side functions suggested by the LLM without human confirmation.
- **Status Transparency**: Ensure the UI clearly distinguishes between "Agent generated this" and "Human authored this" for clear accountability.
