design-visual-asset

Estrellas11

Forks2

Actualizado7 de julio de 2026 a las 08:33

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

Instalación

Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.

Fuente

nullhack

nullhack/temple8

Abrir repositorio de GitHub Ver repositorios del creador

Descarga

Ocupaciones relacionadasSOC

Basado en la clasificación ocupacional SOC

Diseñadores gráficosArtes, diseño, entretenimiento, deportes y medios·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.

Más de este repositorio

mismo repositorio

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.