Skills
.Work. You
Rest

building-code-displays

Official

Craft marketing-grade code displays.

Marketing & Sales#yaml#svelte#code display#syntax highlighting#marketing site#cli output
Authormusher-dev
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill enables the creation of visually appealing and functional code display components for marketing websites without relying on external syntax highlighting libraries.

Core Features & Use Cases

  • CSS-Only Syntax Highlighting: Apply syntax highlighting using only CSS variables and Tailwind classes, ensuring consistency with design tokens.
  • Code-Then-Output Split Panels: Build side-by-side or stacked layouts to showcase configuration code alongside its corresponding CLI output, crucial for explaining mechanisms.
  • Tabbed Multi-File Views: Display related code files (e.g., bundle.yaml and pipeline.yaml) in a tabbed interface for organized presentation.
  • Interactive Terminal Chrome: Implement terminal-like interfaces with animated effects for engaging demos.

Quick Start

Build a code-then-output split panel for the marketing site, displaying bundle.yaml on the left and its apply command output on the right.

Dependency Matrix

Required Modules

None required

Components

references

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: building-code-displays
Download link: https://github.com/musher-dev/bundles/archive/main.zip#building-code-displays

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.