classey-ui

Implement consistent Classey UI/UX with CSS variables, glassmorphism, and Framer Motion.

Updated Apr 9, 2026

Search Tags:#theming #ui #responsive #glassmorphism #design-system #framer-motion

Ready to run

npx skills add https://github.com/melvinv007/classey_personal_tracker --skill classey-ui

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: classey-ui
Source: https://github.com/melvinv007/classey_personal_tracker/tree/main/.github/skills/classey-ui
Command: npx skills add https://github.com/melvinv007/classey_personal_tracker --skill classey-ui

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Classey UI/UX standards remove inconsistency and guessing by providing a single source of truth for visuals, motion, and theming across the app.

Core Features & Use Cases

Exact CSS variable system and glassmorphism presets to ensure consistent styling across cards, modals, surfaces, and backgrounds.
Framer Motion presets for standard component entrances, micro-interactions, and responsive animations that align with the Classey design language.
Theming and color management using a semester-based accent color system that propagates across the entire UI.

Quick Start

Apply the Classey UI patterns to new components by importing the provided CSS variables, glassmorphism presets, and motion guidelines.

Frequently Asked Questions about classey-ui

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I implement a consistent UI design system with glassmorphism and Framer Motion?▼

To implement a consistent UI design system, apply exact CSS variable values, glassmorphism presets, and Framer Motion animation guidelines across cards, modals, and navigation components to eliminate visual inconsistency.

What is a semester-based accent color system for theming and how does it propagate?▼

A semester-based accent color system is a theming approach that dynamically propagates specific accent colors across the entire UI, ensuring consistent theme and color management throughout all application pages and components.

How do I apply glassmorphism styling to cards and modals using CSS variables?▼

Apply glassmorphism styling to cards and modals by utilizing predefined CSS variable presets, which provide exact values for surfaces and backgrounds to maintain a consistent, translucent visual language across your application.

Does this UI design system work for responsive components and micro-interactions?▼

Yes, the UI design system supports responsive behavior and micro-interactions by providing Framer Motion presets for standard component entrances and responsive animations that align with the overall design language.

Can I use these component patterns for charts and backgrounds without additional dependencies?▼

Yes, you can build UI elements like charts and backgrounds using the provided component patterns and CSS variables without requiring external dependencies, ensuring consistent styling across all surfaces.

Why does my UI theming look inconsistent across different pages and components?▼

UI theming looks inconsistent when lacking a single source of truth for visuals and motion; applying a standardized CSS variable system and glassmorphism presets ensures exact styling propagation across all pages.