How do I install the Gig Cards skill?

Run npx skillmds@latest add emircbngl/gig-cards in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Gig Cards safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Gig Cards?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Gig Cards free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Gig Cards?

emircbngl (@emircbngl) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Gig Cards by emircbngl — Agent Skill

Name: Gig Cards
Author: emircbngl

Gig Cards

Profesyonel pazarlama/gig kartı görselleri üret (Fiverr gig kartı, OG image, sosyal kart, YouTube thumbnail benzeri): HTML/CSS tasarımını headless Chromium'da (Playwright) piksel-hassas render edip PNG'ye çevirir. Editoryal tasarım dili hazır: tam-kadraj artwork + sinematik scrim, Space Grotesk display başlık, IBM Plex Mono overline/meta, dergi köşe indeksi, grain dokusu. Tetikleyiciler: "gig kartı yap", "og image üret", "kart görseli", "fiverr görseli", "sosyal medya kartı", "marketing card", "thumbnail tasarla".

emircbngl 9705842 2 files · 12.1 KB Updated Sep 17, 2026

File contents

gig-cards: HTML/CSS → Chromium → PNG kart üretimi

Neden bu yol: Satori/vercel-og yalnız flexbox + CSS alt kümesi destekler; headless Chromium TAM CSS verir (grid, filter, blend, değişken fontlar). Kalite farkı buradan gelir. (Araştırma: github.com/vercel/satori değerlendirildi, tam-CSS gereksinimi nedeniyle Playwright screenshot yaklaşımı seçildi. Fontlar: github.com/google/fonts.)

Kullanım

Çalışma dizini hazırla (proje içinde cards/ gibi): fonts/, assets/, out/ klasörleri.

Fontlar yoksa indir (google/fonts, OFL lisans):

curl -sL -o fonts/SpaceGrotesk.ttf "https://raw.githubusercontent.com/google/fonts/main/ofl/spacegrotesk/SpaceGrotesk%5Bwght%5D.ttf"
curl -sL -o fonts/Inter.ttf "https://raw.githubusercontent.com/google/fonts/main/ofl/inter/Inter%5Bopsz%2Cwght%5D.ttf"
curl -sL -o fonts/IBMPlexMono-Medium.ttf "https://raw.githubusercontent.com/google/fonts/main/ofl/ibmplexmono/IBMPlexMono-Medium.ttf"

Bağımlılık: python3 -m playwright install chromium (bir kez) + Pillow.
scripts/render_cards.py'ı çalışma dizinine kopyala, CARDS config listesini düzenle (id / accent / overline / index / head_a / head_b / meta / art / art_mode), çalıştır. Çıktı: out/<id>.png, 1280×769 (W/H sabitlerinden değiştirilebilir; OG için 1200×630).

Tasarım kuralları (klişeden kaçınma — bunlar öğrenilmiş ders)

ROZET + ÇİP + degrade-panel formülü KLİŞE — kullanma. Onun yerine: mono overline, tek satır mono meta, ince accent rule, dergi köşe indeksi ("01 / KATEGORİ").
Başlık İRİ (kart 1280px'te ~100px), 2 satır, ikinci satır accent renkli; nokta ile bitir ("Automate Blender with Python.") — cümle gibi okunur, slogan gibi değil.
Artwork tam-kadraj; metin okunurluğu scrim'le (78deg çift linear-gradient) sağlanır, kutuyla değil. Fotoğraf yoksa inline SVG generatif art (glow'lu eğri/ağ; ikon klişesi yok).
2x render → LANCZOS küçültme = keskin tipografi. Grain overlay %5 opacity.
Alt %10 bandı boş bırak (platform overlay'leri için).
Her kart farklı accent, aynı grid → seri kimliği.

Doğrulama

Render sonrası her PNG'yi Read ile AÇ ve bak: metin taşması, scrim yetersizliği, artwork-metin çakışması. Kartı görmeden "bitti" deme.

---name: gig-cardsdescription: Profesyonel pazarlama/gig kartı görselleri üret (Fiverr gig kartı, OG image, sosyal kart, YouTube thumbnail benzeri): HTML/CSS tasarımını headless Chromium'da (Playwright) piksel-hassas render edip PNG'ye çevirir. Editoryal tasarım dili hazır: tam-kadraj artwork + sinematik scrim, Space Grotesk display başlık, IBM Plex Mono overline/meta, dergi köşe indeksi, grain dokusu. Tetikleyiciler: "gig kartı yap", "og image üret", "kart görseli", "fiverr görseli", "sosyal medya kartı", "marketing card", "thumbnail tasarla".---# gig-cards: HTML/CSS → Chromium → PNG kart üretimiNeden bu yol: Satori/vercel-og yalnız flexbox + CSS alt kümesi destekler; headless ChromiumTAM CSS verir (grid, filter, blend, değişken fontlar). Kalite farkı buradan gelir.(Araştırma: github.com/vercel/satori değerlendirildi, tam-CSS gereksinimi nedeniylePlaywright screenshot yaklaşımı seçildi. Fontlar: github.com/google/fonts.)## Kullanım1. Çalışma dizini hazırla (proje içinde `cards/` gibi): `fonts/`, `assets/`, `out/` klasörleri.2. Fontlar yoksa indir (google/fonts, OFL lisans): ```bash curl -sL -o fonts/SpaceGrotesk.ttf "https://raw.githubusercontent.com/google/fonts/main/ofl/spacegrotesk/SpaceGrotesk%5Bwght%5D.ttf" curl -sL -o fonts/Inter.ttf "https://raw.githubusercontent.com/google/fonts/main/ofl/inter/Inter%5Bopsz%2Cwght%5D.ttf" curl -sL -o fonts/IBMPlexMono-Medium.ttf "https://raw.githubusercontent.com/google/fonts/main/ofl/ibmplexmono/IBMPlexMono-Medium.ttf" ```3. Bağımlılık: `python3 -m playwright install chromium` (bir kez) + Pillow.4. `scripts/render_cards.py`'ı çalışma dizinine kopyala, `CARDS` config listesini düzenle (id / accent / overline / index / head_a / head_b / meta / art / art_mode), çalıştır. Çıktı: `out/<id>.png`, 1280×769 (W/H sabitlerinden değiştirilebilir; OG için 1200×630).## Tasarım kuralları (klişeden kaçınma — bunlar öğrenilmiş ders)- ROZET + ÇİP + degrade-panel formülü KLİŞE — kullanma. Onun yerine: mono overline, tek satır mono meta, ince accent rule, dergi köşe indeksi ("01 / KATEGORİ").- Başlık İRİ (kart 1280px'te ~100px), 2 satır, ikinci satır accent renkli; nokta ile bitir ("Automate Blender **with Python.**") — cümle gibi okunur, slogan gibi değil.- Artwork tam-kadraj; metin okunurluğu scrim'le (78deg çift linear-gradient) sağlanır, kutuyla değil. Fotoğraf yoksa inline SVG generatif art (glow'lu eğri/ağ; ikon klişesi yok).- 2x render → LANCZOS küçültme = keskin tipografi. Grain overlay %5 opacity.- Alt %10 bandı boş bırak (platform overlay'leri için).- Her kart farklı accent, aynı grid → seri kimliği.## DoğrulamaRender sonrası her PNG'yi Read ile AÇ ve bak: metin taşması, scrim yetersizliği,artwork-metin çakışması. Kartı görmeden "bitti" deme.

Frequently asked questions