skills.rest
nullhack
nullhackCOMMUNITY
Explore all skills by this author →
GitHub

design-assets

Update project SVG branding assets to follow branding guidelines.

11|2|Updated Apr 7, 2022
Search Tags:#branding#accessibility#svg#branding-guidelines#assets-management#design-assets#svg-optimization
One-click install
npx skills add https://github.com/nullhack/temple8 --skill design-assets-nullhack
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-assets
Source: https://github.com/nullhack/temple8/tree/main/.opencode/skills/design-assets
Command: npx skills add https://github.com/nullhack/temple8 --skill design-assets-nullhack

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Author and update SVG visual assets using project branding identity to ensure consistent branding across docs and touchpoints.

Core Features & Use Cases

  • Creates and updates docs/assets/logo.svg and docs/assets/banner.svg to reflect the current branding identity.
  • Enforces SVG structure and accessibility best practices (viewBox, CSS tokens, system font stack, aria-label).
  • Supports branding refresh workflows triggered by stakeholder requests or onboarding new projects.

Quick Start

Review docs/branding.md and regenerate docs/assets/logo.svg and docs/assets/banner.svg to match the current branding.

Frequently Asked Questions about design-assets

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I update project branding SVG assets to follow branding guidelines?▼

Updating branding SVG assets involves standardizing files like logo.svg and banner.svg to align with branding guidelines. This enforces consistent viewBox rules, CSS color tokens, system font stacks, and WCAG accessibility attributes across project touchpoints.

What's the best way to add accessibility attributes to SVG branding assets?▼

Adding accessibility to SVG branding assets requires incorporating WCAG accessibility attributes like aria-label. This ensures visual assets meet compliance standards while maintaining structural rules such as viewBox and CSS color tokens.

How do I enforce CSS color tokens and system font stacks in SVG files?▼

Enforcing CSS color tokens and system font stacks in SVG files requires standardizing the asset structure. This process updates visual elements to match branding guidelines while ensuring compatibility across documentation touchpoints.

When do I need to regenerate a project logo or banner SVG?▼

Regenerating a project logo or banner SVG is needed during branding changes, design refreshes, or new project launches. This ensures visual assets in the docs/assets directory reflect the current branding identity accurately.

Can I use standard SVG optimization techniques for branding refresh workflows?▼

Branding refresh workflows require SVG optimization techniques that enforce viewBox rules and CSS tokens rather than just minimizing file size. This ensures assets meet branding guidelines and WCAG accessibility standards effectively.

Why does my SVG logo not match the branding guidelines after a design refresh?▼

An SVG logo may not match branding guidelines if it lacks proper CSS color tokens, system font stacks, or viewBox rules. Standardizing these elements ensures visual assets align with the current branding identity.

Related Skills

Explore More Design & Creative Skills→
daffy0208daffy0208
34

brand-designer

Design cohesive brand identities with SVG logos, color palettes, and typography systems.

Community
Intermediate
hamadah10hamadah10

brand-guidelines

Apply standardized color, typography, and formatting guidelines to documents.

Community
Intermediate
fcsonlinefcsonline
49

accessibility

Apply WCAG 2.1 AA accessibility patterns to the DroneRoute UI.

Community
Intermediate
vapoliavapolia
10

svg-maui

Integrate SVG graphics into .NET MAUI, Android, and iOS apps.

Official
Intermediate