code-presentation

What problem does it solve?

This Skill prevents developer-content from looking generic by enforcing consistent, token-driven, accessibility-aware code-block presentation.

Core Features & Use Cases

• Senior code-block anatomy: terminal/editor/plain chrome variants with captioned figure wrapping for coherent reading and assistive-tech navigation.
• Token-driven syntax highlighting: maps syntax token-types to the project’s existing CSS variables to preserve dark mode contrast and brand alignment.
• Interactive polish: adds a first-class copy button with hover/active/focus/disabled states and safe clipboard feature-detection.
• Readability controls: supports opt-in line numbers and opt-in line highlighting using calibrated subtle tints.
• Choice-aware highlighters: guides selection among hand-rolled tokenization, Shiki, or Prism based on language count, bundle budget, SSR target, and theme control.

Quick Start

Ask Claude to generate or refine a CodeBlock or CodeSample for your UI docs and ensure it uses the project tokens for syntax colors, chrome, and interaction states.