القائمة
Styling production — Tailwind, design system, responsive, dark mode, animation. Không FOUC, không layout shift.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
AI Agent framework — tool registry, multi-step reasoning, memory, rate control. Không infinite loop, tự động timeout.
Tích hợp LLM production — chat, streaming SSE, function calling, cost tracking, retry, fallback. Không memory leak, tự động reconnect.
Production AI — caching, rate limit, fallback model, monitoring, graceful degradation. Không crash khi API down.
Prompt engineering production — template system, versioning, A/B test, injection defense, cost-aware prompting.
RAG pipeline production — ingestion, chunking chiến lược, embedding, hybrid search, rerank. Không index trùng, search dưới 200ms.
Game 2D với Phaser 3 — player, enemy, bullet pool, tilemap, HUD, animation. 60 FPS, object pool cho đạn/enemy.
| name | webs-styling |
| description | Styling production — Tailwind, design system, responsive, dark mode, animation. Không FOUC, không layout shift. |
// tailwind.config.ts
import type { Config } from "tailwindcss";
const config: Config = {
content: ["./src/**/*.{ts,tsx}"],
darkMode: "class",
theme: {
extend: {
colors: {
primary: { 50: "oklch(0.95 0.02 250)", 500: "oklch(0.6 0.2 250)", 900: "oklch(0.2 0.1 250)" },
},
fontFamily: {
sans: ["Inter", "system-ui", "sans-serif"],
mono: ["JetBrains Mono", "monospace"],
},
animation: {
"fade-in": "fadeIn 0.3s ease-in-out",
"slide-up": "slideUp 0.3s ease-out",
},
keyframes: {
fadeIn: { from: { opacity: "0" }, to: { opacity: "1" } },
slideUp: { from: { opacity: "0", transform: "translateY(10px)" }, to: { opacity: "1", transform: "translateY(0)" } },
},
},
},
plugins: [],
};
// lib/design-tokens.ts
export const tokens = {
spacing: { xs: "4px", sm: "8px", md: "16px", lg: "24px", xl: "32px", "2xl": "48px" },
radius: { sm: "6px", md: "8px", lg: "12px", xl: "16px", full: "9999px" },
shadow: { sm: "0 1px 2px rgb(0 0 0 / 0.05)", md: "0 4px 6px -1px rgb(0 0 0 / 0.1)", lg: "0 10px 15px -3px rgb(0 0 0 / 0.1)" },
fontSize: { sm: "0.875rem", base: "1rem", lg: "1.125rem", xl: "1.25rem", "2xl": "1.5rem", "3xl": "1.875rem" },
breakpoint: { sm: "640px", md: "768px", lg: "1024px", xl: "1280px" },
};
// Container query (dùng @container)
export function CardGrid({ children }: { children: React.ReactNode }) {
return (
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 @container">
{children}
</div>
);
}
// Aspect ratio
export function AspectRatio({ ratio = 16 / 9, children }: { ratio?: number; children: React.ReactNode }) {
return (
<div className="relative" style={{ aspectRatio: ratio }}>
{children}
</div>
);
}
// hooks/useTheme.ts
export function useTheme() {
const [theme, setTheme] = useState<"light" | "dark">(() => {
if (typeof window === "undefined") return "light";
const stored = localStorage.getItem("theme");
if (stored === "dark" || stored === "light") return stored;
return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
});
useEffect(() => {
const root = document.documentElement;
root.classList.toggle("dark", theme === "dark");
localStorage.setItem("theme", theme);
}, [theme]);
const toggle = useCallback(() => setTheme(t => t === "light" ? "dark" : "light"), []);
return { theme, toggle, isDark: theme === "dark" };
}
// Script chống FOUC — inject trong layout <head>
// <script>document.documentElement.classList.toggle('dark', localStorage.getItem('theme') === 'dark' || (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches))</script>