القائمة
Tailwind CSS — utility-first CSS framework with responsive prefixes, dark mode, JIT engine, and customization via config.
يُحدَّد Prompt الذي يراجع المصدر أولًا بشكل افتراضي. يمكنك التبديل إلى أمر مباشر أو تنزيل نسخة محلية.
اقرأ SKILL.md وأي ملفات مرافقة يعرضها SkillsMP قبل أن تقرر التثبيت.
استنادا إلى تصنيف SOC المهني
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
يتجاوز الأمر المباشر Prompt المخصّص للمراجعة. افحص المصدر قبل تشغيله.
npx skills add https://github.com/skeletorflet/opencode-supreme-setup --skill tailwindيبقى الأمر في سطر واحد. مرّر أفقيًا لمراجعته كاملًا قبل النسخ.
تفضّل نسخة محلية؟ نزّل الملفات المتاحة حاليًا لدى SkillsMP.
عرض SKILL.md
Hyperframes-based video template for retro pixel deck motion design. Use when users want a high-fidelity, multi-scene HTML-to-video composition with advanced transitions, interactive preview controls, and ready-to-render default style.
Generate and iterate ad creative including headlines, descriptions, and primary text. Useful for paid social and search ad iteration.
Browser automation CLI for AI agents. Use when the user needs to inspect, test, or automate browser behavior: navigating pages, filling forms, clicking buttons, taking screenshots, extracting page data, testing web apps, dogfooding Open Design previews, QA, bug hunts, or reviewing app quality. Prefer local Open Design preview URLs unless the user explicitly asks for external browsing.
| name | tailwind |
| description | Tailwind CSS — utility-first CSS framework with responsive prefixes, dark mode, JIT engine, and customization via config. |
Utility-first. Compose designs using single-purpose classes. No context switching between HTML and CSS files.
Prefix breakpoints: sm: md: lg: xl: 2xl:. State variants: hover: focus: active: disabled:. Group variants: group-hover: peer-invalid:. Dark mode: dark: prefix or class strategy in config.
Edit tailwind.config.{js,ts}: extend colors, spacing, fonts, breakpoints. Use theme() function in CSS. Arbitrary values: w-[123px] bg-[#1da1f1] grid-cols-[1fr_2fr].
Extract repeated utility groups with @apply in CSS. Use @layer components for component classes. Avoid @apply for truly atomic patterns.
require('@tailwindcss/forms'), @tailwindcss/typography (prose), @tailwindcss/aspect-ratio, @tailwindcss/container-queries. Write custom plugins with addUtilities, addComponents, matchUtilities.
CSS-first config (no tailwind.config needed). @import "tailwindcss" in CSS entry. @theme directive for design tokens. Built-in container queries. Simplified dark mode. New @variant system.
On-demand generation. Zero unused CSS in production. Every combination is valid without config. Rebuilds in milliseconds.
Mobile-first responsive design. Use design tokens (spacing scale, color palette). Purge unused classes in production. Prefer gap over margin for layouts.