메뉴
Author and update SVG visual assets using project branding identity
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
| 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/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