blog-post
Produces a single-file, responsive editorial article template ready for web publishing.
Install
mkdir -p .claude/skills/blog-post-pujan-modha && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/11398" && unzip -o skill.zip -d .claude/skills/blog-post-pujan-modha && rm skill.zipInstalls to .claude/skills/blog-post-pujan-modha
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Long-form editorial blog post layout with hero image, typography hierarchy, pull quotes, and code blocks. Use for "blog post", "article", "essay".Key capabilities
- →Structure long-form editorial articles
- →Include hero images and typography hierarchy
- →Format pull quotes and code blocks
- →Ensure responsive design for various screen sizes
- →Generate a single `index.html` with inline CSS
How it works
The skill structures a long-form editorial article page with a header, hero section, body content including subheadings, pull quotes, and code blocks, and a footer, ensuring responsive design and specific typography rules.
Inputs & outputs
When to use blog-post
- →Create an article draft
- →Generate a blog post layout
- →Produce technical essays
About this skill
Blog Post Skill
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-idon title, sections, pull quotes, code blocks.- Responsive: comfortable reading at 375px–1440px.
Output
Single index.html, inline CSS.
When not to use it
- →When the user requires complex interactive elements beyond basic content display
- →When the user wants to use external CSS files
Limitations
- →Produces a single `index.html` file
- →Uses inline CSS only
- →Focuses on desktop and mobile readability within a specific range
How it compares
This skill provides a predefined, optimized structure and styling for editorial content, ensuring readability and visual engagement, unlike a manual HTML creation that might lack consistent formatting or responsive considerations.
Compared to similar skills
blog-post side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| blog-post (this skill) | 0 | 3mo | No flags | Beginner |
| resume-builder | 53 | 3mo | No flags | Beginner |
| write-docs | 6 | 3mo | No flags | Beginner |
| wiki-changelog | 3 | 4mo | No flags | Beginner |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by pujan-modha
View all by pujan-modha →You might also like
resume-builder
amruthpillai
Generate professional resumes that conform to the Reactive Resume schema. Use when the user wants to create, build, or generate a resume through conversational AI, or asks about resume structure, sections, or content. This skill guides the agent to ask clarifying questions, avoid hallucination, and produce valid JSON output for https://rxresu.me.
write-docs
tldraw
Writing SDK documentation for tldraw. Use when creating new documentation articles, updating existing docs, or when documentation writing guidance is needed. Applies to docs in apps/docs/content/.
wiki-changelog
microsoft
Analyzes git commit history and generates structured changelogs categorized by change type. Use when the user asks about recent changes, wants a changelog, or needs to understand what changed in the repository.
docs-changelog
google-gemini
Provides a step-by-step procedure for generating Gemini CLI changelog files based on github release information.
docs-writer
google-gemini
Always use this skill when the task involves writing, reviewing, or editing files in the `/docs` directory or any `.md` files in the repository.
document-writer
onmax
Use when writing blog posts or documentation markdown files - provides writing style guide (active voice, present tense), content structure patterns, and MDC component usage. Overrides brevity rules for proper grammar. Use nuxt-content for MDC syntax, nuxt-ui for component props.