Imported from pujan-modha/clover-design (skills/blog-post/SKILL.md). Install upstream with npx skills add pujan-modha/clover-design --skill blog-post. Copyright stays with the author.

Blog Post Skill

Name: blog-post
Author: pujan-modha

Produce a single long-form editorial article page.

Structure

Header — publication wordmark, minimal nav (3–4 links), search icon.
Hero — full-bleed cover image (CSS gradient placeholder), title in display font, byline (author · date · read time), topic tag.
Body — max-width 65ch, generous line-height (1.65–1.8).
- Subheadings in display font.
- Pull quotes: left border accent, larger type, lighter weight.
- Inline code: mono, subtle background.
- Code blocks: dark background, syntax-colored via CSS classes.
- Images: full-bleed or inset with caption.
Footer — author bio card, related articles (3 cards), newsletter signup.

Rules

Serif for body, sans for UI, mono for code.
Generous whitespace between sections.
data-df-id on title, sections, pull quotes, code blocks.
Responsive: comfortable reading at 375px–1440px.

Output

Single index.html, inline CSS.

{ "ocm": "1", "id": "pujan-modha-clover-design-blog-post", "kind": "skill", "name": "blog-post", "description": "Long-form editorial blog post layout with hero image, typography hierarchy, pull quotes, and code blocks. Use for \"blog post\", \"article\", \"essay\".", "publisher": "pujan-modha", "version": "1.0.0", "capabilities": { "domains": [ "coding" ], "tags": [ "skill-md", "github" ], "languages": [ "en" ] }, "quality_prior": 0.6, "examples": [ "Long-form editorial blog post layout with hero image, typography hierarchy, pull quotes, and code blocks. Use for \"blog post\", \"article\", \"essay\"." ], "primary": false, "metadata": { "source": { "provider": "github", "repository": "https://github.com/pujan-modha/clover-design", "path": "skills/blog-post/SKILL.md", "ref": "bcd24e99b5c3e703c7fd08c6bdf08df5ceb39ab2", "url": "https://github.com/pujan-modha/clover-design/blob/bcd24e99b5c3e703c7fd08c6bdf08df5ceb39ab2/skills/blog-post/SKILL.md", "key": "pujan-modha/clover-design/skills/blog-post/SKILL.md" } }, "instructions": "# Blog Post Skill\n\nProduce a single long-form editorial article page.\n\n## Structure\n1. **Header** — publication wordmark, minimal nav (3–4 links), search icon.\n2. **Hero** — full-bleed cover image (CSS gradient placeholder), title in\n display font, byline (author · date · read time), topic tag.\n3. **Body** — max-width 65ch, generous line-height (1.65–1.8).\n - Subheadings in display font.\n - Pull quotes: left border accent, larger type, lighter weight.\n - Inline code: mono, subtle background.\n - Code blocks: dark background, syntax-colored via CSS classes.\n - Images: full-bleed or i", "cost": { "context_tokens": 237 } }

blog-post

About

Blog Post Skill

Structure

Rules

Output

Use it

Manifest

Reviews