메뉴
Render a Neko Badge — small inline label with optional variant, icon, size, corner style, and link. Use for tags, status pills, version markers, NEW/BETA flags, etc.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Author the YAML frontmatter block of a Neko Markdown page — label, icon, order, tags, visibility, permalink, redirect, redirectSlug, layout, meta, nav, toc, backlinks, password. Use when configuring an individual page.
Author the project-level `neko.yml` — input/output paths, URL, branding, theme, meta tags, top navigation, banner, footer, snippets. Use when configuring or editing a Neko site at the project level.
Render a Mermaid diagram (flowchart, sequence, class, ER, state, gantt, journey, mindmap, sankey, XY, architecture) from a fenced ```mermaid``` block. Use for any structured diagram in docs.
Workflow for updating Neko documentation — base every page on the real source code, never invent APIs, warn loudly when the source isn't available, and check that the page (and any changed `tesserae` sample) renders correctly with Playwright / snapframe / a visual check. Use whenever you add or edit docs that describe code, APIs, components, or live samples.
Render a live Tesserae C# UI block — Neko compiles and executes the C# at build time and shows both the code and a working preview side-by-side. Use only when the project documents Tesserae or runs live C# samples.
Render C# API docs from a code block with XML doc comments (`/// <summary>`, `<param>`, `<returns>`, etc.). Use to embed API reference inline without a separate generator.
| name | badge |
| description | Render a Neko Badge — small inline label with optional variant, icon, size, corner style, and link. Use for tags, status pills, version markers, NEW/BETA flags, etc. |
Inline badge. Looks like a small pill of text with an optional icon. Visually similar to a Button, but typically used as a label rather than a primary CTA.
[!badge Badge Text]
[!badge variant="success" text="Approved"]
[!badge variant="info" icon="user" text="User"]
[!badge variant="danger" text="Beta" size="l" corners="pill"]
[!badge icon=":heart:" text="Like"](https://example.com)
The optional (url) at the end turns the whole badge into a link.
| Attribute | Values | Notes |
|---|---|---|
text | string | Label content. Implicit when written as [!badge Some text]. |
variant | base, primary (default), secondary, success, danger, warning, info, light, dark, ghost, contrast | Colour scheme. |
size | xs, s, m, l, xl, 2xl, 3xl | Default s. |
corners | round (default), square, pill | Corner radius. |
icon | UIcon name, :emoji:, <svg>, or image path | Optional icon. |
iconAlign | left (default), right | Icon position. |
margin | top right bottom left in px (e.g. "0 8 0 0") | Spacing override. |
link | url/path | Same as the parenthesised link. |
target | blank, self, parent, top | Link target. |
[!badge variant="success" text="stable"]
[!badge variant="warning" text="beta" corners="pill"]
[!badge variant="info" icon="rocket" text="v2.0"]
[!badge icon=":zap:" text="fast"](performance.md)
In a page's nav.badge you can use the pipe shorthand TEXT|variant:
---
nav:
badge: NEW|info
---
Or the full object form with the same attributes as above.