Agent skill

zenith-ui

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

Stars 163
Forks 31

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

  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.

Didn't find tool you were looking for?

Be as detailed as possible for better results