القائمة
Use when establishing brand tokens for code reuse. CSS custom properties = native tokens. No build step needed.
يُحدَّد Prompt الذي يراجع المصدر أولًا بشكل افتراضي. يمكنك التبديل إلى أمر مباشر أو تنزيل نسخة محلية.
اقرأ SKILL.md وأي ملفات مرافقة يعرضها SkillsMP قبل أن تقرر التثبيت.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
يتجاوز الأمر المباشر Prompt المخصّص للمراجعة. افحص المصدر قبل تشغيله.
npx skills add https://github.com/x3allamerican/design-skills --skill design-tokens-in-cssيبقى الأمر في سطر واحد. مرّر أفقيًا لمراجعته كاملًا قبل النسخ.
تفضّل نسخة محلية؟ نزّل الملفات المتاحة حاليًا لدى SkillsMP.
عرض SKILL.md
استنادا إلى تصنيف SOC المهني
| name | design-tokens-in-css |
| description | Use when establishing brand tokens for code reuse. CSS custom properties = native tokens. No build step needed. |
Design tokens = brand values as CSS variables. Define once, reuse everywhere. Native CSS, no build process.
:root {
/* Color */
--cream: #fbf6ec;
--ink: #0d0807;
--accent: #e85d2c;
/* Type */
--font-display: 'Fraunces', serif;
--font-body: 'Inter Tight', sans-serif;
--size-base: 1rem;
--scale: 1.333;
--size-h1: calc(var(--size-base) * var(--scale) * var(--scale));
/* Spacing */
--base: 4px;
--spacing-1: calc(var(--base) * 2);
--spacing-2: calc(var(--base) * 4);
--spacing-3: calc(var(--base) * 8);
/* Motion */
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--duration-fast: 150ms;
}
Use semantic names, not values:
--accent (semantic) ✓--orange (value) ✗--text-primary (semantic) ✓--text-ink (value) ✗Semantic names allow rebranding without touching every variable.
[data-theme='dark'] {
--cream: #0d0807;
--ink: #f0ebe1;
--accent: #e85d2c;
}
User preference stored in localStorage, applied via data-attribute on <html>.
Token system across all CardPrepAI surfaces.