Bruk med AI

Kilden leveres med en agent skill — en strukturert guide som gjør at AI-kodeverktøy forstår designsystemet og bruker det riktig. Med denne på plass vil AI-assistenten din vite hvilke komponenter som finnes, hvordan de brukes, og hvilke mønstre du bør følge.

Hva er en agent skill?

En agent skill er en markdown-fil som gir AI-verktøyet kontekst om et bibliotek eller rammeverk. I stedet for at AI-en gjetter seg frem eller bruker utdatert informasjon, får den presis dokumentasjon om Kilden sine komponenter, varianter, mønstre og konvensjoner.

Skill-filen finner du her:

node_modules/@kilden/designsystem/skill/kilden.md

Oppsett med Claude Code

Claude Code støtter agent skills som prosjektkommandoer. Du har to alternativer:

Alternativ 1: Legg til som CLAUDE.md-referanse

Den enkleste tilnærmingen er å referere til skill-filen i prosjektets CLAUDE.md:

<!-- CLAUDE.md -->
 
## Designsystem
 
Vi bruker Kilden (Bekks designsystem). Se skill-filen for komplett referanse:
 
@kilden/designsystem/skill/kilden.md

Alternativ 2: Kopier som prosjektkommando

For å gjøre skillen tilgjengelig som en slash-kommando i Claude Code:

# Opprett kommandomappen
mkdir -p .claude/commands
 
# Kopier skill-filen
cp node_modules/@kilden/designsystem/skill/kilden.md .claude/commands/kilden.md

Nå kan du bruke /project:kilden i Claude Code for å aktivere designsystem-kunnskapen.

Oppsett med Cursor

Cursor bruker .cursor/rules/-filer for å gi AI-en kontekst.

# Opprett rules-mappen
mkdir -p .cursor/rules
 
# Kopier skill-filen
cp node_modules/@kilden/designsystem/skill/kilden.md .cursor/rules/kilden.mdc

Oppsett med GitHub Copilot

GitHub Copilot bruker instruksjonsfiler i .github/-mappen.

# Opprett mappen
mkdir -p .github
 
# Kopier skill-filen
cp node_modules/@kilden/designsystem/skill/kilden.md .github/copilot-instructions.md

Hvis du allerede har en copilot-instructions.md, kan du legge til innholdet fra skill-filen nederst i den eksisterende filen.

Oppsett med andre verktøy

Skill-filen er vanlig markdown og fungerer med ethvert AI-verktøy som støtter kontekstfiler. Sjekk dokumentasjonen til ditt verktøy for hvor kontekstfiler skal plasseres, og kopier node_modules/@kilden/designsystem/skill/kilden.md dit.

Hva AI-assistenten din lærer

Med skill-filen på plass vil AI-assistenten:

• Kjenne alle 30+ komponenter — med riktige props, varianter og komposisjonsregler
• Følge tilgjengelighetskrav — labels, ARIA-attributter og semantisk HTML
• Bruke design tokens — semantiske farger i stedet for hardkodede verdier
• Importere riktig — alltid fra @kilden/designsystem, aldri fra interne stier
• Følge sammensatte mønstre — Dialog, Select, Toast og andre sammensatte komponenter med alle nødvendige delkomponenter
• Bruke cn() — for å slå sammen Tailwind-klasser på riktig måte

Eksempel

Etter oppsett kan du be AI-assistenten om å bygge et grensesnitt:

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

Og du vil få kode som bruker FormField, Label, Input, Textarea og Button med riktig tilgjengelighet og design tokens — i stedet for generiske HTML-elementer.