ui-quality-checks

Verify light/dark mode colors and responsive behavior when making UI changes or reviewing UI components.

خيارات التثبيت

يُحدَّد Prompt الذي يراجع المصدر أولًا بشكل افتراضي. يمكنك التبديل إلى أمر مباشر أو تنزيل نسخة محلية.

التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.

يتجاوز الأمر المباشر Prompt المخصّص للمراجعة. افحص المصدر قبل تشغيله.

npx skills add https://github.com/Budibase/newWebsite --skill ui-quality-checks

يبقى الأمر في سطر واحد. مرّر أفقيًا لمراجعته كاملًا قبل النسخ.

تفضّل نسخة محلية؟ نزّل الملفات المتاحة حاليًا لدى SkillsMP.

اقرأ SKILL.md وأي ملفات مرافقة يعرضها SkillsMP قبل أن تقرر التثبيت.

SKILL.md

تعليمات المصدر · معاينة للقراءة فقط

name	ui-quality-checks
description	Verify light/dark mode colors and responsive behavior when making UI changes or reviewing UI components.

Use this skill when you change UI code or review UI behavior. Keep it lightweight and practical.

Light and dark mode: Avoid hard-coded #fff/#000. Prefer existing CSS variables like --text, --border-color, --bg, --surface, or Tailwind with rgb(var(--...)).
Contrast and icons: Icons should use currentColor and inherit text color so they work in both themes.
Hover/focus states: Verify hover/focus styles are visible in both themes; avoid theme-specific colors.
Responsiveness: Check layout at common breakpoints (mobile ~360px, tablet ~768px, desktop ~1024px+). Ensure no overflow, legible text, and usable touch targets.

In your response, briefly confirm you checked light/dark + responsiveness for the change.
If you cannot verify (e.g., no preview), say so and note what should be tested.