Search skills.../

Illustration Style | Skills Pool

Skill File

Illustration Style

Define an illustration style guide with visual language, color usage, and application rules.

Owl-Listener741 starsMar 7, 2026

Occupation
Categories: IDE Plugins

Skill Content

You are an expert in defining illustration systems that support product communication and brand identity.

What You Do

You create illustration style guides ensuring consistent visual storytelling across a product.

Style Definition

Geometric vs organic: Angular/structured or flowing/natural
Flat vs dimensional: 2D flat, 2.5D isometric, or 3D
Detailed vs minimal: Level of detail and complexity
Abstract vs representational: Symbolic or realistic
Line style: Stroke weight, corners, endpoints

Color in Illustration

Use a subset of the product color palette
Define primary, secondary, and accent illustration colors
Rules for gradients and shadows
Dark mode illustration variants

Character Design (if applicable)

Related Skills

Quick Install

Illustration Style

npx skills add Owl-Listener/designer-skills

Download Skill Open repository

Author: Owl-Listener
stars: 741
Updated: Mar 7, 2026
Occupation

On this page

Proportions and body style
Level of detail in faces
Diversity and representation guidelines
Poses and expressions library

Illustration Types

Spot illustrations: Small, inline, supporting UI elements
Hero illustrations: Large, featured, storytelling
Empty states: Guide users when no content exists
Onboarding: Explain features and concepts
Error states: Soften error messages

Application Rules

When to use vs when not to use illustrations
Size constraints per context
Alignment with grid system
Animation guidelines for illustrated elements

Best Practices

Keep a consistent style across all illustrations
Create reusable element libraries
Document the creation process for contributors
Test at intended display sizes
Consider accessibility (don't convey info only through illustrations)

02

Style Definition

03Color in Illustration

04Character Design (if applicable)

05Illustration Types

06Application Rules

07Best Practices

Graphic Designers

Automation Tools

Coding Agent (bash-first)

Delegate coding tasks to Codex, Claude Code, or Pi agents via background process. Use when: (1) building/creating new features or apps, (2) reviewing PRs (spawn in temp dir), (3) refactoring large codebases, (4) iterative coding that needs file exploration. NOT for: simple one-liner fixes (just edit), reading code (use read tool), thread-bound ACP harness requests in chat (for example spawn/run Codex or Claude Code in a Discord thread; use sessions_spawn with runtime:"acp"), or any work in ~/clawd workspace (never spawn agents here). Claude Code: use --print --permission-mode bypassPermissions (no PTY). Codex/Pi/OpenCode: pty:true required.

Install Vscode Extension

How to install a VS Code extension from an extension ID. Useful when the user wants to add new capabilities to their VS Code environment by installing extensions.

microsoft184.0k

Launch

Launch and automate VS Code (Code OSS) using agent-browser via Chrome DevTools Protocol. Use when you need to interact with the VS Code UI, automate the chat panel, test UI features, or take screenshots of VS Code. Triggers include 'automate VS Code', 'interact with chat', 'test the UI', 'take a screenshot', 'launch Code OSS with debugging'.

microsoft184.0k

Agent Customization

**WORKFLOW SKILL** — Create, update, review, fix, or debug VS Code agent customization files (.instructions.md, .prompt.md, .agent.md, SKILL.md, copilot-instructions.md, AGENTS.md). USE FOR: saving coding preferences; troubleshooting why instructions/skills/agents are ignored or not invoked; configuring applyTo patterns; defining tool restrictions; creating custom agent modes or specialized workflows; packaging domain knowledge; fixing YAML frontmatter syntax. DO NOT USE FOR: general coding questions (use default agent); runtime debugging or error diagnosis; MCP server configuration (use MCP docs directly); VS Code extension development. INVOKES: file system tools (read/write customization files), ask-questions tool (interview user for requirements), subagents for codebase exploration. FOR SINGLE OPERATIONS: For quick YAML frontmatter fixes or creating a single file from a known pattern, edit the file directly — no skill needed.

microsoft184.0k

Automation Tools

Init

Generate or update chat customization files for AI coding agents

microsoft184.0k

Launch

Launch and automate VS Code Insiders with the Copilot Chat extension using agent-browser via Chrome DevTools Protocol. Use when you need to interact with the VS Code UI, automate the chat panel, test the extension UI, or take screenshots. Triggers include 'automate VS Code', 'interact with chat', 'test the UI', 'take a screenshot', 'launch with debugging'.

microsoft184.0k

Graphic Designers