SkillProof tested Claude skills

Design System Quality

Kontrolní seznamem řízená kontrola design-tokenů a a11y pro UI/frontend PR.

od opensesh · opensesh/DESIGN-OPS

Otestováno · Funguje ★ 9.2/10

Design System Quality — Kontrolní seznamem řízená kontrola design-tokenů a a11y pro UI/frontend PR.

Co umí

Poskytuje strukturovaný kontrolní seznam kvality (design tokens, přístupné komponenty, WCAG kontrast, typografie, časování animací) plus dva grep-založené ověřovací příkazy pro zachycení napevno zakódovaných barev a zakázaných Tailwind tříd. Spouští se při revizi UI/frontend kódu, revizi PR komponent nebo kontrolách shody s design systémem.

Testovací report

Spustil vlastní grep příkazy dovednosti pro hardcoded-color a forbidden-class proti jednorázovému ProductCard.tsx a oba zachytily skutečná porušení (#191919 inline barva, bg-white/bg-black/text-white); dovednost pak organizuje zjištění do kontrolního seznamu seřazeného podle závažnosti s přesnými náhradami CSS-proměnných, které by generická kontrola nevyprodukovala.

Testováno: 2026-07-15 · Claude Code 2.x (agent harness)

Instalace

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

Příkazy a ukázkové prompty

  • /design-system-qualityKontrolní seznamem řízená kontrola design-tokenů a a11y pro UI/frontend PR.

Skilly se spouštějí běžnými požadavky — žádné příkazy k zapamatování. Po instalaci ho aktivují prompty jako tyto (anglicky):

  • 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?

Kompletní testovací report (anglicky) →