Agent skill
frontend
UI design guidelines for Kubani web interfaces. Use when building or reviewing web components, pages, or the Kubani dashboard.
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/other/other/frontend-x-mckay-kubani
SKILL.md
Frontend Development
Guidelines for building Kubani web interfaces.
Tech Stack
- Framework: Next.js (React)
- UI: Tailwind CSS, Radix UI primitives
- State: React Query for server state
- Location:
ui/
Design Principles
- Distinctive design: Avoid generic "AI slop" aesthetics — no default Inter/Roboto, no cliched purple gradients
- Bold choices: Pick a clear aesthetic direction and commit to it
- Typography: Choose distinctive fonts that match the context
- Motion: Use CSS animations and transitions for micro-interactions
- Accessibility: Follow WCAG 2.1 AA guidelines
Kubani Dashboard Components
The main UI provides:
- Agent monitoring (status, health, versions)
- Skill browser and management
- Learning visualization (critic evaluations, reflections)
- Deployment management
- Temporal workflow visibility
Guidelines
When building frontend components:
- Match existing patterns in
ui/ - Use Tailwind utility classes consistently
- Keep components small and composable
- Use server components where possible (Next.js)
- Test with React Testing Library
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?