skills.rest
hellobanora
hellobanoraCOMMUNITY
Explore all skills by this author →
GitHub

visual-assets

Create and optimize website visual assets for a chiropractic brand.

1|Updated Mar 20, 2026
Search Tags:#webp#visual assets#image optimization#alt text#svg icons#hero banners#brand imagery
One-click install
npx skills add https://github.com/hellobanora/Claude-Code-Banora --skill visual-assets-hellobanora
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: visual-assets
Source: https://github.com/hellobanora/Claude-Code-Banora/tree/main/.claude/skills/visual-assets
Command: npx skills add https://github.com/hellobanora/Claude-Code-Banora --skill visual-assets-hellobanora

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill removes the guesswork from creating, sourcing, and optimising visual assets for the Banora Chiropractic website, helping the team deliver a polished brand experience without sacrificing page speed or accessibility.

Core Features & Use Cases

  • Hero Banners: Plans and sources full-width page banners with the right dimensions, mood, and licensing guidance for each service page.
  • Service Icons and SVG Illustrations: Generates clean, consistent SVG icons and larger illustrations that match the brand palette and display well at small sizes.
  • Image Optimisation and Alt Text: Recommends formats, compression targets, responsive sizing, and descriptive alt text so every image is fast and accessible.
  • Team and Clinic Photography Guidance: Provides shoot briefs for headshots, treatment photos, clinic interiors, and lifestyle imagery.
  • Brand and Share Assets: Defines favicon sets and open graph imagery so the website looks consistent across browsers and social previews.

Quick Start

Ask for the exact visual asset you need, such as a homepage hero banner, service icon set, or image optimisation plan for a specific page.

Frequently Asked Questions about visual-assets

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

FAQPage Schema
How do I optimize website images for fast loading without losing brand quality?▼

Image optimization involves selecting web-ready formats like WebP, applying compression targets, and setting responsive dimensions for fast-loading hero banners and service icons. This process maintains consistent brand styling while reducing file size across all clinic pages.

What dimensions and formats work best for hero banners and SVG service icons?▼

Hero banners require full-width responsive dimensions in WebP, while SVG service icons need clean vector formats that display well at small sizes. Both must follow consistent brand palette guidelines to ensure visual continuity across clinic pages.

How do I write descriptive alt text for website visual assets?▼

Writing descriptive alt text requires evaluating each visual asset's context within the page, such as hero banners or service icons, and providing concise, meaningful descriptions. This ensures every image remains accessible and compliant across clinic pages.

Do I need licensing-safe sourcing for chiropractic clinic photography and social assets?▼

Licensing-safe sourcing is required for chiropractic clinic photography, team headshots, and open graph images to prevent copyright issues. This involves generating shoot briefs and sourcing guidelines that align with the brand's visual styling.

Can I generate favicon sets and open graph images that match my existing brand palette?▼

Generating favicon sets and open graph images that match your brand palette involves applying consistent brand styling across browser tabs and social previews. This ensures the website looks cohesive and recognizable across different platforms.

Related Skills

Explore More Design & Creative Skills→
oakossoakoss
14

brand-designer

Generate cohesive brand identities with SVG logos, Tailwind color tokens, and typography systems.

Official
Advanced
dennislee928dennislee928
54

favicon-gen

Generate SVG, ICO, PNG, and Web App Manifest favicon packages from brand assets.

Community
Intermediate
gensart-projsgensart-projs

performance-profiling

Measure Lighthouse scores and core web vitals to identify performance bottlenecks.

Community
Intermediate
smarmen86smarmen86

seo-image-gen

Generate SEO-optimized images with aspect ratios, alt text, and WebP conversion.

Community
Advanced