infocard-skills

KO | EN

gitlite — search

#hacktoberfest #ai #machine-learning #rust #deep-learning #docker #nodejs #windows #kubernetes #vue #security #ios #mcp #openai

infocard-skills

(★ 500)

Open-source agent skills for generating editorial-style information cards from natural-language input.

파일 탐색기

최종 버전 다운로드 (.zip)

- - layout-showcase-4x3.png
  - project-header-3x1.html
  - project-header-3x1.png
- agent-usage.md
- content-fit.md
- editorial-card-prompt.md
- github-metadata.md
- project-overview.md
- - index.html
  - README.md
  - script.js
  - styles.css
- agentic-engineering-patterns-layout-test.html
- - SKILL.md
.gitignore
LICENSE
README.md
README.zh-CN.md

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

[中文](./README.zh-CN.md)

# infocard-skills

Open-source agent skills for generating editorial-style information cards from natural-language input.

![infocard-skills header](https://raw.githubusercontent.com/shaom/infocard-skills/main/docs/assets/project-header-3x1.png)

`infocard-skills` is a small repository of installable skill packages for agents. The current package, `editorial-card-screenshot`, turns source material into screenshot-ready HTML cards and optional PNG outputs.

## Install

Install the full skill package, not a single file:

- [`skills/editorial-card-screenshot`](./skills/editorial-card-screenshot)

Copy or install the entire directory into your agent's skills location. Keep these files together:

- `SKILL.md`
- `assets/`
- `references/`
- `scripts/`
- `agents/` when supported by the host

## Verify

After installation, test with one of these prompts:

- `Use $editorial-card-screenshot to turn these notes into an editorial info card.`
- `Use $editorial-card-screenshot to make a 3:4 information card from this text.`
- `Use $editorial-card-screenshot and give me both the HTML and PNG.`

## Usage

Typical requests:

- `Turn this article into an editorial information card.`
- `Make a portrait 3:4 info card from these notes.`
- `Summarize this content as a dense magazine-style card.`
- `Create the HTML only. I do not need the image.`

## Layout Showcase

The same source content is reorganized for each target canvas instead of being mechanically resized. The skill supports `3:4`, `4:3`, `1:1`, `16:9`, `9:16`, `2.35:1`, `3:1`, and `5:2`.

![Infocard Skills layout showcase](https://raw.githubusercontent.com/shaom/infocard-skills/main/docs/assets/layout-showcase-4x3.png)

## Render Requirement

For PNG capture, the current helper expects local Google Chrome at:

```text
/Applications/Google Chrome.app/Contents/MacOS/Google Chrome
```

## Repository

```text
skills/
  editorial-card-screenshot/
docs/
examples/
```

## Docs

- [`docs/agent-usage.md`](./docs/agent-usage.md)
- [`docs/editorial-card-prompt.md`](./docs/editorial-card-prompt.md)
- [`docs/content-fit.md`](./docs/content-fit.md)
- [`docs/project-overview.md`](./docs/project-overview.md)
- [`docs/github-metadata.md`](./docs/github-metadata.md)

## License

[MIT](./LICENSE)

infocard-skills

파일 탐색기

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

infocard-skills

파일 탐색기

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README