Skip to content
Get packs

X Post Card Designer

Turns a tweet or quote into a realistic X (Twitter) post card image or HTML layout

Source Download skill
Repository
nexu-io/html-anything
Stars
9,376
Licence
Apache-2.0
Files
3 files

What it does

Once installed, the agent can take a tweet, quote, or piece of text and lay it out as a convincing X (formerly Twitter) post card, with avatar, name, handle, verified tick, body text, and likes/reposts/views counts formatted like the real app. It produces a single self-contained HTML file in dark or light mode, sized for video overlays or social images. The skill tells the agent to use only text supplied by the user and to avoid inventing tweets or pulling in external images.

Great for

  • Creators making quote cards or explainer videos that show a post on screen
  • Marketers preparing shareable social graphics in an X-style layout
  • Knowledge workers who want to archive a memorable line in a familiar format

Skip it if

  • Faking screenshots of real posts or real people's engagement numbers to mislead others, since the card looks authentic and the skill does not flag it as a mock-up
  • Official brand materials that must match X's exact trademark guidelines, as the skill imitates the look with approximations (e.g. placeholder fonts and SVG icons)

Try asking

  • “Make an X post card for this quote: 'Shipping beats perfect', dark mode, 1080x1080”
  • “Turn these meeting notes into a single tweet-style card with about 12K likes for a video overlay”
  • “Create a light-mode X post card with a short image placeholder for my blog launch”
Step-by-step guide: how to use X Post Card DesignerInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 3 original files, the Apache-2.0 licence and an attribution note.

    social-x-post-card.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip social-x-post-card.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip social-x-post-card.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Give the exact tweet text and any handle or name you want shown, so the agent does not have to invent content
  • Specify dark or light mode and the aspect ratio (1280x720 or 1080x1080) up front
  • Use it for clearly labelled examples or internal content; do not present generated cards as real posts

What's inside

  • example.html
  • example.md
  • SKILL.md

Redistributed unmodified from nexu-io/html-anything under the Apache-2.0 licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.