Menu
Full graphic design capability using code-based rendering — turns Claude Code's HTML/CSS/SVG skills into production graphic design output
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Auto-review planning pipeline - runs CEO then design then eng reviews sequentially with auto-decisions. CARL TRIGGERS: autoplan, run the planning pipeline, full plan review, auto plan, plan everything. SOURCE: garrytan/gstack/autoplan, integrated as gs-autoplan on 2026-05-29.
Performance regression detection - baseline page load, Core Web Vitals, resource sizes. CARL TRIGGERS: benchmark, performance check, page speed, core web vitals, perf baseline. SOURCE: garrytan/gstack/benchmark, integrated as gs-benchmark on 2026-05-29.
Post-deploy canary monitoring - watches console errors, perf regressions, page failures. CARL TRIGGERS: canary monitor, post-deploy watch, after deploy check, monitor production, watch the deploy. SOURCE: garrytan/gstack/canary, integrated as gs-canary on 2026-05-29.
Safety guardrails - warns before destructive commands (rm -rf, DROP TABLE, force-push). CARL TRIGGERS: be careful, careful mode, destructive command warning, safety warning. SOURCE: garrytan/gstack/careful, integrated as gs-careful on 2026-05-29.
Chief Security Officer security audit - OWASP Top 10 plus STRIDE threat modeling. CARL TRIGGERS: security audit, OWASP audit, STRIDE, vulnerability check, security review, threat model, pen test mindset. SOURCE: garrytan/gstack/cso, integrated as gs-cso on 2026-05-29.
Generate missing documentation from scratch using the Diataxis framework. CARL TRIGGERS: generate docs, create documentation, draft docs, diataxis, write missing docs. SOURCE: garrytan/gstack/document-generate, integrated as gs-doc-generate on 2026-05-29.
| name | Graphic Design Studio |
| description | Full graphic design capability using code-based rendering — turns Claude Code's HTML/CSS/SVG skills into production graphic design output |
| recall_keywords | ["graphic","logo","banner","social media graphic","design","poster","visual","brand asset","marketing visual","icon"] |
Full graphic design capability using code-based rendering. Turns Claude Code's HTML/CSS/SVG skills into production graphic design output.
Best for: Logos, banners, cards, social media graphics, UI mockups
from playwright.sync_api import sync_playwright
with sync_playwright() as p:
browser = p.chromium.launch()
page = browser.new_page(viewport={"width": 1200, "height": 630})
page.set_content(html_content)
page.screenshot(path="output.png", full_page=False)
browser.close()
Best for: Icons, logos, geometric patterns, scalable assets
import svgwrite
dwg = svgwrite.Drawing('output.svg', size=('400px', '400px'))
# Replace colors with your project's brand palette
dwg.add(dwg.circle(center=(200, 200), r=100, fill='<primary-color>'))
dwg.add(dwg.text('<INITIALS>', insert=(160, 215), fill='<accent-color>',
font_size='60px', font_family='Georgia'))
dwg.save()
Best for: Photo editing, compositing, batch processing, format conversion
from PIL import Image, ImageDraw, ImageFont, ImageFilter
# Replace colors with your project's brand palette
img = Image.new('RGBA', (1200, 630), '<primary-color>')
draw = ImageDraw.Draw(img)
draw.text((100, 100), "<Brand Name>", fill='<accent-color>')
img.save('output.png', optimize=True)
Best for: Photorealistic images, illustrations, creative concepts
@fal-generate, @fal-image-edit, @fal-upscale)@huggingface-skills plugin)stability-ai skill