Agent-Skills.md

Agent Skills: Zenith UI Expert

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

UncategorizedID: gravito-framework/gravito/zenith-ui

Repository

gravito-framework/gravito
gravito-framework
2

Install this agent skill to your local

pnpm dlx add-skill https://github.com/gravito-framework/gravito/tree/HEAD/packages/scaffold/templates/skills/zenith-ui

Skill Files

Browse the full folder contents for zenith-ui.

Download Skill

Loading file tree…

packages/scaffold/templates/skills/zenith-ui/SKILL.md

Skill Metadata

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

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.