slogsdon
UserTwenty-three brand-agnostic design templates for Claude Code: LinkedIn, Instagram, YouTube, Twitch, blog hero, podcast.
Categories
Indexed Skills (72)
design-blog-hero
Generate a blog post hero artifact — TWO pixel-exact HTML canvases in a single file: an Open Graph card (1200×630) for social meta tags AND an in-page hero (1440×600) for the article header. Both canvases share the same content + brand tokens; only the proportions differ. Reads ./design/<brand-slug>/DESIGN.md, tokens.css, and components.html. Triggers include "blog hero for X", "OG card for X", "open graph image", "in-page hero", "/blog-hero".
design-business-card
Generate a printable business card — pixel-exact 1050×600 front canvas + 1050×600 back canvas in a single HTML file. Standard 3.5×2 inch card at 300dpi. Front carries name + title + contact details; back is wordmark-dominant (or brand device) with minimal text. The design system's most reduced artifact — tests whether the brand can speak with almost no text. Print bleed instructions in footer comment. Reads ./design/<brand-slug>/DESIGN.md, tokens.css, and components.html. Triggers include "business card", "calling card", "name card", "/business-card".
design-carousel-slide
Generate a LinkedIn / Instagram multi-slide carousel — single HTML file with N square 1080×1080 .canvas divs, each representing one slide. Default N=5 (cover + 3 content + closing CTA). Cover and closing always use the brand's most distinctive treatments; middle slides are content-led. Reads ./design/<brand-slug>/DESIGN.md, tokens.css, and components.html. Triggers include "carousel for X", "linkedin carousel", "instagram carousel", "carousel slides", "/carousel-slide".
design-instagram-post
Generate an Instagram post artifact — pixel-exact HTML canvas at 1080×1350 (portrait, default — Instagram's max-real-estate format) with opt-in 1080×1080 (square) and 1080×1920 (story / reel cover) modes. Reads ./design/<brand-slug>/DESIGN.md, tokens.css, and components.html. Triggers include "instagram post about X", "ig post", "ig story", "instagram artifact", "/instagram-post".
design-landing-page
Generate a deliverable landing-page HTML file (NOT a screenshot artifact). 1440px design width, mobile-responsive (CSS-only, no JS). Sections: hero (full-viewport) + 3 feature blocks + CTA. Designed to be opened in a browser, iterated on, and deployed as-is. Reads ./design/<brand-slug>/DESIGN.md, tokens.css, and components.html. Triggers include "landing page for X", "marketing page", "product landing", "/landing-page".
design-link-in-bio
Generate a minimal single-column standalone HTML page — mobile-first at 375px width — for use as a link-in-bio destination. Contains: name/wordmark, short tagline, list of links (each a styled <a> block), social footer. Self-contained, works offline, deployable as-is to GitHub Pages or Netlify. Reads ./design/<brand-slug>/DESIGN.md, tokens.css, and components.html. Triggers include "link in bio", "linktree replacement", "bio page", "/link-in-bio".
design-linkedin-post
Generate a LinkedIn post artifact — a 1200×627 image canvas (LinkedIn's recommended share image dimension) plus a companion text suggestion (1300-char limit, hook-first structure). Reads ./design/<brand-slug>/DESIGN.md, tokens.css, and components.html. Triggers include "linkedin post about X", "linkedin artifact", "generate a linkedin image", "/linkedin-post".
design-newsletter-header
Generate a newsletter email header banner — pixel-exact 600×200 HTML canvas (the standard email-client safe-zone width). Self-contained, INLINE styles only (no external <style> blocks beyond <head>) for email-client compat. Intended to be screenshot to PNG and embedded as <img> in email — the rendered image is what readers see, regardless of their email client. Reads ./design/<brand-slug>/DESIGN.md and tokens.css. Triggers include "newsletter header", "email header for X", "email banner", "/newsletter-header".
design-obs-alert-overlay
Generate an OBS browser-source alert overlay — single 1920×1080 HTML file with TRANSPARENT background and hash-routed scenes for stream events (#follow,
design-obs-scene-pack
Generate an OBS scene pack — single 1920×1080 transparent HTML file with hash-routed scenes for additional broadcast layouts beyond the basic stream-overlay set. Scenes (#just-chatting,
design-plan
Generate a DESIGN-PLAN.md for a new brand or branding project — the strategic intent layer (visual direction, voice, audience, hard NOs, mood references) that PRECEDES design tokens. Use BEFORE design-system. Triggers include "design plan for [brand]", "brand brief", "let's plan a brand", "create a DESIGN-PLAN.md", "/design-plan".
design-podcast-cover
Generate a podcast cover artifact — pixel-exact 1500×1500 square HTML canvas (half of Apple Podcasts' 3000×3000 spec for manageable PNG size; export the screenshot at 2× scale via DevTools for actual upload). Bold, legible at app-icon scale (~120×120). Reads ./design/<brand-slug>/DESIGN.md, tokens.css, and components.html. Triggers include "podcast cover for X", "podcast art", "show cover", "/podcast-cover".
design-quote-card
Generate a pull-quote / insight card — TWO pixel-exact HTML canvases in one file: 1080×1080 (square, default) AND 1080×1920 (story variant). Text-dominant, Fraunces-led, no chrome. The quote IS the artifact. Reads ./design/<brand-slug>/DESIGN.md, tokens.css, and components.html. Triggers include "quote card for X", "pull quote", "insight card", "/quote-card".
design-speaker-bio-card
Generate a conference / CFP speaker bio card — pixel-exact 800×600 main canvas + 400×200 compact variant in a single HTML file. Contains: name, title, headshot placeholder (circular 160px), 2-line bio, social handles, optional talk title. Used for CFP applications, conference apps, sponsor decks. Reads ./design/<brand-slug>/DESIGN.md, tokens.css, and components.html. Triggers include "speaker bio card", "CFP card", "conference bio", "/speaker-bio-card".
design-stream-overlay
Generate a single 1920×1080 stream overlay HTML file with hash-routed scenes (#starting,
design-system
Generate a brand-agnostic DESIGN.md (Google design.md spec format) plus tokens.css and showcase.html for any branding project. Reads ./design/<brand-slug>/DESIGN-PLAN.md if present, otherwise asks for an inline brief. Use AFTER design-plan and BEFORE design-ui-components. Triggers include "design system for [brand]", "build a DESIGN.md", "generate design tokens", "/design-system".
design-talk-slide
Generate a 3-slide talk template — title slide + content slide + section-divider slide — all in a single 1920×1080 (16:9) HTML file with clearly demarcated .canvas divs so each can be screenshotted separately and assembled into a full deck. Reads ./design/<brand-slug>/DESIGN.md, tokens.css, and components.html. Triggers include "talk slides for X", "conference slide template", "title slide for [talk]", "/talk-slide".
design-twitch-panels
Generate a bundled Twitch channel asset set — single HTML file containing 1 offline banner (1920×1080) + 6 info panels (320×160 each, labeled About / Schedule / Commands / Socials / Specs · Setup / Support). Each canvas is screenshotted individually and uploaded to the appropriate Twitch channel slot. The offline banner uses the brand's most distinctive architecture; panels use a CONSISTENT register so they read as a set. Reads ./design/<brand-slug>/DESIGN.md, tokens.css, and components.html. Triggers include "twitch panels", "stream channel art", "twitch banner + panels", "/twitch-panels".
design-twitter-card
Generate a Twitter/X card artifact — pixel-exact HTML canvas at 1600×900 (in-feed image) by default, with 1200×630 (Open Graph link card) opt-in. Reads ./design/<brand-slug>/DESIGN.md, tokens.css, and components.html. Triggers include "twitter card for X", "x card for X", "twitter post about X", "OG card", "/twitter-card", "/x-card".
design-ui-components
Generate components.html — a brand-agnostic component library that pulls from a project's DESIGN.md tokens. Includes buttons, cards, badges, eyebrows, hairlines, code blocks, callouts, hero blocks, stat callouts, list items, avatar frames, pull quotes, footer blocks. Use AFTER design-system and BEFORE platform artifact skills. Triggers include "components for [brand]", "component library", "generate UI components", "/ui-components".
design-youtube-channel-art
Generate a YouTube channel banner — pixel-exact 2560×1440 full canvas + 1546×423 safe-zone preview canvas in a single HTML file. The full banner bleeds to the edges (TV display uses it all); the safe zone (1546×423 centered) is the cross-device area where critical content MUST sit. Reads ./design/<brand-slug>/DESIGN.md, tokens.css, and components.html. Triggers include "youtube banner", "youtube channel art", "channel banner", "/youtube-channel-art".
design-youtube-thumbnail
Generate a YouTube thumbnail artifact — a 1280×720 HTML canvas optimized for legibility at small sizes (mobile feed, sidebar suggestions, search results). Reads ./design/<brand-slug>/DESIGN.md, tokens.css, and components.html. Triggers include "youtube thumbnail for X", "thumbnail for [video title]", "yt thumb", "/youtube-thumbnail".
pdf-html
Exports design-* HTML artifacts to single-page PDFs using headless Chromium. Targets the same .canvas / [class*="canvas-"] conventions as screenshot-html, but outputs vector PDFs sized to each canvas's exact pixel dimensions rather than PNG rasters. Use when the desired output is a shareable PDF — audit reports, client deliverables, long-form documents. Do NOT use for social-media graphics (LinkedIn, Instagram, YouTube) or interactive overlay assets; screenshot-html produces better results for those. Trigger on: "export as PDF", "save as PDF", "generate a PDF", "capture as PDF", "PDF version of this", or whenever the user wants a PDF from an HTML artifact previously produced by a design-* skill.
screenshot-html
Capture pixel-exact PNG screenshots of design artifact components inside HTML files produced by design-* skills (LinkedIn, Instagram, YouTube, Twitch, OBS overlays, blog hero, business card, etc.). Targets the `.canvas` / `.canvas-*` / `.scene` containers — not full pages. Use after generating design artifacts and visual exports are needed.
humanize
Edit a draft to sound like Shane wrote it — removing AI-typical patterns, restoring conversational flow, and preserving technical precision. Use whenever Shane says: "humanize this", "edit in my voice", "AI detector pass", "make this sound like me", "rewrite this", "edit this post", "clean this up". Also invoke proactively if presented with a draft that contains staccato fragments, dramatic colon-reveals, em-dash lists, or semicolons between independent clauses — these are reliable markers that text needs a voice pass.
ms-style-pass
Apply Microsoft Writing Style Guide term preferences, bias-free language rules, and heading conventions to a blog draft — without disrupting voice or structure that humanize already established. Use after the humanize skill when Shane says: "ms style pass", "apply the style guide", "style check this", "run the style guide on this", "check for outdated terms", "bias check this", "clean up the terminology", "add headings". Also invoke proactively when a humanized draft contains terms like blacklist, whitelist, master/slave, sanity check, guys, or disability metaphors.
agent-harness
Orchestrate external agent CLI harnesses (pi, hermes) in turn-by-turn sessions from within Claude Code. Use when the user wants to delegate tasks to pi or hermes, chain multiple agent turns, compare outputs across harnesses, or build multi-agent workflows where Claude acts as the coordinator.
agents-md-generator
Generate or update an AGENTS.md / CLAUDE.md / context file for a repo. Use when the user says "set up CLAUDE.md", "generate AGENTS.md", "write a context file for this repo", "document this codebase for AI agents", or when a fresh repo has none. Also use when an existing context file has gone stale and needs a rewrite from current source. Do NOT use for editing project-specific README or contributor docs.
publish-post
End-to-end publishing pipeline for a new article on shane.logsdon.io. Runs text quality passes (humanize → ms-style-pass), generates brand-system design artifacts (blog hero OG + in-page hero, LinkedIn post image), screenshots them at 1x, wires images into the article frontmatter and site, saves LinkedIn companion text to Obsidian, builds the site, bumps the service worker cache version, and commits + pushes. Unattended — no human checkpoints. Working directory must be the site repo root. Triggers: "publish <slug>", "publish the post", "run the publish pipeline", "/publish-post".
work-tracking
Markdown-based task tracking for AI-human collaboration on a project — creates and maintains TASKS.md with status, owner, and decision log. Use when the user says "set up TASKS.md", "track these tasks", "make a checklist for this project", "coordinate work across sessions", "I need a project tracker", or at the start of any multi-task or multi-session project. Replaces the old /work skill (consolidated 2026-05-08).
workflow-design
Run the full design pipeline for a brand or one-off artifact — design-plan (strategy) → design-system (tokens + showcase) → an artifact skill (linkedin / blog-hero / etc.) → screenshot-html (PNG export). Use when the user says "design a brand", "I need the full design system + assets", "set up a new brand from scratch", "design pipeline for X", or when starting visual work on a brand that has no DESIGN.md yet. Do NOT use when the brand already exists and you just need one artifact — call the artifact skill directly.
workflow-feature-spec
Run the full feature-spec pipeline for a new product / feature with commercial stakes — biz-brief (business context) → superpowers:brainstorming (technical spec) → superpowers:writing-plans (implementation plan). Use when the user says "let's build X", "I want to ship Y", "spec out this feature", "go from idea to plan for Z", or when starting any new feature with a user / market / business model. Do NOT use for purely internal tooling (skip biz-brief; go straight to brainstorming) or for bug fixes (use debugging-and-error-recovery instead).
workflow-monthly-skill-audit
Run the monthly Claude Code skill hygiene pipeline — skill-audit (rank skills by usage + quality) → consolidate-memory (prune stale memories) → vault-lint (catch orphans created by deprecated workflows). Use when the 1st of the month rolls around, when the user says "monthly skill audit", "is my context layer healthy", "skill hygiene check", or after deprecating a workflow / removing a skill. Do NOT use for single-skill review (read the SKILL.md directly) or in the same week as the last audit. Output goes to ~/Downloads + Inbox/.
workflow-stage-draft
Draft a blog post or article and prepare it for publishing — idea → first draft → humanize (remove AI-typical patterns) → ms-style-pass (term + bias + heading conventions). Use when the user says "draft a post about X", "write up this idea as a blog", "prepare a draft on Y", "stage a draft for publishing", or after /learned surfaces a publishable thread. Hands off to publish-post for the heavyweight pipeline (artifact generation + publishing); does NOT publish itself.
workflow-vault-weekly
Run the full weekly vault-health pipeline — vault-lint (consistency check) → backlinks (graph repair) → vault-index (rebuild overview) → weekly-signals (deferral / pattern surface) → weekly-learnings (publishable thread surface). Use when /weekly-review is invoked, on Friday afternoons, when the user says "weekly vault review", "audit my vault", "what should I publish this week", or after a week of heavy capture activity. Skips stages whose preconditions aren't met (e.g. weekly-learnings needs ≥3 daily notes from the week).
eod
Use when /eod is invoked or when Shane wants to close out his day. Diffs Today's Focus vs Session Log, increments deferrals in patterns.md for unlogged tasks, flags items at 3+ deferrals, and writes an EOD Audit to today's daily note.
inbox-process
Process the Obsidian Inbox interactively — reads all files, generates routing recommendations, then walks through each item one at a time with user confirmation before acting. Use when /inbox-process is invoked or when Shane wants to clear the Inbox.
morning
Use when /morning is invoked or when Shane wants to start his day with a focus review. Reads accountability context and yesterday's daily note, surfaces carryovers, runs a knowledge briefing, and writes Today's Focus to today's daily note.
plan-tomorrow
Use when /plan-tomorrow is invoked or after /eod. Reads today's EOD audit and proposes tomorrow's focus (1 primary, 2 secondary) accounting for known patterns. Writes a Tomorrow block to today's daily note.
qwen-executor
Use this skill to delegate execution-level tasks to a local model via the LiteLLM proxy (default alias `fast-general`, resolving to gemma4:e4b-mlx). Best for: vault skill invocations (/ghost, /challenge, /emerge, /contradict, /drift, /ideas, /trace, /connect, /compound, /bloom, /stranger, /map, /level-up, /learned, /weekly-learnings, /backlinks), file search and summarization, drafting content, and any task where local execution is sufficient and API cost should be minimized. Do NOT use for tasks requiring real-time web access, complex multi-step tool use, or high-stakes decisions.
write-a-skill
Guide writing a new skill file following Shane's authoring conventions — principle-first, anti-patterns before steps, _lib/ references over inline duplication. Use when invoked as /write-a-skill or when Shane says "create a new skill for X", "add a skill", "write a skill that does X".
auth
Secure authentication and authorization patterns — password hashing, brute-force protection, session vs JWT, OAuth/SSO flows, RBAC. Use when the user says "add login", "set up auth", "is this auth secure", "implement OAuth", "session vs token", "should I use JWT here", or when shipping any feature that gates access. Do NOT use for guessing at credentials or bypassing auth — refuse those.
css-architecture
Modern CSS architecture and design systems without heavy frameworks — Grid, Flexbox, custom properties, container queries, layer organization. Use when the user says "set up the CSS for this", "design system", "CSS architecture", "no Tailwind", "vanilla CSS only", or when starting a stylesheet from scratch on a new project. Do NOT use for utility-class systems (Tailwind etc.) — use those frameworks' own conventions.
database
Relational database schema design, normalization, indexing, and query optimization. Use when the user says "design the schema for X", "how should this table be structured", "this query is slow", "do I need an index here", "denormalize this", or when starting a new feature that needs persistence. Covers Postgres, MySQL, SQLite. Do NOT use for ORM-specific syntax — covers conceptual design first, ORM second.
dependencies
PHP / Composer dependency management and security auditing. Use when the user says "audit this composer.json", "is this package safe", "update dependencies", "find vulns", "lock this version", or before merging anything that adds a new package. Do NOT use for npm / pip / cargo dependencies — this is Composer-specific.
php-project-structure
PHP 8.2+ project organization and architecture with PSR-4 — directory layout for MVC, DDD, microservices. Use when the user says "structure this PHP project", "organize my PHP code", "set up PSR-4", "where should this class go", or when starting a new PHP repo. Do NOT use for framework-specific scaffolding (Laravel, Symfony) — use those frameworks' own generators.
typescript
TypeScript configuration, type-safe patterns, and migration from JavaScript. Use when the user says "set up TypeScript", "migrate this JS to TS", "tighten my tsconfig", "fix these type errors", "design types for X", or when a project introduces TS for the first time. Includes generics, conditional types, and JSDoc-typed JS workflows. Do NOT use for general JavaScript questions — this is for type-system work specifically.
vanilla-js
Modern vanilla-JS architecture without framework dependencies — ES6 modules, custom elements, state without React/Vue. Use when the user says "no framework", "plain JS", "vanilla JavaScript", "I don't want React for this", or when starting a small static site / utility / progressive-enhancement layer. Do NOT use when a framework is already chosen — use the framework's own conventions instead.
web-standards
Web standards compliance and progressive enhancement — semantic HTML, ARIA, viewport / form best practices. Use when the user says "make this accessible", "is this semantic", "fix the a11y", "progressive enhancement", "noscript fallback", or when reviewing markup before ship. Do NOT use for visual design — pair with a css-architecture or design-* skill.
backlinks
Use when asked to audit backlinks or repair the knowledge graph structure, or when /backlinks is invoked. Do NOT use for finding conceptual bridges between ideas — use /connect for that.
drift
Analyze gaps between stated priorities (OKRs, focus statements) and actual session behavior to surface drift. Use when /drift is invoked, when the user says "am I doing what I said I would", "where am I off-track", "do my actions match my goals", "am I avoiding something", or during weekly retrospectives. Reads accountability.md, patterns.md, and recent daily notes. Do NOT use for surfacing patterns within a topic — use /emerge for that.
meeting
Turn a raw meeting / call / 1:1 transcript or notes into a structured Meetings note with key points and action items. Use when /meeting is invoked, when the user says "process this meeting", "clean up these notes", "extract action items from this", or pastes a raw conversation and asks for a summary. Reads from Obsidian Inbox by default; can take inline content. Do NOT use for general note-taking — use the obsidian skill or /log for that.
obsidian
General-purpose Obsidian vault skill — use this whenever the user wants to do anything with their vault or personal notes. Covers reading notes by name, searching vault content, creating new notes, appending to existing ones, checking backlinks, and working with daily notes. Trigger immediately on phrases like: "look up my note on X", "add this to my vault", "what does my note say about Y", "find notes about Z", "log this to my vault", "update my daily note", "create a note for...", "what links to X", "search my vault for...", "show me what I know about...", "check my notes on...", or any time the user mentions Obsidian, their vault, or personal notes. If the user is asking about something they might have written down, reach for this skill first.
vault-index
Rebuild the vault-index note from current vault state. Use when /vault-index is invoked, when the morning skill flags "vault-index not found" or a stale delta, when the user asks "what's in my vault" / "give me a vault overview" / "how's my vault organized", or after a large batch of new Concepts has landed. Do NOT use for searching specific notes — use the obsidian skill instead.
vault-lint
Use when /vault-lint is invoked or when Shane wants a weekly vault health check. Scans Concepts/ and the broader vault for contradictions, orphan pages, missing Concept pages, and stale claims.
weekly-signals
Use when /weekly-signals is invoked or during weekly review. Reads patterns.md and the week's daily notes, surfaces deferral patterns and flagged items, and outputs a paste-ready Accountability Signals block for the Weekly Review.
log
Use when /log is invoked or when Shane wants to capture a lightweight session note. Appends a timestamped entry to today's daily note under Session Log.
compress-prompt
Use when about to write a long prompt, include verbose text in context, or when any block of text needs to be made token-efficient before use. Delegates compression to a local model via the LiteLLM proxy (ollama-agent MCP).
bloom
Map the branching question space from a topic — sub-questions, adjacent domains, meta-framings. Use when /bloom is invoked or Shane asks "what questions does X open up", "bloom on X". Do NOT use to trace how thinking evolved — that's /trace.
challenge
Use when Shane wants to pressure-test a belief, steelman an opposing view, or invoke /challenge. Do NOT use for confirming or validating a position.
compound
Use when asked how knowledge has accumulated or compounded around a topic, or when /compound is invoked. Do NOT use for tracing evolution of thinking over time — use /trace for that.
connect
Surface non-obvious cross-references between vault notes — connecting two concepts that aren't already explicitly linked. Use when /connect is invoked, when the user says "what does X have to do with Y", "is there a thread between these notes", "what connects these ideas", or when reviewing two superficially unrelated topics for shared structure. Do NOT use for direct backlinks (use /backlinks) or for surfacing patterns within a single topic (use /emerge).
contradict
Use when asked to find contradictions or inconsistencies in thinking, or when /contradict is invoked. Do NOT use for pressure-testing a single belief — use /challenge for that.
emerge
Use when asked to surface hidden patterns or implicit ideas in the vault, or when /emerge is invoked. Do NOT use to find connections between two specific concepts — use /connect for that.
fix-nested-code-fences
Use when a markdown file has nested code fences that break rendering — when a ```markdown, ```bash, or similar block appears inside another ``` block anywhere in a generated or edited markdown file.
ghost
Use when you want to answer a question in Shane's voice, when asked to ghost-write as Shane, or when the /ghost command is invoked. Do NOT use for writing in Shane's voice when he is the author — this produces content as Shane, for external use.
learned
Turn a vault insight or pattern into polished written content — blog draft, LinkedIn post, newsletter section. Use when /learned is invoked, when the user says "write this up", "turn this into a post", "I want to publish about X", or when a /weekly-learnings session surfaces a publishable thread. Do NOT use for raw note-taking (use /log) or for ghost-writing in someone else's voice (use /ghost).
level-up
Assess current proficiency in a domain and recommend specific growth actions. Use when /level-up is invoked, when the user says "where am I weak in X", "what should I learn next", "level me up on Y", "give me a study plan for Z", or when reviewing a skill area before committing to a learning sprint. Reads vault notes for evidence of current level. Do NOT use for general curriculum advice — this is grounded in the user's existing vault.
map
Use when asked to audit or map the structure of the knowledge graph, or when /map is invoked. Do NOT use for auditing backlinks on specific notes — use /backlinks for that.
stranger
Build an outside-observer portrait of Shane from vault evidence — what someone reading only the public artifacts would conclude about who he is, what he cares about, what he's avoiding. Use when /stranger is invoked, when the user says "what would someone think of me from this", "how do I come across", "audit my public self", "stranger view", or before refining a personal-brand bio. Do NOT use for self-described identity work — this is deliberately external.
trace
Map the chronological evolution of an idea across vault notes. Use when /trace is invoked or when Shane asks "how has my thinking on X changed", "when did I first write about X", "trace the evolution of X". Do NOT use to find connections between two separate ideas — that's /connect.
weekly-learnings
Use when asked to prepare a weekly reflection or summary of learnings, or when /weekly-learnings is invoked. Do NOT use for accountability or pattern analysis — use /weekly-signals for that.
Bio shown is the top-scored skill's repo description as a fallback — real GitHub bios land in a future update.