beautiful-diagrams
Beautiful Diagrams
Generate professional article diagrams using HTML + Playwright screenshots.
Style: bold white carousel. White background, thick black borders (3-4px), chunky rounded cards with 6px drop shadows, terracotta (#E27D5B) icon tiles, Inter 900 typography at large sizes. Designed to be readable in-feed on LinkedIn / Substack, not a reader-hostile monitoring UI.
Design tokens:
| Token | Value | Use |
|---|---|---|
BG_WHITE |
#FFFFFF |
Canvas + card fill |
INK |
#0A0A0A |
Text, borders, arrows |
INK_SOFT |
#2A2A2A |
Secondary text |
INK_MUTED |
#5A5A5A |
Hints, tertiary text |
ACCENT |
#E27D5B |
Icon tiles, connector chips, badges |
ACCENT_SOFT |
#F3D4C6 |
Note boxes |
Typography: Inter (400–900 weights), loaded from Google Fonts. Headings use weight 900 at 24-28px. Body text is 14-18px. Connector labels and badges are uppercase bold at 11-14px on accent pills. Nothing smaller than 13px.
More from apetcu/skills
beautiful-ui
Build stunning glassmorphism dark-mode interfaces with Next.js and Tailwind CSS v4. Use when creating any frontend UI, component, page, or application. Specializes in glass-like translucent surfaces, luminous color palettes on dark backgrounds, fluid animations with Framer Motion, and premium visual polish. Always generates dark-mode-first, glassmorphic, production-grade code with exceptional aesthetic quality.
16romanian-humanizer
Detect and remove AI-generated markers from Romanian text, making it sound like a native Romanian speaker wrote it. Use when asked to "humanize", "naturalize", or "remove AI feel" from Romanian text, or when editing .md/.txt files containing Romanian content. Identifies 26 patterns (12 Romanian-specific + 14 universal) and 4 style markers.
4demo-builder
Build complete demo projects from scratch. Takes a project description (presentation website, shop, dashboard, SaaS, portfolio, etc.) and scaffolds a full working Next.js + Tailwind CSS 3.4 app ready for Vercel deployment. Supports optional database integration when a DATABASE_URL is provided. Use when the user wants to build a demo, create a project, scaffold an app, prototype something, or spin up a quick site.
3