قم بتطبيق التصميم المختار على HTML المجرد. يُستخدم عندما يكون لدى المستخدم HTML عادي/بدون نمط ويريد تطبيق تصميم مرئي متسق. المشغلات: قم بتصميم HTML هذا، أو تطبيق التصميم، أو جعله يبدو جيدًا، أو نمط /html، أو عندما يشارك المستخدم HTML الذي يحتاج إلى CSS. يحول الجداول والقوائم ومؤشرات الحالة والأزرار والتخطيطات إلى نظام تصميم متماسك.
ثبّت مهارة الذكاء الاصطناعي html-style بسرعة في بيئة التطوير لديك عبر سطر الأوامر
المصدر: shipshitdev/library.
Transform barebones HTML into styled output using a specific design system.
| Status text | .stale .warm .pending | Red/green/orange inline text | | Trend | .trend-up .trend-down | Green ↑ / Red ↓ | | Category tag | .tag-group .tag-dm .tag-money | Blue/purple/orange pill | | Status pill | .status-success .status-error .status-pending | Filled green/red/orange | | Filter toggle | .filter .filter.active | Outline / filled black |
| Time filter | .pill .pill.active | Small pill, black when active | | Stat box | .stat > .stat-value + .stat-label | 28px number, 12px label | | Table | default or .table-styled | Minimal or colored values | | Section header | .section-header | Dark bar with white text | | Collapsible | + | Native HTML collapse |
حقول وأوامر مستقرة للاقتباس في أنظمة الذكاء الاصطناعي والبحث.
npx skills add https://github.com/shipshitdev/library --skill html-styleقم بتطبيق التصميم المختار على HTML المجرد. يُستخدم عندما يكون لدى المستخدم HTML عادي/بدون نمط ويريد تطبيق تصميم مرئي متسق. المشغلات: قم بتصميم HTML هذا، أو تطبيق التصميم، أو جعله يبدو جيدًا، أو نمط /html، أو عندما يشارك المستخدم HTML الذي يحتاج إلى CSS. يحول الجداول والقوائم ومؤشرات الحالة والأزرار والتخطيطات إلى نظام تصميم متماسك. المصدر: shipshitdev/library.
افتح الطرفية أو أداة سطر الأوامر لديك مثل Terminal أو iTerm أو Windows Terminal انسخ ونفّذ هذا الأمر: npx skills add https://github.com/shipshitdev/library --skill html-style بعد التثبيت، سيتم إعداد المهارة تلقائيا في بيئة البرمجة بالذكاء الاصطناعي لديك وتصبح جاهزة للاستخدام في Claude Code أو Cursor أو OpenClaw
https://github.com/shipshitdev/library