Guidelines/Integrations

Integrations

Zero build step · drop styles.css · paste context · ship

Claude CodeLovableGitHubFigmaCursorStorybookv0
Universal context blockpaste into any AI tool
Borders:3px solid #0B0B0B always
Shadows:4px 4px 0 #0B0B0B · no blur
Fonts:Archivo 800–900 · Space Mono 700
Primary:violet #5B36F5
Accent:lime #C8F94E
Canvas:paper #FBF7EE · never cold gray
Hover:translate(-2px,-2px) shadow grows
Press:translate(4px,4px) shadow = 0
Rules:no gradients · no blur · no radius >8px
Integration coverage
Claude CodeFull
LovableFull
GitHub PagesFull
Figma VariablesFull
CursorFull
StorybookFull
v0 by VercelPrompt
Claude CodeAI agent
  1. Copy SKILL.md → project root as CLAUDE.md
  2. Keep styles.css in scope for token resolution
  3. Reference spec pages as prompt context
# CLAUDE.mdSystem: SLAB · styles.cssBorders: 3px solid var(--slab-black)Motion: var(--ease-snap) var(--dur-fast)
LovableAI builder
  1. Upload styles.css to project root
  2. Add <link> in entry file
  3. Paste universal context block in first message
# First messageUse SLAB system. Border: 3px solid #0B0B0BShadow: 4px 4px 0 #0B0B0B no blur
GitHubHosting
  1. Push to repo
  2. Settings → Pages → main / root → Save
  3. Live at username.github.io/repo
  4. Tag releases: v1.0.0, v1.1.0…
FigmaDesign
  1. Variables → Color collection "SLAB" → map every token from colors.css
  2. Text Styles → Archivo 700/800/900 · Space Mono 700
  3. Effect Styles → Drop Shadow x:4 y:4 blur:0
CursorAI editor
  1. Paste SKILL.md rules into .cursorrules
  2. Or: Settings → Rules for AI → Project Rules
  3. Open styles.css for token autocomplete
StorybookWorkshop
  1. npx storybook@latest init
  2. Add import '../styles.css' to preview.js
  3. Set backgrounds: paper #FBF7EE · dark #1A1A1A
  4. Decorator toggles data-theme="dark" on story wrapper
v0 by VercelAI UI generator
  1. Paste the context block at the start of every prompt
  2. Upload styles.css and swap hex values for var(--slab-*)
  3. Tailwind users: extend tailwind.config.js with SLAB color keys
tailwind.config.jscolors: {'slab-lime': '#C8F94E','slab-violet': '#5B36F5','slab-pink': '#FF2EAE','slab-black': '#0B0B0B','slab-paper': '#FBF7EE',}
✓Always provide context firstPaste the universal context block before generating any component or screen.
✓Reference spec pagesLink to guidelines/components/[name].html when asking for component variants.
✕Don't describe by feelSay "3px solid #0B0B0B border" not "bold border" — AI tools need exact values.
✕Don't skip the shadow ruleAlways explicitly ban blur — AI defaults to soft shadows unless told otherwise.