Menu
Patterns for visual design, SVG creation, layout composition, typography, and brand identity.
Instalar com Codex ou Claude Copie este prompt, cole no Codex, Claude ou outro assistente e deixe que ele revise a página da skill e instale para você.
Baseado na classificação ocupacional SOC
Focus blocks, distraction management, and flow state triggers for cognitively demanding work
Internal metacognitive skill for automatic capability discovery — self-triggers when uncertain about available skills
End-to-end academic paper drafting for CHI, HBR, journals, and conferences with venue-specific templates, drafting workflows, and revision strategies.
Patterns for thesis writing, dissertations, research papers, literature reviews, and scholarly work.
**Domain**: AI/ML Architecture
Domain knowledge for AI adoption measurement, psychometric instrument development, and appropriate reliance research
| name | Graphic Design Skill |
| description | Patterns for visual design, SVG creation, layout composition, typography, and brand identity. |
Patterns for visual design, SVG creation, layout composition, typography, and brand identity.
| Level | Purpose | Techniques |
|---|---|---|
| Primary | First thing seen | Largest, boldest, highest contrast |
| Secondary | Supporting info | Medium size, moderate weight |
| Tertiary | Details | Smaller, lighter, subtle |
| Type | Characteristics | Best For |
|---|---|---|
| Symmetrical | Mirror image, formal | Corporate, traditional |
| Asymmetrical | Visual weight balanced, dynamic | Modern, creative |
| Radial | Elements radiate from center | Logos, icons |
┌─────┬─────┬─────┬─────┐
│ 1 │ 2 │ 3 │ 4 │ 12-column grid
├─────┼─────┼─────┼─────┤ (most flexible)
│ 5 │ 6 │ 7 │ 8 │
├─────┼─────┼─────┼─────┤
│ 9 │ 10 │ 11 │ 12 │
└─────┴─────┴─────┴─────┘
┌─────────┬─────────┬─────────┐
│ │ ● │ │ Place key elements
├─────────┼─────────┼─────────┤ at intersection
│ ● │ │ ● │ points for dynamic
├─────────┼─────────┼─────────┤ composition
│ │ ● │ │
└─────────┴─────────┴─────────┘
| Principle | Rule |
|---|---|
| Edge alignment | Elements share common edges |
| Center alignment | Elements share center axis |
| Baseline alignment | Text shares baseline |
| Optical alignment | Visually aligned (may differ from mathematical) |
| Level | Size | Use |
|---|---|---|
| Display | 72px | Hero headlines |
| H1 | 48px | Page titles |
| H2 | 36px | Section headers |
| H3 | 28px | Subsections |
| Body | 16px | Main content |
| Caption | 12px | Supporting text |
| Combination | Example | Vibe |
|---|---|---|
| Serif + Sans | Georgia + Helvetica | Classic, professional |
| Sans + Sans | Montserrat + Open Sans | Modern, clean |
| Display + Body | Playfair + Source Sans | Elegant, editorial |
Primary
●
/|\
/ | \
/ | \
●───●───●
Secondary Tertiary
| Scheme | Description | Mood |
|---|---|---|
| Monochromatic | One hue, varied lightness | Cohesive, elegant |
| Complementary | Opposite on wheel | High contrast, vibrant |
| Analogous | Adjacent on wheel | Harmonious, natural |
| Triadic | Three equidistant | Balanced, dynamic |
| Split-complementary | Base + two adjacent to complement | Softer contrast |
| Color | Associations | Use Cases |
|---|---|---|
| Blue | Trust, stability, tech | Corporate, software |
| Green | Growth, nature, success | Health, finance |
| Red | Energy, urgency, passion | CTAs, alerts |
| Purple | Creativity, luxury | Premium, creative |
| Orange | Friendly, energetic | Social, youth |
| Yellow | Optimism, attention | Highlights, warnings |
| WCAG Level | Contrast Ratio | Use |
|---|---|---|
| AA (normal) | 4.5:1 | Body text |
| AA (large) | 3:1 | 18px+ or 14px bold |
| AAA | 7:1 | Maximum accessibility |
Color theory principles translate directly to Mermaid diagram styling. The GitHub Pastel Palette v2 (defined in the markdown-mermaid skill) implements these principles:
Semantic Color Mapping (from color psychology):
| Semantic Purpose | Palette Color | Fill | Text | Stroke |
|---|---|---|---|---|
| Primary actions | Blue | #ddf4ff | #0550ae | #80ccff |
| Success/output | Green | #d3f5db | #1a7f37 | #6fdd8b |
| Business logic | Gold | #fff8c5 | #9a6700 | #d4a72c |
| Special/DevOps | Purple | #d8b9ff | #6639ba | #bf8aff |
| Errors/critical | Red | #ffebe9 | #cf222e | #f5a3a3 |
| Raw/ingestion | Bronze | #fff1e5 | #953800 | #ffb77c |
| Background | Neutral | #eaeef2 | #24292f | #d0d7de |
Design Principles Applied:
#57606a): Don't compete with colored nodes — visual hierarchy preservedWhen to Override the Palette:
<svg viewBox="0 0 width height" xmlns="...">
<defs>
<!-- Reusable definitions -->
<linearGradient id="grad1">...</linearGradient>
<filter id="shadow">...</filter>
</defs>
<!-- Background layer -->
<rect .../>
<!-- Main content -->
<g transform="translate(x, y)">
<!-- Grouped elements -->
</g>
<!-- Foreground/overlay -->
</svg>
| Element | Use | Key Attributes |
|---|---|---|
<rect> | Rectangles, backgrounds | x, y, width, height, rx (rounded) |
<circle> | Circles, dots | cx, cy, r |
<ellipse> | Ovals | cx, cy, rx, ry |
<line> | Straight lines | x1, y1, x2, y2 |
<path> | Complex shapes | d (path data) |
<text> | Typography | x, y, text-anchor, dominant-baseline |
<g> | Grouping | transform |
| Command | Meaning | Example |
|---|---|---|
| M | Move to | M 10 20 |
| L | Line to | L 30 40 |
| H | Horizontal line | H 50 |
| V | Vertical line | V 60 |
| Q | Quadratic curve | Q cx cy, x y |
| C | Cubic curve | C cx1 cy1, cx2 cy2, x y |
| Z | Close path | Z |
<!-- Horizontal alignment -->
text-anchor="start|middle|end"
<!-- Vertical alignment -->
dominant-baseline="auto|middle|central|hanging"
<!-- Centered text -->
<text x="50%" y="50%" text-anchor="middle" dominant-baseline="central">
Perfectly Centered
</text>
<!-- Linear gradient -->
<linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#007ACC"/>
<stop offset="100%" stop-color="#00a8e8"/>
</linearGradient>
<!-- Radial gradient -->
<radialGradient id="glow" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#007ACC" stop-opacity="0.4"/>
<stop offset="100%" stop-color="#007ACC" stop-opacity="0"/>
</radialGradient>
| Transform | Syntax | Use |
|---|---|---|
| Translate | translate(x, y) | Move element |
| Rotate | rotate(deg, cx, cy) | Spin around point |
| Scale | scale(x, y) | Resize |
| Skew | skewX(deg) / skewY(deg) | Shear |
| Platform | Size | Aspect |
|---|---|---|
| VS Code Marketplace | 1280×640 | 2:1 |
| GitHub Social | 1280×640 | 2:1 |
| Twitter Header | 1500×500 | 3:1 |
| LinkedIn Banner | 1584×396 | 4:1 |
| Open Graph | 1200×630 | ~1.9:1 |
┌─────────────────────────────────────────┐
│ ┌─────────────────────────────────┐ │
│ │ VISUAL ELEMENT │ │ Top third: Logo/Icon
│ └─────────────────────────────────┘ │
│ │
│ MAIN HEADLINE │ Middle: Primary message
│ Subtitle Text │
│ │
│ [Badge 1] [Badge 2] [Badge 3] │ Bottom third: CTAs/Details
└─────────────────────────────────────────┘
<!-- Rounded pill badge -->
<g>
<rect x="-50" y="-16" width="100" height="32" rx="16"
fill="#007ACC" opacity="0.15"/>
<text x="0" y="0" text-anchor="middle" dominant-baseline="central"
font-size="12" fill="#94a3b8">Label</text>
</g>
┌────────────────────┐
│ ┌──────────────┐ │ Outer: Padding zone
│ │ │ │ Inner: Safe area
│ │ CONTENT │ │ Content: Icon artwork
│ │ │ │
│ └──────────────┘ │ Standard: 24×24, 16×16
└────────────────────┘
| Style | Characteristics | Use |
|---|---|---|
| Outlined | Stroke only, no fill | Light, modern UI |
| Filled | Solid shapes | Bold, clear visibility |
| Duotone | Two tones/colors | Distinctive, branded |
| Glyph | Single color, simplified | System icons |
| Token | Value | Use |
|---|---|---|
| xs | 4px | Tight spacing |
| sm | 8px | Default gap |
| md | 16px | Section spacing |
| lg | 24px | Component gaps |
| xl | 32px | Major sections |
| 2xl | 48px | Hero spacing |
| Level | Shadow | Use |
|---|---|---|
| 0 | None | Flat elements |
| 1 | 0 1px 2px | Subtle lift |
| 2 | 0 2px 4px | Cards |
| 3 | 0 4px 8px | Dropdowns |
| 4 | 0 8px 16px | Modals |
| Token | Value | Use |
|---|---|---|
| none | 0 | Sharp corners |
| sm | 4px | Subtle rounding |
| md | 8px | Standard buttons |
| lg | 16px | Cards, pills |
| full | 9999px | Circles, pills |
Universal principles for placing illustrations in any document — READMEs, docs, presentations, books.
An image should answer: "Why HERE?"
Place images at the exact moment they illustrate. An image that appears next to the content it depicts reinforces understanding; a decorative image placed arbitrarily adds noise.
Readers should be surprised by each image, not numb to them.
Avoid repeating the same visual formula. Vary: composition, subject matter, perspective, color palette, and image type (diagram, screenshot, illustration, photo).
Every illustration should serve one of these purposes:
| Function | Description | Example |
|---|---|---|
| Anchor | Mark a pivotal moment or concept | Architecture diagram at design section |
| Reveal | Show something text describes | Screenshot of the UI being discussed |
| Transition | Signal a tonal or topic shift | Banner between major sections |
| Character | Deepen connection to a person/persona | Avatar at persona introduction |
| Setting | Establish context or environment | Deployment diagram for infrastructure |
| Evidence | Visual proof or data | Chart, graph, or test results |
HTML for precise control:
<p align="center">
<img src="assets/IMAGE.png" alt="Descriptive alt text" width="60%">
</p>
Width guidelines:
| Asset Type | Width | Use |
|---|---|---|
| Full-width banners | 100% | Section headers, hero images |
| Feature illustrations | 60% | In-content diagrams, screenshots |
| Spot illustrations | 40-50% | Inline accents, small diagrams |
| Icons/badges | 20-30% | Status indicators, inline elements |