메뉴
Use when the user explicitly asks for a standalone HTML page in a restrained minimal style, especially reading-first dashboards, briefs, handouts, maps, or internal reports. User-invoked only; do not auto-trigger.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Break a plan, spec, or PRD into independently-grabbable task files using tracer-bullet vertical slices.
Turn the current conversation into a PRD file in the project folder — no interview, just synthesis of what you've already discussed.
Фейбл руки-агенты — ручной режим оркестрации, где Fable не пишет код, а пишет спеки в тела GH issues и раздаёт готовые задачи рукам: кодинг, код-ревью, gh-операции, CLI-механика, DoD-верификация и укладка файлов — Codex; разведка, чтение и скауты — Grok-воркеры через Orca. Вызывается пользователем явно, не моделью.
Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".
Use when you want several genuinely different design directions to choose from instead of one design you will iterate on — a page or UI redesign, a hero, a landing, a thumbnail layout — or a live/stream design bake-off where an audience votes. Triggers on "дай варианты дизайна", "несколько вариантов на выбор", "редизайн", "design options", "design bake-off", "/parallel-design-variants".
Use when need to sync session work into GitHub issues OR query status of an existing track across repos. Two modes — write (end-of-session sync: find issues, update body, work-record comment, parent epic + W-label + Project placement) and read (status lookup across repos with parent/W-label/Project health). Triggers on "/manager", "sync session", "обнови issues", "синкни сессию", "зафиксируй прогресс", "статус задачи", "что по <track>", "есть ли issue по", "track status", "what about <track>".
| name | design-minimal |
| description | Use when the user explicitly asks for a standalone HTML page in a restrained minimal style, especially reading-first dashboards, briefs, handouts, maps, or internal reports. User-invoked only; do not auto-trigger. |
Generate one standalone HTML page with a restrained minimal visual system: clear hierarchy, strong spacing, explicit structure, limited palette, and no decorative effects.
:root.sm:, md:, lg:, xl:, 2xl:), no media queries, no alternate mobile layout.Allowed <style> shape:
<style>
:root {
--bg: #f5f4ef;
--ink: #1a1a1a;
--muted: #77736b;
--hair: #d4d2cc;
--paper-soft: #eeece4;
--font-main: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--font-mono: ui-monospace, "SF Mono", Menlo, monospace;
}
</style>
Forbidden CSS shape:
.card { ... }
@media (...) { ... }
body { ... }
button:hover { ... }
Use Tailwind classes directly on elements. Reference tokens through arbitrary values:
<body class="m-0 bg-[var(--bg)] text-[var(--ink)] font-[var(--font-main)] text-[14px] leading-[1.55]">
<main class="mx-auto w-[1120px] px-8 py-8 pb-20">
<header class="border-y-2 border-[var(--ink)] py-4">
<p class="text-[11px] uppercase tracking-[0.14em] text-[var(--muted)]">BRIEF 042 · INTERNAL</p>
<h1 class="mt-3 text-[28px] leading-tight font-normal">Page Title</h1>
</header>
</main>
</body>
Use fixed desktop-oriented widths such as w-[960px], w-[1120px], max-w-[1200px], grid-cols-[...], min-h-[...]. Do not add mobile fallbacks. One-column, two-column, and dense multi-panel layouts are allowed when the content benefits from them.
| Element | Tailwind Pattern |
|---|---|
| Page | bg-[var(--bg)] text-[var(--ink)] font-[var(--font-main)] text-[14px] leading-[1.55] |
| Shell | mx-auto w-[1120px] px-8 py-8 pb-20 |
| Grid | grid grid-cols-[1fr_320px] gap-6 or grid grid-cols-3 gap-4 |
| Header | border-y-2 border-[var(--ink)] py-4 |
| Meta | text-[11px] uppercase tracking-[0.14em] text-[var(--muted)] |
| Section label | [ <span class="bg-[var(--ink)] text-[var(--bg)] px-1">MAIN</span> ] |
| Panel | border border-[var(--ink)] p-4 |
| Soft panel | border border-dashed border-[var(--ink)] p-4 |
| Divider | Text dashes inside HTML, styled with muted mono text |
| Entry | border-t border-[var(--hair)] pt-5 mt-5 |
| Link | underline decoration-[var(--hair)] underline-offset-4 hover:bg-[var(--ink)] hover:text-[var(--bg)] |
| Badge | border border-[var(--hair)] px-1 text-[10px] uppercase text-[var(--muted)] |
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=900">
<script src="https://cdn.tailwindcss.com"></script>
<style>
:root {
--bg: #f5f4ef;
--ink: #1a1a1a;
--muted: #77736b;
--hair: #d4d2cc;
--paper-soft: #eeece4;
--font-main: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--font-mono: ui-monospace, "SF Mono", Menlo, monospace;
}
</style>
<title>Design Minimal</title>
</head>
<body class="m-0 bg-[var(--bg)] text-[var(--ink)] font-[var(--font-main)] text-[14px] leading-[1.55]">
<main class="mx-auto w-[1120px] px-8 py-8 pb-20">
<header class="border-y-2 border-[var(--ink)] py-4">
<p class="text-[11px] uppercase tracking-[0.14em] text-[var(--muted)]">BRIEF 042 · INTERNAL</p>
<h1 class="mt-3 text-[28px] leading-tight font-normal">Page Title</h1>
<p class="mt-2 text-[var(--muted)]">Short one-line description.</p>
</header>
<div class="mt-6 grid grid-cols-[1fr_320px] gap-6">
<section class="border border-[var(--ink)] p-4">
<div class="text-[10px] uppercase tracking-[0.14em] text-[var(--muted)]">
[ <span class="bg-[var(--ink)] text-[var(--bg)] px-1">MAIN</span> ] important
</div>
<p class="mt-3">...</p>
</section>
<aside class="border border-dashed border-[var(--ink)] p-4">
<div class="text-[10px] uppercase tracking-[0.14em] text-[var(--muted)]">[ SIDE ]</div>
<p class="mt-3">...</p>
</aside>
</div>
<div class="mt-8 text-[10px] uppercase tracking-[0.14em] text-[var(--muted)]">──── entries ──────────────────────────────</div>
<article class="mt-5 border-t border-[var(--hair)] pt-5">
<div class="text-[10px] uppercase tracking-[0.14em] text-[var(--muted)]">[ 01 / 05 ] signal</div>
<h2 class="mt-2 text-[20px] leading-tight font-normal">Section Title</h2>
<p class="mt-3">...</p>
</article>
</main>
</body>
</html>
<style> instead of Tailwind classes.sm: / md: / lg: classes.@media for mobile.