skills.rest
melvinv007
melvinv007COMMUNITY
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/melvinv007/classey_personal_tracker --skill classey-ui
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
dylantarredylantarre
38

animation-principles

Map Disney's 12 animation principles to UI motion guidelines.

Community
Basic
cedriczielcedricziel
6

ux-principles

Codify accessible web UI guidelines for server-rendered templates and ARIA usage.

Community
Intermediate
danghungtb26danghungtb26
3

frontend-design-patterns

Decompose UI screens into reusable components with atomic design and API cores.

Community
Basic
HouseGarofaloHouseGarofalo
3

tailwind-ui

Guide Tailwind CSS utility-first styling for responsive web UI development.

Official
Intermediate