Bruk med AI

Kilden leveres med en agent skill: en guide som lærer AI-agenter å bruke designsystemet riktig. Med den på plass vet agenten hvilke komponenter som finnes, hvilke token-klasser den skal bruke og hvilke tilgjengelighetskrav som gjelder. Den vet også at den skal sjekke koden sin etterpå.

Hva er en agent skill?

En agent skill er en mappe med en SKILL.md-fil og referansefiler. Agenten leser beskrivelsen i SKILL.md og henter inn skillen av seg selv når du jobber med UI-kode. Referansefilene leses bare ved behov, så skillen bruker lite av kontekstvinduet.

Kildens skill består av:

• SKILL.md: oppsett, regler, token-klasser, vanlige mønstre og en oversikt over alle komponenter
• references/: én fil per komponent, token-kategori, eksempel og guide, generert fra denne dokumentasjonen. Med i oversikten er også token-klasser.md, som lister alle Tailwind-klassene som er koblet til design tokens

Skillen oppdateres sammen med dokumentasjonen. Installerer du den som plugin eller med npx skills, får du versjonen fra main. Versjonen i npm-pakken samsvarer med komponentene du har installert.

Installer skillen

Claude Code

Legg til Bekks plugin-marketplace og installer kilden-pluginen:

/plugin install kilden --marketplace bekk/designsystem

På eldre versjoner av Claude Code gjøres det i to steg:

/plugin marketplace add bekk/designsystem
/plugin install kilden@bekk

Claude Code bruker skillen automatisk når det er relevant. Du kan også be om den eksplisitt med /kilden:kilden.

Cursor, Codex, GitHub Copilot og andre

Bruk skills til å installere skillen for agenten din. Kommandoen finner agentene du bruker, og legger skillen der de leter (.claude/skills/, .cursor/skills/, .agents/skills/ osv.):

npx skills add bekk/designsystem

Fra npm-pakken

Skillen følger også med @kilden/designsystem, i node_modules/@kilden/designsystem/skills/kilden/. Da er den alltid i samme versjon som pakken du har installert. Lenk den inn der agenten din leter etter skills:

mkdir -p .claude/skills
ln -s ../../node_modules/@kilden/designsystem/skills/kilden .claude/skills/kilden

La agenten sjekke sin egen kode

Agenter skriver gjerne text-sm, shadow-lg og bg-blue-500 av gammel vane. Skillen ber agenten kjøre kilden-check etter at den har skrevet UI-kode:

npx -p @kilden/designsystem kilden-check src

Verktøyet følger med @kilden/designsystem. Det finner klasser som ikke følger Kilden og foreslår token-klasser som kan erstatte dem, slik at agenten kan rette opp selv. Les mer under Hold deg til token-klassene.

Maskinlesbar dokumentasjon

All dokumentasjon er også tilgjengelig som markdown, for agenter som henter dokumentasjon fra nettet:

• /llms.txt: oversikt over all dokumentasjon med lenker
• /llms-full.txt: all dokumentasjon i én fil
• /docs/:seksjon/:side.md: hver side som markdown. Legg til .md på slutten av URL-en, for eksempel /docs/components/button.md

Eksempel

Når skillen er installert, kan du be agenten om å bygge et grensesnitt:

Lag et kontaktskjema med navn, e-post og melding.

Agenten bruker Input, Textarea, FormField og Button med labels, feilmeldinger og token-klasser, og kjører kilden-check før den sier seg ferdig.