القائمة
UI design system and visual identity tokens for Alauda Container Platform. Provides design tokens (TypeScript, CSS, JSON), dark mode support, and implementation guidelines for React and other frameworks.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
| name | ui-development-react |
| description | UI design system and visual identity tokens for Alauda Container Platform. Provides design tokens (TypeScript, CSS, JSON), dark mode support, and implementation guidelines for React and other frameworks. |
The UI Development Skill provides a comprehensive design system for Alauda Container Platform (ACP). It encodes the complete visual identity, design tokens, and implementation guidelines that ensure consistency across all ACP user interfaces.
This skill is designed to be used company-wide by:
ACP uses a professional, cool-toned palette emphasizing clarity and information hierarchy:
| Category | Color | Hex | Usage |
|---|---|---|---|
| Backgrounds | Main | #ffffff | Primary content areas |
| Primary BG | #f4f6f8 | Top chrome, secondary panels | |
| Panel BG | #eef4ff | Left sidebars, guidance areas | |
| Accents | Info BG | #e3f2fd | Alert boxes, key information |
| Info Border | #90caf9 | Info element borders | |
| Success | Success BG | #d7f5e9 | Success states, completion |
| Success Border | #4caf50 | Success indicators | |
| Process | Process BG | #e8f2ff | Processing steps, workflows |
| Process Border | #2196f3 | Process state indicators | |
| Teal | Teal BG | #e0f2f1 | Hypothesis/investigation states |
| Teal Border | #4db6ac | Teal state indicators | |
| Borders | Primary | #cbd7e0 | Panel borders, main dividers |
| Secondary | #cbd5e1 | Card separators, subtle lines |
Dark mode variants maintain WCAG AA contrast ratios while preserving visual hierarchy:
| Category | Color | Hex | Usage |
|---|---|---|---|
| Backgrounds | Main | #1a1a1a | Primary content areas |
| Primary BG | #2d3748 | Top chrome, secondary panels | |
| Panel BG | #1e3a5f | Left sidebars, guidance areas | |
| Accents | Info BG | #1e3a8a | Alert boxes |
| Info Border | #60a5fa | Info element borders | |
| Success | Success BG | #064e3b | Success states |
| Success Border | #10b981 | Success indicators | |
| Process | Process BG | #1e40af | Processing steps |
| Process Border | #3b82f6 | Process indicators | |
| Teal | Teal BG | #134e4a | Hypothesis states |
| Teal Border | #14b8a6 | Teal indicators | |
| Borders | Primary | #4b5563 | Panel borders |
| Secondary | #555d6f | Card separators |
ACP uses a 10px base unit grid system:
4px (1 unit)
8px (2 units)
12px (3 units)
16px (4 units) - Standard padding/margin
20px (5 units)
24px (6 units) - Large spacing
32px (8 units) - Section spacing
48px (12 units)
64px (16 units) - Major section gaps
Font Stack (System Fonts)
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, sans-serif;
Font Sizes
Font Weights
Border Radius
Shadows
0 1px 2px rgba(0, 0, 0, 0.05)0 4px 6px rgba(0, 0, 0, 0.1)0 10px 15px rgba(0, 0, 0, 0.15)Transitions
Cards are the fundamental building block of ACP interfaces:
Variants:
Info States (Blue)
Success States (Green)
Process States (Teal)
Warning States (Orange/Amber)
Error States (Red)
Standard Layout
Responsive Behavior
Buttons/Controls
Form Inputs
Tables
Status Indicators
ACP interfaces support English and Simplified Chinese.
Guidelines:
All color combinations meet WCAG AA minimum 4.5:1 contrast ratio for text:
<button>, <a>, form elements)alt text for meaningful images<h1> to <h6>)// CSS Media Query (preferred)
@media (prefers-color-scheme: dark) {
/* dark mode styles */
}
// Or with CSS class (for manual toggle)
.dark { /* dark mode styles */ }
// Or in JavaScript
const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
When implementing dark mode:
tailwind.config.js from /tokens/bg-acp-blue-50, text-acp-green-600dark: prefix: dark:bg-acp-blue-900design-tokens.css in your main stylesheetbackground: var(--color-primary-bg)--color-*, --space-*, --font-*design-tokens.ts: import { designTokens } from '@acp/tokens'color: designTokens.colors.primary.bluePrefer semantic names over raw hex values:
background-color: var(--color-success-bg);background-color: #d7f5e9;Always use spacing tokens:
padding: var(--space-4); (16px)padding: 16px;Follow established typography hierarchy:
<h2>Heading</h2> with Heading 2 style + <p>Body</p> with Body styleAlways test designs in both modes:
This skill provides several token export formats:
design-tokens.ts) - For Next.js/React projectsdesign-tokens.css) - For any CSS projectdesign-tokens.json) - For design tools and automationtailwind.config.js) - For Tailwind CSS projectscolors.module.css) - For CSS Modules projectsDetailed documentation is available in the /references/ directory:
design-tokens.md - Complete token specificationsdesign-patterns.md - Visual pattern examplesguidelines.md - Design do's and don'tsaccessibility.md - WCAG compliance detailsdark-mode.md - Dark mode implementation guideQuick guides available in the /docs/ directory:
quick-start.md - Getting started with tokenstoken-usage.md - How to use different token formatsbest-practices.md - Implementation best practicesvisual-identity.md - ACP brand identity overviewfaq.md - Common questions and answersChoose your integration method:
design-tokens.ts + Tailwinddesign-tokens.css + CSS variablesdesign-tokens.jsonImport or reference tokens in your project
Apply tokens consistently throughout your UI
Test in both light and dark modes
Run design validator to check for consistency:
python3 scripts/design-validator.py audit --path=src --mode=dark
For questions or to report design system issues, refer to the FAQ or contact the design systems team.
Design tokens are versioned - check design-tokens.json for the current version.
Use when working in a Doom documentation repository to turn requirements into repository-aligned documentation diagnosis, plans, drafts, and AI-usability reviews. Supports modifying authoritative existing pages, adding focused scenario documents, separating user-facing docs from engineering-truth docs, planning doc-tree restructures, read-only convention or AI-usability reviews, and explicitly requested `yarn build` or `yarn translate` tasks. Explicit target repository rules override skill defaults; when the repository is silent, built-in product documentation standards govern new product docs.
Use when `doom lint` reports any `doom-lint:*` rule errors in markdown or MDX documentation files using @alauda/doom — routes to rule-specific fix guides in the rules/ subdirectory
Automatically parse JIRA epic descriptions and create child stories. Use when user wants to generate stories from an epic.