메뉴
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)