design-visual-asset

Stars11

Forks2

UpdatedJuly 7, 2026 at 08:33

Produce a project visual asset — social card, README banner, logo/avatar, or favicon — as self-contained, accessible SVG. On-demand.

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Source

nullhack

nullhack/temple8

View GitHub Repository View Creator Repositories

Download

Related occupationsSOC

Based on SOC occupation classification

Graphic DesignersArts, Design, Entertainment, Sports, and Media Occupations·SOC 27-1024

SKILL.md

readonly

name	design-visual-asset
description	Produce a project visual asset — social card, README banner, logo/avatar, or favicon — as self-contained, accessible SVG. On-demand.

Design Visual Asset

Load [[design/asset-design]], [[design/visual-design]], [[design/accessibility]] — the per-use-case asset inventory, the visual-design levers (hierarchy, contrast, typography), and the accessibility floors every asset must meet.
Identify the asset + where it lives — social card (1280×640, open-graph previews), README banner (wide, dark-mode-aware), logo/avatar (square, reads at 32–64 px), favicon (square, reads at 16 px). Compose for that context, not for a generic brand system.
Establish hierarchy with the four levers — size, weight, position, spacing — so the user reads the name first, the intent second, the mark third. Apply parsimony: one mark, generous whitespace, one accent; the dev-branding norm is restraint.
Author the asset as self-contained SVG: presentation attributes (no inline <style> hosts strip), no external <use href> or web fonts, a square viewBox with padding, strokes converted to filled paths for production, metadata stripped.
Make it accessible: give the SVG an accessible name (<title> + aria-labelledby, or role="img" + aria-label); meet WCAG 2.2 contrast floors against every background it will appear on; pair color with a shape or label so it survives color-blind + dark-mode.
Provide a dark-surface variant where the asset appears on a theme-aware surface (README, GitHub), OR design a monochrome mark on a transparent background that holds on both.
Verify legibility at the shown size for the avatar (32–64 px) and favicon (16 px) only — simplify the mark if a thin stroke vanishes. Export PNG / .ico only where a target demands it; the SVG is the source.

More from this repository

same repository

simulate-contracts

nullhack/temple8

Compile the contract set in your head — simulate how the real application would run from the specs, and disprove (or confirm) it works before any source .py is written.

2026-07-0811

author-test-stubs

nullhack/temple8

Author test stub files (.pyi) whose signatures express the domain, relationships, and compositions, as the first contract surface.

2026-07-0811

interview-building-blocks

nullhack/temple8

Funnel level 3 — identify building-block names and rough boundaries only, and run gap analysis.

2026-07-0811

interview-general

nullhack/temple8

Funnel level 1 — establish the big picture with seven broad questions, applying CIT, Laddering, and CI Perspective throughout.

2026-07-0811

merge-to-dev

nullhack/temple8

Squash-merge the feature commits into dev, regenerate docstrings, and verify the whole suite plus whole-suite stubtest are clean.

2026-07-0811

publish-release

nullhack/temple8

Publish the delivered batch as release notes, a PR to main, or a tagged release.

2026-07-0811

name	design-visual-asset
description	Produce a project visual asset — social card, README banner, logo/avatar, or favicon — as self-contained, accessible SVG. On-demand.

Design Visual Asset

Load [[design/asset-design]], [[design/visual-design]], [[design/accessibility]] — the per-use-case asset inventory, the visual-design levers (hierarchy, contrast, typography), and the accessibility floors every asset must meet.
Identify the asset + where it lives — social card (1280×640, open-graph previews), README banner (wide, dark-mode-aware), logo/avatar (square, reads at 32–64 px), favicon (square, reads at 16 px). Compose for that context, not for a generic brand system.
Establish hierarchy with the four levers — size, weight, position, spacing — so the user reads the name first, the intent second, the mark third. Apply parsimony: one mark, generous whitespace, one accent; the dev-branding norm is restraint.
Author the asset as self-contained SVG: presentation attributes (no inline <style> hosts strip), no external <use href> or web fonts, a square viewBox with padding, strokes converted to filled paths for production, metadata stripped.
Make it accessible: give the SVG an accessible name (<title> + aria-labelledby, or role="img" + aria-label); meet WCAG 2.2 contrast floors against every background it will appear on; pair color with a shape or label so it survives color-blind + dark-mode.
Provide a dark-surface variant where the asset appears on a theme-aware surface (README, GitHub), OR design a monochrome mark on a transparent background that holds on both.
Verify legibility at the shown size for the avatar (32–64 px) and favicon (16 px) only — simplify the mark if a thin stroke vanishes. Export PNG / .ico only where a target demands it; the SVG is the source.