HTML & CSS Skills for Claude Code, Codex & AI Agents

These skills help an agent produce polished HTML and CSS, often as standalone artifacts. Examples include HTML slide decks, web artifacts, utility CSS and Markdown conversion.

25 skills

Explore HTML & CSS skills

13 skills
Presentations

Frontend Slides

Create animated HTML presentations with a coding agent. Compare visual style previews, build a single-file deck, or turn an existing PowerPoint into web slides.

32.3KStars2.5KForks
Repository last pushed
An illustrated furniture assembly guide in the author's IKEA manual infographic style.
Free
Documents

Markdown to HTML

Convert Markdown into styled, WeChat-compatible HTML with support for code, math and diagrams.

27.5KStars3KForks
Repository last pushed
Magazine presentation showcase supplied in the official repository, with image and text slide layouts.
Free
Presentations

Guizang PPT Skill

Create single-file HTML presentations in editorial magazine or Swiss style, with horizontal navigation, speaker notes, rehearsal timers and a synchronized audience window.

29.7KStars2KForks
Repository last pushed
Archify workflow dependency graph
Free
Web & UI

Archify: Diagram Creation

Create explorable HTML diagrams for architectures, workflows, state, schemas, timelines and everyday plans.

95.8KStars6.5KForks
Repository last pushed
yang0's comic storyboard gallery showing grid, four-panel, large-panel and diagonal storytelling layouts.
Free
Video & Motion

Browser Video Producer

Produce browser-route hand-drawn and picturebook videos from an approved plan and reviewed media.

7.5KStars885Forks
Repository last pushed
Plannotator inline annotation interface
Free
Web & UI

Plannotator — Analyze Plan Feedback

Analyze a user's Plannotator plan archive to extract denial patterns, feedback taxonomy, evolution over time, and actionable prompt improvements — then produce a polished HTML dashboard report. Falls back to Claude Code ExitPlanMode denial reasons when Plannotator data is unavailable.

10.1KStars766Forks
Repository last pushed

Write a self-contained HTML design document that explains a pull request and its before-and-after behavior.

  • technical-writing
  • documentation
  • html
93.3KStars12.5KForks
Repository last pushed
Illustrative Claude Academy recommendation linking to the official Claude Code learning resource.
Free
Web & UI

Web Artifacts Builder

Build multi-component HTML artifacts with React, state management and a bundled delivery workflow.

193.4KStars22.8KForks
Repository last pushed
Open SWE dashboard and context-window status.
Free
Web & UI

Open SWE HTML Artifacts

Build themed HTML plan artifacts, dashboard iframes and Slack attachments for the Open SWE runtime.

11.2KStars1.3KForks
Repository last pushed

design-artifact

Plannotator

Design principles and creative direction for building HTML artifacts — pages, reports, plans, landing pages, demos, decks, and small tools. Use when creating or restyling any visual HTML deliverable and deciding its palette, type pairing, layout, theming, or overall register, or when the output must not look generically AI-generated.

  • html
  • prototyping
4.2KStars285Forks
Repository last pushed
dontbesilent’s official dbskill Claude Code plugin-installation demo, resized and compressed while preserving the complete loop.
Free
Web & UI

dbs-wechat-html · WeChat Article HTML

Convert Markdown into HTML that can be copied into the WeChat Official Account editor, with fifteen built-in visual styles.

11.4KStars1.3KForks
Repository last pushed
Plannotator inline annotation interface
Free
Web & UI

Plannotator — Visual Explanations

Generate self-contained HTML visualizations with Plannotator theming.

10.1KStars766Forks
Repository last pushed

Turn articles or scripts into click-driven web presentations with optional synthesized narration.

  • presentations
  • html
15KStars1.7KForks
Repository last pushed

Related topics

How to choose HTML & CSS skills

Use slide or artifact skills for single-file outputs, UnoCSS or shadcn/ui for app styling, and polish skills for spacing and detail.

  • Build a slide deck as a single HTML file
  • Convert Markdown to styled HTML
  • Polish spacing and detail in a page