Menú
Author and update SVG visual assets using project branding identity
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.
Basado en la clasificación ocupacional SOC
Step 2 — Architecture and domain design, one feature at a time
Step 1 — discover requirements through stakeholder interviews and write Gherkin acceptance criteria
Generate and update architecture diagrams, living glossary, and system overview from existing project docs
Enforce code quality using ruff, pytest coverage, and static type checking
Create pull requests with conventional commits, proper formatting, and branch workflow
Flow protocol — design and operate state machine workflows with FLOW.md + WORK.md
| name | design-assets |
| description | Author and update SVG visual assets using project branding identity |
| version | 1.0 |
| author | designer |
| audience | designer |
| workflow | branding |
Create or update docs/assets/logo.svg and docs/assets/banner.svg from the project's branding identity in docs/branding.md.
docs/assets/ is empty after project setupRead docs/branding.md. Extract: project name, tagline, primary/accent colors, tone of voice. If colors are absent, run skill design-colors first.
All SVGs must follow these constraints (W3C SVG 2 spec — CSS properties take precedence over presentation attributes; inline <style> required for cascade control):
viewBox="0 0 W H" always set; no fixed width/height on <svg> root--color-primary, --color-accent with fallback hexfont-family: system-ui, -apple-system, sans-serif (no external imports)<image> refs; raster only if base64-inlinedrole="img" and aria-label="<description>" on every <svg> (WCAG 1.1.1 — non-text content requires text alternative)viewBox="0 0 1200 300". Three zones:
viewBox="0 0 100 100" (square). One recognizable shape readable at 16px. No text in the mark; create a separate lockup if text is needed.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 300" role="img" aria-label="<project-name> banner">
<style>
:root { --color-primary: #XXXXXX; --color-accent: #XXXXXX; }
.bg { fill: var(--color-primary); }
.title { fill: #ffffff; font-family: system-ui, -apple-system, sans-serif; font-size: 56px; font-weight: 700; }
.sub { fill: var(--color-accent); font-family: system-ui, -apple-system, sans-serif; font-size: 22px; }
</style>
<rect class="bg" width="1200" height="300"/>
<!-- content -->
</svg>
git add docs/assets/
git commit -m "design(assets): <create|update> <banner|logo>"
docs/branding.md read before writing any SVGdocs/branding.md; skill design-colors run if absentviewBox set; no fixed width/height on <svg> rootrole="img" and aria-label presentdocs/assets/