メニュー
Use when modifying demo/ UI — adding pages, components, or styles. Defines the monochrome visual system, layout patterns, and component conventions for the haklex demo site.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Use when releasing @haklex/* packages or propagating published haklex versions into Yohaku, mx-core, mx-space, or related downstream consumers.
Use when writing Haklex articles with Markdown plus LiteXML, choosing the appropriate Haklex node for content, authoring LiteXML fragments, or converting a LightXML/LiteXML string or file into Lexical SerializedEditorState JSON, Markdown, or Static Render HTML via the `litexml` CLI.
Use when creating or modifying demo/ UI components — buttons, cards, panels, pills, inputs, badges. Reference for all component CSS classes and their exact specs.
Use when adding or modifying colors, spacing, typography, or layout values in demo/ CSS. Complete token reference for the monochrome design system.
Convert Shiroi Markdown to Haklex Lexical JSON. Use when the user wants to convert a markdown file or string to rich text editor JSON format.
| name | demo-ui-direction |
| description | Use when modifying demo/ UI — adding pages, components, or styles. Defines the monochrome visual system, layout patterns, and component conventions for the haklex demo site. |
Monochrome, minimal aesthetic inspired by Linear/Vercel. All demo/ UI work must follow these conventions.
Sub-references:
demo-ui-tokens — full color/spacing/typography/radius token tablesdemo-ui-components — all component CSS classes, specs, and anatomy diagramsPalette: Black/white only. No colored accents. See demo-ui-tokens for full color table.
#171717 text, #fafafa bg, #e5e5e5 border#fafafa text, #0a0a0a bg, #262626 borderrgba(text, 0.06)Typography: -apple-system, 'Inter', system-ui, sans-serif. Headings: tight letter-spacing (-0.3px to -0.5px), 700 weight. See demo-ui-tokens for full size/weight matrix.
Spacing: 32px page padding, 16px card gaps, 24-28px section gaps. Increments of 2/4/8. See demo-ui-tokens for complete spacing scale.
Borders: 1px var(--demo-border). Hover darkens to var(--demo-text-muted). No shadows on cards.
Radius: 6-10px cards/panels, 999px pills/badges. See demo-ui-tokens for per-component values.
SVG angle brackets < > + center 4-point sparkle on rounded-square (rx="7"). Uses currentColor fill, var(--demo-bg) for inner paths. Component at demo/src/components/Logo.tsx.
Header: 56px fixed, max-width: 1200px. Logo left, 4 nav tabs center, GitHub + theme toggle right.
Nav items: Playground (/), Nodes (/nodes), Extensions (/extensions), AI (/ai).
Content area: max-width: 1200px, padding: 24px.
See demo-ui-components for full CSS specs and anatomy of each pattern.
| Pattern | CSS Class | Usage |
|---|---|---|
| Filter pills | .nodes-filter-pill | Category filtering with count badge |
| Segmented control | .playground-tabs | Tab switching within a page |
| Card grid | .nodes-grid / .ext-grid | 3-col (nodes) or 2-col (extensions) |
| Card expand | .node-card + .node-card-expanded | Click to reveal detail panel |
| Page header | .nodes-page-title + .nodes-page-desc | Title + one-line description |
| Action button | .playground-action-btn | Bordered, transparent bg, hover darkens |
var(--demo-accent-bg) (subtle gray)useContext() — use use(Context) (React 19 rule)