메뉴
Enforces the Manuscript design system when building or modifying UI components. Activates when creating pages, styling components, choosing colors, adding icons, building layouts, creating panels, or working with any visual element. Also triggers when user mentions design, style, color, layout, spacing, or "make it look like".
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Develops Inertia.js v2 React client-side applications. Activates when creating React pages, forms, or navigation; using <Link>, <Form>, useForm, or router; working with deferred props, prefetching, or polling; or when user mentions React with Inertia, React pages, React forms, or React navigation.
Use when creating or running migrations, touching NativePHP config or providers, modifying the publish workflow, adding desktop-gated features, or working with the dual SQLite database setup. Activates on keywords like migration, nativephp, sqlite, prebuild, native:publish, electron, auto-update, desktop-only.
Enforces the Manuscript design system when building or modifying UI components. Activates when creating pages, styling components, choosing colors, adding icons, building layouts, creating panels, or working with any visual element. Also triggers when user mentions design, style, color, layout, spacing, or "make it look like".
Full Sentry SDK setup for PHP. Use when asked to "add Sentry to PHP", "install sentry/sentry", "setup Sentry in PHP", or configure error monitoring, tracing, profiling, logging, metrics, or crons for PHP applications. Supports plain PHP, Laravel, and Symfony.
Use when auditing an existing Laravel + NativePHP Desktop v2 app for performance and desktop optimization issues in the current working directory
| name | design-system |
| description | Enforces the Manuscript design system when building or modifying UI components. Activates when creating pages, styling components, choosing colors, adding icons, building layouts, creating panels, or working with any visual element. Also triggers when user mentions design, style, color, layout, spacing, or "make it look like". |
Full reference: docs/design-system.md
Read that file if you haven't in this conversation. This skill is the enforcement summary.
No hardcoded hex colors in .tsx files. Every color must be a Tailwind token class (text-ink, bg-surface, border-border, etc.). The only exception is app.css where tokens are defined.
Font sizes from the 8-step scale only:
text-[11px]) — badges, smallest labelstext-xs) — sidebar items, small buttonstext-[13px]) — default button text, compact bodytext-sm) — default body text, inputstext-base) — panel titles, emphasistext-xl) — page headingstext-2xl) — large headingstext-[32px]) — editor chapter heading.editor-prose), 22px, or 26px.Icon sizes from the 5-step scale only:
size-3) — micro indicatorssize-3.5) — compact UI (sidebar, small buttons)size-4) — standard UI (toolbar, menus)size-5) — medium (panel actions)size-6) — large (panel headers)Border radius from the 5-step scale only:
rounded (4px) — progress bars, micro elementsrounded-md (6px) — buttons, inputs, menu itemsrounded-lg (8px) — cards, panels, dropdownsrounded-xl (12px) — dialogs, large cardsrounded-full — pills, badges, avatarsrounded-[5px], rounded-[10px], rounded-[14px].font-serif only inside .editor-prose. All UI text uses font-sans (the default).
Font weights: 400/500/600 only. 700 is reserved for <strong> in prose.
No bare bg-white — use bg-surface-sidebar or bg-white dark:bg-surface-card.
Right-panel widths are fixed: 272px or 320px. The left sidebar is resizable from 200px to 400px (232px default).
text-inktext-ink-mutedtext-ink-fainttext-ink-softbg-surfacebg-surface-cardbg-surface-sidebarbg-neutral-bgbg-accent-light or bg-surface-warmborder-borderborder-border-subtleborder-border-dashedbg-accent / text-accent — active items, CTAshover:bg-accent-dark — accent hover statebg-accent-light — accent-tinted backgroundsThe reuse rule is non-negotiable. Before writing markup:
resources/js/components/ui/ — if a component fits, use it.components/ui/.A duplicated button, input, or chat surface IS a bug. Fix the duplication before it spreads.
Always check resources/js/components/ui/ first:
Button, Input, Select, Textarea, SearchInput (filter/search bar — magnifier + input + clear button), AiChatInput (AI chat compose surface — auto-grow textarea + circular send button), Dialog, Drawer, PanelHeader, SectionLabel, ContextMenu, FormField, Card, Toggle, ToggleRow, ToggleGroup, Checkbox, Collapsible, Kbd, Alert, Badge.
Never roll your own AI chat input. When the user talks to an AI agent (Plot Coach, editor AI chat, anywhere conversational), use <AiChatInput value={...} onChange={...} onSend={...} placeholder={...} disabled={...} />. Enter sends, Shift+Enter inserts a newline. Don't assemble a textarea + send button pair inline.
text-[11px] uppercase font-medium tracking-wide text-ink-muted
<button> or <input>