- Home
- Skills
- Frontend & Web Apps
- ghost theme development
More screenshots
Works with the AI tools you already use
ghost theme development
Design and build GScan-compliant Ghost Handlebars themes using official Starter workflows.
$12
ghost theme development
Example session with this skill installed
Build a custom Ghost theme for an independent publication covering technology, design and contemporary culture. Its readers value thoughtful long-form essays, shorter commentary and curated recommendations. The theme should feel editorial, restrained and contemporary, with strong typography, clear content discovery and comfortable reading on desktop and mobile. It should support free subscriptions now and allow for paid membership later without making the current experience feel overly commercial.
Inspect any available content, navigation, brand assets and technical instructions first. Produce a concise working brief, identify consequential unknowns and recommend a design direction. Then implement the approved direction using the current Ghost Starter.
Test representative long and short content, missing optional data, rich editor content, navigation, archives, responsive behaviour, accessibility and relevant membership states. Run the production build and fatal GScan validation, inspect the resulting archive and report what was completed, the validation results, known limitations and anything that could not be tested.
Do not activate, deploy or publish the theme.
- Read your context and instructions
- Compiled the ghost theme development
- Generated the UI component
{
"name": "field-notes",
"description": "A restrained editorial Ghost theme for technology, design, and contemporary culture.",
"version": "1.0.0",
"engines": {
"ghost": ">=5.0.0"
},
"license": "MIT",
"screenshots": {
"desktop": "assets/screenshot-desktop.jpg"
},
"scripts": {
"dev": "rollup -c --environment BUILD:development -w",
"build": "rollup -c --environment BUILD:production",
"zip": "pnpm build && bestzip $npm_package_name.zip assets/* partials/* members/* *.hbs package.json",
"test": "gscan .",
"pretest": "pnpm zip",
"test:ci": "gscan --fatal --verbose .",
"pretest:ci": "pnpm zip"
},
"packageManager": "pnpm@11.25.0",
"author": {
"name": "Field Notes",
"email": "hello@example.com",
"url": "https://ghost.org"
},
"gpm": {
"type": "theme",
"categories": [
"Minimal",
"Blog"
]
},
"keywords": [
"ghost",
"theme",
"ghost-theme"
],
"repository": {
"type": "git",
"url": "https://github.com/TryGhost/Starter.git"
},
"devDependencies": {
"@babel/core": "8.0.1",
"@babel/preset-env": "8.0.2",
"@rollup/plugin-babel": "7.1.0",
"@rollup/plugin-commonjs": "29.0.3",
"@rollup/plugin-node-resolve": "16.0.3",
"@rollup/plugin-terser": "1.0.0",
"bestzip": "3.0.3",
"gscan": "6.4.2",
"postcss": "8.5.26",
"postcss-import": "17.0.0",
"postcss-preset-env": "11.5.1",
"rollup": "4.63.1",
"rollup-plugin-livereload": "2.0.5",
"rollup-plugin-postcss": "4.0.2"
},
"browserslist": [
"defaults"
],
"config": {
"card_assets": true,
"posts_per_page": 15,
"image_sizes": {
"xxs": {
"width": 30
},
"xs": {
"width": 100
},
"s": {
"width": 300
},
"m": {
"width": 600
},
"l": {
"width": 1200
},
"xl": {
"width": 2000
}
}
},
"type": "module"
}
ghost-theme-development.tsx
TSX · React component
Example file from a real run - the skill writes it into your workspace.
Connects securely to your tools. The creator never sees your data.
What you get
About this skill
The problem
Building Ghost themes often leads to broken Handlebars helpers, inaccessible membership flows, and fatal GScan validation errors. Generic AI models often ignore the specific requirements of the Ghost Starter repository and produce code that fails to upload.
What it does
- Generates custom Handlebars templates based on the official Ghost Starter workflow.
- Designs information hierarchies and membership interaction models for newsletters and publications.
- Diagnoses and fixes GScan validation failures and helper syntax errors.
- Configures custom settings in package.json to give publishers native controls.
- Validates responsive media, semantic structure, and keyboard accessibility.
Frameworks & tools
Ghost CMS, Handlebars.js, GScan, TryGhost/Starter, CSS/Tailwind, and Node.js build tooling.
Why this beats prompting it yourself
General prompts often suggest standard HTML/JS that lacks Ghost-specific context like membership attributes or routing. This skill enforces the official Starter workflow and ensures every output is compatible with the latest Ghost engine and GScan requirements.
Use cases
- Building a premium newsletter theme with tiered membership levels.
- Redesigning a legacy Ghost theme to support modern responsive images.
- Troubleshooting a "Fatal Error" during a theme upload to Ghost Admin.
- Scaffolding a custom post template for long-form editorial content.
Known limitations
Requires the user to provide brand assets or existing repository context for redesigns. Does not handle live deployment to remote servers or domain configuration.
How to install
Works the same in every agent - Claude, Cursor, Codex, Copilot and 20+ more.
- 1
Download the ZIP
Free skills download straight away. Paid skills unlock right after purchase.
- 2
Unzip into your skills folder
Every agent reads skills from one folder on your machine. Drop the unzipped folder in there.
- 3
Ask your agent to use it
Restart the agent if it was already running. It picks the skill up automatically - no config needed.
Skills folder by agent
Click the path to copy it. Create the folder if it does not exist yet.
Reviews
No reviews yet
Be one of the first to try it. Every listed skill passes our trust checks below.
Security scanned
Passed our 8-point scan before listing
Fresh listing
Recently published to Agensi
30-day refund
Not a fit? Get your money back
Trust & safety
Security scanned
Verified clean 28 days ago
- Passed all security checks, Safe to install