gravito-framework

zenith-ui

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

gravito-framework 2 Updated 4mo ago

Resources

3
GitHub

Install

npx skillscat add gravito-framework/gravito/zenith-ui

Install via the SkillsCat registry.

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.