skills.rest
open-mercato
open-mercatoOFFICIAL
Explore all skills by this author →
WebsiteGitHub

om-ds-guardian

Enforces design system compliance across Open Mercato UI code through scanning, migration, and review.

1.7k|382|Updated Sep 10, 2025
Search Tags:#Tailwind#Frontend#semantic tokens#Design system#UI compliance#Code review#Code Migration
One-click install
npx skills add https://github.com/open-mercato/open-mercato --skill om-ds-guardian
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: om-ds-guardian
Source: https://github.com/open-mercato/open-mercato/tree/main/.ai/skills/om-ds-guardian
Command: npx skills add https://github.com/open-mercato/open-mercato --skill om-ds-guardian

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

Frontend codebases drift from their design system over time: hardcoded Tailwind colors, arbitrary text sizes, raw HTML form controls, and missing empty or loading states accumulate across modules. This Skill detects, migrates, and prevents those violations in Open Mercato projects.

Core Features & Use Cases

  • Violation Analysis & Health Reports: Scan modules for hardcoded status colors, arbitrary typography, inline SVGs, raw fetch calls, and missing EmptyState/LoadingMessage coverage, with per-module rankings and delta tracking against previous runs.
  • Automated Migration: Run codemod scripts to convert hardcoded colors to semantic tokens and arbitrary text sizes to the typography scale, plus guided recipes for replacing raw HTML inputs, selects, and textareas with DS primitives.
  • DS-Compliant Scaffolding & Review: Generate list, create, and detail pages from templates that include StatusBadge, EmptyState, apiCall, and i18n, then review code or PRs with a scored compliance checklist.
  • Use Case: A developer asks to migrate the customers module to the design system; the Skill scans it, produces a prioritized plan, runs the color and typography codemods, verifies with a build, and reports the health delta.

Quick Start

Ask the agent to analyze the customers module for design system violations and propose a migration plan.

Frequently Asked Questions about om-ds-guardian

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

FAQPage Schema
How do I migrate hardcoded Tailwind colors to semantic design tokens?▼

Run the ds-migrate-colors.sh script against the module path to convert classes like text-red-600 to text-status-error-text automatically. Then review the diff manually for edge cases such as solid button backgrounds, which map to bg-destructive instead.

How do I check design system compliance in a Next.js codebase?▼

Run the ds-health-check.sh script to get counts of hardcoded colors, arbitrary text sizes, inline SVGs, and empty/loading state coverage per module. For single modules, use the ANALYZE capability which greps for each violation class and reports findings by severity.

What should replace raw HTML input and select elements in a design system?▼

Replace raw inputs with the Input primitive, selects with the Select family, textareas with Textarea, and checkboxes with CheckboxField. The token-mapping reference provides before-and-after diff recipes, including rules like never using an empty-value SelectItem.

Does the color migration script handle decorative or brand colors?▼

No, decorative colors, brand hex values, and chart palette colors are explicitly excluded from migration. Decorative usages should be marked with a DS-SKIP comment, and brand colors map to dedicated brand tokens instead of status tokens.

Why does the health check report differ between runs?▼

Each run overwrites the rolling ds-health-latest.txt report and diffs against the snapshot of the previous run to show deltas. The trend history lives in git, so the report should be committed on every DS pass to keep the escalation ledger intact.

Related Skills

Explore More Software Engineering Skills→
qazuorqazuor

frontend-design

Guide UI teams through pre-coding design foundations for typography, color, and layout.

Community
Basic
Strategic-AutomationStrategic-Automation
6

requesting-code-review

Automate pre-commit verification with security scans, quality gates, and reviewer subagent.

Official
Advanced
knoopxknoopx
68

eslint

Lint JavaScript and TypeScript projects with configurable rules and automatic fixes.

Community
Intermediate
eboodyeboody

lint-guardrail-engineer

Convert repeated coding mistakes into static checks and CI guardrails.

Community
Intermediate