メニュー
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 職業分類に基づく
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".
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.
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.
Layout widths are fixed: sidebar 232px, right panels 272px or 320px.
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>