CtrlK
BlogDocsLog inGet started
Tessl Logo

alonso-skills/ghost-theme

Build, customize, and deploy Ghost CMS themes. Use this skill whenever the user mentions Ghost themes, Ghost CMS, Handlebars templates (.hbs files), Ghost Admin, Ghost membership/subscription integration, Ghost custom settings, or Ghost content API — even if they don't say "theme" explicitly. Trigger on: building a blog theme, creating a Ghost site, editing .hbs templates, adding member-only content, Ghost hero sections, Ghost routing (routes.yaml), Ghost image optimization, Ghost dark mode, Ghost search, Ghost deploy, gscan validation, Ghost JSON-LD/SEO, or any mention of {{ghost_head}}, {{ghost_foot}}, {{#foreach}}, {{#get}}, {{img_url}}, {{asset}}, @custom, @member, or Portal. Also use when the user has an existing Ghost theme they want to modify, extend, or debug — not just for new themes.

100

Quality

100%

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Passed

No known issues

Overview
Quality
Evals
Security
Files
name:
ghost-theme
description:
Build, customize, and deploy Ghost CMS themes. Use this skill whenever the user mentions Ghost themes, Ghost CMS, Handlebars templates (.hbs files), Ghost Admin, Ghost membership/subscription integration, Ghost custom settings, or Ghost content API — even if they don't say "theme" explicitly. Trigger on: building a blog theme, creating a Ghost site, editing .hbs templates, adding member-only content, Ghost hero sections, Ghost routing (routes.yaml), Ghost image optimization, Ghost dark mode, Ghost search, Ghost deploy, gscan validation, Ghost JSON-LD/SEO, or any mention of {{ghost_head}}, {{ghost_foot}}, {{#foreach}}, {{#get}}, {{img_url}}, {{asset}}, `@custom`, `@member`, or Portal. Also use when the user has an existing Ghost theme they want to modify, extend, or debug — not just for new themes.

Ghost Theme Skill

Quick Start

If the user already has a Ghost theme, work with it directly. Read its existing templates, package.json, and build setup. The reference files below apply to any Ghost theme — not just the base template.

If the user wants to create a new theme, copy the base template:

cp -r <skill-install-path>/base-template/ <theme-name>
    cd <theme-name>
    bun install
    bun run build

Where <skill-install-path> is wherever this skill is installed (e.g. ~/.claude/skills/ghost-theme).

The base template includes: all required HBS files, TypeScript + component CSS build pipeline, ESLint, GitHub Actions (CI + deploy), Docker Compose for local Ghost, and ghost-mcp for AI-driven testing.

After copying, update "name" in package.json to the new theme name.

Then start the local Ghost instance and build:

docker compose up -d
    bun run dev

Ghost Admin will be at http://localhost:2368/ghost/. On first run, complete the setup wizard, then go to Settings → Design and activate the theme named dev-theme — that is the mount name in docker-compose.yml, regardless of what you named the theme folder or package.json.

Do not write Ghost theme files from scratch. When creating a new theme, always copy the base template.

Routing

Identify what the user needs, then read only the relevant reference file(s). Most tasks need 1-2 files, not all 12.

When you need to...ReadKey topics
Choose or create templates01-template-hierarchy.mdTemplate lookup order, context data shapes, custom templates, foreach variables
Validate theme for upload02-required-files.mdGScan errors vs warnings, package.json schema, required helpers
Use Handlebars helpers03-helper-api.md{{#get}} filters, {{#foreach}}, {{#has}}, {{#is}}, {{#match}}, {{img_url}}
Add SEO or structured data04-structured-data.mdJSON-LD per context, OpenGraph/Twitter cards, canonical URLs
Build hero sections or layouts05-hero-patterns.mdHero variants, featured carousel, custom templates, responsive images
Integrate members/subscriptions06-members-integration.md@member object, Portal data-portal values, content gating, tiers
Configure theme settings07-custom-settings.mdSetting types, {{#match}}, groups, color/image/text patterns, font vars
Set up or modify the build08-bun-build.mdbuild.ts, watch mode, zip workflow, TypeScript, PostCSS
Handle responsive images09-responsive-images.mdimage_sizes, srcset/sizes, format conversion, lazy loading
Configure custom routing10-routing.mdroutes.yaml, collections, channels, data binding
Add translations11-i18n.md{{t}} helper, locale files, pluralization, RTL
Add dark mode, search, or styling12-appearance-search.mdDark mode, accent color, custom fonts, search triggers
Use Ghost content as UI data13-content-as-data.mdFeatured flag as hero curation, tag metadata (accent_color, feature_image, count.posts), Ghost pages as section metadata, internal (#hash) tags, related posts filter, JS carousel pattern, custom homepage with no default feed

Common Workflows

New custom page layout: Read 01 for custom-*.hbs naming + template lookup, 05 for layout patterns, 07 if it needs user-configurable options.

Paid members content gating: Read 06 for {{#has visibility}} and Portal attributes, 01 for post vs page context data.

New collection or site section: Read 10 for routes.yaml syntax, 01 for template resolution, 03 for {{#get}} cross-collection queries.

Image performance: Read 09 for srcset/sizes and format conversion, 02 for image_sizes in package.json.

Local dev + deploy: Read 08 for Docker Compose setup, build pipeline, and GitHub Actions deploy workflow when using the base template.

Carousel, hero, or category grid: Read 13 first — Ghost has no native widget system. The answer is always {{#get}} to query posts/tags + the featured flag or tag metadata as the data source + a JS library (Tiny Slider, Swiper) or CSS scroll snap for interactivity.

Custom homepage with full layout control: Read 13 for the home.hbs + routes: /: home pattern. Read 05 for hero variants, 07 for making sections configurable from Ghost Admin.

Workspace
alonso-skills
Visibility
Public
Created
Last updated
Publish Source
CLI
Badge
alonso-skills/ghost-theme badge