quickref-generator

Claude Code Quick-Reference Generator

Create a personalized Claude Code quick-reference system inspired by Brett Terpstra's Cheaters.

What This Skill Creates

A local HTML-based quick-reference system with:

• Modern design with oklch() colors and smooth animations
• Dark/light theme with system preference detection
• Per-sheet timestamps showing when each section was last updated
• "New" badges highlighting items added since previous generation
• Proper frontmatter parsing for skill descriptions and agent models
• Search functionality with keyboard navigation (j/k, /, Esc)
• LocalStorage persistence for last-viewed sheet and theme

Architecture

~/Dev/claude-code-quickref/     # Or your preferred location
├── index.html              # Main HTML with navigation
├── stylesheets/
│   └── main.css            # Modern oklch() theme styles
├── javascripts/
│   └── main.js             # Auto-generated from sheets/
└── sheets/                 # Individual sheet files (2-12 KB each)
    ├── builtin-commands.html
    ├── custom-skills.html
    ├── custom-agents.html
    ├── [plugin-name].html      # One per installed plugin
    ├── mcp-[server-name].html  # One per MCP server
    └── ...

Frontmatter Parsing

Skills (SKILL.md)

The generator reads YAML frontmatter from each skill:

---
name: skill-name
description: What this skill does
user-invocable: true
---

Extracts:

• description — Displayed in the quick-reference
• user-invocable — Whether users can invoke directly (shown with badge)

Agents (.md files)

The generator reads YAML frontmatter from each agent:

---
model: opus
tools:
  - Read
  - Write
---

Extracts:

• model — Displayed as "Model: Opus/Sonnet/Haiku"
• tools — Listed in command-args section

Sheet File Format

Each sheet is a standalone HTML file with metadata:

<!-- meta: {"updatedAt": "2025-12-07T10:00:00", "hasNew": true} -->
<div class="sheet">
    <h1>Sheet Title <span class="tag tag-custom">Custom</span></h1>
    <p class="description">Brief description</p>

    <h2>Section</h2>
    <div class="command-grid">
        <div class="command-card">
            <div class="command-name">command_name</div>
            <div class="command-desc">What it does (from frontmatter)</div>
            <div class="command-args">Model: Opus | Tools: Read, Write</div>
        </div>
    </div>
</div>