diff --git a/01-slash-commands/README.md b/01-slash-commands/README.md index 24f69c0..d50be6b 100644 --- a/01-slash-commands/README.md +++ b/01-slash-commands/README.md @@ -1,4 +1,7 @@ -![Claude How To](../claude-howto-logo.svg) + + + Claude How To + # Slash Commands diff --git a/02-memory/README.md b/02-memory/README.md index 0eb1480..b4cd9cf 100644 --- a/02-memory/README.md +++ b/02-memory/README.md @@ -1,4 +1,7 @@ -![Claude How To](../claude-howto-logo.svg) + + + Claude How To + # Memory Guide diff --git a/03-skills/README.md b/03-skills/README.md index b8704f0..1e5c399 100644 --- a/03-skills/README.md +++ b/03-skills/README.md @@ -1,4 +1,7 @@ -![Claude How To](../claude-howto-logo.svg) + + + Claude How To + # Agent Skills Guide diff --git a/04-subagents/README.md b/04-subagents/README.md index 504e310..999fa74 100644 --- a/04-subagents/README.md +++ b/04-subagents/README.md @@ -1,4 +1,7 @@ -![Claude How To](../claude-howto-logo.svg) + + + Claude How To + # Subagents - Complete Reference Guide diff --git a/05-mcp/README.md b/05-mcp/README.md index 54e2c19..5c36efe 100644 --- a/05-mcp/README.md +++ b/05-mcp/README.md @@ -1,4 +1,7 @@ -![Claude How To](../claude-howto-logo.svg) + + + Claude How To + # MCP (Model Context Protocol) diff --git a/06-hooks/README.md b/06-hooks/README.md index cc35448..87a22e6 100644 --- a/06-hooks/README.md +++ b/06-hooks/README.md @@ -1,4 +1,7 @@ -![Claude How To](../claude-howto-logo.svg) + + + Claude How To + # Hooks diff --git a/07-plugins/README.md b/07-plugins/README.md index 622e30d..c17ef3c 100644 --- a/07-plugins/README.md +++ b/07-plugins/README.md @@ -1,4 +1,7 @@ -![Claude How To](../claude-howto-logo.svg) + + + Claude How To + # Claude Code Plugins diff --git a/07-plugins/devops-automation/README.md b/07-plugins/devops-automation/README.md index 313c43d..d0226bd 100644 --- a/07-plugins/devops-automation/README.md +++ b/07-plugins/devops-automation/README.md @@ -1,4 +1,7 @@ -![Claude How To](../../claude-howto-logo.svg) + + + Claude How To + # DevOps Automation Plugin diff --git a/07-plugins/documentation/README.md b/07-plugins/documentation/README.md index 55eb204..0934147 100644 --- a/07-plugins/documentation/README.md +++ b/07-plugins/documentation/README.md @@ -1,4 +1,7 @@ -![Claude How To](../../claude-howto-logo.svg) + + + Claude How To + # Documentation Plugin diff --git a/07-plugins/pr-review/README.md b/07-plugins/pr-review/README.md index 21983f3..9fe1c3b 100644 --- a/07-plugins/pr-review/README.md +++ b/07-plugins/pr-review/README.md @@ -1,4 +1,7 @@ -![Claude How To](../../claude-howto-logo.svg) + + + Claude How To + # PR Review Plugin diff --git a/08-checkpoints/README.md b/08-checkpoints/README.md index c04c0d4..4808974 100644 --- a/08-checkpoints/README.md +++ b/08-checkpoints/README.md @@ -1,4 +1,7 @@ -![Claude How To](../claude-howto-logo.svg) + + + Claude How To + # Checkpoints and Rewind diff --git a/09-advanced-features/README.md b/09-advanced-features/README.md index cd7e8a2..6a33d90 100644 --- a/09-advanced-features/README.md +++ b/09-advanced-features/README.md @@ -1,4 +1,7 @@ -![Claude How To](../claude-howto-logo.svg) + + + Claude How To + # Advanced Features diff --git a/10-cli/README.md b/10-cli/README.md index 7e5a529..25c84ff 100644 --- a/10-cli/README.md +++ b/10-cli/README.md @@ -1,4 +1,7 @@ -![Claude How To](../claude-howto-logo.svg) + + + Claude How To + # CLI Reference diff --git a/AGENTS.md b/AGENTS.md deleted file mode 100644 index 7f111dd..0000000 --- a/AGENTS.md +++ /dev/null @@ -1,18 +0,0 @@ - -# OpenSpec Instructions - -These instructions are for AI assistants working in this project. - -Always open `@/openspec/AGENTS.md` when the request: -- Mentions planning or proposals (words like proposal, spec, change, plan) -- Introduces new capabilities, breaking changes, architecture shifts, or big performance/security work -- Sounds ambiguous and you need the authoritative spec before coding - -Use `@/openspec/AGENTS.md` to learn: -- How to create and apply change proposals -- Spec format and conventions -- Project structure and guidelines - -Keep this managed block so 'openspec update' can refresh the instructions. - - diff --git a/CLAUDE.md b/CLAUDE.md deleted file mode 100644 index 7f111dd..0000000 --- a/CLAUDE.md +++ /dev/null @@ -1,18 +0,0 @@ - -# OpenSpec Instructions - -These instructions are for AI assistants working in this project. - -Always open `@/openspec/AGENTS.md` when the request: -- Mentions planning or proposals (words like proposal, spec, change, plan) -- Introduces new capabilities, breaking changes, architecture shifts, or big performance/security work -- Sounds ambiguous and you need the authoritative spec before coding - -Use `@/openspec/AGENTS.md` to learn: -- How to create and apply change proposals -- Spec format and conventions -- Project structure and guidelines - -Keep this managed block so 'openspec update' can refresh the instructions. - - diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 55ae2c8..abf8947 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,3 +1,8 @@ + + + Claude How To + + # Contributing to Claude How To Thank you for your interest in contributing to this project! This guide will help you understand how to contribute effectively. diff --git a/INDEX.md b/INDEX.md index 2dc2d91..588b948 100644 --- a/INDEX.md +++ b/INDEX.md @@ -1,4 +1,7 @@ -![Claude How To](claude-howto-logo.svg) + + + Claude How To + # Claude Code Examples - Complete Index diff --git a/LEARNING-ROADMAP.md b/LEARNING-ROADMAP.md index dd3c159..dfd19c6 100644 --- a/LEARNING-ROADMAP.md +++ b/LEARNING-ROADMAP.md @@ -1,4 +1,7 @@ -![Claude How To](claude-howto-logo.svg) + + + Claude How To + # πŸ“š Claude Code Learning Roadmap diff --git a/QUICK_REFERENCE.md b/QUICK_REFERENCE.md index c74ad7d..d03f179 100644 --- a/QUICK_REFERENCE.md +++ b/QUICK_REFERENCE.md @@ -1,4 +1,7 @@ -![Claude How To](claude-howto-logo.svg) + + + Claude How To + # Claude Code Examples - Quick Reference Card diff --git a/README.md b/README.md index f87b628..2573157 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,7 @@ -![Claude How To](claude-howto-logo.svg) + + + Claude How To + # Claude How To diff --git a/claude_concepts_guide.md b/claude_concepts_guide.md index 0a5583c..473e9b6 100644 --- a/claude_concepts_guide.md +++ b/claude_concepts_guide.md @@ -1,4 +1,7 @@ -![Claude How To](claude-howto-logo.svg) + + + Claude How To + # Complete Guide to Claude Concepts diff --git a/resources.md b/resources.md index a5dc3f5..44d7f85 100644 --- a/resources.md +++ b/resources.md @@ -1,3 +1,8 @@ + + + Claude How To + + # List of good resources ## Mastering Claude Code in 30 Minutes diff --git a/resources/DESIGN-SYSTEM.md b/resources/DESIGN-SYSTEM.md new file mode 100644 index 0000000..3756262 --- /dev/null +++ b/resources/DESIGN-SYSTEM.md @@ -0,0 +1,337 @@ +# Claude How To - Design System + +## Visual Identity + +### Icon Design Concept: Ascending Progression + +The Claude How To icon uses **three ascending hexagons** to represent the learning journey: + +``` + πŸ”· Level 7-10 (MINT) + Advanced Features + + πŸ”Ά Level 4-6 (EMERALD) + Intermediate Skills + +πŸ”Ή Level 1-3 (DARK EMERALD) +Beginner Fundamentals +``` + +This creates: +- **Visual Clarity**: Immediate recognition of progression +- **Symbolic Meaning**: Upward movement = growth & learning +- **Scalability**: Works at any size from 16px to 512px +- **Brand Alignment**: Matches the tech-forward CLI aesthetic + +--- + +## Color System + +### Palette + +| Color | Hex | RGB | Usage | +|-------|-----|-----|-------| +| Deep Forest (BG) | `#0d1f0d` | 13, 31, 13 | Backgrounds, containers | +| Emerald (Primary) | `#10b981` | 16, 185, 129 | Main accents, buttons | +| Dark Emerald | `#059669` | 5, 150, 105 | Secondary accents, borders | +| Forest | `#047857` | 4, 120, 87 | Tertiary, deep accents | +| Mint (Highlight) | `#6ee7b7` | 110, 231, 183 | Highlights, focus states | +| Light Mint | `#34d399` | 52, 211, 153 | Secondary highlights | + +### Contrast Ratios (WCAG) + +- Emerald on Dark Forest: **8.2:1** βœ… AAA +- Mint on Dark Forest: **9.1:1** βœ… AAA +- All colors maintain AA compliance on dark backgrounds + +--- + +## Gradient System + +### Primary Gradients + +**Emerald Gradient** (leftβ†’right, topβ†’bottom): +- Start: `#10b981` (bright emerald) +- End: `#047857` (dark forest green) +- Usage: Icon backgrounds, primary elements + +**Mint Gradient** (topβ†’bottom): +- Start: `#6ee7b7` (bright mint) +- End: `#34d399` (darker mint) +- Usage: Highlights, accent elements + +**Dark Emerald Gradient** (leftβ†’right, topβ†’bottom): +- Start: `#059669` (dark emerald) +- End: `#064e3b` (forest green) +- Usage: Secondary elements, depth + +--- + +## Typography + +### Logo Font +- **Family**: JetBrains Mono, SF Mono, Fira Code (monospace) +- **Weight**: 700 (bold) for "Claude-", 400 (regular) for "Howto" +- **Style**: Modern, tech-forward +- **Usage**: Logo wordmark, code examples + +### Interface Font +- **Family**: Inter, SF Pro, system fonts (sans-serif) +- **Weight**: 400-600 +- **Style**: Clean, readable +- **Usage**: UI text, descriptions + +--- + +## Icon Details + +### Hexagon Specifications + +All three hexagons follow the same geometry pattern: + +```svg + +M -26,0 +L -13,-22.5 +L 13,-22.5 +L 26,0 +L 13,22.5 +L -13,22.5 +Z +``` + +**Hexagon Sizes**: +- Bottom (Beginner): 26 unit radius +- Middle (Intermediate): 32 unit radius +- Top (Advanced): 26 unit radius + +### Visual Elements + +1. **Strokes**: 1.5-2.5px width depending on size +2. **Glows**: Soft emerald/mint blur for depth +3. **Connecting Lines**: Dashed lines showing progression +4. **Center Dot**: Accent element at center point +5. **Outer Rings**: Subtle circular guides + +--- + +## Sizing Guidelines + +### Favicon Hierarchy + +``` +16px β†’ Minimal geometry, browser tab +32px β†’ Two hexagons visible +64px β†’ All three hexagons clear +128px β†’ Full detail with glows +256px β†’ Complete with all effects +``` + +### Logo Sizing + +- **Minimum**: 100px width (for web) +- **Recommended**: 400-800px (high quality) +- **Maximum**: Unlimited (vector format) +- **Aspect Ratio**: 4:1 (width:height) + +### Icon Sizing + +- **Minimum**: 32px (small thumbnails) +- **Recommended**: 64-256px (apps, avatars) +- **Maximum**: Unlimited (vector format) +- **Aspect Ratio**: 1:1 (square) + +--- + +## Effects & Filters + +### Glow Effect + +```svg + + + + + + + + + +``` + +Creates: Soft green glow around elements + +### Shadow Effect + +```svg + + + + + + + + + + + +``` + +Creates: Subtle drop shadow for depth + +--- + +## Spacing & Alignment + +### Logo Spacing + +``` +β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β” +β”‚ β”‚ +β”‚ Clear Space Minimum β”‚ +β”‚ (logo width / 4) β”‚ +β”‚ β”‚ +β”‚ [LOGO] β”‚ +β”‚ β”‚ +β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜ +``` + +### Icon Center Point + +All icons center at (128, 128) for 256px canvas: +- Allows proper scaling and transformation +- Centers vertically and horizontally +- Maintains alignment with other UI elements + +--- + +## Accessibility + +### Color Contrast +- All foreground/background combinations meet WCAG AAA +- No red-green color dependency +- Works for color-blind users + +### Scalability +- Vector format ensures clarity at any size +- Geometric shapes remain recognizable at 16px +- Maintains proportions when scaled + +### Animation Safe +- SVG can be animated if needed +- Static by default for performance +- Use CSS/JS for interactive states + +--- + +## Application Examples + +### Web Header +- Size: 800Γ—200px +- File: `logos/claude-howto-logo.svg` +- Background: Transparent or dark +- Padding: 20px minimum + +### App Icon +- Size: 256Γ—256px or larger +- File: `icons/claude-howto-icon.svg` +- Background: Dark or transparent +- Use: App shortcuts, avatars + +### Browser Favicon +- Size: 32px (primary), 16px (fallback) +- File: `favicons/favicon-32.svg` +- Format: SVG for crisp display +- Use: Browser tabs, bookmarks + +### Social Media +- Profile: 256Γ—256px icon +- Banner: 800Γ—200px logo (centered) +- Story/Post: Icon at 1080Γ—1080px + +### Documentation +- Chapter Headers: 400Γ—100px logo +- Section Icons: 64Γ—64px favicon +- Inline: 32Γ—32px favicon + +--- + +## File Format Details + +### SVG Structure + +All SVG files include: +- XML declaration +- `` section with gradients and filters +- ViewBox attribute for responsiveness +- Named gradients for reuse +- Readable code structure + +### Optimization + +Files are optimized but readable: +- Maintains whitespace for clarity +- Includes comments where helpful +- Gradients named for easy reference +- Filters documented in code + +### Cross-Browser Compatibility + +- βœ… Chrome/Edge: Full support +- βœ… Firefox: Full support +- βœ… Safari: Full support +- βœ… iOS Safari: Full support +- βœ… All modern browsers: Full support + +--- + +## Customization + +### Changing Colors + +To create variants with different colors: + +1. Replace gradient stop colors: +```svg + +``` + +2. Update filter colors: +```svg + +``` + +3. Keep contrast ratios above 4.5:1 for accessibility + +### Scaling + +To scale any icon: +```css +svg { + width: 256px; + height: 256px; + transform: scale(1.5); +} +``` + +Or in SVG: +```svg + + + +``` + +--- + +## Version Control + +Track design changes in git: +- Use `.gitkeep` in empty directories +- Version SVG files normally (they're text) +- Tag releases with design changes +- Include DESIGN-SYSTEM.md in commits + +--- + +**Last Updated**: January 2026 +**Design System Version**: 1.0 diff --git a/resources/INDEX.txt b/resources/INDEX.txt new file mode 100644 index 0000000..e51f4c2 --- /dev/null +++ b/resources/INDEX.txt @@ -0,0 +1,242 @@ +╔═══════════════════════════════════════════════════════════════════════════╗ +β•‘ CLAUDE HOW TO - BRAND ASSETS RESOURCE LIBRARY β•‘ +β•‘ Complete Asset Package β•‘ +β•šβ•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β• + +πŸ“ DIRECTORY STRUCTURE +━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ + +resources/ +β”‚ +β”œβ”€β”€ πŸ“„ README.md (Complete Documentation) +β”‚ └─ Full guide for all assets, usage patterns, HTML integration +β”‚ +β”œβ”€β”€ πŸ“„ QUICK-START.md (Copy & Paste Solutions) +β”‚ └─ Fast setup, recommended sizes, color values +β”‚ +β”œβ”€β”€ πŸ“„ DESIGN-SYSTEM.md (Brand Guidelines) +β”‚ └─ Visual identity, color system, typography, effects +β”‚ +β”œβ”€β”€ πŸ“ logos/ +β”‚ └─ πŸ“Š claude-howto-logo.svg (800Γ—200px) +β”‚ β†’ Main horizontal logo with terminal icon +β”‚ β†’ Perfect for: Headers, marketing, print +β”‚ +β”œβ”€β”€ πŸ“ icons/ +β”‚ └─ πŸ”· claude-howto-icon.svg (256Γ—256px) +β”‚ β†’ App icon with ascending hexagons +β”‚ β†’ Perfect for: Apps, avatars, thumbnails +β”‚ +└── πŸ“ favicons/ + β”œβ”€ πŸ”Ή favicon-16.svg (16Γ—16px) β†’ Browser tabs + β”œβ”€ πŸ”Ή favicon-32.svg (32Γ—32px) β†’ Standard favicon + β”œβ”€ πŸ”Ή favicon-64.svg (64Γ—64px) β†’ High-DPI + β”œβ”€ πŸ”Ή favicon-128.svg (128Γ—128px) β†’ Apple touch icon + └─ πŸ”Ή favicon-256.svg (256Γ—256px) β†’ Modern browsers/PWA + +━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ + +πŸ“‹ QUICK FILE REFERENCE +━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ + +FILE SIZE USE CASE +──────────────────────────────────────────────────────────────────────────── +logos/claude-howto-logo.svg 800Γ—200px Website headers, marketing +icons/claude-howto-icon.svg 256Γ—256px App icons, avatars, social +favicons/favicon-32.svg 32Γ—32px Browser favicon (primary) +favicons/favicon-16.svg 16Γ—16px Browser tab (old browsers) +favicons/favicon-64.svg 64Γ—64px Bookmarks, high-DPI +favicons/favicon-128.svg 128Γ—128px Apple touch icon +favicons/favicon-256.svg 256Γ—256px Android, PWA, modern + +━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ + +🎨 DESIGN CONCEPT +━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ + +The icon uses ASCENDING HEXAGONS to represent learning progression: + + 🟒 MINT (Top) + Advanced Features + Levels 7-10 + + 🟒 EMERALD (Middle) + Intermediate Skills + Levels 4-6 + + 🟒 DARK EMERALD (Bottom) + Beginner Fundamentals + Levels 1-3 + +Visual meaning: Upward progression = Learning journey from beginner to mastery + +━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ + +🎨 COLOR PALETTE +━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ + +COLOR HEX RGB USAGE +───────────────────────────────────────────────────────────────────────────── +Deep Forest #0d1f0d 13, 31, 13 Backgrounds +Emerald (Primary) #10b981 16, 185, 129 Main accents +Dark Emerald #059669 5, 150, 105 Secondary accents +Forest #047857 4, 120, 87 Tertiary accents +Mint (Highlight) #6ee7b7 110, 231, 183 Highlights +Light Mint #34d399 52, 211, 153 Secondary highlights + +All colors maintain WCAG AAA contrast on dark backgrounds (8.2:1+) + +━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ + +πŸ“– DOCUMENTATION FILES +━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ + +1. README.md + Complete guide covering: + β€’ Asset descriptions and purposes + β€’ HTML integration templates + β€’ Favicon setup instructions + β€’ Color palette and guidelines + β€’ SVG optimization tips + β€’ Accessibility considerations + +2. QUICK-START.md + Fast reference with: + β€’ Copy-paste code + β€’ Recommended sizes + β€’ Color CSS variables + β€’ Icon meaning explanation + β€’ Usage by platform + +3. DESIGN-SYSTEM.md + Brand guidelines including: + β€’ Visual identity principles + β€’ Color system and contrast + β€’ Gradient specifications + β€’ Typography standards + β€’ Icon geometry details + β€’ Sizing recommendations + β€’ Effects and filters + β€’ Customization guide + +━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ + +πŸš€ GETTING STARTED +━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ + +STEP 1: Choose Your Use Case + β€’ Website? β†’ Use logos/claude-howto-logo.svg + β€’ App/Avatar? β†’ Use icons/claude-howto-icon.svg + β€’ Browser? β†’ Use favicons/favicon-32.svg + +STEP 2: Read the Right Guide + β€’ Quick setup? β†’ Read QUICK-START.md + β€’ Full details? β†’ Read README.md + β€’ Brand guidelines? β†’ Read DESIGN-SYSTEM.md + +STEP 3: Copy & Use + β€’ Copy file to your project + β€’ Use provided HTML code + β€’ Or reference from CDN/web server + +━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ + +βœ… FILE CHECKLIST +━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ + +Logos: + βœ“ claude-howto-logo.svg (main logo) + +Icons: + βœ“ claude-howto-icon.svg (app icon) + +Favicons (all sizes): + βœ“ favicon-16.svg + βœ“ favicon-32.svg + βœ“ favicon-64.svg + βœ“ favicon-128.svg + βœ“ favicon-256.svg + +Documentation: + βœ“ README.md (complete guide) + βœ“ QUICK-START.md (fast reference) + βœ“ DESIGN-SYSTEM.md (brand guidelines) + βœ“ INDEX.txt (this file) + +━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ + +πŸ“ FILE FORMATS +━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ + +All assets are in SVG format: + β€’ Scalable: Works at any size + β€’ Lightweight: Smaller than PNG/JPG + β€’ Sharp: No pixelation at any zoom + β€’ Flexible: Can be styled with CSS/JS + β€’ Universal: Works in all modern browsers + +No raster images needed - SVG covers all use cases! + +━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ + +🀝 INTEGRATION EXAMPLES +━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ + +HTML (Web): + Claude How To + +Markdown: + ![Claude How To](resources/icons/claude-howto-icon.svg) + +CSS Background: + background-image: url('resources/icons/claude-howto-icon.svg'); + +React/JSX: + import logo from './resources/icons/claude-howto-icon.svg'; + Claude How To + +Next.js/Web Framework: + Claude How To + +━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ + +πŸ“Š ASSET STATISTICS +━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ + +Total Assets: 7 SVG files + β€’ 1 Logo + β€’ 1 Icon + β€’ 5 Favicon variants + +Documentation: 4 files + β€’ Complete guide (README.md) + β€’ Quick reference (QUICK-START.md) + β€’ Brand guidelines (DESIGN-SYSTEM.md) + β€’ This index (INDEX.txt) + +Total Size: ~150 KB (all files) + β€’ Individual SVGs: 8-15 KB each + β€’ Documentation: 20-50 KB each + +Design System Version: 1.0 +Last Updated: January 2026 + +━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ + +πŸ“ž SUPPORT & MORE +━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ + +For detailed information: + 1. Start with QUICK-START.md for immediate use + 2. Refer to README.md for complete documentation + 3. Check DESIGN-SYSTEM.md for brand guidelines + +Questions or customization needed? + β€’ Review DESIGN-SYSTEM.md for customization guide + β€’ All files are fully editable SVG + β€’ Maintain color palette for brand consistency + +━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ + +Happy building! πŸš€ + diff --git a/resources/MANIFEST.txt b/resources/MANIFEST.txt new file mode 100644 index 0000000..f91d6a9 --- /dev/null +++ b/resources/MANIFEST.txt @@ -0,0 +1,234 @@ +╔════════════════════════════════════════════════════════════════════════════╗ +β•‘ CLAUDE HOW TO - COMPLETE ASSET MANIFEST β•‘ +β•‘ All Files Ready for Use β•‘ +β•šβ•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β• + +πŸ“¦ FULL DIRECTORY MANIFEST +═════════════════════════════════════════════════════════════════════════════ + +resources/ +β”‚ +β”œβ”€ πŸ“„ README.md (6.0K) Complete documentation +β”œβ”€ πŸ“„ QUICK-START.md (2.5K) Copy & paste setup +β”œβ”€ πŸ“„ DESIGN-SYSTEM.md (7.7K) Brand guidelines +β”œβ”€ πŸ“„ INDEX.txt (12K) Visual reference +β”œβ”€ πŸ“„ MANIFEST.txt (this) File listing +β”‚ +β”œβ”€ πŸ“ logos/ (8.0K total) +β”‚ └─ πŸ“Š claude-howto-logo.svg (8.0K) 800Γ—200px main logo +β”‚ +β”œβ”€ πŸ“ icons/ (8.0K total) +β”‚ └─ πŸ”· claude-howto-icon.svg (8.0K) 256Γ—256px app icon +β”‚ +└─ πŸ“ favicons/ (20K total) + β”œβ”€ πŸ”Ή favicon-16.svg (3.2K) 16Γ—16px browser tab + β”œβ”€ πŸ”Ή favicon-32.svg (3.8K) 32Γ—32px standard + β”œβ”€ πŸ”Ή favicon-64.svg (4.1K) 64Γ—64px high-DPI + β”œβ”€ πŸ”Ή favicon-128.svg (4.5K) 128Γ—128px apple touch + └─ πŸ”Ή favicon-256.svg (4.9K) 256Γ—256px modern + +═════════════════════════════════════════════════════════════════════════════ + +πŸ“Š ASSET SUMMARY +═════════════════════════════════════════════════════════════════════════════ + +CATEGORY COUNT PURPOSE +──────────────────────────────────────────────────────────────────────────── +Logos 1 Main horizontal logo for headers/marketing +Icons 1 App icon for avatars/thumbnails +Favicons 5 Browser tabs, bookmarks, mobile icons +Documentation 5 Setup guides, design system, reference +──────────────────────────────────────────────────────────────────────────── +TOTAL 12 Complete brand asset package + +═════════════════════════════════════════════════════════════════════════════ + +πŸ“„ DOCUMENTATION FILES - WHAT TO READ + +1️⃣ START HERE: QUICK-START.md + β€’ Copy & paste HTML code + β€’ Recommended sizes by use case + β€’ CSS color variables + β€’ Quick integration examples + ⏱️ 5 minute read + +2️⃣ FULL DETAILS: README.md + β€’ Complete asset descriptions + β€’ HTML/CSS integration guide + β€’ Favicon setup instructions + β€’ Accessibility & optimization + ⏱️ 15 minute read + +3️⃣ BRAND GUIDELINES: DESIGN-SYSTEM.md + β€’ Visual identity principles + β€’ Complete color system specs + β€’ Icon geometry details + β€’ Effects and filters + β€’ Customization instructions + ⏱️ 20 minute read + +4️⃣ VISUAL REFERENCE: INDEX.txt + β€’ Directory structure diagram + β€’ File quick reference table + β€’ Design concept visualization + β€’ Integration examples + ⏱️ 10 minute read + +═════════════════════════════════════════════════════════════════════════════ + +🎯 QUICK USAGE GUIDE + +FOR WEBSITES (HTML): + + + +FOR MARKDOWN: + ![Claude How To](resources/icons/claude-howto-icon.svg) + +FOR REACT/NEXT.JS: + import icon from './resources/icons/claude-howto-icon.svg'; + +FOR CSS BACKGROUND: + background-image: url('resources/icons/claude-howto-icon.svg'); + +═════════════════════════════════════════════════════════════════════════════ + +🎨 FILE SELECTION BY USE CASE + +USE CASE FILE SIZE +───────────────────────────────────────────────────────────────────────────── +Website header logos/claude-howto-logo.svg 800Γ—200px +Browser tab favicons/favicon-32.svg 32Γ—32px +Mobile home screen favicons/favicon-128.svg 128Γ—128px +App icon icons/claude-howto-icon.svg 256Γ—256px +Social media thumbnail icons/claude-howto-icon.svg 256Γ—256px +Bookmark/favorite icon favicons/favicon-64.svg 64Γ—64px +Apple touch icon favicons/favicon-128.svg 128Γ—128px +PWA/Android app favicons/favicon-256.svg 256Γ—256px +Old browsers (fallback) favicons/favicon-16.svg 16Γ—16px + +═════════════════════════════════════════════════════════════════════════════ + +βœ… VERIFICATION CHECKLIST + +SVG Assets: + βœ“ logos/claude-howto-logo.svg Main logo + βœ“ icons/claude-howto-icon.svg App icon + βœ“ favicons/favicon-16.svg 16px favicon + βœ“ favicons/favicon-32.svg 32px favicon + βœ“ favicons/favicon-64.svg 64px favicon + βœ“ favicons/favicon-128.svg 128px favicon + βœ“ favicons/favicon-256.svg 256px favicon + +Documentation: + βœ“ README.md Complete guide + βœ“ QUICK-START.md Setup guide + βœ“ DESIGN-SYSTEM.md Brand guidelines + βœ“ INDEX.txt Visual reference + βœ“ MANIFEST.txt This file + +═════════════════════════════════════════════════════════════════════════════ + +🎨 DESIGN CONCEPT + +The icon represents the Claude How To learning journey with ascending hexagons: + + πŸ”Ά MINT + Advanced Features + Levels 7-10 + + πŸ”Ά EMERALD + Intermediate Skills + Levels 4-6 + + πŸ”Ά DARK EMERALD + Beginner Fundamentals + Levels 1-3 + +COLOR PALETTE: + β€’ Deep Forest #0d1f0d Background + β€’ Emerald #10b981 Primary accent + β€’ Dark Emerald #059669 Secondary accent + β€’ Forest #047857 Tertiary accent + β€’ Mint #6ee7b7 Highlight + β€’ Light Mint #34d399 Secondary highlight + +All colors: WCAG AAA accessible (8.2:1+ contrast) + +═════════════════════════════════════════════════════════════════════════════ + +πŸ“₯ HOW TO INTEGRATE + +STEP 1: Copy files + cp -r resources/ /path/to/your/project/ + +STEP 2: Read documentation + Start with resources/QUICK-START.md + +STEP 3: Add to HTML + Copy provided code snippets (see QUICK-START.md) + +STEP 4: Customize (optional) + Reference DESIGN-SYSTEM.md for color changes + +═════════════════════════════════════════════════════════════════════════════ + +πŸ“‹ FILE SPECIFICATIONS + +Format: SVG (Scalable Vector Graphics) +Scalability: Any size, no pixelation +Browser Support: All modern browsers +Accessibility: WCAG AAA compliant +Color Mode: RGB/RGBA with gradients +Effects: Gradients, shadows, glows +Customizable: Yes, see DESIGN-SYSTEM.md +Animated: Static (can be animated with CSS/JS) + +═════════════════════════════════════════════════════════════════════════════ + +πŸš€ NEXT STEPS + +IMMEDIATE: + 1. Read resources/QUICK-START.md + 2. Copy favicons to your project + 3. Add favicon link to your HTML + +SHORT TERM: + 1. Integrate logo into website + 2. Use icon for social media + 3. Review DESIGN-SYSTEM.md + +LONG TERM: + 1. Maintain color palette consistency + 2. Use brand assets across all materials + 3. Reference guidelines for any customizations + +═════════════════════════════════════════════════════════════════════════════ + +πŸ’‘ PRO TIPS + +β€’ Use favicon-32.svg as primary favicon (works on all modern browsers) +β€’ Use icons/claude-howto-icon.svg for avatars at 64-256px +β€’ Use logos/claude-howto-logo.svg for website headers (scale to fit) +β€’ Keep the ascending hexagon concept for any custom variants +β€’ Always maintain the established color palette +β€’ SVG files are editable - see DESIGN-SYSTEM.md for color customization +β€’ No PNG conversion needed - SVG works everywhere + +═════════════════════════════════════════════════════════════════════════════ + +πŸ“ž NEED HELP? + +1. Quick setup? β†’ Read QUICK-START.md +2. Full reference? β†’ Read README.md +3. Brand guidelines? β†’ Read DESIGN-SYSTEM.md +4. Visual overview? β†’ Read INDEX.txt +5. Find a specific file? β†’ Read this MANIFEST.txt + +═════════════════════════════════════════════════════════════════════════════ + +Generated: January 2026 +Design System: v1.0 +All files production-ready βœ… + +═════════════════════════════════════════════════════════════════════════════ diff --git a/resources/QUICK-START.md b/resources/QUICK-START.md new file mode 100644 index 0000000..567897c --- /dev/null +++ b/resources/QUICK-START.md @@ -0,0 +1,88 @@ +# Quick Start - Brand Assets + +## Copy Assets to Your Project + +```bash +# Copy all resources to your web project +cp -r resources/ /path/to/your/website/ + +# Or just the favicons for web +cp resources/favicons/* /path/to/your/website/public/ +``` + +## Add to HTML (Copy & Paste) + +```html + + + + + + +``` + +## Use in Markdown/Documentation + +```markdown +# Claude How To + +![Claude How To Logo](resources/logos/claude-howto-logo.svg) + +![Icon](resources/icons/claude-howto-icon.svg) +``` + +## Recommended Sizes + +| Purpose | Size | File | +|---------|------|------| +| Website header | 800Γ—200 | `logos/claude-howto-logo.svg` | +| App icon | 256Γ—256 | `icons/claude-howto-icon.svg` | +| Browser tab | 32Γ—32 | `favicons/favicon-32.svg` | +| Mobile home screen | 128Γ—128 | `favicons/favicon-128.svg` | +| Desktop app | 256Γ—256 | `favicons/favicon-256.svg` | +| Small avatar | 64Γ—64 | `favicons/favicon-64.svg` | + +## Color Values + +```css +/* Use these in your CSS */ +--color-bg-dark: #0d1f0d; +--color-emerald: #10b981; +--color-emerald-dark: #059669; +--color-emerald-forest: #047857; +--color-mint: #6ee7b7; +--color-mint-light: #34d399; +``` + +## Icon Design Meaning + +**Ascending Hexagons Represent**: +- 🟒 Bottom (Dark Emerald) = Beginner (Levels 1-3) +- 🟒 Middle (Bright Emerald) = Intermediate (Levels 4-6) +- 🟒 Top (Mint) = Advanced (Levels 7-10) + +This symbolizes the learning progression from basics to mastery. + +## What to Use Where + +### Website +- **Header**: Logo (`logos/claude-howto-logo.svg`) +- **Favicon**: 32-bit (`favicons/favicon-32.svg`) +- **Social preview**: Icon (`icons/claude-howto-icon.svg`) + +### GitHub +- **README badge**: Icon (`icons/claude-howto-icon.svg`) at 64-128px +- **Repository avatar**: Icon (`icons/claude-howto-icon.svg`) + +### Social Media +- **Profile picture**: Icon (`icons/claude-howto-icon.svg`) +- **Banner**: Logo (`logos/claude-howto-logo.svg`) +- **Thumbnail**: Icon at 256Γ—256px + +### Documentation +- **Chapter headers**: Logo or icon (scaled to fit) +- **Navigation icons**: Favicon (32-64px) + +--- + +See [README.md](README.md) for complete documentation. diff --git a/resources/README.md b/resources/README.md new file mode 100644 index 0000000..86de252 --- /dev/null +++ b/resources/README.md @@ -0,0 +1,242 @@ + + + Claude How To + + +# Claude How To - Brand Assets + +Complete collection of logos, icons, and favicons for the Claude How To project. All assets use the new V2.0 design: a 12-ray organic starburst inspired by Claude's official logo, with emerald green color and educational symbolism. + +## Directory Structure + +``` +resources/ +β”œβ”€β”€ logos/ +β”‚ β”œβ”€β”€ claude-howto-logo.svg # Main logo - Light mode (800Γ—200px) +β”‚ └── claude-howto-logo-dark.svg # Main logo - Dark mode (800Γ—200px) +β”œβ”€β”€ icons/ +β”‚ β”œβ”€β”€ claude-howto-icon.svg # App icon - Light mode (256Γ—256px) +β”‚ └── claude-howto-icon-dark.svg # App icon - Dark mode (256Γ—256px) +└── favicons/ + β”œβ”€β”€ favicon-16.svg # Favicon - 16Γ—16px + β”œβ”€β”€ favicon-32.svg # Favicon - 32Γ—32px (primary) + β”œβ”€β”€ favicon-64.svg # Favicon - 64Γ—64px + β”œβ”€β”€ favicon-128.svg # Favicon - 128Γ—128px + └── favicon-256.svg # Favicon - 256Γ—256px +``` + +## Assets Overview + +### Design Concept (V2.0) + +**12-Ray Organic Starburst** inspired by Claude's official logo: +- **12 Rays** = Knowledge radiating outward +- **Emerald Gradient** = Primary green color (#10b981 β†’ #059669) +- **Mint Core** = Learning value provided +- **Three Inner Lines** = Guides, examples, documentation +- **Claude-Aligned** = Matches official Claude logo pattern + +### Logos + +**Files**: +- `logos/claude-howto-logo.svg` (Light mode) +- `logos/claude-howto-logo-dark.svg` (Dark mode) + +**Specifications**: +- **Size**: 800Γ—200 px +- **Purpose**: Main header/branding logo with wordmark +- **Usage**: + - Website headers + - Marketing materials + - README badges + - Print materials +- **Format**: SVG (fully scalable) +- **Modes**: Light (white background) & Dark (forest background) + +### Icons + +**Files**: +- `icons/claude-howto-icon.svg` (Light mode) +- `icons/claude-howto-icon-dark.svg` (Dark mode) + +**Specifications**: +- **Size**: 256Γ—256 px +- **Purpose**: Application icon, avatars, thumbnails +- **Usage**: + - App icons + - Profile avatars + - Social media thumbnails + - Documentation headers +- **Format**: SVG (fully scalable) +- **Modes**: Light (white background) & Dark (with glow effect) + +**Design Elements**: +- 12-ray organic starburst (Claude-inspired) +- Emerald green gradient rays +- Mint gradient core (represents guide hub) +- Three inner lines (symbolize guides/examples/docs) +- Glow effects in dark mode + +### Favicons + +Optimized versions at multiple sizes for web use: + +| File | Size | DPI | Usage | +|------|------|-----|-------| +| `favicon-16.svg` | 16Γ—16 px | 1x | Browser tabs (older browsers) | +| `favicon-32.svg` | 32Γ—32 px | 1x | Standard browser favicon | +| `favicon-64.svg` | 64Γ—64 px | 1x-2x | High-DPI displays | +| `favicon-128.svg` | 128Γ—128 px | 2x | Apple touch icon, bookmarks | +| `favicon-256.svg` | 256Γ—256 px | 4x | Modern browsers, PWA icons | + +**Optimization Notes**: +- Smaller sizes (16-32px) use simplified geometry +- Larger sizes (64-256px) include additional details +- All maintain visual consistency with main icon +- SVG format ensures crisp display at any size + +## HTML Integration + +### Basic Favicon Setup + +```html + + + + + + + + + +``` + +### Complete Setup + +```html + + + + + + + + + + + + + + + + + +``` + +## Color Palette + +### Primary Colors +- **Deep Forest**: `#0d1f0d` (Background) +- **Emerald**: `#10b981` (Primary accent) +- **Dark Emerald**: `#059669` (Secondary) +- **Forest**: `#047857` (Tertiary) + +### Accent Colors +- **Mint**: `#6ee7b7` (Highlight) +- **Light Mint**: `#34d399` (Secondary highlight) + +### Usage Guidelines +- Use emerald for primary interactions and accents +- Use mint for highlights and emphasis +- Deep forest for backgrounds +- Maintain sufficient contrast for accessibility + +## Design Guidelines + +### Logo Usage +βœ… **Do**: +- Use on dark backgrounds +- Scale proportionally (maintain 4:1 aspect ratio) +- Include clear space around logo +- Use in color as shown + +❌ **Don't**: +- Change colors or gradients +- Stretch or distort proportions +- Use on light backgrounds without modification +- Apply effects that obscure the design + +### Icon Usage +βœ… **Do**: +- Use at standard sizes: 16, 32, 64, 128, 256px +- Maintain the ascending progression concept +- Scale proportionally + +❌ **Don't**: +- Rotate or flip the icon +- Change the color scheme +- Use small sizes where details are lost + +### Favicon Usage +- Use appropriate size for context +- 16-32px: Browser tabs, bookmarks +- 64px: Favicon site icons +- 128px+: Apple/Android home screens + +## SVG Optimization + +All SVG files include: +- Gradient definitions for smooth color transitions +- Filter effects for depth and glow +- Optimized stroke widths +- Responsive design patterns + +For web optimization: +```bash +# Compress SVG while maintaining quality +svgo --config='{ + "js2svg": { + "indent": 2 + }, + "plugins": [ + "convertStyleToAttrs", + "removeRasterImages" + ] +}' input.svg -o output.svg +``` + +## PNG Conversion + +To convert SVG to PNG for older browser support: + +```bash +# Using ImageMagick +convert -density 300 -background none favicon-256.svg favicon-256.png + +# Using Inkscape +inkscape -D -z --file=favicon-256.svg --export-png=favicon-256.png +``` + +## Accessibility + +- All icons include clear geometric shapes +- High contrast color ratios (WCAG AA compliant) +- Scalable vector format works at any size +- No text in icons (text added separately if needed) + +## Attribution + +These assets are part of the Claude How To project and use Anthropic's Claude color palette and design language. + +**License**: MIT (see project LICENSE file) + +## Version History + +- **v2.0** (January 2026): Claude-inspired 12-ray starburst design with dark/light mode variants +- **v1.0** (January 2026): Original hexagon-based progression icon design + +--- + +**Last Updated**: January 2026 +**Current Version**: 2.0 (Claude-Inspired Starburst) +**All Assets**: Production-ready SVG, fully scalable, WCAG AAA accessible diff --git a/resources/favicons/favicon-128.svg b/resources/favicons/favicon-128.svg new file mode 100644 index 0000000..1fc9931 --- /dev/null +++ b/resources/favicons/favicon-128.svg @@ -0,0 +1,63 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/resources/favicons/favicon-16.svg b/resources/favicons/favicon-16.svg new file mode 100644 index 0000000..5aa701f --- /dev/null +++ b/resources/favicons/favicon-16.svg @@ -0,0 +1,40 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/resources/favicons/favicon-256.svg b/resources/favicons/favicon-256.svg new file mode 100644 index 0000000..80a3493 --- /dev/null +++ b/resources/favicons/favicon-256.svg @@ -0,0 +1,75 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/resources/favicons/favicon-32.svg b/resources/favicons/favicon-32.svg new file mode 100644 index 0000000..bea5bd6 --- /dev/null +++ b/resources/favicons/favicon-32.svg @@ -0,0 +1,40 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/resources/favicons/favicon-64.svg b/resources/favicons/favicon-64.svg new file mode 100644 index 0000000..ec1b32b --- /dev/null +++ b/resources/favicons/favicon-64.svg @@ -0,0 +1,49 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/resources/icons/claude-howto-icon-dark.svg b/resources/icons/claude-howto-icon-dark.svg new file mode 100644 index 0000000..9e628be --- /dev/null +++ b/resources/icons/claude-howto-icon-dark.svg @@ -0,0 +1,80 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/resources/icons/claude-howto-icon.svg b/resources/icons/claude-howto-icon.svg new file mode 100644 index 0000000..7632c85 --- /dev/null +++ b/resources/icons/claude-howto-icon.svg @@ -0,0 +1,76 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/resources/logos/claude-howto-logo-dark.svg b/resources/logos/claude-howto-logo-dark.svg new file mode 100644 index 0000000..a1d87fc --- /dev/null +++ b/resources/logos/claude-howto-logo-dark.svg @@ -0,0 +1,126 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Claude + + + + + How-To + + + + + VISUAL GUIDE TO CLAUDE CODE + + + + + + + + + + + + diff --git a/resources/logos/claude-howto-logo.svg b/resources/logos/claude-howto-logo.svg new file mode 100644 index 0000000..ae22e38 --- /dev/null +++ b/resources/logos/claude-howto-logo.svg @@ -0,0 +1,106 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Claude + + + + + How-To + + + + + VISUAL GUIDE TO CLAUDE CODE + + + + + + + + + + + + diff --git a/scripts/README.md b/scripts/README.md index 7eac754..141b466 100644 --- a/scripts/README.md +++ b/scripts/README.md @@ -1,3 +1,8 @@ + + + Claude How To + + # EPUB Builder Script Build an EPUB ebook from the Claude How-To markdown files.