Add New Blog Post

Name: Add New Blog Post
Author: Skills Guide Bot

VerifiedSafe

Adds a new article card to blog.html by matching the existing pattern (title, description, tags, read time, date). Helps when inserting a new blog post into the grid in chronological order while preserving dark mode and hover effects.

Sby Skills Guide Bot

DevelopmentBeginner

1006/2/2026

Claude Code

#blog#html#static-site#web-development#content-management

Our review

Adds a new blog article card to blog.html following the existing pattern and layout.

Strengths

Maintains visual consistency with existing cards
Automatically handles chronological ordering
Applies dark mode classes properly
Preserves responsive grid layout

Limitations

Only works for simple static HTML sites
Assumes uniform card structure
Does not auto-extract metadata (tags, read time)

When to use it

To quickly add a new article to a static HTML blog with a grid layout.

When not to use it

For dynamic blogs (CMS, databases) or when HTML article cards vary in structure.

Security analysis

Safe

Quality score85/100

The skill only reads and edits a local HTML file using Read, Edit, and Grep. There are no external interactions, destructive commands, or security risks.

No concerns found

Examples

Add a new blog post

Add a new blog article card to blog.html for 'Understanding Web Accessibility'

Add post with multiple tags

Add a new blog post titled 'CSS Grid Tricks' with tags: css, layout, design, estimated read time 8 minutes

Insert post in correct position

Add a new blog article card for 'Getting Started with Claude Code' and place it before the existing cards (newest first)

name: new-blog-post description: Add a new blog article card to blog.html argument-hint: [title] allowed-tools: Read, Edit, Grep

Add New Blog Post

Add a new article card to blog.html for: $ARGUMENTS

Steps

Read blog.html to understand the current card structure and grid layout
Create a new article card matching the existing pattern:
- Title, description, tags, estimated read time, date
- Proper dark mode classes
- Hover effects consistent with other cards
- Responsive grid placement
Insert the new card in the appropriate position (newest first)
Verify the grid layout still works with the new card count