菜单
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.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Covers GitHub conventions for pull requests, issues, and comments including linking, language style, formatting, and callout syntax. Use when creating PRs, writing issues, or posting comments on Datum Cloud repositories.
Turn raw engineering notes, PR/issue links, commit messages, or a one-line feature description into a changelog entry for Datum Cloud's GitHub Discussions Changelog category: a benefit-led title plus a markdown body, drafted for users and ready to hand off for final capture and publish. Use when someone says "write a changelog entry", "announce this in the changelog", or "post this to the changelog discussions" — this is the community-facing changelog POST, not the Keep a Changelog release file (that lives in `gtm-templates`).
Provides templates for go-to-market communications including blog posts, changelogs, social media, and enablement briefs. Use when writing launch announcements or marketing content.
Create a new GitHub release. Verifies CI is green on the release commit and refreshes the third-party NOTICE file before tagging, determines the next version from the latest tag, summarizes merged PRs since the last release, drafts release notes in the established style, and publishes via gh release create. Works for any datum-cloud service repository.
Scan a project repository for strict AGPL-3.0 license compliance across Go, Rust, and JavaScript/React codebases. Use this skill whenever the user asks to check, audit, verify, or enforce AGPL license compliance on a project, repo, or codebase. Triggers on phrases like "check agpl compliance", "audit license headers", "is this project agpl compliant", "scan for license headers", "check my license files", "agpl audit", or any request involving ensuring a project is properly licensed under AGPL. Always use this skill — don't wing AGPL compliance checks from general knowledge.
Covers producing weekly operational reports for the Datum AI Edge. Use when asked for an ops review, traffic report, latency analysis, provisioning report, or edge performance summary. Guides metric queries, anomaly detection, and publishing to datum-cloud/engineering.
| name | design-tokens |
| description | 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. |
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