القائمة
Use when implementing dark mode. Don't just invert — design a separate dark palette with intentional choices.
يُحدَّد Prompt الذي يراجع المصدر أولًا بشكل افتراضي. يمكنك التبديل إلى أمر مباشر أو تنزيل نسخة محلية.
اقرأ SKILL.md وأي ملفات مرافقة يعرضها SkillsMP قبل أن تقرر التثبيت.
استنادا إلى تصنيف SOC المهني
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
يتجاوز الأمر المباشر Prompt المخصّص للمراجعة. افحص المصدر قبل تشغيله.
npx skills add https://github.com/x3allamerican/design-skills --skill dark-mode-disciplineيبقى الأمر في سطر واحد. مرّر أفقيًا لمراجعته كاملًا قبل النسخ.
تفضّل نسخة محلية؟ نزّل الملفات المتاحة حاليًا لدى SkillsMP.
عرض SKILL.md
Use when shipping a page. Accessibility tier (A, AA, AAA) sets minimum requirements; AA is the legal default in most jurisdictions.
Use when sizing images and embedded media. Consistent aspect ratios (16:9, 4:3, 1:1, 3:4) signal designed layout.
Use when designing editorial or luxury landing pages. Asymmetric grids feel curated; symmetric grids feel template-SaaS.
| name | dark-mode-discipline |
| description | Use when implementing dark mode. Don't just invert — design a separate dark palette with intentional choices. |
Dark mode = separate palette, not auto-inverted. Maintain brand integrity and accessibility. Cream/ink → off-white/near-black; accent stays similar.
| Light mode | Dark mode |
|---|---|
| Cream (#fbf6ec) | Near-black (#0d0807) |
| Ink (#0d0807) | Off-white (#f0ebe1) |
| Ink-70 | Off-white 70% |
| Accent | Same accent (may need slight desaturation) |
| Border | 15% off-white |
Avoid auto-inversion — re-author palette.
@media (prefers-color-scheme: dark) {
:root {
--bg: #0d0807;
--fg: #f0ebe1;
--fg-70: rgba(240, 235, 225, 0.7);
/* ... */
}
}
User preference toggle: persist in localStorage.
Photos shouldn't auto-darken. Either:
Avoid filter() that darkens photos — looks unnatural.
Implementation rule for dark mode across CardPrepAI.