agentsclimarketplace

Visual design

Skill nimadorostkar/Claude-Skills-collection/skills/design/visual-design

Use when creating posters, covers, social graphics, or other static visual designs. Covers composition, typographic hierarchy, colour, and producing original work rather than pastiche.From its SKILL.md

Install
npx -y skills add nimadorostkar/Claude-Skills-collection --skill visual-design

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

2 things to look at

  • 26 days oldThe repository was created 26 days ago. New is not bad, but a brand new repository carrying a familiar-sounding name is the shape a typosquat arrives in, and there has been no time for anyone else to find a problem with it.
  • 23 stars23 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

SKILL.md

5.2 KB, ~1.1k tokens by cl100k_base, as published. Nobody here has run it

Visual Design

Purpose

Produce static visual designs — posters, covers, graphics — that are composed deliberately rather than assembled. Most weak design is not a failure of taste; it is a failure to establish a hierarchy.

When to Use

  • Creating a poster, cover, banner, or social graphic.
  • Designing a static layout where composition carries the message.
  • Reviewing a design for hierarchy and balance.

Capabilities

  • Composition: grid, balance, negative space, focal point.
  • Typographic hierarchy and pairing.
  • Colour: palette construction, contrast, and restraint.
  • Output for print (CMYK, bleed) and screen (RGB, pixel density).

Inputs

  • The message, and the one thing that must be read first.
  • The medium, the size, and the viewing distance.
  • Brand constraints, if any.

Outputs

  • A composed design with an unambiguous focal point.
  • Assets at the correct resolution and colour space for the medium.

Workflow

  1. Establish the hierarchy first — What is read first, second, third? If everything is emphasized, nothing is. This decision precedes every other one.
  2. Build on a grid — Even a loose one. A grid is what makes an intentional composition distinguishable from an accidental one, and it is what makes breaking it read as deliberate.
  3. Use negative space as a material — Space is not emptiness to be filled. It is what gives the focal point its force.
  4. Restrict the palette — Two or three colours plus neutrals. Every additional colour dilutes the hierarchy you just built.
  5. Restrict the type — Two typefaces at most. Hierarchy comes from size, weight, and space — not from more fonts.
  6. Test at the actual viewing distance — A poster is read from three metres. Shrink it to thumbnail size: the focal point should still be unmistakable.

Best Practices

  • The most common failure is no hierarchy: three elements at similar visual weight, so the eye has nowhere to land. Make one thing dominant.
  • Negative space is what distinguishes a professional composition from an amateur one more reliably than any other single factor. Resist filling it.
  • Contrast carries hierarchy: size, weight, colour, and space. Small contrasts read as mistakes; commit to a difference.
  • Two typefaces, deliberately paired — one for display, one for text. A third is almost never an improvement.
  • Colour with no restraint reads as noise. Pick a palette and stay within it.
  • Never reproduce an existing artist's or brand's distinctive style. Create original work; take inspiration from principles, not from imitation.

Examples

Establishing hierarchy through contrast, not decoration:

A conference poster. Three pieces of information:
  1. The conference name          <- must be read first, from across a room
  2. The dates and the city       <- second
  3. The URL and the sponsors     <- third, only if they are already interested

Weak: all three set at similar sizes, centred, in three colours. The eye lands
nowhere. From three metres it is a grey rectangle.

Composed:
  - Name        : 240pt, one colour, occupying the upper-left third, ranged left,
                  with the counters tight. It is the only thing visible at
                  thumbnail size — which is the test.
  - Dates/city  : 48pt, the accent colour, sitting directly beneath the name's
                  baseline, aligned to the same left edge.
  - URL/sponsors: 18pt, neutral grey, at the foot, with generous space above so
                  they read as a footer rather than as content.
  - The lower-right 40% of the poster is empty. That emptiness is what gives the
    name its force. Filling it with a stock image would halve the poster's impact.

Palette: one dark neutral, one accent, white. Nothing else.
Type: one display face, one text face.

Output specification, which is where designs get ruined:

Print (A2 poster):
  - 300 DPI at final size. A 150 DPI file will look acceptable on screen and
    visibly soft in print.
  - CMYK, with the accent colour checked for gamut. A vivid RGB blue frequently
    prints as a dull purple, and this is discovered at the printer.
  - 3mm bleed on every edge, with nothing important within 5mm of the trim.
  - Fonts outlined or embedded.

Screen (social, 1080x1350):
  - RGB, sRGB colour profile.
  - Text no smaller than 24px at 1080 width, or it is unreadable on a phone.
  - Check the composition at 150px wide — that is the size of a feed thumbnail,
    and it is where most people will see it.

Notes

  • The thumbnail test is the fastest and most brutal check available. Shrink the design to a quarter of an inch. Whatever is still legible is the hierarchy you actually built, as opposed to the one you intended.
  • RGB-to-CMYK gamut loss is the standard print disappointment. Check the vivid colours before the print run, not after.
  • Never imitate a specific living artist's or a specific brand's distinctive visual identity. Work from principles, and produce something original.

What ships with it

Read from the repository

Just SKILL.md. No reference files, no scripts.

Gives 0 of the 12 instructions most design frontend skills give in ~1.1k tokens

Counted across 1,169 of the 1,878 authors here whose files we hold, read 2026-08-07

  • Use CSS variables for color consistencyin 72 of 1169, across 23 files
  • Commit to one bold aesthetic direction before codingin 72 of 1169, across 27 files
  • Match implementation complexity to the aesthetic visionin 70 of 1169, across 20 files
  • Add atmospheric background effects and texturesin 57 of 1169, across 9 files
  • Use unexpected spatial compositions and layoutsin 56 of 1169, across 8 files
  • Implement real working codein 55 of 1169, across 7 files
  • Vary themes and aesthetics across different designsin 48 of 1169, across 7 files
  • Launch chromium in headless modein 47 of 1169, across 4 files
  • Close the browser when donein 47 of 1169, across 4 files
  • Run provided scripts with help flag firstin 47 of 1169, across 4 files
  • Wait for network idle statein 47 of 1169, across 4 files
  • Use descriptive selectors for elementsin 47 of 1169, across 4 files

Said here and by no other author read

  • establish hierarchy before all other decisions
  • build composition on a grid
  • use negative space as a structural material
  • use at most two typefaces
  • make one element dominant
  • test design at actual viewing distance

Grouped from the skills themselves: near-identical wordings counted once, and counted by distinct author, so one author publishing three of these counts once. Length counted with cl100k_base; the agent that loads this file may tokenize it differently.

Keep looking

Skills are one crate of 326,852. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.