Skip to main content
affpapa.org
RU EN
skill CX Codex

ghost — Claude Code skill for Ghost CMS themes

Gives your agent working knowledge of Ghost CMS theme development: Handlebars templates, partials, Tailwind CSS and Alpine.js wiring, image and SEO work.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add Mindrally/skills --skill ghost -a claude-code
Open on GitHub

What ghost does

The skill loads Ghost theme conventions into the agent's context. It covers the usual file layout — default.hbs, index.hbs, post.hbs, tag.hbs, error.hbs and a partials/ folder — and walks through the helpers you actually reach for: {{#foreach}}, {{#get}}, {{#is}}, {{#has}}, {{img_url}}, {{reading_time}}, {{ghost_head}}, {{ghost_foot}}.

There are sections on Tailwind CSS with content: ['./**/*.hbs'], pulling the site accent colour from {{@site.accent_color}}, an Alpine.js toggle menu, and gating content by membership tier through @member and @member.paid. Responsive images get a srcset and sizes example, plus application/ld+json for the blog and a package.json with engines.ghost.

Testing is listed as a step: validate the theme with gscan. Worth taking seriously — a theme that skips gscan can fail validation when you upload it to Ghost, so run it before you ship rather than after.

What it helps with

  • scaffold a Ghost theme with layouts and partials
  • loop posts with pagination using Handlebars helpers
  • wire Tailwind CSS into .hbs templates
  • serve responsive images with srcset and lazy loading
  • gate content for paid versus free members

Example prompts for the agent

  • Scaffold a Ghost theme: default.hbs, index.hbs, post.hbs and a post-card partial
  • Add an Alpine.js nav toggle and set up Tailwind with content pointing at all .hbs files
  • Pull the three latest posts tagged featured using the get helper

How to install ghost

1Skills CLI (Vercel)

npx skills add Mindrally/skills --skill ghost -a claude-code

2Manually: put the files in place

~/.claude/skills/ghost/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/ghost/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about ghost

How do I install ghost in Claude?

Run npx skills add Mindrally/skills --skill ghost -a claude-code. The skill lands at ~/.claude/skills/ghost/SKILL.md.

What does the ghost skill do?

It teaches the agent Ghost CMS theme development: Handlebars templates and helpers, partials, Tailwind CSS, Alpine.js, membership gating and image optimization.

Which platforms does ghost support?

Claude, Codex, Cursor, GitHub Copilot, Gemini CLI and OpenCode. Each has its own install command and its own skills folder.

Source text

SKILL.md · Apache-2.0 
---
name: ghost
description: Ghost CMS theme development with Handlebars templating, Alpine.js, Tailwind CSS, and performance optimization
metadata:
  maintainer: Mindrally
  source: https://github.com/Mindrally/skills
---

# Ghost CMS Theme Development

You are an expert in Ghost CMS theme development, Handlebars templating, and modern frontend technologies.

## Core Principles

- Write semantic, accessible HTML
- Use Handlebars helpers effectively
- Optimize for performance and SEO
- Follow Ghost theme development best practices
- Create responsive, mobile-first designs

## Project Structure

```
theme/
├── assets/
│   ├── css/
│   │   └── screen.css
│   ├── js/
│   │   └── main.js
│   └── images/
├── partials/
│   ├── header.hbs
│   ├── footer.hbs
│   └── post-card.hbs
├── default.hbs
├── index.hbs
├── post.hbs
├── page.hbs
├── tag.hbs
├── author.hbs
├── error.hbs
└── package.json
```

## Handlebars Templating

### Basic Template Structure

```handlebars
{{!< default}}

<main class="site-content">
  {{#foreach posts}}
    {{> post-card}}
  {{/foreach}}

  {{pagination}}
</main>
```

### Default Layout (default.hbs)

```handlebars
<!DOCTYPE html>
<html lang="{{@site.locale}}">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>{{meta_title}}</title>

  {{ghost_head}}

  <link rel="stylesheet" href="{{asset "css/screen.css"}}">
</head>
<body class="{{body_class}}">

  {{> header}}

  {{{body}}}

  {{> footer}}

  {{ghost_foot}}

  <script src="{{asset "js/main.js"}}"></script>
</body>
</html>
```

### Partials

```handlebars
{{!-- partials/post-card.hbs --}}
<article class="post-card {{post_class}}">
  {{#if feature_image}}
    <a href="{{url}}" class="post-card-image-link">
      <img
        class="post-card-image"
        src="{{img_url feature_image size="m"}}"
        alt="{{title}}"
        loading="lazy"
      >
    </a>
  {{/if}}

  <div class="post-card-content">
    <h2 class="post-card-title">
      <a href="{{url}}">{{title}}</a>
    </h2>

    {{#if excerpt}}
      <p class="post-card-excerpt">{{excerpt words="30"}}</p>
    {{/if}}

    <footer class="post-card-meta">
      <time datetime="{{date format="YYYY-MM-DD"}}">
        {{date format="D MMM YYYY"}}
      </time>
      <span class="reading-time">{{reading_time}}</span>
    </footer>
  </div>
</article>
```

## Ghost Helpers

### Content Helpers

```handlebars
{{!-- Post content --}}
{{content}}

{{!-- Excerpt with word limit --}}
{{excerpt words="50"}}

{{!-- Reading time --}}
{{reading_time}}

{{!-- Featured image with responsive sizes --}}
{{img_url feature_image size="l"}}

{{!-- Date formatting --}}
{{date format="MMMM D, YYYY"}}
```

### Conditional Helpers

```handlebars
{{#is "home"}}
  {{!-- Home page content --}}
{{/is}}

{{#is "post"}}
  {{!-- Single post content --}}
{{/is}}

{{#has tag="featured"}}
  <span class="featured-badge">Featured</span>
{{/has}}

{{#if @member}}
  <p>Welcome, {{@member.name}}!</p>
{{/if}}
```

### Loop Helpers

```handlebars
{{#foreach posts}}
  {{!-- Access loop variables --}}
  {{#if @first}}<div class="first-post">{{/if}}
  {{> post-card}}
  {{#if @first}}</div>{{/if}}
{{/foreach}}

{{!-- Get posts with specific tag --}}
{{#get "posts" filter="tag:featured" limit="3"}}
  {{#foreach posts}}
    {{> post-card}}
  {{/foreach}}
{{/get}}
```

## Tailwind CSS Integration

### Setup

```javascript
// tailwind.config.js
module.exports = {
  content: ['./**/*.hbs'],
  theme: {
    extend: {
      colors: {
        ghost: {
          accent: 'var(--ghost-accent-color)',
        },
      },
    },
  },
};
```

### Using Ghost Accent Color

```css
:root {
  --ghost-accent-color: {{@site.accent_color}};
}

.accent-bg {
  background-color: var(--ghost-accent-color);
}
```

## Alpine.js Integration

```handlebars
<div x-data="{ open: false }">
  <button @click="open = !open">Toggle Menu</button>

  <nav x-show="open" x-transition>
    {{navigation}}
  </nav>
</div>
```

## Membership Integration

```handlebars
{{#if @member}}
  {{#if @member.paid}}
    {{!-- Premium content --}}
    {{content}}
  {{else}}
    {{!-- Free member content --}}
    <p>Upgrade to access premium content</p>
  {{/if}}
{{else}}
  {{!-- Public content --}}
  <a href="#/portal/signup">Subscribe</a>
{{/if}}
```

## SEO and Performance

### Meta Tags

```handlebars
<head>
  {{!-- Ghost handles meta via ghost_head --}}
  {{ghost_head}}

  {{!-- Custom structured data --}}
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "Blog",
    "name": "{{@site.title}}",
    "url": "{{@site.url}}"
  }
  </script>
</head>
```

### Image Optimization

```handlebars
{{!-- Responsive images --}}
<img
  srcset="
    {{img_url feature_image size="s"}} 300w,
    {{img_url feature_image size="m"}} 600w,
    {{img_url feature_image size="l"}} 1000w
  "
  sizes="(max-width: 600px) 300px, (max-width: 1000px) 600px, 1000px"
  src="{{img_url feature_image size="m"}}"
  alt="{{title}}"
  loading="lazy"
>
```

## Package.json Configuration

```json
{
  "name": "theme-name",
  "version": "1.0.0",
  "engines": {
    "ghost": ">=5.0.0"
  },
  "config": {
    "posts_per_page": 10,
    "image_sizes": {
      "s": { "width": 300 },
      "m": { "width": 600 },
      "l": { "width": 1000 },
      "xl": { "width": 2000 }
    }
  }
}
```

## Testing

- Use gscan to validate theme
- Test across different Ghost versions
- Check responsive behavior
- Validate membership features
- Test with various content types

© Mindrally · Apache-2.0 · Mindrally/skills

Similar skills

Everything for Frontend and UI →
hyva-cms-custom-field hyva-themes Generates custom inputs and modal handlers for Hyvä CMS components. Helps Magento developers extend editor controls without writing boilerplate by hand. CX Codex +1 752installs magento-hyva-specialist maxnorm A skill for building Magento 2 storefronts on the Hyvä theme: Alpine.js components, Tailwind CSS, GraphQL and frontend performance work. CX Codex +1 857installs blog-taxonomy AgriciDaniel Suggests post tags and categories, audits site taxonomy, and prepares CMS changes only after you approve the displayed plan. CX Codex +1 2,400installs theme-factory nexu-io A skill with 10 preset themes for styling artifacts: slides, docs, reports, HTML landing pages. Use it when you need a professional look without manual design work. CX Codex +1 2,800installs godot-ui Zate Gives the agent working knowledge of Godot Control nodes, themes and common screens. Useful when building menus, HUDs or inventories. CX Codex +1 2,700installs hyva-playwright-test hyva-themes Guides writing Playwright end-to-end tests for Hyvä Magento storefronts using Alpine.js. It resolves locator conflicts caused by hidden DOM elements. CX Codex +1 1,300installs

From the same set214

elixir A skill that tells your coding agent how to write Elixir and Phoenix: functional patterns, Ecto, LiveView, OTP. Useful when the project actually runs on BEAM. CX Codex +1 836installs nuxtjs-vue-typescript Coding guidelines for Nuxt 3 and Vue 3 projects using TypeScript and Tailwind CSS. Guides component typing, composables, and Nitro server endpoints. CX Codex +1 834installs spring-boot A skill that gives your agent Spring Boot conventions: REST controllers, JUnit tests, security, build and deploy. Useful when the project is Java. CX Codex +1 832installs responsive-design A skill that hands your coding agent a set of responsive design rules: mobile-first CSS, flexible layouts, media queries, adaptive images and type. CX Codex +1 830installs woocommerce Development guidelines for WordPress and WooCommerce. Helps assistants write safe PHP code with hooks, custom product types, and REST endpoints. CX Codex +1 826installs testing Defines software testing guidelines for AI agents, covering test isolation, table-driven checks, and mock boundaries. CX Codex +1 825installs go-backend-microservices A microservices engineering skill for Go projects. It guides coding assistants to apply clean architecture, configure OpenTelemetry, and write table-driven tests. CX Codex +1 823installs websocket-development A rule set that steers the agent through building WebSocket servers and clients: connections, messages, scaling, security. CX Codex +1 826installs

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor