Menú
Styling production — Tailwind, design system, responsive, dark mode, animation. Không FOUC, không layout shift.
Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.
Basado en la clasificación ocupacional 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>