メニュー
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: