メニュー
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.
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/Innei/haklex --skill demo-ui-directionコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
SKILL.md を表示中
| 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)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 releasing @haklex/* packages or propagating published haklex versions into Yohaku, mx-core, mx-space, or related downstream consumers.
Use when creating or modifying demo/ UI components — buttons, cards, panels, pills, inputs, badges. Reference for all component CSS classes and their exact specs.
SOC 職業分類に基づく
