# Zenith UI

> Specialized in frontend development with Zenith, Vue 3, and Inertia.js. Trigger this for UI components, page layouts, and styling.

- Skill: `majiayu000/zenith-ui` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add majiayu000/zenith-ui`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/zenith-ui/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/zenith-ui

---


# 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
1. **Layout**: Define the container and grid structure in `src/client/layouts/`.
2. **Components**: Build reusable Vue components.
3. **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.