메뉴
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 페이지를 검토하고 설치를 진행할 수 있습니다.
| 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:
SOC 직업 분류 기준
