Guide · Agent skill
How to use the X Post Card Designer agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The X Post Card Designer is an agent skill (named social-x-post-card) that lets a coding agent turn a tweet, quote or piece of text into an X-style post card. This guide is for people who have never used agent skills and want a card for a video overlay, a shareable image or a personal archive. By the end you will know what the skill does, how to install it, how to ask for a card and what to check before publishing.
X Post Card Designernexu-io/html-anything · Apache-2.0 Download the skill Quick start
- 1Download the ZIP. Download the skill ZIP from this page and unzip it to a folder that contains SKILL.md.
- 2Place the folder. Move it into ~/.claude/skills/ for personal use or into a project's .claude/skills/ folder.
- 3Or upload it. In the Claude apps, go to Settings → Capabilities → Skills and upload the skill.
- 4Open the example. Open example.html in a web browser to see the expected dark-mode card layout.
- 5Make a request. Ask the agent for a card, include the exact text, and choose dark or light mode and a canvas size.
- 6Check the output. Confirm the text, handle and engagement numbers are yours and correct before you use the HTML file.
What an agent skill is and what this one makes the agent do
An agent skill is a folder with a SKILL.md file that gives a coding agent or runtime specific instructions for one kind of task. Once the skill is installed, the agent reads those instructions when a request matches them.
This skill tells the agent to take text you supply and lay it out as a convincing X (formerly Twitter) post card. The card includes an avatar, display name, @handle, verified tick, timestamp, body text, and likes, reposts, replies and views formatted like the real app (for example 1.2K or 4.5M).
- Output is a single self-contained HTML file.
- Dark or light mode; the source recommends dark for video overlays.
- Canvas suggested as 1280×720 or 1080×1080.
- The avatar is a CSS gradient placeholder, and icons are inline SVG.
- The skill says to use only text you provide and not to invent tweets or pull in external image URLs.
Install the skill from the ZIP download
Download the ZIP from this page and unzip it. The folder should contain SKILL.md, example.html and example.md. For a personal setup, place the unzipped folder inside ~/.claude/skills/. For a single project, place it inside that project's .claude/skills/ folder.
If you use the Claude apps instead of a local setup, you can upload the skill under Settings → Capabilities → Skills.
- Personal install: ~/.claude/skills/ (available across projects).
- Project install: .claude/skills/ inside your project folder.
- Claude apps: Settings → Capabilities → Skills, then upload.
Trigger the skill with a natural request
You do not need a special command. Describe the post and the kind of card you want, and mention the format. The skill's description covers X-style post cards with engagement numbers for video overlays or image sharing, so requests that name those things are most likely to match.
Include the exact text you want shown. The skill is designed to avoid inventing tweets, so if you give only a topic the agent should ask for or use your wording rather than writing a fake post.
- "Make a dark X post card for this quote: [your text]. Use 1280×720 for a video overlay."
- "Create a light-mode tweet card with 3.4K likes and 800 reposts, using the sentence below."
- "Turn this paragraph into a short X-style post card sized 1080×1080 for social sharing."
Read the example before you run your own
The package includes example.html and example.md. The example is a markdown post by the handle @AlchainHust with 12.3K likes, 1.2K reposts, 482 replies and 2.1M views, shown in dark mode with a blue verified tick. Open example.html in a web browser to see the layout.
Use the example to check the structure of the card, not as a template for content. Replace the author, numbers and text with your own.
Safety notes: scripts and network access
This skill does not run scripts and does not use the network, according to its listing. The output is an HTML file you can view or export to an image with a web browser, which is optional.
The bigger risk is the content. The card looks authentic and the skill does not label it as a mock-up. Do not use it to fake screenshots of real posts or real people's engagement numbers to mislead others. Official brand materials that must follow X's trademark rules are also a poor fit, because the skill only approximates the look with placeholder fonts and SVG icons.
- Do not present an invented post or made-up counts as real.
- Label cards as mock-ups or quotes when you publish them if there is any chance of confusion.
- Check fonts and icons if the card is for an official brand.
Tips for better cards
Keep the text short. The skill's body text is sized at 17 to 22px, so long posts may need a wider canvas or a shorter quote. If your input is raw data rather than a quote, ask the agent to summarise it into one line of up to 280 characters first.
Use dark mode for video overlays, which the skill recommends. Then export the HTML to an image or record it as a video layer in your editor.
- Ask for a one-line summary when the input is data or a long paragraph.
- Choose 1280×720 for video and 1080×1080 for square social posts.
- Check every number and name before publishing.
What people use it for
- Adding a quote card to an explainer video as an on-screen overlay.
- Making a shareable square image of a memorable line for social media.
- Archiving a notable sentence from a conversation in a familiar layout.
- Mocking up an X-style layout for a presentation slide, labelled as a mock-up.
Frequently asked questions
How do I install the social-x-post-card skill?
Download the ZIP from this page and unzip it. Put the folder in ~/.claude/skills/ for personal use or in a project's .claude/skills/ folder. In the Claude apps you can instead upload it under Settings → Capabilities → Skills.
What do I need to run it?
You need a coding agent or runtime that can read SKILL.md and write an HTML file. A web browser is optional and is only needed to view or export the result as an image.
Is the X Post Card Designer free to use?
The source material for this skill is listed under the Apache-2.0 licence, which you should read in the repository before reuse. The source does not state a price, so check the listing for any cost.
Does the skill run scripts or access the internet?
According to its listing, it runs no scripts and uses no network access. It produces a single self-contained HTML file and is told not to pull in external images.
Can it make a card from a topic instead of exact text?
The skill is designed to use only text you supply and not to invent tweets. Give it the exact wording you want shown; if you only provide data, it can summarise that into a single quote of up to 280 characters.
Why does the card look a bit different from the real X app?
The skill approximates the look with placeholder fonts such as Chirp fallbacks like Inter or Segoe UI, a gradient avatar and inline SVG icons. That is fine for overlays and sharing, but not for official brand use that must match X's trademark guidelines.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Use this skill if you make quote cards, explainer videos or shareable social graphics and want an X-style layout produced from text you supply. Pick something else if you need exact X branding for official materials, or if you would use the card to pass off invented posts or engagement numbers as real.
Download the skill