Skills DirectorySkills Directory
SkillsLearnSecurityCategoriesDocsCommunityBlog
Sign InSubmit Skill
Skills Directory

Security-tested agent skills for Claude, coding agents, and AI workflows.

Directory

  • Browse Skills
  • All Skills A–Z
  • Claude Skills
  • Claude Code Skills
  • Agent Skills
  • Categories
  • Submit a Skill

Learn

  • Learn Hub
  • Install Claude Skills
  • Write SKILL.md
  • Skills vs MCP
  • Directories Compared

Security

  • Security
  • Methodology
  • Secure Claude Skills
  • Security Badges

Company

  • About
  • Community
  • Blog
  • API Docs
  • Advertise

2026 Skills Directory. All rights reserved.

Back to skills

Art Style Creator

ASecurity

Create and define visual art styles for projects. Use when user wants to establish an art direction, create a style guide, define visual language, document aesthetic choices, or create consistent artwork guidelines for games, illustrations, animations, or other visual media.

416 stars
0 votes
0 copies
0 views
Added 2/9/2026
designgoapi

Works with

api

Security Analysis

A100/100

Scanned 2/12/2026

Install to Claude Code

$npx -y skills add aiskillstore/marketplace --skill art-style-creator --agent claude-code

Installs into .claude/skills of the current project.

Are you the author of Art Style Creator?

Add the live security badge to your README — it updates automatically with every re-scan.

Security grade badge for Art Style Creator
[![Security: A — Skills Directory](https://www.skillsdirectory.com/api/skills/aiskillstore-art-style-creator/badge)](https://www.skillsdirectory.com/skills/aiskillstore-art-style-creator)

More formats (shields.io, HTML) on the badges page.

Download Zip
Files
SKILL.md
---
name: art-style-creator
description: Create and define visual art styles for projects. Use when user wants to establish an art direction, create a style guide, define visual language, document aesthetic choices, or create consistent artwork guidelines for games, illustrations, animations, or other visual media.
---

# Art Style Creator

This skill guides the creation of comprehensive art style definitions for visual projects.

## Workflow

### Step 1: Vision & Context

Gather project context:
1. **Project type**: Game, illustration, animation, UI, branding
2. **Target audience**: Age group, cultural context
3. **Vision statement**: 2-3 sentences describing the visual direction
4. **Key words**: 5-7 words capturing the style essence
5. **Primary influences**: Reference styles, artists, or works

### Step 2: Color Palette

Define the color system. See [color-theory.md](references/color-theory.md) for detailed guidance.

Ask for:
- **Palette type**: Monochromatic, analogous, complementary, triadic, etc.
- **Dominant color** (60%): Background, large areas
- **Secondary color** (30%): Supporting elements
- **Accent color** (10%): Highlights, focal points
- **Mood alignment**: Match colors to intended emotion
- **Forbidden colors**: Colors to avoid and why

### Step 3: Line Work

Establish line characteristics. See [line-and-shape.md](references/line-and-shape.md) for details.

Define:
- **Outline approach**: Full / Partial / None / Color holds
- **Base weight**: Thin / Medium / Thick (with pixel/pt measurement)
- **Quality**: Clean / Sketchy / Geometric / Organic / Calligraphic
- **Weight variation**: Different weights for FG/MG/BG
- **Line color**: Black / Dark local color / Color holds

### Step 4: Shape Language

Define shape characteristics. See [line-and-shape.md](references/line-and-shape.md).

Specify:
- **Dominant shape**: Circle (friendly), Square (stable), Triangle (dynamic)
- **Complexity level**: Simple / Moderate / Complex
- **Edge treatment**: Sharp / Rounded / Mixed
- **Character shapes**: Heroes, villains, NPCs
- **Environment shapes**: Architecture, nature, props
- **Silhouette priority**: High / Medium / Low

### Step 5: Composition

Set layout rules. See [composition-lighting.md](references/composition-lighting.md).

Define:
- **Framing system**: Rule of thirds / Golden ratio / Center-focused / Dynamic
- **Symmetry preference**: Symmetric / Asymmetric / Varied
- **Depth approach**: FG/MG/BG presence and treatment
- **Perspective type**: 1-point / 2-point / 3-point / Isometric
- **Visual hierarchy**: Primary method (size/contrast/color/position)
- **Negative space**: Minimal / Moderate / Abundant

### Step 6: Lighting & Atmosphere

Define lighting style. See [composition-lighting.md](references/composition-lighting.md).

Specify:
- **Overall brightness**: Dark / Dim / Neutral / Bright
- **Contrast level**: Low / Medium / High / Extreme
- **Shadow rendering**: Gradient / Cel-shaded / Hatched / Minimal / None
- **Primary light direction**: Front / Side / Back / Top / Variable
- **Light hardness**: Soft / Medium / Hard
- **Shadow color**: Black / Colored / Complementary
- **Atmospheric effects**: Fog, particles, god rays

### Step 7: Texture & Detail

Set detail approach. See [texture-mood.md](references/texture-mood.md).

Define:
- **Detail level**: Minimal / Low / Medium / High / Photorealistic
- **Texture rendering**: Painted / Photo / Procedural / Flat / Stylized
- **Detail distribution**: High detail for focus, low for background
- **Surface treatments**: How to handle different materials
- **Aging/weathering**: None / Subtle / Visible / Heavy
- **Noise/grain**: None / Subtle / Visible

### Step 8: Mood & Tone

Establish emotional baseline. See [texture-mood.md](references/texture-mood.md).

Specify:
- **Core emotion**: Joy, sadness, fear, tension, peace, mystery, etc.
- **Intensity**: Subtle / Moderate / Strong
- **Tone position**: Light ↔ Dark spectrum
- **Energy level**: Calm / Moderate / Energetic
- **Genre alignment**: Fantasy, sci-fi, horror, noir, etc.
- **Elements to avoid**: What would break the mood

### Step 9: Technical Specs

Document technical requirements. See [technical-specs.md](references/technical-specs.md).

Define:
- **Working resolution**: Dimensions at DPI
- **Export resolution**: Final output specs
- **Color mode**: RGB / CMYK / Indexed
- **File formats**: Working and export formats
- **Asset sizes**: Characters, environments, UI elements, icons

### Step 10: Generate Style Document

Output the complete art style definition using the template below.

---

## Output Template

```markdown
# [PROJECT NAME] — Art Style Guide

## Overview
**Project**: [Name]
**Style Name**: [Unique identifier]
**Version**: 1.0

### Vision Statement
[2-3 sentences describing the visual vision]

### Key Words
[5-7 words capturing the essence]

---

## 1. Color Palette

### Primary Palette
| Role | Color | Hex | Usage |
|------|-------|-----|-------|
| Dominant | [Name] | #XXXXXX | [60% - backgrounds, large areas] |
| Secondary | [Name] | #XXXXXX | [30% - supporting elements] |
| Accent | [Name] | #XXXXXX | [10% - highlights, CTAs] |

### Extended Palette
- Highlight: #XXXXXX
- Shadow: #XXXXXX
- Neutrals: #XXXXXX, #XXXXXX

### Color Rules
- [Rule 1]
- [Rule 2]

### Forbidden Colors
- [Color]: [Reason]

---

## 2. Line Work

- **Outline**: [Full/Partial/None/Color holds]
- **Base weight**: [Thin/Medium/Thick] at [X px at Y resolution]
- **Quality**: [Clean/Sketchy/Geometric/Organic]
- **FG weight**: [Weight]
- **BG weight**: [Weight]
- **Line color**: [Black/Colored/Color holds]

---

## 3. Shape Language

- **Dominant shape**: [Circle/Square/Triangle/Mixed]
- **Complexity**: [Simple/Moderate/Complex]
- **Edges**: [Sharp/Rounded/Mixed]
- **Heroes**: [Shape description]
- **Villains**: [Shape description]
- **Environments**: [Geometric/Organic/Mixed]
- **Silhouette priority**: [High/Medium/Low]

---

## 4. Composition

- **Framing**: [Rule of thirds/Golden ratio/etc.]
- **Symmetry**: [Symmetric/Asymmetric/Varied]
- **Depth layers**: [FG/MG/BG treatment]
- **Perspective**: [Type]
- **Hierarchy method**: [Size/Contrast/Color/Position]
- **Negative space**: [Minimal/Moderate/Abundant]

---

## 5. Lighting

- **Brightness**: [Dark/Dim/Neutral/Bright]
- **Contrast**: [Low/Medium/High]
- **Shadow style**: [Gradient/Cel-shaded/Hatched/None]
- **Light direction**: [Default direction]
- **Hardness**: [Soft/Medium/Hard]
- **Shadow color**: [Black/Colored] at [opacity]%
- **Atmosphere**: [Effects if any]

---

## 6. Texture & Detail

- **Detail level**: [Minimal/Low/Medium/High]
- **Texture style**: [Painted/Flat/Stylized/etc.]
- **Focus areas**: [High detail]
- **Background**: [Low detail]
- **Weathering**: [None/Subtle/Visible]
- **Grain**: [None/Subtle/Visible]

---

## 7. Mood & Tone

- **Core emotion**: [Emotion] at [intensity]
- **Tone**: [Light ↔ Dark position]
- **Energy**: [Calm/Moderate/Energetic]
- **Genre**: [Genre]
- **Avoid**: [Elements that break mood]

---

## 8. Technical Specs

- **Working**: [Dimensions] at [DPI]
- **Export**: [Dimensions] at [DPI]
- **Color mode**: [RGB/CMYK]
- **Formats**: [Working] → [Export formats]
- **Character size**: [Dimensions]
- **Environment size**: [Dimensions]
- **Icon size**: [Dimensions]

---

## 9. References

### Primary Influences
1. [Influence]: [What to take]
2. [Influence]: [What to take]

### Avoid
- [Style/Work]: [Why]

---

## 10. Do's and Don'ts

### Do
- [Correct practice]
- [Correct practice]

### Don't
- [Incorrect practice]
- [Incorrect practice]
```

---

## Reference Files

Load these as needed for detailed guidance:

- [color-theory.md](references/color-theory.md) - Color wheel, palette types, psychology, construction rules
- [line-and-shape.md](references/line-and-shape.md) - Line characteristics, shape psychology, silhouettes
- [composition-lighting.md](references/composition-lighting.md) - Composition principles, perspective, lighting setups
- [texture-mood.md](references/texture-mood.md) - Detail levels, texture types, mood mapping, genre guides
- [technical-specs.md](references/technical-specs.md) - Resolution, color modes, file formats
- [style-references.md](references/style-references.md) - Art movements, contemporary styles, animation styles
- [glossary.md](references/glossary.md) - Art terminology definitions

## Quick Style Presets

For rapid style definition, use these genre presets as starting points:

| Genre | Colors | Lines | Shapes | Lighting | Detail |
|-------|--------|-------|--------|----------|--------|
| **Anime** | Saturated, clean | Clean, variable weight | Soft, appealing | Cel-shaded | Medium |
| **Cartoon** | Bright, primary | Bold outlines | Round, exaggerated | Flat/minimal | Low |
| **Realistic** | Natural, full range | No outline | Complex, accurate | Gradient | High |
| **Pixel Art** | Limited palette | Sharp, 1px | Blocky, simplified | Dithered | Low |
| **Noir** | Mono + accent | Heavy contrast | Stark, geometric | High contrast | Medium |
| **Fantasy** | Rich, varied | Flowing, ornate | Organic, majestic | Dramatic | High |
| **Sci-Fi** | Cool, neon accents | Clean, geometric | Streamlined | Artificial | Medium-High |
| **Horror** | Desaturated, sickly | Jagged, broken | Distorted | Low key | Varied |
| **Minimalist** | Limited, pastel | None or thin | Simple geometric | Flat | Minimal |

Attribution

aiskillstoreaiskillstore
View sourceMore from aiskillstore →
SSkills DirectorySkills Directory

Ship a skill? Prove it's safe.

Free 120-pattern security scan, letter grade, and an embeddable README badge.

Submit a skill

Is this your skill, or is something wrong with this listing? Request removal or report an issue. Author removals are honored within 72 hours.

Comments (0)

No comments yet. Be the first to comment!

SSkills DirectorySkills Directory

Ship a skill? Prove it's safe.

Free 120-pattern security scan, letter grade, and an embeddable README badge.

Submit a skill

Related Skills

Responsive Design

Implement modern responsive layouts using container queries, fluid typography, CSS Grid, and mobile-first breakpoint strategies. Use when building adaptive interfaces, implementing fluid layouts, or creating component-level responsive behavior.

393432 votes

Mermaid Diagrams

Creating and refining Mermaid diagrams with live reload. Use when users want flowcharts, sequence diagrams, class diagrams, ER diagrams, state diagrams, or any other Mermaid visualization. Provides best practices for syntax, styling, and the iterative workflow using mermaid_preview and mermaid_save tools.

2032 votes

sleek-design-mobile-apps

Use when the user wants to design a mobile app, create screens, build UI, or interact with their Sleek projects. Covers high-level requests ("design an app that does X") and specific ones ("list my projects", "create a new project", "screenshot that screen").

5711 votes

swiftui-design-skill

SwiftUI frontend visual design skill. Creates beautiful, distinctive iOS/macOS interfaces that avoid generic AI slop patterns. Covers design direction, layout systems, typography, color, spacing, brand integration, and design review. Use when designing new SwiftUI views, reviewing UI quality, creating iOS prototypes, choosing visual styles, improving app aesthetics, or when the UI looks generic or AI-generated.

1801 votes

Ios Hig

Use when designing iOS interfaces, implementing accessibility (VoiceOver, Dynamic Type), handling dark mode, ensuring adequate touch targets, providing animation/haptic feedback, or requesting user permissions. Apple Human Interface Guidelines for iOS compliance.

761 votes
View all in design →