SkillProof tested Claude skills

Design System Quality

Checklista przeglądu tokenów projektowych i dostępności dla PR UI/frontend.

Autor: opensesh · opensesh/DESIGN-OPS

Testowano · Działa ★ 9.2/10

Design System Quality — Checklista przeglądu tokenów projektowych i dostępności dla PR UI/frontend.

Co robi ten skill

Zapewnia ustrukturyzowaną checklistę jakości (tokeny projektowe, komponenty dostępne, kontrast WCAG, typografia, czas animacji) oraz dwa polecenia weryfikacyjne oparte na grep do wyłapywania zakodowanych na stałe kolorów i zakazanych klas Tailwind. Aktywuje się przy przeglądzie kodu UI/frontend, przeglądzie PR komponentów lub kontrolach zgodności systemu projektowania.

Raport z testu

Uruchomiono własne polecenia grep umiejętności dotyczące zakodowanych kolorów i zakazanych klas na wyrzuconym ProductCard.tsx i oba wykryły rzeczywiste naruszenia (kolor inline #191919, bg-white/bg-black/text-white); umiejętność następnie organizuje wyniki w checklistę z priorytetem ważności z dokładnymi zamiennikami zmiennych CSS, których ogólny przegląd by nie wygenerował.

Testowano: 2026-07-15 · Claude Code 2.x (agent harness)

Instalacja

git clone https://github.com/opensesh/DESIGN-OPS
mkdir -p ~/.claude/skills
cp -r DESIGN-OPS/skills/design-system-quality ~/.claude/skills/design-system-quality

Komendy i przykładowe prompty

  • /design-system-qualityChecklista przeglądu tokenów projektowych i dostępności dla PR UI/frontend.

Skille uruchamiają się na zwykłe polecenia — bez komend do zapamiętania. Po instalacji aktywują go prompty takie jak te (po angielsku):

  • Review this ProductCard component for hardcoded colors and a11y issues
  • Check this PR for design-token violations before I merge it
  • Does this Tailwind component use any forbidden classes or bad contrast?

Pełny raport →