---
name: Twitter Card
slug: twitter-card
category: Frontend
description: Twitter Card creates shareable quote and data cards for Twitter posts using a 1600x900 HTML template with dark or light themes, a hero quote, author attribution, tag label, and brand watermark.
github: "https://github.com/nexu-io/html-anything/tree/main/next/src/lib/templates/skills/card-twitter"
language: HTML
stars: 8300
forks: 810
install: "npx degit https://github.com/nexu-io/html-anything/tree/main/next/src/lib/templates/skills/card-twitter ~/.claude/skills/card-twitter"
installs_to: ~/.claude/skills/card-twitter
source_path: next/src/lib/templates/skills/card-twitter/SKILL.md
collection_size: 25
category_size: 567
collection_url: "https://dirskills.com/collections/nexu-io/html-anything"
added: 2026-08-15T06:50:48.623Z
last_synced: 2026-08-15T06:50:48.623Z
canonical_url: "https://dirskills.com/skills/twitter-card"
---

# Twitter Card

Twitter Card creates shareable quote and data cards for Twitter posts using a 1600x900 HTML template with dark or light themes, a hero quote, author attribution, tag label, and brand watermark.

**Install:**

```bash
npx degit https://github.com/nexu-io/html-anything/tree/main/next/src/lib/templates/skills/card-twitter ~/.claude/skills/card-twitter
```

## README

【模板: Twitter 分享卡】
- 容器 `w-[1600px] h-[900px]`, 暗色 / 亮色二选一根据内容情绪。
- 中央一句 hero 金句 (text-6xl, font-semibold, 限 2-3 行)。
- 下方作者署名 + 头像占位 + handle。
- 左上角小标签 (类型: "Insight" / "Data" / "Quote")。
- 右下角品牌水印。
- 整张卡片有微妙的纹理 (grid 网格 / noise / dot pattern)。
- 截图后可直接配推文发出, 视觉简洁有力。