posterskill-academic-posters by aradotso/trending-skills
npx skills add https://github.com/aradotso/trending-skills --skill posterskill-academic-posters技能来自 ara.so — Daily 2026 技能集合。
posterskill 是一个 Claude Code 技能,可以从您的 Overleaf 论文源文件生成可直接打印的交互式会议海报。它生成一个单一的自包含 HTML 文件,内置拖放式可视化编辑器——无需构建步骤,也无需服务器。
git clone git@github.com:ethanweber/posterskill.git poster
cd poster
# 克隆您的 Overleaf 论文源文件
git clone https://git.overleaf.com/YOUR_PROJECT_ID overleaf
# 可选:添加参考海报用于样式匹配
cp ~/Downloads/some_reference_poster.pdf references/
启动 Claude Code 并触发技能:
claude
/make-poster
Claude 将询问您的项目网站 URL 和任何格式规范,然后生成一个包含 index.html 的 poster/ 目录。
poster/ # 此仓库
├── .claude/
│ └── commands/
│ └── make-poster.md # 技能命令
├── overleaf/ # 您克隆的 Overleaf 项目
├── references/ # 用于样式匹配的可选参考 PDF 文件
└── poster/ # 生成的输出
├── index.html # 海报(自包含)
└── logos/ # 下载的机构徽标
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
输出的 poster/index.html 是一个 React 应用(通过 CDN 加载),包含:
CARD_REGISTRY — 每个卡片的标题、颜色和 JSX 主体内容DEFAULT_LAYOUT — 列结构和卡片排序DEFAULT_LOGOS — 页眉的机构徽标window.posterAPI — 用于布局自动化的编程 API在 Chrome 中打开 poster/index.html 以访问内置编辑器:
| 功能 | 使用方法 |
|---|---|
| 调整列宽 | 左右拖动列分隔线 |
| 调整卡片高度 | 在列内上下拖动行分隔线 |
| 交换卡片 | 点击一个菱形手柄,然后点击另一个 |
| 移动/插入卡片 | 点击一个手柄,然后点击一个放置区域 |
| 调整字体大小 | 点击工具栏中的 A- / A+ 按钮 |
| 预览打印布局 | 点击 预览 按钮 |
| 导出布局 | 点击 复制配置 获取 JSON |
window.posterAPI)可在浏览器控制台或通过 Playwright 自动化使用:
// 通过 ID 交换两个卡片
posterAPI.swapCards('method', 'results')
// 将卡片移动到特定列和位置
posterAPI.moveCard('quant', 'col1', 2)
// 调整列宽(单位:毫米)
posterAPI.setColumnWidth('col1', 280)
// 设置特定卡片的高度(单位:毫米)
posterAPI.setCardHeight('method', 150)
// 全局缩放所有文本
posterAPI.setFontScale(1.5)
// 测量空白浪费(值越低表示布局越好)
posterAPI.getWaste()
// 以对象形式获取当前布局
posterAPI.getLayout()
// 以 JSON 格式获取完整配置(粘贴回 Claude)
posterAPI.getConfig()
// 重置为默认布局
posterAPI.resetLayout()
完善海报的核心循环:
poster/index.htmlDEFAULT_LAYOUTClaude 使用 Playwright 自动化布局验证。您也可以使用它:
const { chromium } = require('playwright');
async function optimizePoster() {
const browser = await chromium.launch();
const page = await browser.newPage();
await page.goto(`file://${__dirname}/poster/index.html`);
// 使用 posterAPI 以编程方式调整布局
const waste = await page.evaluate(() => posterAPI.getWaste());
console.log('空白浪费:', waste);
// 调整列宽
await page.evaluate(() => posterAPI.setColumnWidth('col1', 300));
// 截取屏幕截图用于视觉验证
await page.screenshot({ path: 'poster-preview.png', fullPage: true });
// 以打印分辨率生成 PDF
await page.pdf({
path: 'poster.pdf',
width: '841mm', // A0 横向宽度
height: '1189mm',
printBackground: true,
});
await browser.close();
}
海报中的每个卡片在 CARD_REGISTRY 中定义:
const CARD_REGISTRY = {
abstract: {
title: "摘要",
color: "#f0f4ff",
body: `
<p>您的摘要文本在此处。支持完整的 JSX,包括
<strong>粗体</strong>、<em>斜体</em> 和内联数学公式。</p>
`
},
method: {
title: "方法",
color: "#fff8f0",
body: `
<img src="figures/pipeline.png" style={{width:'100%'}} />
<p>描述上方流程图的说明文字。</p>
`
},
results: {
title: "结果",
color: "#f0fff4",
body: `
<table>...</table>
`
}
};
const DEFAULT_LAYOUT = {
columns: [
{
id: 'col1',
widthMm: 280,
cards: ['abstract', 'method']
},
{
id: 'col2',
widthMm: 320,
cards: ['results', 'quant']
},
{
id: 'col3',
widthMm: 280,
cards: ['conclusion', 'references']
}
]
};
| 输入 | 来源 | 必需 |
|---|---|---|
| 论文内容 | overleaf/ 目录 | 是 |
| 项目网站 | URL(运行时询问) | 是 |
| 参考海报 | references/*.pdf | 否 |
| 作者网站 | 用于品牌匹配的 URL | 否 |
| 格式规范 | 会议 URL 或文本 | 缺失时询问 |
| 徽标 | 自动下载到 poster/logos/ | 自动 |
// 在 CARD_REGISTRY 中添加一个新卡片
custom_fig: {
title: "定性结果",
color: "#fafafa",
body: `
<div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:'8px'}}>
<img src="figures/result1.png" style={{width:'100%'}} />
<img src="figures/result2.png" style={{width:'100%'}} />
</div>
<p style={{fontSize:'0.85em', textAlign:'center'}}>
在保留测试场景上的比较。
</p>
`
}
然后将其添加到 DEFAULT_LAYOUT:
{ id: 'col2', widthMm: 320, cards: ['results', 'custom_fig'] }
const DEFAULT_LOGOS = [
{ src: 'logos/university.png', height: 60 },
{ src: 'logos/lab.png', height: 50 },
{ src: 'logos/sponsor.png', height: 45 },
];
在 Chrome 中:
poster/index.htmlCtrl+P / Cmd+P打印与浏览器中显示的海报不同 → 使用 Chrome(而非 Firefox/Safari)。在打印对话框中启用"背景图形"。
图表未加载 → 确保 HTML 中的图表路径相对于 poster/index.html。Claude 将图表复制到 poster/figures/ — 请验证该目录是否存在。
徽标未获取 → Claude 使用 Playwright 从您的项目网站下载徽标。如果失败,请手动将徽标文件复制到 poster/logos/ 并更新 DEFAULT_LOGOS 中的路径。
粘贴后布局配置未更新 → 确保您粘贴的是来自 复制配置 的完整 JSON — Claude 会查找完整的 DEFAULT_LAYOUT 和 DEFAULT_LOGOS 对象进行替换。
字体相对于海报尺寸太小/太大 → 在浏览器控制台中使用 posterAPI.setFontScale(1.2),或点击 A+ / A- 按钮,然后复制配置并粘贴给 Claude。
卡片之间有空白间隙 → 在控制台中运行 posterAPI.getWaste() 进行量化。使用 posterAPI.setCardHeight('cardId', heightMm) 调整卡片高度,或手动拖动行分隔线。
查看 Fillerbuster 海报(仓库)作为 posterskill 输出的实时示例。
每周安装量
175
仓库
GitHub 星标数
10
首次出现
4 天前
安全审计
安装于
github-copilot175
codex175
warp175
kimi-cli175
amp175
cline175
Skill by ara.so — Daily 2026 Skills collection.
posterskill is a Claude Code skill that generates print-ready, interactive conference posters from your Overleaf paper source. It produces a single self-contained HTML file with a built-in drag-and-drop visual editor — no build step, no server required.
git clone git@github.com:ethanweber/posterskill.git poster
cd poster
# Clone your Overleaf paper source
git clone https://git.overleaf.com/YOUR_PROJECT_ID overleaf
# Optional: add reference posters for style matching
cp ~/Downloads/some_reference_poster.pdf references/
Start Claude Code and trigger the skill:
claude
/make-poster
Claude will ask for your project website URL and any formatting specs, then generate a poster/ directory with index.html.
poster/ # this repo
├── .claude/
│ └── commands/
│ └── make-poster.md # the skill command
├── overleaf/ # your cloned Overleaf project
├── references/ # optional reference PDFs for style matching
└── poster/ # generated output
├── index.html # the poster (self-contained)
└── logos/ # downloaded institutional logos
The output poster/index.html is a React app (loaded via CDN) containing:
CARD_REGISTRY — each card's title, color, and JSX body contentDEFAULT_LAYOUT — column structure and card orderingDEFAULT_LOGOS — institutional logos for the headerwindow.posterAPI — programmatic API for layout automationOpen poster/index.html in Chrome to access the built-in editor:
| Feature | How to Use |
|---|---|
| Resize columns | Drag column dividers left/right |
| Resize cards | Drag row dividers up/down within a column |
| Swap cards | Click one diamond handle, then another |
| Move/insert cards | Click a handle, then click a drop zone |
| Adjust font size | Click A- / A+ buttons in toolbar |
| Preview print layout | Click Preview button |
| Export layout | Click Copy Config to get JSON |
window.posterAPI)Available in the browser console or via Playwright automation:
// Swap two cards by ID
posterAPI.swapCards('method', 'results')
// Move a card to a specific column and position
posterAPI.moveCard('quant', 'col1', 2)
// Resize a column (in mm)
posterAPI.setColumnWidth('col1', 280)
// Set a specific card's height (in mm)
posterAPI.setCardHeight('method', 150)
// Scale all text globally
posterAPI.setFontScale(1.5)
// Measure whitespace waste (lower = better layout)
posterAPI.getWaste()
// Get the current layout as an object
posterAPI.getLayout()
// Get the full config as JSON (paste back to Claude)
posterAPI.getConfig()
// Reset to default layout
posterAPI.resetLayout()
The core loop for refining your poster:
poster/index.html in your browserDEFAULT_LAYOUT in the HTMLClaude uses Playwright to automate layout verification. You can use it too:
const { chromium } = require('playwright');
async function optimizePoster() {
const browser = await chromium.launch();
const page = await browser.newPage();
await page.goto(`file://${__dirname}/poster/index.html`);
// Use the posterAPI to adjust layout programmatically
const waste = await page.evaluate(() => posterAPI.getWaste());
console.log('Whitespace waste:', waste);
// Resize a column
await page.evaluate(() => posterAPI.setColumnWidth('col1', 300));
// Take a screenshot for visual verification
await page.screenshot({ path: 'poster-preview.png', fullPage: true });
// Generate PDF at print resolution
await page.pdf({
path: 'poster.pdf',
width: '841mm', // A0 landscape width
height: '1189mm',
printBackground: true,
});
await browser.close();
}
Each card in the poster is defined in CARD_REGISTRY:
const CARD_REGISTRY = {
abstract: {
title: "Abstract",
color: "#f0f4ff",
body: `
<p>Your abstract text here. Supports full JSX including
<strong>bold</strong>, <em>italic</em>, and inline math.</p>
`
},
method: {
title: "Method",
color: "#fff8f0",
body: `
<img src="figures/pipeline.png" style={{width:'100%'}} />
<p>Caption describing the pipeline above.</p>
`
},
results: {
title: "Results",
color: "#f0fff4",
body: `
<table>...</table>
`
}
};
const DEFAULT_LAYOUT = {
columns: [
{
id: 'col1',
widthMm: 280,
cards: ['abstract', 'method']
},
{
id: 'col2',
widthMm: 320,
cards: ['results', 'quant']
},
{
id: 'col3',
widthMm: 280,
cards: ['conclusion', 'references']
}
]
};
| Input | Where It Comes From | Required |
|---|---|---|
| Paper content | overleaf/ directory | Yes |
| Project website | URL (asked at runtime) | Yes |
| Reference posters | references/*.pdf | No |
| Author website | URL for brand matching | No |
| Formatting specs | Conference URL or text | Asked if missing |
| Logos | Auto-downloaded to poster/logos/ | Auto |
// In CARD_REGISTRY, add a new card
custom_fig: {
title: "Qualitative Results",
color: "#fafafa",
body: `
<div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:'8px'}}>
<img src="figures/result1.png" style={{width:'100%'}} />
<img src="figures/result2.png" style={{width:'100%'}} />
</div>
<p style={{fontSize:'0.85em', textAlign:'center'}}>
Comparison on held-out test scenes.
</p>
`
}
Then add it to DEFAULT_LAYOUT:
{ id: 'col2', widthMm: 320, cards: ['results', 'custom_fig'] }
const DEFAULT_LOGOS = [
{ src: 'logos/university.png', height: 60 },
{ src: 'logos/lab.png', height: 50 },
{ src: 'logos/sponsor.png', height: 45 },
];
In Chrome:
poster/index.htmlCtrl+P / Cmd+PPoster looks different in print vs browser → Use Chrome (not Firefox/Safari). Enable "Background graphics" in print dialog.
Figures not loading → Ensure figure paths in the HTML are relative to poster/index.html. Claude copies figures to poster/figures/ — verify the directory exists.
Logos not fetched → Claude uses Playwright to download logos from your project website. If it fails, manually copy logo files to poster/logos/ and update DEFAULT_LOGOS paths.
Layout config not updating after paste → Make sure you paste the full JSON from Copy Config — Claude looks for the complete DEFAULT_LAYOUT and DEFAULT_LOGOS objects to replace.
Font too small/large for poster size → Use posterAPI.setFontScale(1.2) in the browser console, or click A+ / A- buttons, then Copy Config and paste to Claude.
Whitespace gaps between cards → Run posterAPI.getWaste() in console to quantify. Use posterAPI.setCardHeight('cardId', heightMm) to tune card heights, or drag row dividers manually.
See the Fillerbuster poster (repo) as a live example of posterskill output.
Weekly Installs
175
Repository
GitHub Stars
10
First Seen
4 days ago
Security Audits
Gen Agent Trust HubPassSocketWarnSnykWarn
Installed on
github-copilot175
codex175
warp175
kimi-cli175
amp175
cline175
通过 LiteLLM 代理让 Claude Code 对接 GitHub Copilot 运行 | 高级变通方案指南
33,600 周安装
Next.js 16 + shadcn/ui 最佳实践:构建独特生产级界面,避免千篇一律AI风格
160 周安装
Mermaid.js v11 图表生成教程 - 流程图、时序图、类图等24+图表类型
160 周安装
summarize:命令行AI摘要工具,支持URL、PDF、YouTube视频内容快速总结
160 周安装
SvelteKit 2 + Svelte 5 + Tailwind v4 集成指南 - 现代Web应用开发技能
160 周安装
日志记录最佳实践指南:结构化日志、安全合规与性能优化
161 周安装
Microsoft 365 租户管理器:自动化脚本工具,助力全局管理员高效管理用户与安全策略
161 周安装