About zenith-ui
zenith-ui is a frontend development skill for building interfaces with the Gravito Zenith stack. It guides visual planning and implementation with Vue components, Inertia.js, and Vite.
Key features
- 01Plan visual themes and interactions
- 02Structure layouts and grids
- 03Build reusable Vue components
- 04Style with CSS variables or scoped styles
- 05Use Inertia.js and Vite
- 06Apply glassmorphism styling
Use cases
- 01Planning an interface’s visual language
- 02Building reusable Vue-based UI
- 03Setting up SPA navigation and asset bundling
Install
Copy the command and run it in a terminal.
$
npx skills add https:/After installing, type/zenith-uiin Claude Code to confirm it loaded.
Bundled files
References and scripts installed along with SKILL.md.
assets/.keepreferences/.keepscripts/.keepDetails
From the project READMEZenith 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.
Comments
Markdown supported