pixelmsg Skill

When to Use

Any time a visual card beats a plain-text reply:

Weather forecasts / ambient info cards
GitHub Trending, repo stats, contribution charts
Todo / task boards with progress
Daily / weekly digest or report
Data dashboards and stat summaries
Announcements, notifications, styled quotes

Step 1 — Pick a Template or Write Your Own

Check existing templates first. The templates/ directory in this skill's

root has production-ready options. Use one as-is or as a starting point whenever

it fits — don't rewrite from scratch if a template already covers the use case.

Template	Best for	Style
---	---	---
`templates/weather.html`	Generic weather card, any city	Glassmorphism
`templates/shanghai-weather.html`	Live Shanghai weather (Open-Meteo)	Glassmorphism
`templates/github-trending.html`	Top-10 GitHub Trending list	Dark Premium
`templates/github-stats.html`	GitHub user profile / stats	Dark Premium
`templates/todolist.html`	Categorized todo list with progress	Brand Color

Use an existing template when: the content type maps directly (weather → weather.html, trending repos → github-trending.html).

Write a new template when: the content type is unique, or the required data doesn't fit cleanly into an existing template's structure. New templates go in templates/ and follow the Design System below.

Step 2 — Write or Customize the HTML

Rules for any template:

Use Alpine.js and Tailwind CSS via CDN — no build step
Wrap all content in one root element:
Inline all data — no external API calls at render time (hardcode the values)

pixelmsg

概述

pixelmsg Skill

When to Use

Step 1 — Pick a Template or Write Your Own

Step 2 — Write or Customize the HTML