From datum-platform
Covers the design token architecture for Datum Cloud UIs including colors, spacing, typography, and theme support. Use when implementing UI components to ensure visual consistency.
npx claudepluginhub datum-cloud/claude-code-plugins --plugin datum-platformThis skill uses the workspace's default tool permissions.
This skill covers the design token architecture for Datum Cloud UIs.
Generates design tokens/docs from CSS/Tailwind/styled-components codebases, audits visual consistency across 10 dimensions, detects AI slop in UI.
Records polished WebM UI demo videos of web apps using Playwright with cursor overlay, natural pacing, and three-phase scripting. Activates for demo, walkthrough, screen recording, or tutorial requests.
Delivers idiomatic Kotlin patterns for null safety, immutability, sealed classes, coroutines, Flows, extensions, DSL builders, and Gradle DSL. Use when writing, reviewing, refactoring, or designing Kotlin code.
This skill covers the design token architecture for Datum Cloud UIs.
Design tokens are the visual design atoms — colors, spacing, typography. They ensure consistency across all UIs.
Semantic color tokens:
/* Surfaces */
--color-surface-primary: /* main background */
--color-surface-secondary: /* card backgrounds */
--color-surface-elevated: /* modals, dropdowns */
/* Text */
--color-text-primary: /* main text */
--color-text-secondary: /* subdued text */
--color-text-disabled: /* disabled state */
/* Status */
--color-status-success: /* success states */
--color-status-warning: /* warning states */
--color-status-error: /* error states */
--color-status-info: /* info states */
/* Interactive */
--color-interactive-primary: /* buttons, links */
--color-interactive-hover: /* hover state */
--color-interactive-active: /* active state */
Consistent spacing scale:
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-6: 24px;
--space-8: 32px;
--space-12: 48px;
--space-16: 64px;
/* Font families */
--font-sans: 'Inter', system-ui, sans-serif;
--font-mono: 'JetBrains Mono', monospace;
/* Font sizes */
--text-xs: 0.75rem;
--text-sm: 0.875rem;
--text-base: 1rem;
--text-lg: 1.125rem;
--text-xl: 1.25rem;
--text-2xl: 1.5rem;
/* Font weights */
--font-normal: 400;
--font-medium: 500;
--font-semibold: 600;
--font-bold: 700;
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-full: 9999px;
--border-width: 1px;
--border-color: var(--color-border-default);
<div className="bg-surface-primary text-text-primary p-4 rounded-md">
Content
</div>
.card {
background: var(--color-surface-secondary);
padding: var(--space-4);
border-radius: var(--radius-md);
}
Tokens support light and dark themes:
:root {
--color-surface-primary: #ffffff;
--color-text-primary: #1a1a1a;
}
[data-theme="dark"] {
--color-surface-primary: #1a1a1a;
--color-text-primary: #ffffff;
}
pattern-registry.md — UI pattern documentation