pencil-deploylisted
Install: claude install-skill psmon/pencil-creator
# Pencil Deploy — Design Demo Site Deployment
Deploy sample demo pages from design/xaml/output/ to GitHub Pages.
Deployment is split into two stages: **Prepare** and **Publish**.
---
## 1. Prepare
**Trigger**: "Prepare design sample deployment", "Deploy prep", etc.
### Procedure
```
Step 1. Scan sub-sample folders
→ Check folder list under design/xaml/output/sample{N}/
→ Verify index.html exists in each folder
→ Extract title from <title> tag of each index.html
Step 2. Update index page
→ Update the demos array in design/xaml/output/index.html
→ Keep existing HTML/CSS template structure, only update the JS demos array
→ Only add newly discovered samples; keep existing entries
Step 3. Git Commit + Push
→ Check changed files with git status
→ Auto-generate commit message based on changed file list
→ git add → git commit → git push origin main
```
### demos Array Item Structure
Scan each sample and register in this format:
```javascript
{
id: 'sample00', // folder name
title: 'Page Title', // extracted from index.html <title>
desc: 'Brief description', // 1-2 line summary based on index.html content
color: '#FFB7C5', // sample-specific color (cycling pink palette)
icon: '00', // folder number
tags: ['tech1', 'tech2'], // major technology tags used
}
```
Color palette (cycling):
```
#FFB7C5, #8B5CF6, #22D3EE, #4ADE80, #F59E0B, #FF6B6B, #A78BFA, #FB923C
```
### Commit Message Format
```
[Deploy Prep]