# Mayrlabs Internal UI Styling

> Extracted UI / Styling standards from MayR Labs GEMINI.md Use when this capability is needed.

- Skill: `tomevault-io/mayrlabs-internal-ui-styling` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/mayrlabs-internal-ui-styling`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/mayrlabs-internal-ui-styling/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/mayrlabs-internal-ui-styling

---


# MayR Labs Internal: UI / Styling Rules

- ❌ No hardcoded colours:
  - `bg-white`, `text-gray-500` → **banned**
- ✅ Use semantic tokens:
  - `bg-primary`, `text-foreground`, `bg-card`
- Theme must be **centralised and reusable**

> If your design system can’t scale, your product can’t scale.

---
> Source: [MayR-Labs/skills](https://github.com/MayR-Labs/skills) — distributed by [TomeVault](https://tomevault.io).
<!-- tomevault:4.0:skill_md:2026-05-23 -->