菜单
Enforces the TwelveLabs Strand design system when generating or modifying UI components in this repository. Covers colors, typography, spacing, buttons, icons, and dark mode for Next.js, React, and Vue.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
| name | TwelveLabs Strand UI |
| description | Enforces the TwelveLabs Strand design system when generating or modifying UI components in this repository. Covers colors, typography, spacing, buttons, icons, and dark mode for Next.js, React, and Vue. |
This skill applies whenever you are:
.tsx, .jsx, .vue, .css, or .html file in this repositoryBefore generating any UI code, you MUST read the Single Source of Truth:
docs/STRANDS_AGENT_RULES.md
Use the view_file tool to read this file at:
<workspace>/docs/STRANDS_AGENT_RULES.md
This file contains the complete Strand design system specification.
You must enforce these rules on every UI generation or modification:
bg-background, text-text-primary, bg-accent) or CSS variables (var(--strand-ui-background)).#00FF00) is only for logos/marketing. For UI accent, use #00DC82 (bg-accent).font-system). NOT Inter.font-brand).font-mono).jumbo (64px) → xs (10px).p-1 (4px) through p-16 (64px).strand/tokens/buttons.json.border-radius increases by one token step. Apply transition: background-color 200ms ease, border-radius 200ms ease.strand/icons/ (81 SVG files).currentColor.strand/tokens/icons.json.class="dark" on <html> — NEVER prefers-color-scheme.strand/icons/ instead.#FFFFFF). Use #F4F3F3 sparingly for card accents. Think TwelveLabs.io, Linear, Vercel — not Bootstrap or Material UI.#E8E7E5), charcoal pill buttons with arrow icons.#6B6966), not black.sm (4px), md (8px), lg (12px), xl (16px), 2xl (24px), full (pill).| Framework | Integration Method |
|---|---|
| Next.js | Tokens pre-wired in globals.css via @theme inline (Tailwind v4) |
| React (Vite) | Use strand/tailwind-preset.js as Tailwind v3 preset |
| Vue | Same Tailwind preset or import strand/css/variables.css for raw CSS vars |
strand/tokens/colors.json — complete color palettestrand/tokens/typography.json — font families and size scalestrand/tokens/spacing.json — spacing, sizing, layoutstrand/tokens/buttons.json — button systemstrand/tokens/radii.json — border radiusstrand/tokens/shadows.json — box shadowsstrand/tokens/icons.json — icon manifeststrand/css/variables.css — all tokens as CSS custom propertiesstrand/css/fonts.css — font importsstrand/assets/ — logo files (logo-full.svg, logo-mark.svg, logo-wordmark.svg)Before returning any UI code, verify: