hello-demo

$npx mdskill add oaustegard/claude-skills/hello-demo

Delivers static HTML demo page with bookmarklet instantly.

  • Solves user need for instant interactive HTML demonstration
  • Depends on static asset file in assets directory
  • Triggers on requests for hello demo or demo page
  • Outputs file to computer link for direct user viewing

SKILL.md

.github/skills/hello-demoView on GitHub ↗
---
name: hello-demo
description: Delivers a static Hello World HTML demo page with bookmarklet. Use when user requests the hello demo, hello world demo, or demo page.
metadata:
  version: 1.0.4
---

## Delivery Instructions

When triggered:

1. Copy the asset to outputs:
```bash
cp assets/hello-demo.html /mnt/user-data/outputs/
```

2. Provide the computer link:
```
[View hello-demo.html](computer:///mnt/user-data/outputs/hello-demo.html)
```

3. Add one-line description: "Interactive HTML demo with bookmarklet showing token-efficient artifact delivery."

**DO NOT**:
- Generate HTML from scratch
- Explain the file contents in detail
- Add verbose commentary

The asset contains a complete, styled HTML page with:
- Bookmarklet demonstration
- Usage instructions
- Token efficiency explanation

**Token efficiency**: This pattern saves ~500 tokens vs. generating explanatory text each time.

More from oaustegard/claude-skills

SkillDescription
accessing-github-reposGitHub repository access in containerized environments using REST API and credential detection. Use when git clone fails, or when accessing private repos/writing files via API.
api-credentialsSecurely manages API credentials for multiple providers (Anthropic Claude, Google Gemini, GitHub). Use when skills need to access stored API keys for external service invocations.
asking-questionsGuidance for asking clarifying questions when user requests are ambiguous, have multiple valid approaches, or require critical decisions. Use when implementation choices exist that could significantly affect outcomes.
browsing-blueskyBrowse Bluesky content via API and firehose - search posts, fetch user activity, sample trending topics, read feeds and lists, analyze and categorize accounts. Supports authenticated access for personalized feeds. Use for Bluesky research, user monitoring, trend analysis, feed reading, firehose sampling, account categorization.
building-github-indexGenerate progressive disclosure indexes for GitHub repositories to use as Claude project knowledge. Use when setting up projects referencing external documentation, creating searchable indexes of technical blogs or knowledge bases, combining multiple repos into one index, or when user mentions "index", "github repo", "project knowledge", or "documentation reference".
categorizing-bsky-accountsAnalyze and categorize Bluesky accounts by topic using keyword extraction. Use when users mention Bluesky account analysis, following/follower lists, topic discovery, account curation, or network analysis.
chartingSelect the right Python charting library (seaborn, matplotlib, graphviz) and produce publication-quality static visualizations. Use when creating charts, plots, graphs, diagrams, heatmaps, visualizations from data, or when choosing between matplotlib/seaborn/graphviz. Also triggers for network diagrams, flowcharts, dependency trees, state machines, and entity-relationship diagrams. For interactive browser-rendered charts or uploaded data exploration, defer to charting-vega-lite instead.
charting-vega-liteCreate interactive data visualizations using Vega-Lite declarative JSON grammar. Supports 20+ chart types (bar, line, scatter, histogram, boxplot, grouped/stacked variations, etc.) via templates and programmatic builders. Use when users upload data for charting, request specific chart types, or mention visualizations. Produces portable JSON specs with inline data islands that work in Claude artifacts and can be adapted for production.
check-toolsValidates development tool installations across Python, Node.js, Java, Go, Rust, C/C++, Git, and system utilities. Use when verifying environments or troubleshooting dependencies.
cloning-projectExports project instructions and knowledge files from the current Claude project. Use when users want to clone, copy, backup, or export a project's configuration and files.