Skip to content
cccskills
FreePublished on GitHub

ui-lint

Scans frontend files for common design system violations using grep-based checks.

The English summary is being prepared. Showing the original description.

skillmds/skillmd
See how to install

Files included (1)

  • SKILL.md3.1 KB

SKILL.md (original)

Review the instructions the agent will receive before you install.

Design Lint (Quick Check)

When to Use

Use this skill when you need quick automated lint — detects common design system violations in seconds.

When NOT to use

  • For deeper review of design judgment (composition, hierarchy, rhythm) → use /ss-review
  • For accessibility specifically → use /ss-a11y
  • For Nielsen UX heuristics → use /ss-audit
  • For applying refactors — this only flags violations; use /ss-review to fix

Target: $ARGUMENTS

What This Does

Fast, grep-based scan for common design violations. Runs in seconds (unlike /ss-review which is a deep manual audit). Run this after every file change.

Checks

1. Hardcoded Colors

Search for hex colors in className strings that should be semantic tokens:

grep -n '#[0-9a-fA-F]\{3,8\}' [file] | grep -v 'theme.css\|tokens\|\.json'

Violation: text-[#3C3C3C], bg-[#721FE5] Fix: text-text-primary, bg-brand

2. Raw Pixel Values in Tailwind

grep -n 'p-\[.*px\]\|m-\[.*px\]\|gap-\[.*px\]' [file]

Violation: p-[24px], gap-[12px] Fix: p-6, gap-3

3. Old Width/Height Syntax

grep -n 'w-[0-9] h-[0-9]\|w-\[.*\] h-\[' [file]

Violation: w-4 h-4 Fix: size-4

4. Physical Properties (LTR-only)

grep -n ' ml-\| mr-\| pl-\| pr-' [file]

Violation: ml-2, mr-4 Fix: ms-2, me-4

5. Forbidden Colors

grep -n 'text-black\|bg-black\|#000000\|#000"' [file]

Violation: Any pure black Fix: Use skin's text-primary token

6. Missing data-slot

grep -n 'function [A-Z]' [file] # find components
grep -n 'data-slot' [file]       # check if present

Violation: Component without data-slot Fix: Add data-slot="component-name"

7. Font Size CSS Variables (CRITICAL — Tailwind v4 conflict)

grep -n 'text-\[var(--' [file]
grep -n '\-\-text-.*px\|--fs-.*px' [file]

Violation: text-[var(--text-sm)] or --text-sm: 13px in theme.css Fix: Use explicit text-[13px]. CSS variable font sizes conflict with Tailwind v4's --text-* namespace — Tailwind reads them as color, not font-size.

8. className Without cn()

grep -n 'className={`' [file]

Violation: Template literal className Fix: Use cn() for all className composition

Output Format

🔴 FAIL  [file:line] Hardcoded hex: text-[#3C3C3C] → use text-text-primary
🔴 FAIL  [file:line] Raw px: p-[24px] → use p-6
🟡 WARN  [file:line] Physical prop: ml-2 → use ms-2
🟡 WARN  [file:line] Missing data-slot on MyComponent
🟢 PASS  No violations found

Total: X errors, Y warnings

If errors > 0, list specific fixes for each violation.

Limitations

  • Use this skill only when the task clearly matches its upstream source and local project context.
  • Verify commands, generated code, dependencies, credentials, and external service behavior before applying changes.
  • Do not treat examples as a substitute for environment-specific tests, security review, or user approval for destructive or costly actions.

Reviews

No reviews yet. Tell others what you thought.

Comments

No login needed. Share how it worked for you, ask a question, or note where it did not run.

No comments yet. Be the first to write one.

Comments are published right away. Do not include personal information such as email addresses or phone numbers. Up to 2 URLs.

0 / 1,000 characters

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

More skills from this repository

academic-pptx

Free

Use this skill whenever the user wants to create or improve a presentation for an academic context — conference papers, seminar talks, thesis defenses, grant briefings, lab meetings, invited lectures, or any presentation where the audience will evaluate reasoning and evidence. Triggers include: 'conference talk', 'seminar slides', 'thesis defense', 'research presentation', 'academic deck', 'academic presentation'. Also triggers when the user asks to 'make slides' in combination with academic content (e.g., 'make slides for my paper on X', 'create a presentation for my dissertation defense', 'build a deck for my grant proposal'). This skill governs CONTENT and STRUCTURE decisions. For the technical work of creating or editing the .pptx file itself, also read the pptx SKILL.md.

The English summary is being prepared. Showing the original description.

skillmds/skillmd249Updated Oct 14, 2026

adp

Free

Redpanda's Agentic Data Plane: governance infrastructure for building, running, and governing AI agents and MCP servers, plus a proxying AI Gateway for LLM providers, operated via `rpk ai` and the ADP API. Use when creating or managing AI agents (managed or self-managed) via `rpk ai agent` or `AgentRegistryService`; configuring MCP servers (remote or managed catalog, code mode, auth); setting up LLM providers or querying models via `rpk ai llm`/`rpk ai model` or the AI Gateway proxy; or configuring budgets, guardrails, or Cedar access-control policies through the governance APIs. Also covers reading agent transcripts and spending insights, and wiring OAuth clients or providers to the aigw Authorization Server. For the separate rpk cloud mcp control-plane MCP server, see `/redpanda:rpk-cloud`.

The English summary is being prepared. Showing the original description.

skillmds/skillmd249Updated Oct 14, 2026

ads

Free

Operate professional paid advertising across Google, Meta, YouTube, LinkedIn, TikTok, Microsoft, Apple, Amazon, Reddit, Pinterest, Snapchat, and X. Use for account intake, source-grounded audits, strategy, budget and measurement planning, creative production, experiments, reporting, monitoring, and explicitly approved campaign changes. Also trigger on PPC, paid social, retail media, attribution, tracking, landing pages, cross-platform conversion totals, negative keywords or search terms, beta-feature scoring, stale platform claims, API-token or credential setup, campaign deletion, and safe Claude Ads installation or uninstall.

The English summary is being prepared. Showing the original description.

skillmds/skillmd249Updated Oct 14, 2026

ads-apple

Free

Audit Apple Ads measurement, AdServices and AdAttributionKit, campaign and keyword structure, Search Match, App Store placements, custom product pages, bidding, budgets, MMP reconciliation, and policy. Use for Apple Ads, Apple Search Ads, App Store ads, Search Match, custom product pages, AdServices, or Apple app-install campaigns.

The English summary is being prepared. Showing the original description.

skillmds/skillmd249Updated Oct 14, 2026

ads-competitor

Free

Research competitor paid-ad presence, messaging, creative, formats, landing pages, keyword and auction signals, transparent ad libraries, and strategic gaps across supported platforms. Use for competitor ads, ad libraries, ad spy, competitive PPC analysis, competitor creative, Google Ads Transparency, Meta Ad Library, or paid-media competitor research.

The English summary is being prepared. Showing the original description.

skillmds/skillmd249Updated Oct 14, 2026

ads-dna

Free

Extract a public-safe brand and offer profile for paid advertising from an authorized website and operator input. Triggers on: brand DNA, brand profile, brand identity, brand style, brand colors, brand voice, visual identity, style guide, website brand analysis.

The English summary is being prepared. Showing the original description.

skillmds/skillmd249Updated Oct 14, 2026

See all skills by skillmds

Report a problem with this skill