القائمة
Tailwind CSS v4 integration and Island styling patterns for Mandu Framework
يُحدَّد Prompt الذي يراجع المصدر أولًا بشكل افتراضي. يمكنك التبديل إلى أمر مباشر أو تنزيل نسخة محلية.
اقرأ SKILL.md وأي ملفات مرافقة يعرضها SkillsMP قبل أن تقرر التثبيت.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
يتجاوز الأمر المباشر Prompt المخصّص للمراجعة. افحص المصدر قبل تشغيله.
npx skills add https://github.com/diegosouzapw/awesome-omni-skill --skill mandu-stylingيبقى الأمر في سطر واحد. مرّر أفقيًا لمراجعته كاملًا قبل النسخ.
تفضّل نسخة محلية؟ نزّل الملفات المتاحة حاليًا لدى SkillsMP.
Token-efficient tracking for AI orchestration. CLI-first for status updates (~50 tokens), agent fallback for complex ops (~1KB). Use when: updating task status, querying blockers, creating progress files, validating phases.
AshAi extension guidelines for integrating AI capabilities with Ash Framework. Use when implementing vectorization/embeddings, exposing Ash actions as LLM tools, creating prompt-backed actions, or setting up MCP servers. Covers semantic search, LangChain integration, and structured outputs.
This skill should be used when solving hard questions, complex architectural problems, or debugging issues that benefit from GPT-5 Pro or GPT-5.1 thinking models with large file context. Use when standard Claude analysis needs deeper reasoning or extended context windows.
استنادا إلى تصنيف SOC المهني
عرض SKILL.md
| name | Mandu Styling |
| description | Tailwind CSS v4 integration and Island styling patterns for Mandu Framework |
| metadata | {"version":"2.0.0","author":"mandu","tailwind":"v4.1+"} |
| globs | ["**/*.css","**/*.module.css","app/globals.css"] |
Mandu Island 아키텍처에 최적화된 Tailwind CSS v4 스타일링 가이드입니다.
Primary: Tailwind CSS v4 + clsx/tailwind-merge
Alternative: CSS Modules (최소 의존성)
bun add -d tailwindcss@^4.1 @tailwindcss/cli@^4.1
bun add clsx tailwind-merge
@import "tailwindcss";
@theme {
--color-primary: hsl(222.2 47.4% 11.2%);
--color-primary-foreground: hsl(210 40% 98%);
--color-background: hsl(0 0% 100%);
--color-foreground: hsl(222.2 84% 4.9%);
--radius-md: 0.5rem;
--font-sans: 'Inter', system-ui, sans-serif;
}
body {
background-color: var(--color-background);
color: var(--color-foreground);
}
mandu dev 실행 시:
├─ @import "tailwindcss" 감지
├─ Tailwind CLI --watch 자동 시작
├─ 출력: .mandu/client/globals.css
├─ SSR에서 <link> 자동 주입
└─ CSS 변경 시 HMR 핫 리로드
// src/client/widgets/counter/Counter.island.tsx
"use client";
import { cn } from "@/shared/lib/utils";
export function CounterIsland({ variant = "default" }) {
return (
<button className={cn(
"px-4 py-2 rounded-md font-medium transition-colors",
variant === "default"
? "bg-primary text-primary-foreground hover:bg-primary/90"
: "border border-primary text-primary hover:bg-primary/10"
)}>
Count: 0
</button>
);
}
// src/client/shared/lib/utils.ts
import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}
/* v4 방식: @utility 사용 */
@utility text-balance {
text-wrap: balance;
}
@utility scrollbar-hide {
-ms-overflow-style: none;
scrollbar-width: none;
&::-webkit-scrollbar { display: none; }
}
| v3 | v4 |
|---|---|
@tailwind base/utilities | @import "tailwindcss" |
tailwind.config.ts | @theme { } in CSS |
!bg-red-500 | bg-red-500! |
@layer utilities | @utility |
bg-[--var] | bg-(--var) |
자세한 내용은
rules/style-tailwind-v4-gotchas.md참조
| Category | Description | Rules |
|---|---|---|
| Setup | Tailwind v4 설정 | 1 |
| Gotchas | v4 주의사항/마이그레이션 | 1 |
| Island | Island 스타일 패턴 | 3 |
| Component | 컴포넌트 스타일 | 3 |
| Performance | 최적화 | 2 |
| Theme | 테마/다크모드 | 1 |
→ 세부 규칙은 rules/ 폴더 참조
Safari 16.4+ | Chrome 111+ | Firefox 128+
IE 및 구형 브라우저 미지원. 레거시 프로젝트는 Tailwind v3 유지 권장.
Reference: Tailwind CSS v4