菜单
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>