К основному содержанию
affpapa.org
RU EN
скилл CX Codex

ghost — скилл для Claude Code: темы Ghost CMS

Помогает агенту писать темы для Ghost CMS: Handlebars-шаблоны, partials, интеграция Tailwind CSS и Alpine.js, оптимизация картинок и SEO.

Установить в Claude Code · Через Skills CLI (Vercel) Все способы и платформы ↓ 
npx skills add Mindrally/skills --skill ghost -a claude-code
Открыть на GitHub

Что делает ghost

Скилл задаёт агенту контекст разработки тем Ghost. Внутри — структура проекта с default.hbs, index.hbs, post.hbs, tag.hbs и папкой partials/, примеры шаблонов и разбор хелперов: {{#foreach}}, {{#get}}, {{#is}}, {{#has}}, {{img_url}}, {{reading_time}}, {{ghost_head}} и {{ghost_foot}}.

Отдельные блоки посвящены подключению Tailwind CSS через tailwind.config.js с content: ['./**/*.hbs'], акцентному цвету сайта через {{@site.accent_color}}, реактивному меню на Alpine.js и разграничению доступа по подписке через @member и @member.paid. Есть примеры адаптивных картинок с srcset и sizes, разметка application/ld+json для блога и настройка package.json с полем engines.ghost.

В конце — проверка темы через gscan. Это стоит держать в голове: без прогона gscan тема может не пройти валидацию при загрузке в Ghost, поэтому проверку лучше не откладывать на потом.

Какие задачи решает

  • собрать каркас темы Ghost с partials и layout-файлами
  • вывести список постов с пагинацией через хелперы Handlebars
  • подключить Tailwind CSS к .hbs-шаблонам
  • сделать адаптивные картинки с srcset и ленивой загрузкой
  • разграничить контент для платных и бесплатных подписчиков

Примеры запросов агенту

  • Собери структуру темы Ghost: default.hbs, index.hbs, post.hbs и partials для карточки поста
  • Добавь в тему Alpine.js-меню и подключи Tailwind с content по всем .hbs
  • Сделай вывод постов с тегом featured через хелпер get и ограничь тремя записями

Как установить ghost

1Через Skills CLI (Vercel)

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

2Вручную: положить файлы

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

Папка скилла целиком; для одного проекта — .claude/skills/ghost/

По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов

Из того же набора168

sass-best-practices Скилл задаёт агенту правила письма на Sass с отступами: структура файлов, переменные, миксины, BEM. Пригодится, если стили в проекте пишут на .sass, а не на SCSS. CX Codex +1 845установок elixir Скилл задаёт агенту стиль работы с Elixir и Phoenix: функциональные паттерны, Ecto, LiveView, OTP. Пригодится, когда проект на BEAM, а не на чём-то ещё. CX Codex +1 836установок spring-boot Скилл задаёт агенту стиль кода на Spring Boot: REST-контроллеры, тесты, безопасность, сборка и деплой. Пригодится, когда проект на Java и хочется единообразия. CX Codex +1 832установок responsive-design Скилл задаёт агенту правила адаптивной вёрстки: mobile-first, гибкие сетки, медиазапросы, адаптивные картинки и типографика. CX Codex +1 830установок websocket-development Набор правил для агента, который пишет сервер и клиент на WebSocket: соединения, сообщения, масштабирование, безопасность. CX Codex +1 826установок hono-typescript Задаёт агенту правила разработки API на Hono и TypeScript под Cloudflare Workers, Deno, Bun и Node.js. Пригодится, когда проект уже на Hono или только переезжает на него. CX Codex +1 819установок web-development Скилл с правилами веб-разработки: сетка Bootstrap, вьюхи и модели Django, атрибуты HTMX. Пригодится, когда агент пишет шаблоны и бэкенд в одном проекте. CX Codex +1 815установок blazor Скилл задаёт агенту правила разработки на Blazor: жизненный цикл компонентов, привязка данных, управление состоянием и оптимизация рендеринга. CX Codex +1 798установок

Похожие

hyva-cms-custom-field hyva-themes Помогает создавать нестандартные типы полей и обработчики модальных окон для компонентов Hyvä CMS в Magento. Пригодится при настройке редактора контента. CX Codex +1 752установок magento-hyva-specialist maxnorm Скилл для разработки витрин Magento 2 на теме Hyvä: Alpine.js, Tailwind CSS и оптимизация фронтенда. Пригодится, когда переводите шаблоны на Hyvä. CX Codex +1 857установок blog-taxonomy AgriciDaniel Подбирает теги и категории для статей, проверяет таксономию сайта и готовит синхронизацию с CMS после подтверждения плана. CX Codex +1 2 400установок theme-factory nexu-io Скилл с 10 готовыми темами для оформления артефактов: слайды, документы, отчёты, HTML-лендинги. Подойдёт, когда нужно быстро придать материалам профессиональный вид. CX Codex +1 2 800установок godot-ui Zate Скилл даёт агенту знания о Control-нодах, темах и типовых экранах Godot. Пригодится, когда собираешь меню, HUD или инвентарь. CX Codex +1 2 700установок hyva-playwright-test hyva-themes Помогает писать e2e-тесты Playwright под витрины Hyvä на Magento с Alpine.js. Решает частые сбои строгого режима локаторов из-за скрытых в DOM элементов. CX Codex +1 1 300установок

Рядом в теме «Фронтенд и UI»

Всё по теме «Фронтенд и UI» →

Вопросы о ghost

Как установить ghost в Claude?

Выполните npx skills add Mindrally/skills --skill ghost -a claude-code. Файл скилла окажется в ~/.claude/skills/ghost/SKILL.md.

Что делает скилл ghost?

Даёт агенту знания по разработке тем Ghost CMS: Handlebars-шаблоны, хелперы, partials, Tailwind CSS, Alpine.js, работа с подписками и оптимизация картинок.

На каких платформах работает ghost?

Claude, Codex, Cursor, GitHub Copilot, Gemini CLI и OpenCode. Для каждой платформы своя команда установки, файл скилла кладётся в отдельную папку.

Исходный текст

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

Смотрите также

Спонсоры проекта

Компании, которые помогают держать аналитику открытой
Золотой спонсор AI-аналитика спроса на iGaming — индекс, тренды, конкуренты
Nutra.Club Закрытое сообщество Nutra-вертикали от команды M1

Показы, клики и копирования кода — открытая статистика. Мы держим цифры публичными по той же логике, что и сам NeBlask. Стать спонсором