菜单
Builds mobile-first responsive layouts with Tailwind CSS v4 using a consistent design-token scale, breakpoints, dark mode, and Flexbox/Grid; used when styling or fixing responsive UI.
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/Sir-chawakorn/sanook-cli --skill style-responsive-tailwind命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
Gets machine-parseable JSON out of an LLM reliably — prefer provider-enforced grammar (OpenAI `response_format:{type:"json_schema",strict:true}`, Anthropic tool-calling / `tool_choice:{type:"tool"}`, Gemini `responseSchema`) over a "respond in JSON" prompt, define the contract once as a Pydantic/Zod model and validate every response (never trust the string), use constrained decoding / grammars for open weights (Outlines, llguidance, llama.cpp GBNF, vLLM `guided_json`), keep schemas SHALLOW with required fields + enums + `additionalProperties:false`, and build a repair-and-retry loop that handles refusals, `length`/`max_tokens` truncation, and streaming partial JSON (`partial-json-parser`). Schema-guided generation eliminates parse-error retries; validate-and-repair is the backstop, not the primary mechanism.
Builds production data grids that stay fast and accessible at 10k–1M+ rows — decide server-side vs client-side sort/filter/paginate by the dataset-fits-in-memory test (client only under ~10k rows, otherwise push to the API and treat the table as a controlled view of server state), ROW-VIRTUALIZE with TanStack Virtual or react-window so only the visible window mounts (fixed estimateSize, overscan 5–10, measureElement for dynamic rows, contain:strict, and a real scroll container — never table-layout:auto over thousands of rows), build the headless logic with TanStack Table v8 (or AG Grid when you need pinning/grouping/enterprise out of the box), add column resize/reorder/pin, inline edit with optimistic update + rollback on error, row selection with a stable rowId, full keyboard nav with roving tabindex over an ARIA grid (role=grid/row/gridcell, aria-sort, aria-rowcount/aria-rowindex so virtualization stays announced), position:sticky headers, streaming CSV export that doesn't block the main thread, and explici
Builds semantic/vector search — pick an embedding model + dimensionality (and whether to truncate Matryoshka dims) and the matching distance metric (cosine/dot/L2, normalize to unit length so cosine == dot and IP is correct), an ANN index with the recall/latency/memory tradeoff understood (HNSW M/efConstruction/efSearch for low-latency RAM-resident; IVF-PQ nlist/nprobe/PQ for billion-scale compressed; flat/exact for <100k) in pgvector/Qdrant/Milvus/FAISS/Pinecone, chunking + overlap + per-chunk metadata for filtering, HYBRID retrieval fusing BM25 + dense by Reciprocal Rank Fusion (RRF, k≈60) not score addition, a cross-encoder/Cohere reranker over the top-50→k, correct pre-filter-vs-ANN interaction (filterable HNSW, not post-filter that starves k), and offline eval with recall@k / nDCG@10 / MRR against a labeled qrels set. Quantize (scalar/PQ) only after measuring recall loss; tune efSearch/nprobe to a recall target, not a guess.
基于 SOC 职业分类
正在显示 SKILL.md
| name | style-responsive-tailwind |
| description | Builds mobile-first responsive layouts with Tailwind CSS v4 using a consistent design-token scale, breakpoints, dark mode, and Flexbox/Grid; used when styling or fixing responsive UI. |
| when_to_use | When the user asks to style a UI, make a layout responsive, fix mobile/breakpoint issues, set up Tailwind v4 + shadcn, implement dark mode, or enforce a spacing/color token scale. |
@theme, CSS-first config) + shadcn/ui, or implementing dark mode.Not for component structure/state/props/data flow — that's build-react-component. This skill assumes the markup exists and applies the visual layer on top.
Confirm the Tailwind version before writing any class. Open package.json (or run grep -r "tailwindcss" package.json). v4 = tailwindcss@^4, a single @import "tailwindcss"; line in CSS, and NO tailwind.config.js. If you see a tailwind.config.{js,ts} with theme.extend, it's v3 — STOP and ask before migrating; v3/v4 config is not interchangeable.
Define tokens once in CSS via @theme (v4 is CSS-first, not JS-config). Put them in the global stylesheet, not scattered per-component:
@import "tailwindcss";
@theme {
--color-bg: oklch(0.18 0.02 265);
--color-surface: oklch(0.22 0.02 265);
--color-accent: oklch(0.62 0.18 265);
--radius-card: 0.75rem;
--font-sans: "Inter", system-ui, sans-serif;
}
Every key under @theme auto-generates utilities (bg-bg, text-accent, rounded-card, font-sans). Use oklch() for color — perceptually uniform, predictable dark-mode shifts. Keep Tailwind's built-in spacing scale (p-4, gap-6); only add tokens for things the default scale lacks.
Style mobile-first: unprefixed = mobile base, prefixes = larger screens. Write the small-screen layout with no prefix, then layer sm: md: lg: xl: 2xl: for overrides. Breakpoints are min-width — md:flex-row means "≥768px", NOT "≤". Default breakpoints: sm 640 / md 768 / lg 1024 / xl 1280 / 2xl 1536.
<div class="flex flex-col gap-4 md:flex-row md:gap-6">
Pick Flexbox vs Grid deliberately. Flexbox = 1D content that flows/wraps (nav bars, button rows, chip lists) — use flex-wrap + gap. Grid = 2D structured layout (card galleries, dashboards) — prefer grid grid-cols-[repeat(auto-fit,minmax(16rem,1fr))] so it reflows WITHOUT breakpoint classes. Reach for explicit md:grid-cols-3 only when you need fixed column counts per breakpoint.
Never use fixed pixel widths for layout. No w-[640px] on containers. Use fluid w-full + a max-w-* cap + horizontal auto margins: w-full max-w-5xl mx-auto px-4 sm:px-6 lg:px-8. Fixed sizes belong only on intrinsically-sized things (icons, avatars).
Dark mode = class strategy, controllable. In v4 add a custom variant so a root class toggles it (don't rely on prefers-color-scheme alone — users want a manual switch):
@custom-variant dark (&:where(.dark, .dark *));
Then bg-white dark:bg-bg text-gray-900 dark:text-gray-100. Toggle by adding/removing .dark on <html>. Define BOTH light and dark for every color-bearing element in the same edit — half-themed UI is the #1 dark-mode bug.
shadcn/ui integration: shadcn ships its semantic tokens (--background, --foreground, --primary, --border, --ring) as CSS vars wired into @theme inline. Theme the app by editing those vars under :root and .dark — do NOT hardcode colors on shadcn components. Run npx shadcn@latest init and let it write the vars; then customize values, not the component classes.
Extract repeated utility clusters into components, not @apply. If the same 6+ class string appears ≥3 times (e.g. a card shell), make a component (or a shadcn variant via cva). Reserve @apply for true global primitives only. Magic numbers and copy-pasted class walls are the thing this skill exists to prevent.
Container queries for component-level responsiveness. When a component must adapt to ITS container width (sidebar vs main), not the viewport, use @container on the parent and @sm: @md: on children. This is correct for reusable cards that live in differently-sized slots — viewport breakpoints can't see container width.
tailwind.config.js with theme.extend.colors is silently ignored in v4 — tokens never generate, utilities resolve to nothing. Define tokens in @theme in CSS instead.`text-${color}-500` is invisible to Tailwind's scanner and produces no CSS. Use full static strings and switch via a lookup map, or use style={{}} / CSS vars for truly dynamic values.@apply on a v4 utility from another file fails unless that file sees the theme — prefer components over @apply; if you must, ensure @reference "../app.css"; at the top of the CSS module.md:hidden hides on ≥768px (desktop), shows on mobile. To hide on mobile and show on desktop use hidden md:block. Min-width semantics trip everyone.w-[Npx], an un-wrapped flex row, a grid-cols-N with no min-w-0 on children, or a long unbroken string. Hunt with * { outline: 1px solid red } and add min-w-0 / break-words / flex-wrap.useEffect paints light first. Set .dark on <html> via an inline blocking script before hydration.@custom-variant class strategy with color-scheme: dark so native form controls/scrollbars also darken.npm run build (or dev) with no Tailwind warnings about unknown utilities. Unknown-utility warnings = a token that didn't generate; fix root cause, don't ignore.document.documentElement.scrollWidth must equal clientWidth). Use chrome-devtools resize_page + take_screenshot to capture each, or DevTools device mode..dark on <html> and confirm every surface, text, and border has a defined dark value (no black-on-black, no leftover light borders). Screenshot both modes side by side.grep -rE '\[[0-9]+px\]|#[0-9a-fA-F]{3,6}' src/ should return near-zero hits in styling. Arbitrary px/hex outside @theme means an unscaled magic number — replace with a token.