Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →tryghost/Shade page templates
Pick the right Shade page template (ListPage, PageHeader) for a new admin page instead of inventing chrome.
Passed 23 of 23 test cases with the skill, and 7 of 23 without it.
and 25 more in the full report
16 fixed7 passed either way0 still failing0 broke
Tokens, turns and time describe resource use, not a dollar price.
One of 16 test cases the skill fixed. Same model, same prompt, with and without the skill.
On a Ghost admin page, we want a description paragraph and a small metadata line below the title. A developer proposed using `<p>` and `<span>` HTML tags inside PageHeader.Left. Which dedicated subcomponents should be used instead?
| Checked | Without skill | With skill |
|---|---|---|
| Uses PageHeader.Description for the description text. | Missed | Passed |
| Uses PageHeader.Meta below the title block for metadata. | Missed | Passed |
The instructions your model reads when the skill loads.
When building a new admin page, the first question is what page type is this? — then reach for the matching pattern instead of inventing chrome.
Browsing or scanning a collection of items.
PageHeader (title + count + search/filter/actions) → table or list → empty state → pagination.ListPage (composes PageHeader). Heavy filter UI uses Filters.Working with a single item — viewing, editing, or both.
PageHeader with breadcrumb + title + meta, a primary action area, and a content area dedicated to the item.PageHeader directly and lay out the body yourself.Out of scope for the current page-template milestone. Don't force a settings page into ListPage or PageHeader.
No standard yet — too few examples. Don't standardise prematurely.
When constructing or changing header controls, follow Shade page header and its linked Storybook contract.
import {ListPage} from '@tryghost/shade/page-templates';
import {PageHeader, ViewBar, FilterBar} from '@tryghost/shade/patterns';
import {EmptyIndicator, Table} from '@tryghost/shade/components';
import {LucideIcon} from '@tryghost/shade/utils';
test cases passed, vs 7 / 23 without
More skills from the same source and nearby in the registry, with their headline benchmark lift.