Claude Skill MartBrowse skillsQuick linesLearn by videoTerminal guideWhat is a Skill?
 
← Back to list

Twitter Share Card

A design template that renders 1600×900 (16:9) quote or data cards ready to attach to a tweet.

Design & UIBeginner★ 8,494⑂ 837AI score 5/10Last updated: Aug 23, 2026

What it does

  • Defines a 1600×900 (16:9) share-card layout for X/Twitter.
  • Fixes the composition: hero quote centered (text-6xl, 2–3 lines max), author name + avatar placeholder + handle below, a small type tag (Insight/Data/Quote) top-left, and a brand watermark bottom-right.
  • Adds subtle texture (grid, noise or dot pattern) plus a gradient glow background so a raw screenshot already looks polished.
  • Lets you pick a dark or light tone based on the mood of the content.

Who it's for

  • Marketers and solo creators who regularly post quotes or metrics as images on X.
  • Content teams producing repeatable promo cards for posts and newsletters.
  • Developers already rendering HTML/Tailwind and screenshotting it into social assets.

Examples

  1. "Turn the key sentence of this article into a Twitter quote card" → dark 16:9 HTML card, then capture.
  2. Build a weekly metrics card (e.g. MAU +32%) with the "Data" tag in the top-left corner.
  3. Batch-generate a light-tone series of interview pull-quotes with speaker handles.

· · · Install guide · · ·

Try it now, no install

Paste this into Claude to use the skill without installing anything.

Read the instructions in this file and follow them to help me:
https://raw.githubusercontent.com/nexu-io/html-anything/HEAD/next/src/lib/templates/skills/card-twitter/SKILL.md

What I want: (describe your task here)

If Claude can't open the link, open it yourself and paste the contents instead.

↓ If it works for you, download the ZIP below and install it. Then it runs on its own — no pasting each time.

Install in the Claude app (no terminal)
  1. Download the ZIP with the button below.
  2. In Claude, open Settings → Capabilities and turn on 'Code execution and file creation'. (one time)
  3. Go to Customize → Skills → + → 'Upload a skill' and upload the ZIP.
↓ Download ZIP
Install in Claude Code

Let Claude do it — paste this into Claude Code

Install the skill I found on Claude Skill Mart.
Copy the next/src/lib/templates/skills/card-twitter folder from the GitHub repo nexu-io/html-anything into my ~/.claude/skills/card-twitter/.
When it's done, tell me in one line what this skill can do.

Install with a command instead

git clone https://github.com/nexu-io/html-anything.git /tmp/html-anything && mkdir -p ~/.claude/skills/card-twitter && cp /tmp/html-anything/next/src/lib/templates/skills/card-twitter/SKILL.md ~/.claude/skills/card-twitter/

⚠ This is a third-party skill. Check the source repository before installing.

  1. Open your terminal.
  2. Clone the repo: git clone https://github.com/nexu-io/html-anything.git /tmp/html-anything
  3. Create the skill folder: mkdir -p ~/.claude/skills/card-twitter
  4. Copy the file: cp /tmp/html-anything/next/src/lib/templates/skills/card-twitter/SKILL.md ~/.claude/skills/card-twitter/
  5. Restart Claude Code and try: "make a Twitter quote card from this line".
  6. Open the generated HTML in a browser and screenshot it at 1600×900 to attach to your tweet.
View source on GitHub ↗License: Apache-2.0