Skip to content
Get packs

Twitter Share Card

Turns a quote or data point into a 16:9 dark or light social share card in HTML.

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

What it does

This skill teaches an AI agent a specific layout for a Twitter/X share image: a 1600×900 (16:9) card with one large highlighted quote in the centre, an author name, avatar placeholder and handle below it, a small tag such as Insight, Data or Quote in the top-left corner, and a brand watermark bottom-right. The agent picks a dark or light colour scheme based on the mood of the text and adds subtle grid or noise textures. You get a card you can screenshot and attach to a post.

Great for

  • Creators who want quick, visually consistent quote images to post alongside tweets
  • Marketers producing a series of branded data or insight cards for social media
  • Anyone who wants an HTML-based share card they can edit and re-render

Skip it if

  • Full multi-slide carousels or long-form graphics, since the template covers one card at a time
  • Situations needing verified brand assets or real author photos, because the avatar is only a placeholder (the skill does not fetch images)

Try asking

  • “Make a Twitter share card for this quote: 'Consistency beats intensity.'”
  • “Create a 16:9 dark data card showing that our signups grew 40% this quarter.”
  • “Turn this paragraph into a light-themed Insight card with my handle @example.”
Step-by-step guide: how to use Twitter Share CardInstall, 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.

    card-twitter.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip card-twitter.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip card-twitter.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

  • Keep the quote to two or three lines so it fits the hero text size.
  • Specify the card type (Insight, Data or Quote) and whether you want dark or light mode.
  • Replace the placeholder handle and brand name with your own before publishing.

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.