ericgandrade/design
skills/design/SKILL.md
This skill should be used when the user needs comprehensive design assistance including brand identity, design tokens, UI styling, logo generation (55 styles, Gemini AI), corporate identity programs (50 deliverables), HTML presentations, banner design (22 styles), icon design (15 styles, SVG), and social photo generation across major platforms.
$ install --global
skillsauthnpx skillsauth add ericgandrade/claude-superskills designInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: May 1, 2026, 3:48 AM122.6s30 files scanned
SKILL.md
- name:
- design
- description:
- This skill should be used when the user needs comprehensive design assistance including brand identity, design tokens, UI styling, logo generation (55 styles, Gemini AI), corporate identity programs (50 deliverables), HTML presentations, banner design (22 styles), icon design (15 styles, SVG), and social photo generation across major platforms.
- license:
- MIT
Design
Unified design skill: brand, tokens, UI, logo, CIP, slides, banners, social photos, icons.
When to Use
- Brand identity, voice, assets
- Design system tokens and specs
- UI styling with shadcn/ui + Tailwind
- Logo design and AI generation
- Corporate identity program (CIP) deliverables
- Presentations and pitch decks
- Banner design for social media, ads, web, print
- Social photos for Instagram, Facebook, LinkedIn, Twitter, Pinterest, TikTok
Sub-skill Routing
| Task | Sub-skill | Details |
|------|-----------|---------|
| Brand identity, voice, assets | brand | External skill |
| Tokens, specs, CSS vars | design-system | External skill |
| shadcn/ui, Tailwind, code | ui-styling | External skill |
| Logo creation, AI generation | Logo (built-in) | references/logo-design.md |
| CIP mockups, deliverables | CIP (built-in) | references/cip-design.md |
| Presentations, pitch decks | Slides (built-in) | references/slides.md |
| Banners, covers, headers | Banner (built-in) | references/banner-sizes-and-styles.md |
| Social media images/photos | Social Photos (built-in) | references/social-photos-design.md |
| SVG icons, icon sets | Icon (built-in) | references/icon-design.md |
Logo Design (Built-in)
55+ styles, 30 color palettes, 25 industry guides. Gemini Nano Banana models.
Logo: Generate Design Brief
python3 ~/.claude/skills/design/scripts/logo/search.py "tech startup modern" --design-brief -p "BrandName"
Logo: Search Styles/Colors/Industries
python3 ~/.claude/skills/design/scripts/logo/search.py "minimalist clean" --domain style
python3 ~/.claude/skills/design/scripts/logo/search.py "tech professional" --domain color
python3 ~/.claude/skills/design/scripts/logo/search.py "healthcare medical" --domain industry
Logo: Generate with AI
ALWAYS generate output logo images with white background.
python3 ~/.claude/skills/design/scripts/logo/generate.py --brand "TechFlow" --style minimalist --industry tech
python3 ~/.claude/skills/design/scripts/logo/generate.py --prompt "coffee shop vintage badge" --style vintage
IMPORTANT: When scripts fail, try to fix them directly.
After generation, ALWAYS ask user about HTML preview via AskUserQuestion. If yes, invoke /ui-ux-pro-max for gallery.
CIP Design (Built-in)
50+ deliverables, 20 styles, 20 industries. Gemini Nano Banana (Flash/Pro).
CIP: Generate Brief
python3 ~/.claude/skills/design/scripts/cip/search.py "tech startup" --cip-brief -b "BrandName"
CIP: Search Domains
python3 ~/.claude/skills/design/scripts/cip/search.py "business card letterhead" --domain deliverable
python3 ~/.claude/skills/design/scripts/cip/search.py "luxury premium elegant" --domain style
python3 ~/.claude/skills/design/scripts/cip/search.py "hospitality hotel" --domain industry
python3 ~/.claude/skills/design/scripts/cip/search.py "office reception" --domain mockup
CIP: Generate Mockups
# With logo (RECOMMENDED)
python3 ~/.claude/skills/design/scripts/cip/generate.py --brand "TopGroup" --logo /path/to/logo.png --deliverable "business card" --industry "consulting"
# Full CIP set
python3 ~/.claude/skills/design/scripts/cip/generate.py --brand "TopGroup" --logo /path/to/logo.png --industry "consulting" --set
# Pro model (4K text)
python3 ~/.claude/skills/design/scripts/cip/generate.py --brand "TopGroup" --logo logo.png --deliverable "business card" --model pro
# Without logo
python3 ~/.claude/skills/design/scripts/cip/generate.py --brand "TechFlow" --deliverable "business card" --no-logo-prompt
Models: flash (default, gemini-2.5-flash-image), pro (gemini-3-pro-image-preview)
CIP: Render HTML Presentation
python3 ~/.claude/skills/design/scripts/cip/render-html.py --brand "TopGroup" --industry "consulting" --images /path/to/cip-output
Tip: If no logo exists, use Logo Design section above first.
Slides (Built-in)
Strategic HTML presentations with Chart.js, design tokens, copywriting formulas.
Load references/slides-create.md for the creation workflow.
Slides: Knowledge Base
| Topic | File |
|-------|------|
| Creation Guide | references/slides-create.md |
| Layout Patterns | references/slides-layout-patterns.md |
| HTML Template | references/slides-html-template.md |
| Copywriting | references/slides-copywriting-formulas.md |
| Strategies | references/slides-strategies.md |
Banner Design (Built-in)
22 art direction styles across social, ads, web, print. Uses frontend-design, ai-artist, ai-multimodal, chrome-devtools skills.
Load references/banner-sizes-and-styles.md for complete sizes and styles reference.
Banner: Workflow
- Gather requirements via
AskUserQuestion— purpose, platform, content, brand, style, quantity - Research — Activate
ui-ux-pro-max, browse Pinterest for references - Design — Create HTML/CSS banner with
frontend-design, generate visuals withai-artist/ai-multimodal - Export — Screenshot to PNG at exact dimensions via
chrome-devtools - Present — Show all options side-by-side, iterate on feedback
Banner: Quick Size Reference
| Platform | Type | Size (px) | |----------|------|-----------| | Facebook | Cover | 820 x 312 | | Twitter/X | Header | 1500 x 500 | | LinkedIn | Personal | 1584 x 396 | | YouTube | Channel art | 2560 x 1440 | | Instagram | Story | 1080 x 1920 | | Instagram | Post | 1080 x 1080 | | Google Ads | Med Rectangle | 300 x 250 | | Website | Hero | 1920 x 600-1080 |
Banner: Top Art Styles
| Style | Best For | |-------|----------| | Minimalist | SaaS, tech | | Bold Typography | Announcements | | Gradient | Modern brands | | Photo-Based | Lifestyle, e-com | | Geometric | Tech, fintech | | Glassmorphism | SaaS, apps | | Neon/Cyberpunk | Gaming, events |
Banner: Design Rules
- Safe zones: critical content in central 70-80%
- One CTA per banner, bottom-right, min 44px height
- Max 2 fonts, min 16px body, ≥32px headline
- Text under 20% for ads (Meta penalizes)
- Print: 300 DPI, CMYK, 3-5mm bleed
Icon Design (Built-in)
15 styles, 12 categories. Gemini 3.1 Pro Preview generates SVG text output.
Icon: Generate Single Icon
python3 ~/.claude/skills/design/scripts/icon/generate.py --prompt "settings gear" --style outlined
python3 ~/.claude/skills/design/scripts/icon/generate.py --prompt "shopping cart" --style filled --color "#6366F1"
python3 ~/.claude/skills/design/scripts/icon/generate.py --name "dashboard" --category navigation --style duotone
Icon: Generate Batch Variations
python3 ~/.claude/skills/design/scripts/icon/generate.py --prompt "cloud upload" --batch 4 --output-dir ./icons
Icon: Multi-size Export
python3 ~/.claude/skills/design/scripts/icon/generate.py --prompt "user profile" --sizes "16,24,32,48" --output-dir ./icons
Icon: Top Styles
| Style | Best For | |-------|----------| | outlined | UI interfaces, web apps | | filled | Mobile apps, nav bars | | duotone | Marketing, landing pages | | rounded | Friendly apps, health | | sharp | Tech, fintech, enterprise | | flat | Material design, Google-style | | gradient | Modern brands, SaaS |
Model: gemini-3.1-pro-preview — text-only output (SVG is XML text). No image generation API needed.
Social Photos (Built-in)
Multi-platform social image design: HTML/CSS → screenshot export. Uses ui-ux-pro-max, brand, design-system, chrome-devtools skills.
Load references/social-photos-design.md for sizes, templates, best practices.
Social Photos: Workflow
- Orchestrate —
project-managementskill for TODO tasks; parallel subagents for independent work - Analyze — Parse prompt: subject, platforms, style, brand context, content elements
- Ideate — 3-5 concepts, present via
AskUserQuestion - Design —
/ckm:brand→/ckm:design-system→ randomly invoke/ck:ui-ux-pro-maxOR/ck:frontend-design; HTML per idea × size - Export —
chrome-devtoolsor Playwright screenshot at exact px (2x deviceScaleFactor) - Verify — Use Chrome MCP or
chrome-devtoolsskill to visually inspect exported designs; fix layout/styling issues and re-export - Report — Summary to
plans/reports/with design decisions - Organize — Invoke
assets-organizingskill to sort output files and reports
Social Photos: Key Sizes
| Platform | Size (px) | Platform | Size (px) | |----------|-----------|----------|-----------| | IG Post | 1080×1080 | FB Post | 1200×630 | | IG Story | 1080×1920 | X Post | 1200×675 | | IG Carousel | 1080×1350 | LinkedIn | 1200×627 | | YT Thumb | 1280×720 | Pinterest | 1000×1500 |
Workflows
Complete Brand Package
- Logo →
scripts/logo/generate.py→ Generate logo variants - CIP →
scripts/cip/generate.py --logo ...→ Create deliverable mockups - Presentation → Load
references/slides-create.md→ Build pitch deck
New Design System
- Brand (brand skill) → Define colors, typography, voice
- Tokens (design-system skill) → Create semantic token layers
- Implement (ui-styling skill) → Configure Tailwind, shadcn/ui
References
| Topic | File |
|-------|------|
| Design Routing | references/design-routing.md |
| Logo Design Guide | references/logo-design.md |
| Logo Styles | references/logo-style-guide.md |
| Logo Colors | references/logo-color-psychology.md |
| Logo Prompts | references/logo-prompt-engineering.md |
| CIP Design Guide | references/cip-design.md |
| CIP Deliverables | references/cip-deliverable-guide.md |
| CIP Styles | references/cip-style-guide.md |
| CIP Prompts | references/cip-prompt-engineering.md |
| Slides Create | references/slides-create.md |
| Slides Layouts | references/slides-layout-patterns.md |
| Slides Template | references/slides-html-template.md |
| Slides Copy | references/slides-copywriting-formulas.md |
| Slides Strategy | references/slides-strategies.md |
| Banner Sizes & Styles | references/banner-sizes-and-styles.md |
| Social Photos Guide | references/social-photos-design.md |
| Icon Design Guide | references/icon-design.md |
Scripts
| Script | Purpose |
|--------|---------|
| scripts/logo/search.py | Search logo styles, colors, industries |
| scripts/logo/generate.py | Generate logos with Gemini AI |
| scripts/logo/core.py | BM25 search engine for logo data |
| scripts/cip/search.py | Search CIP deliverables, styles, industries |
| scripts/cip/generate.py | Generate CIP mockups with Gemini |
| scripts/cip/render-html.py | Render HTML presentation from CIP mockups |
| scripts/cip/core.py | BM25 search engine for CIP data |
| scripts/icon/generate.py | Generate SVG icons with Gemini 3.1 Pro |
Setup
export GEMINI_API_KEY="your-key" # https://aistudio.google.com/apikey
pip install google-genai pillow
Integration
External sub-skills: brand, design-system, ui-styling Related Skills: frontend-design, ui-ux-pro-max, ai-multimodal, chrome-devtools
Related Skills
ericgandrade/obsidian-frontmatter
testing
VerifiedTrustedCommunity
This skill should be used when the user needs to create, validate, standardize, or repair YAML frontmatter properties in Obsidian notes. Use when the user wants to add or update tags, aliases, dates, custom properties, or any metadata fields in the Properties panel of an Obsidian note.
31SKILL.mdUpdated May 1, 2026
ericgandrade/obsidian-canvas
development
VerifiedTrustedCommunity
This skill should be used when the user needs to create or edit an Obsidian Canvas — a freeform visual workspace that arranges notes, cards, links, images, and web content on an infinite canvas. Use when the user wants to map ideas spatially, build a knowledge dashboard, sketch a concept cluster, or create a visual workspace linking multiple Obsidian notes.
31SKILL.mdUpdated May 1, 2026
ericgandrade/obsidian-automation
tools
VerifiedTrustedCommunity
This skill should be used when the user wants to automate repetitive Obsidian tasks using the Obsidian CLI, shell commands, or scripted workflows. Use when the user needs to batch-create notes, bulk-update frontmatter, run vault maintenance tasks, open specific notes in Obsidian, navigate the vault programmatically, or integrate Obsidian with external tools.
31SKILL.mdUpdated May 1, 2026
ericgandrade/mermaid-diagram
development
VerifiedTrustedCommunity
This skill should be used when the user needs to create, edit, or convert a diagram into Mermaid syntax. Use when the user asks for a flowchart, sequence diagram, class diagram, state diagram, entity-relationship diagram, mindmap, Gantt chart, or any other diagram type that Mermaid supports. Outputs a ready-to-render Mermaid code block.
31SKILL.mdUpdated May 1, 2026