From fb65e8f90f74d88b8348804bae9458862178ead9 Mon Sep 17 00:00:00 2001
From: catlog22 <catlog22@github.com>
Date: Sun, 9 Nov 2025 15:05:47 +0800
Subject: [PATCH] docs(ui-design-agent): add remote assets reference guidelines
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add comprehensive remote assets reference section:
- Image CDN services (Unsplash, Picsum, Placeholder.com)
- Icon libraries (Lucide, Font Awesome, Material Icons)
- Usage patterns with HTML examples
- Best practices for external resource loading

Guidelines include:
- HTTPS URLs mandatory
- Width/height attributes for layout stability
- Lazy loading for below-fold images
- Accessibility requirements (alt attributes)
- Prohibit local file paths and base64 embedding

Position: Between Typography System and Visual Effects System

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .claude/agents/ui-design-agent.md | 43 +++++++++++++++++++++++++++++++
 1 file changed, 43 insertions(+)

diff --git a/.claude/agents/ui-design-agent.md b/.claude/agents/ui-design-agent.md
index faf6fce0..37e09fcc 100644
--- a/.claude/agents/ui-design-agent.md
+++ b/.claude/agents/ui-design-agent.md
@@ -207,6 +207,49 @@ You execute 6 distinct task types organized into 3 patterns. Each task includes
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
 ```
 
+### Remote Assets Reference
+
+**Image Assets** (CDN or External URLs):
+- Use absolute URLs for external images (e.g., `https://picsum.photos/...`, `https://images.unsplash.com/...`)
+- Use CDN URLs for reliability and performance
+- Always include `alt` attributes for accessibility
+- Specify dimensions when known for layout stability
+
+**Supported Image Services**:
+- **Unsplash**: `https://images.unsplash.com/photo-{id}?w={width}&q={quality}`
+- **Picsum**: `https://picsum.photos/{width}/{height}` (placeholder images)
+- **Placeholder.com**: `https://via.placeholder.com/{width}x{height}/{bg-color}/{text-color}`
+
+**Icon Libraries** (CDN):
+- **Lucide Icons**: `https://unpkg.com/lucide@latest/dist/umd/lucide.js`
+- **Font Awesome**: `https://cdnjs.cloudflare.com/ajax/libs/font-awesome/{version}/css/all.min.css`
+- **Material Icons**: `https://fonts.googleapis.com/icon?family=Material+Icons`
+
+**Usage Pattern**:
+```html
+<!-- External images -->
+<img src="https://images.unsplash.com/photo-1234567890?w=800&q=80"
+     alt="Descriptive text"
+     width="800"
+     height="600">
+
+<!-- Placeholder images -->
+<img src="https://picsum.photos/400/300"
+     alt="Placeholder content">
+
+<!-- Icon library (Lucide) -->
+<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script>
+<i data-lucide="menu"></i>
+```
+
+**Best Practices**:
+- ✅ Use HTTPS URLs for all external assets
+- ✅ Include width/height attributes to prevent layout shift
+- ✅ Add loading="lazy" for images below the fold
+- ✅ Provide fallback content for failed loads
+- ❌ Never use local file paths (e.g., `file:///` or relative paths without context)
+- ❌ Avoid embedding base64 images (use external URLs instead)
+
 ### Visual Effects System
 
 **Shadow Tokens** (7-tier system):