skills.rest
OthmanAdi
OthmanAdiCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

gmira-palette

Derive web color palettes from material references and validate contrast ratios.

Updated Jul 25, 2026
Search Tags:#design#ui#accessibility#tailwind#color#webgl#oklch
One-click install
npx skills add https://github.com/OthmanAdi/gmira --skill gmira-palette
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gmira-palette
Source: https://github.com/OthmanAdi/gmira/tree/main/skills/gmira-palette
Command: npx skills add https://github.com/OthmanAdi/gmira --skill gmira-palette

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill solves the problem of generic, uninspired web design where AI-generated interfaces rely on default color palettes and lack material-based decision-making, leading to inconsistent and low-contrast user experiences.

Core Features & Use Cases

  • Material-Based Palette Derivation: Generates color systems derived from real-world material references rather than category defaults.
  • Contrast & Accessibility Verification: Provides rigorous measurement tools to ensure text and UI elements meet accessibility standards across all viewports.
  • Effect Layer Repair: Identifies and fixes additive glow or saturation issues in WebGL and canvas components that often break intended color schemes.

Quick Start

Use the gmira-palette skill to audit the current color strategy and verify contrast ratios across all five viewports.

Frequently Asked Questions about gmira-palette

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

FAQPage Schema
How do I build a UI color palette from real-world material references instead of default web colors?▼

To build a UI color palette from material references, you derive color systems from real-world materials and validate them using strict contrast measurements. This process ensures visual fidelity and accessibility rather than relying on generic category defaults.

How do I verify color contrast ratios for accessibility across multiple web viewports?▼

You verify color contrast ratios for accessibility by applying rigorous measurement tools to text and UI elements. This ensures your visual design meets accessibility standards consistently across all five viewports.

Can I use OKLCH color space manipulation to fix inconsistent web design themes?▼

Yes, you can use OKLCH color space manipulation to fix inconsistent web design themes. It defines and validates web color systems by deriving palettes from material references and enforcing strict contrast measurements for visual fidelity.

Why does my WebGL component have additive glow or saturation issues breaking the color scheme?▼

WebGL additive glow or saturation issues break the color scheme due to effect layer inaccuracies. You repair these layers by identifying and fixing the additive rendering issues to maintain the intended color strategy and pixel-level design intent.

What is the best way to repair broken UI color schemes in canvas components?▼

The best way to repair broken UI color schemes in canvas components is through effect layer repair. This identifies and fixes additive glow or saturation issues, ensuring the rendered surfaces maintain strict visual fidelity and design intent.

Related Skills

Explore More Design & Creative Skills→
sandrasocialsandrasocial
1

colorize

Apply semantic OKLCH color palettes to grayscale UI mockups with WCAG contrast.

Community
Intermediate
simotasimota
68

Dot

Generate pixel art sprites, tilesets, and animations as SVG, Canvas, Phaser 3, Pillow, or CSS code.

Community
Advanced
NolanPicNolanPic

Frontend Accessibility

Enforce WCAG compliance in frontend UI code with semantic HTML and ARIA.

Community
Basic
nimadorostkarnimadorostkar
25

theming

Designs multi-theme interfaces using OKLCH colors and automated contrast validation.

Community
Advanced