Does this skill support mobile responsiveness?

Yes, it includes specific breakpoints and mobile-first patterns like hidden sidebars, drawer menus, and responsive grids to ensure a seamless experience across all devices.

How does this skill help with web accessibility?

It automatically implements best practices for focus states, ARIA labels for screen readers, and semantic landmarks to ensure the interface meets WCAG standards.

What is the primary focus of the LMS UI/UX Design skill?

It provides a standardized design system specifically for Learning Management Systems (LMS), focusing on dark mode aesthetics, accessibility, and educational component patterns.

Which frontend framework are the patterns designed for?

The provided component patterns are optimized for Vue.js and use utility-first CSS classes, making them highly compatible with modern frameworks like Nuxt and Tailwind CSS.

LMS UI/UX Design System

Name: LMS UI/UX Design System
Author: fawzymohamed

byfawzymohamed

设计工具

Implements consistent dark-mode UI/UX patterns and design system components tailored for educational platforms and Learning Management Systems.

关于

The LMS UI/UX Design skill provides a comprehensive framework for building modern, accessible, and responsive educational interfaces. It features a curated dark-mode design system including color palettes, typography scales, and standardized spacing. Designed specifically for developers working on learning platforms, it offers ready-to-use patterns for complex layouts like lesson sidebars, interactive quiz cards, and progress visualization dashboards. This skill ensures that your Claude-generated code adheres to best practices for accessibility, mobile responsiveness, and fluid user transitions.

主要功能

Standardized layouts for lesson pages, progress tracking, and dashboards
Reusable Vue component patterns for quizzes and phase navigation
Comprehensive dark-mode design system with standardized color palettes
Mobile-responsive navigation structures and sidebar drawers
0 GitHub stars
Pre-configured accessibility features including ARIA labels and focus states

使用场景

Building responsive, mobile-first dashboards for educational content
Creating accessible quiz components with consistent styling and transitions
Designing interactive lesson pages with integrated progress visualization

关于

主要功能

Standardized layouts for lesson pages, progress tracking, and dashboards
Reusable Vue component patterns for quizzes and phase navigation
Comprehensive dark-mode design system with standardized color palettes
Mobile-responsive navigation structures and sidebar drawers
0 GitHub stars
Pre-configured accessibility features including ARIA labels and focus states

使用场景

Building responsive, mobile-first dashboards for educational content
Creating accessible quiz components with consistent styling and transitions
Designing interactive lesson pages with integrated progress visualization