Guide · Agent skill
How to use the Twitter Share Card agent skill (card-twitter)
Updated · written with AI from the project's own documentation and checked against our catalogue data
The Twitter Share Card skill (card-twitter) teaches an AI agent to build one 1600×900 (16:9) HTML card that carries a large highlighted quote or data point, ready to screenshot and attach to a tweet. It is aimed at creators and marketers who post quote or insight images regularly. This guide explains what agent skills are, how to install this one, how to ask for a card in plain language, and what to check before you post.
Twitter Share Cardnexu-io/html-anything · Apache-2.0 Download the skill Quick start
- 1Download the ZIP. Download the card-twitter skill ZIP from this page.
- 2Unzip the folder. Unzip it so the folder contains SKILL.md, example.html and example.md.
- 3Place the skill. Move the folder to ~/.claude/skills/ or to a project's .claude/skills/ folder, or upload the ZIP under Settings → Capabilities → Skills in the Claude apps.
- 4Ask for a card. Describe the quote or data point and mention a tweet or card in plain language.
- 5Review the HTML. Check the quote wording, tag, author name and watermark in the generated HTML.
- 6Export the image. Use your browser or screenshot tool to capture the 1600×900 card as an image.
What does the card-twitter skill make the agent do?
The skill gives the agent a fixed layout for a Twitter/X share image. The card is a 1600×900 (16:9) container. One hero quote sits in the centre at a large size, limited to two or three lines. An author name, an avatar placeholder and a handle sit below it. A small tag in the top-left corner reads Insight, Data or Quote. A brand watermark sits bottom-right.
The agent chooses a dark or light colour scheme based on the mood of the text and adds a subtle texture such as a grid, noise or dot pattern. The output is HTML, so you can edit it and re-render it, then take a screenshot to use as the image.
- Size: 1600×900 (16:9)
- Centre: one large hero quote (2-3 lines)
- Below the quote: author name, avatar placeholder, handle
- Top-left: tag (Insight, Data or Quote)
- Bottom-right: brand watermark
- Background: dark or light, with grid, noise or dot texture
What is an agent skill, and how do you install card-twitter?
An agent skill is a folder with a SKILL.md file that tells a compatible AI agent how to handle a specific kind of task. This skill's folder contains SKILL.md, example.html and example.md. You need an agent runtime that supports SKILL.md files.
Download the skill ZIP from this page and unzip it. Then either place the folder in ~/.claude/skills/ for your personal use, or in the .claude/skills/ folder of a specific project. Alternatively, in the Claude apps, open Settings → Capabilities → Skills and upload the ZIP there.
- Personal install: unzip into ~/.claude/skills/
- Project install: unzip into your project's .claude/skills/
- Claude apps: Settings → Capabilities → Skills, then upload the ZIP
~/.claude/skills/card-twitter/How do you trigger the skill with a natural request?
You do not need a special command. Describe the card you want in plain language and mention a tweet, quote, insight or data point. The agent should recognise the request as a share-card task and apply the layout.
Include the quote or data text itself, and say whether you want a dark or light look if you have a preference. If you do not specify, the agent picks the scheme from the mood of the text.
- "Make a 16:9 Twitter card for this quote: ..."
- "Turn this statistic into a Twitter data card, tag it Data."
- "Create a light-theme insight card for my post about ..."
What do you need before you start?
The skill needs a SKILL.md-compatible agent runtime. It also needs a browser or screenshot tool to export the HTML as an image. That tool is supplied by you; the skill does not include one.
The avatar is only a placeholder. The skill does not fetch images, so if you need a real author photo or verified brand assets, add them yourself when you edit the HTML.
- A SKILL.md-compatible agent runtime
- A browser or screenshot tool to export the HTML as an image
What are the safety notes for card-twitter?
According to the skill's listing, it does not run scripts and does not use the network. It is a layout instruction for the agent, which produces HTML.
Because the output is HTML, review it before you export it. Check the quote text, the attribution and the watermark, so that you do not publish a misquote or someone else's name by mistake.
- Runs scripts: no
- Uses network: no
- Check quoted wording and the author name before publishing
Tips for better share cards
Keep the hero quote short. The template is built for two or three lines at a large size, so a long paragraph will not fit well. Shorten the text rather than shrinking the type.
Use the tag consistently across a series. Insight, Data and Quote give your feed a recognisable rhythm. Check the example.html file to see the finished look before you request your own.
- Shorten long quotes to two or three lines
- Pick one tag per card and keep the series consistent
- Use example.html as a visual reference
What people use it for
- Turning a single memorable line from a blog post into a quote card to attach to a tweet.
- Producing a series of Data cards that present one statistic each.
- Making a light-theme Insight card for a newsletter announcement shared on X.
- Editing the generated HTML to change the watermark or tag, then re-rendering the card.
Frequently asked questions
How do I install the card-twitter agent skill?
Download the skill ZIP from this page and unzip it into ~/.claude/skills/ for personal use, or into a project's .claude/skills/ folder. In the Claude apps you can instead upload the ZIP under Settings → Capabilities → Skills.
What do I need to use the card-twitter skill?
You need an agent runtime that supports SKILL.md files and a browser or screenshot tool to export the HTML as an image. The screenshot tool is not included with the skill.
Is the card-twitter skill free?
The skill is listed under the Apache-2.0 licence. The source does not state any price, so check the licence text in the repository for the terms of use.
Does the skill download author photos or brand logos?
No. The avatar is a placeholder and the skill does not fetch images, so add real photos or verified brand assets yourself.
Can card-twitter make multi-slide carousels?
No. The template covers one 16:9 card at a time, so it is not suited to multi-slide carousels or long-form graphics.
Does the skill run scripts or use the internet?
According to the listing, it runs no scripts and uses no network. It provides layout instructions that produce HTML.
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 card-twitter if you want consistent, quick 16:9 quote or data images for tweets and you are comfortable with a SKILL.md-compatible agent and a screenshot tool. Pick something else if you need multi-slide carousels, long-form graphics, or real author photos and verified brand assets built in.
Download the skill