← ClaudeAtlas

pencil-deploylisted

A skill for deploying the Pencil design demo site to GitHub Pages. Performs deployment preparation (index.html update + git commit/push) and publishing (tag creation → GitHub Actions auto-deploy). Use this skill in the following situations: - "Prepare for deployment", "Deploy prep", "prepare deploy" - "Publish please", "Deploy it", "publish", "Deploy design samples" - "Update demo site", "GitHub Pages deploy" - "Publish sample pages", "Create a tag"
psmon/pencil-creator · ★ 5 · DevOps & Infrastructure · score 67
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]