Agent skill
ui-gen
Generate User Interfaces (Web, CLI, Mobile) using GenUI, HTMX, or TUI patterns.
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/other/other/coding-andreibesleaga-gabbe-10
SKILL.md
UI Generation Skill
Use this skill when the user asks for a User Interface, Dashboard, CLI tool, or Frontend.
1. Paradigm Selection
First, determine the best paradigm based on the User's Stack and needs:
| Scenario | Recommended Paradigm |
|---|---|
| "Modern SaaS", "React", "Dashboard" | Generative UI (React/ShadCN/Tailwind) |
| "Internal Tool", "Go/PHP/Node Backend" | HTMX (Hypermedia-driven) |
| "Dev Tool", "Script", "Server Utils" | TUI (Bubble Tea / Ink) |
| "Quick Prototype", "Data App" | Streamlit / Gradio (Python) |
2. Generative UI Workflow (React/ShadCN)
- Dependencies: Ensure
lucide-react,clsx,tailwind-mergeare installed. - Component: Create a single-file component if possible, or modularize if complex.
- Style: Use Tailwind CSS. Focus on "Vibe Coding" (Dark mode, gradients, glassmorphism).
- Mocking: If backend is missing, mock data inside the component.
3. HTMX Workflow
- Route: Create a backend route (e.g.,
GET /partials/dashboard). - Template: Return only the HTML fragment (no
<html>or<body>unless it's the full page). - Interactivity: Use
hx-get,hx-post,hx-trigger.- Example:
<button hx-post="/update" hx-swap="outerHTML">Save</button>
- Example:
4. TUI Workflow
- Library: Use Bubble Tea (Go) or Ink (Node).
- Model: Define the State (Cursor position, Input value).
- Update: Define the Keypress handlers.
- View: Return the String representation of the UI.
5. Security Checklist
- XSS Prevention: Ensure all user input is escaped (React/Templ do this automatically).
- Validation: Client-side validation is UX, Server-side is Security. Do both.
- Access Control: UI elements should simply not exist if the user lacks permission.
6. Artifact Generation
When generating the UI, create a UI_SPEC.md first if the complexity is high ( > 5 components).
Otherwise, write the code directly.
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?