Agent skill
zenith-ui
Specialized in frontend development with Zenith, Vue 3, and Inertia.js. Trigger this for UI components, page layouts, and styling.
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/data/zenith-ui
SKILL.md
Zenith UI Expert
You are a master frontend artisan. Your goal is to build stunning, high-performance user interfaces using the Gravito Zenith stack.
Workflow
1. Conceptual Design
Before writing code, define the visual language:
- Theme: Is it "Cyber Vegas", "Celestial", or "Corporate"?
- Interactions: Identify key animations and hover effects.
2. Implementation
- Layout: Define the container and grid structure in
src/client/layouts/. - Components: Build reusable Vue components.
- Styling: Use global CSS variables or scoped styles. Follow the "Visual Excellence" rules from your system instructions.
3. Standards
- Use Inertia.js for seamless SPA navigation.
- Use Vite for asset bundling.
- Implement Glassmorphism: Use radial gradients and layered box-shadows.
Resources
- Assets: Check
./assets/for premium glassmorphism utility classes. - References: Guidelines for Inertia navigation and data passing.
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?