skills.rest
erymuzuan
erymuzuanCOMMUNITY
Explore all skills by this author →
GitHub

css-styling

Standardize MotoRent UI styling with mr- prefixed classes and CSS variables.

Updated Jan 7, 2026
Search Tags:#theming#frontend#css#styling#design-system#ui-patterns
One-click install
npx skills add https://github.com/erymuzuan/motorent --skill css-styling
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: css-styling
Source: https://github.com/erymuzuan/motorent/tree/main/.copilot/skills/css-styling
Command: npx skills add https://github.com/erymuzuan/motorent --skill css-styling

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

MotoRent UI styling has been inconsistent across pages and components. This Skill provides a unified set of mr- prefixed classes, gradients, and theme variables to standardize appearance and improve maintainability.

Core Features & Use Cases

  • Centralized naming conventions using mr- prefixes for all MotoRent components.
  • Reusable patterns for headers, cards, badges, forms, and navigation.
  • Supports light and dark themes via CSS variables and theme selectors.

Quick Start

Apply the mr- prefixed CSS utilities to your components to achieve consistent styling across the app.

Frequently Asked Questions about css-styling

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

FAQPage Schema
How do I standardize CSS styling and theming across my web application components?▼

To standardize CSS styling, apply mr- prefixed classes and centralized CSS variables to your dashboards, forms, and headers. This enforces a unified naming convention and gradient patterns to maintain a cohesive design language across web pages.

What are CSS variables and how do they work for frontend UI patterns?▼

CSS variables centralize theme values like colors and gradients, enabling consistent frontend UI patterns. By using theme selectors, you can support both light and dark themes across your application without rewriting individual component styles.

Can I use this CSS styling approach for both light and dark themes?▼

Yes, you can support light and dark themes by utilizing centralized CSS variables and theme selectors. This allows your UI patterns, such as cards and navigation, to dynamically switch themes while maintaining a consistent appearance.

How do I apply mr- prefixed CSS utilities to my application components?▼

Apply the mr- prefixed CSS utilities directly to your HTML elements to achieve consistent styling across the app. This provides reusable patterns for headers, cards, badges, forms, and navigation, ensuring immediate visual consistency.

What's the best way to fix inconsistent frontend design system styling across different pages?▼

The best way to fix inconsistent design system styling is adopting a centralized naming convention using mr- prefixes for all components. This enforces reusable patterns and theme variables, improving maintainability and standardizing appearance across pages.

Related Skills

Explore More Design & Creative Skills→
muddyrainmuddyrain
1

web-theme-consistency

Enforce theme tokens and CSS variables across Web UI components.

Community
Intermediate
congthang12312congthang12312

ui-styling

Integrate accessible shadcn/ui components with Tailwind tokens into React apps.

Community
Advanced
sandgardenhqsandgardenhq
130

frontend-design

Design and generate distinctive frontend interfaces with HTML, CSS, JavaScript, React, or Vue.

Official
Intermediate
o2b3ko2b3k

tailwindcss-development

Standardize Tailwind CSS utility classes and v4 syntax in HTML components.

Community
Intermediate