name: art
description: "Visual content creation. Prompt engineering for image generation, diagrams, mermaid charts, and technical illustrations."
triggers:
- create art
- illustration
- diagram
- visual content
- header image
- mermaid
- flowchart
- infographic

Art Skill

Create visual content: AI-generated images, mermaid diagrams, flowcharts, and technical illustrations.

Capabilities

• AI Image Generation — Prompt engineering for Flux, DALL-E, Midjourney-style outputs
• Mermaid Diagrams — Flowcharts, sequence diagrams, entity relationships, state machines
• Technical Diagrams — Architecture diagrams, data flow, system interaction
• Icons and Logos — Simple visual identity elements

Process

1. Understand what visual is needed
2. Choose the right medium (AI image, mermaid, ASCII, SVG)
3. Create with appropriate detail level
4. Iterate based on feedback

AI Image Prompt Engineering

Prompt Structure

[Subject] + [Style] + [Lighting] + [Composition] + [Quality modifiers]

Effective Prompt Templates

Technical/Professional:

Isometric 3D illustration of [concept], flat design, clean lines,
vibrant colors, white background, professional, vector-style,
high detail, 4k, digital art

Photorealistic:

[Subject], professional photography, [time of day] lighting,
shallow depth of field, shot on Canon EOS R5, 85mm lens,
ultra-realistic, 8k

Conceptual/Abstract:

Abstract visualization of [concept], geometric shapes,
gradient colors from [color1] to [color2], minimal,
modern design, editorial illustration style

Header/Banner Image:

Wide format hero image, [subject], cinematic composition,
rule of thirds, [color palette], subtle texture,
suitable for web header, 16:9 aspect ratio

Style Modifiers by Use Case

Negative Prompts (what to avoid)

--no blurry, distorted, watermark, text overlay, low quality, JPEG artifacts

Mermaid Diagram Reference

Flowchart (most common)

graph TD
    A[Start] --> B{Decision}
    B -->|Yes| C[Action 1]
    B -->|No| D[Action 2]
    C --> E[End]
    D --> E

Sequence Diagram (system interactions)

sequenceDiagram
    participant Client
    participant API
    participant DB
    Client->>API: POST /auth/login
    API->>DB: SELECT user WHERE email=?
    DB-->>API: User record
    API-->>Client: JWT token
    Note over Client,API: Token valid for 24h

Entity Relationship (data modeling)

erDiagram
    USER ||--o{ ORDER : places
    ORDER ||--|{ ORDER_ITEM : contains
    PRODUCT ||--o{ ORDER_ITEM : "ordered in"
    USER {
        uuid id PK
        string email
        string name
    }
    ORDER {
        uuid id PK
        uuid user_id FK
        timestamp created_at
    }

State Machine (workflows)

stateDiagram-v2
    [*] --> Draft
    Draft --> Review : submit
    Review --> Approved : approve
    Review --> Draft : reject
    Approved --> Published : publish
    Published --> Archived : archive
    Archived --> [*]

Gantt Chart (project timelines)

gantt
    title Project Timeline
    dateFormat  YYYY-MM-DD
    section Phase 1
    Design           :a1, 2025-01-01, 14d
    Development      :a2, after a1, 30d
    section Phase 2
    Testing          :b1, after a2, 14d
    Deployment       :b2, after b1, 7d

C4 Architecture Diagram (system context)

C4Context
    Person(user, "User", "Application user")
    System(app, "Application", "Main system")
    System_Ext(auth, "Auth Provider", "OAuth2")
    System_Ext(db, "Database", "PostgreSQL")
    Rel(user, app, "Uses", "HTTPS")
    Rel(app, auth, "Authenticates via")
    Rel(app, db, "Reads/Writes")

SVG Techniques for Custom Icons

<!-- Simple icon template -->
<svg width="24" height="24" viewBox="0 0 24 24" fill="none"
     xmlns="http://www.w3.org/2000/svg">
  <!-- Use currentColor for theme compatibility -->
  <path d="M12 2L2 7l10 5 10-5-10-5z" fill="currentColor"/>
  <path d="M2 17l10 5 10-5" stroke="currentColor" stroke-width="2"
        stroke-linecap="round"/>
</svg>

Medium Selection Guide

Red Flags / Warnings

• Mermaid syntax errors fail silently in some renderers — validate at mermaid.live before using
• AI image prompts with too many conflicting styles produce incoherent results — pick one dominant style
• Never use AI-generated images for faces in professional contexts without explicit review
• SVG icons must use currentColor not hardcoded hex values to work in dark/light themes
• Gantt diagrams with more than 20 tasks become unreadable — break into phases

Output: Visual artifact (mermaid code block, SVG markup, or AI image generation prompt) ready to render.