SkillProof tested Claude skills

Design Elevation

Tailwind-token design-disiplin for enhver visuell utgang – dashbord, PPTX, HTML, rapporter.

av cuellarfr · cuellarfr/design-skills

Bestått ★ 8.8/10

Design Elevation — Tailwind-token design-disiplin for enhver visuell utgang – dashbord, PPTX, HTML, rapporter.

Hva den gjør

Et referansebibliotek med designtokens og regler (farge-/type-/avstandsskalaer, elevasjonsbevegelser, Kholmatova funksjonell-vs-perseptuell rammeverk, pluss overstyringer for Trimble Modus, IBM Carbon, Shopify Polaris, Adobe Spectrum, Salesforce Lightning) som Claude anvender når den produserer en visuell artefakt. Utløses ved enhver presentasjon, dashbord, HTML-side, PDF, eller data-visualiseringsforespørsel; det er prompt-veiledning, ikke eksekverbare verktøy, så hele verdien ligger i spesifisiteten av instruksjonene Claude følger.

Testrapport

Bygde det samme 3-kort KPI-dashbordet to ganger – én gang fra bunnen av, én gang strengt etter skillens Tailwind-token-regler – og forskjellen er konkret: `gray-900/500/400` teksthierarki i stedet for rent svart, `shadow-sm` i stedet for en hard skygge, semantiske smaragd-/rose-aksenter i stedet for bokstavelig rød/grønn, `tabular-nums` på hver metrikk, og en `text-xs` kildelinje som grunnlinjen aldri tenkte å legge til.

Testet på: 2026-07-14 · Claude Code 2.x (agent harness)

Installer

git clone https://github.com/cuellarfr/design-skills
cd design-skills
mkdir -p ~/.claude/skills
cp -r design-elevation ~/.claude/skills/design-elevation

Kommandoer og eksempelprompter

  • /design-elevationTailwind-token design-disiplin for enhver visuell utgang – dashbord, PPTX, HTML, rapporter.

Skills utløses av vanlige forespørsler — ingen kommandoer å huske. Etter installasjonen aktiverer prompter som disse skillen (på engelsk):

  • Build an HTML KPI dashboard using proper Tailwind design tokens
  • Redesign this PPTX slide with real elevation and spacing scales
  • Apply IBM Carbon-style color and type discipline to this report

Full rapport →