UI Skillbook
2

Code

Inline code and code blocks with optional highlighting, titles, line numbers, marked lines, masking and copy.

UI SkillbookSiteplane docsSiteplane UI 1.8.1
Works withClaude CodeCodexCursorOpenCodeUniversal
Install

Run npx uiskillbook get siteplane-code and follow the Siteplane Code skill it prints for this task.

Paste this into your agent.

Code marks commands or identifiers in a sentence. CodeBlock holds snippets people read and copy, such as API requests, config or diffs. Blocks can mask secrets, mark added or removed lines and stream in as text arrives.

Install

bashnpx shadcn@4.18.0 add @siteplane/code

Import it from @/siteplane/components/code. The project needs Siteplane UI's one-time setup first: installation.

When to pick it

  • vs Kbd: Pick Kbd instead to show keys or shortcuts.
  • vs Copy Button: Pick Copy Button on its own for a copyable value that does not need code styling.

Rules

  • Pass the full text through value on CodeBlock; copyable copies exactly that value.
  • Install and import code-highlight once in client code before relying on language; without it the block shows plain text.
  • The mask prop hides the value on screen only; the secret still reaches the browser and Copy still copies it.
  • Set streaming while text is still arriving so the copy action stays disabled until it is complete.
  • Use lineStates with added and removed so changes carry a + or − mark, not only color.

Reference

  • Code docs, with every prop, part and example (Markdown)
  • Siteplane UI 1.8.1, Layout & utilities. Read the installed source under src/siteplane before relying on an API.

Add to your agent

Print this skill from the terminal, or connect the whole catalog over MCP. Setup guides

CLI

npx uiskillbook get siteplane-code

MCP server

https://www.uiskillbook.com/mcp

Questions

Related skills

Better Typographyby jakubkrehel

Web typography from choosing fonts to spacing, wrapping and accessibility. Use when picking or pairing typefaces, configuring variable fonts or OpenType features, setting up a type scale, styling text in components, truncating text, styling underlines, selection, placeholders or carets, or reviewing frontend code for typography. Triggers on typography, fonts, font formats, woff2, variable fonts, font-weight, opentype, font-feature-settings, letter-spacing, line-height, type scale, tabular numbers, text-wrap, truncation, line clamp, underlines, text-decoration, text selection, iOS input zoom, font smoothing, text contrast, measure, line length, text-box, smart punctuation, drop cap.

TypographyExternalGitHub stars: 9.2K

Siteplane Kbdby UI Skillbook

Styled notation for a keyboard key or a key combination inside text, buttons or menus.

Siteplane UI

Accessibilityby addyosmani

Audit and improve web accessibility following WCAG 2.2 guidelines. Use when asked to "improve accessibility", "a11y audit", "WCAG compliance", "screen reader support", "keyboard navigation", or "make accessible".

AccessibilityExternalGitHub stars: 3K

Accessibility Diffby AccessLint

Regression check that diffs a live page's accessibility violations against a baseline from uncommitted changes or a branch.

AccessibilityExternalGitHub stars: 114

Back to Siteplane UI