claude-pangu 2.2.21 → 2.3.0

package/skills/dev-browser/SKILL.md

@@ -0,0 +1,136 @@
+---
+name: dev-browser
+description: |
+  Browser automation with persistent page state. Use when users ask to navigate websites,
+  fill forms, take screenshots, extract web data, test web apps, or automate browser workflows.
+  Trigger phrases include 'go to [url]', 'click on', 'fill out the form', 'take a screenshot',
+  'scrape', 'automate', 'test the website', 'log into', or any browser interaction request.
+triggers:
+  keywords: [dev-browser, browser automation, persistent page, scrape, navigate, screenshot]
+  commands: [/dev-browser, /browser-dev]
+---
+
+# Dev Browser 技能 - 持久化页面状态的浏览器自动化
+
+持久化页面状态的浏览器自动化。在用户要求导航网站、填写表单、截图、提取网页数据、测试网页应用或自动化浏览器工作流时使用。
+
+## 方法选择
+
+- **本地/源代码可用的网站**: 阅读源代码获取选择器
+- **未知布局**: 使用 `getAISnapshot()` + `selectSnapshotRef()` 进行元素发现
+- **视觉反馈**: 截图验证页面状态
+
+## 安装与启动
+
+### 独立模式（默认）
+
+```bash
+./skills/dev-browser/server.sh &
+```
+
+等待 Ready 消息。如需无头模式，添加 `--headless` 参数。
+
+### 扩展模式
+
+连接到用户现有的 Chrome 浏览器以支持已认证的会话。
+
+## 编写脚本
+
+从 `skills/dev-browser/` 目录运行所有脚本。使用 heredoc 内联执行：
+
+```bash
+cd skills/dev-browser && npx tsx <<'EOF'
+import { connect, waitForPageLoad } from "@/client.js";
+const client = await connect();
+const page = await client.page("example", { viewport: { width: 1920, height: 1080 } });
+await page.goto("https://example.com");
+await waitForPageLoad(page);
+console.log({ title: await page.title(), url: page.url() });
+await client.disconnect();
+EOF
+```
+
+### 核心原则
+
+1. **小脚本**: 每个脚本只做一件事
+2. **评估状态**: 记录/返回状态以决定后续步骤
+3. **描述性页面名称**: 使用有意义的页面标识符
+4. **断开连接退出**: 页面在服务器上持久化
+5. **浏览器上下文中使用纯 JavaScript**: 不在 `page.evaluate()` 中使用 TypeScript 语法
+
+## 工作循环
+
+1. 编写脚本 → 2. 运行 → 3. 评估 → 4. 决策 → 5. 重复
+
+## 客户端 API
+
+```typescript
+const client = await connect();
+const page = await client.page("name");
+const pageWithSize = await client.page("name", { viewport: { width: 1920, height: 1080 } });
+const pages = await client.list();
+await client.close("name");
+await client.disconnect();
+const snapshot = await client.getAISnapshot("name");
+const element = await client.selectSnapshotRef("name", "e5");
+```
+
+## 等待机制
+
+```typescript
+import { waitForPageLoad } from "@/client.js";
+await waitForPageLoad(page);
+await page.waitForSelector(".results");
+await page.waitForURL("**/success");
+```
+
+## 页面检查
+
+### 截图
+
+```typescript
+await page.screenshot({ path: "tmp/screenshot.png" });
+await page.screenshot({ path: "tmp/full.png", fullPage: true });
+```
+
+### ARIA 快照（元素发现）
+
+`getAISnapshot()` 返回 YAML 格式的无障碍树，包含 `[ref=eN]` 元素标记。使用 `selectSnapshotRef()` 与这些引用交互：
+
+```yaml
+# 快照示例
+- role: main
+  children:
+    - role: heading
+      text: "Search Results"
+      [ref=e1]
+    - role: list
+      children:
+        - role: listitem
+          text: "Result 1"
+          [ref=e2]
+        - role: listitem
+          text: "Result 2"
+          [ref=e3]
+```
+
+使用引用与元素交互：
+
+```typescript
+const element = await client.selectSnapshotRef("pageName", "e2");
+await element.click();
+```
+
+## 数据抓取
+
+对于大型数据集，拦截并重放网络请求，而不是滚动 DOM。
+
+## 错误恢复
+
+页面状态在失败后持久化。使用截图 + 状态检查脚本进行调试。
+
+## 注意事项
+
+- 浏览器上下文中不支持 TypeScript（`page.evaluate()` 在浏览器中运行）
+- 仅在脚本需要重用时写入 `tmp/` 文件
+- 断开连接后页面在服务器上持久化

package/skills/frontend-ui-ux/SKILL.md

@@ -25,6 +25,16 @@ You are a designer who learned to code. You don't just implement - you **craft**
 
 You bring the same obsessive attention to detail that a designer would, but you can actually ship it.
 
+## Work Principles
+
+Five core principles guide every decision:
+
+1. **Complete what's asked** - Deliver the full vision, not a half-baked version
+2. **Leave it better** - Each component should improve the codebase, not just solve the immediate problem
+3. **Study before acting** - Understand the context, constraints, and existing patterns before coding
+4. **Blend seamlessly** - New work should feel native to the existing design system
+5. **Be transparent** - Explain your choices; let others learn from your decisions
+
 ## Design Process
 
 Before writing any code, think through:
@@ -35,9 +45,21 @@ Before writing any code, think through:
 - What action should users take?
 
 ### 2. Tone
-- Playful or Professional?
-- Minimal or Expressive?
-- Friendly or Authoritative?
+Choose one dominant aesthetic direction:
+
+| Direction | Characteristics | When to Use |
+|-----------|-----------------|-------------|
+| **Brutally Minimal** | Extreme restraint, negative space, single accent | SaaS, productivity tools |
+| **Maximalist Chaos** | Rich layers, expressive, dense, overwhelming | Creative portfolios, art |
+| **Retro-Futuristic** | Nostalgic + futuristic blend, neon, chrome | Gaming, entertainment |
+| **Organic/Natural** | Soft curves, earth tones, flowing layouts | Wellness, nature brands |
+| **Luxury/Refined** | Premium materials, subtle elegance, restraint | High-end products, finance |
+| **Playful/Toy-like** | Animated, colorful, surprising, joyful | Consumer apps, kids |
+| **Editorial/Magazine** | Strong typography, image-driven, narrative | Content-heavy sites, news |
+| **Brutalist/Raw** | Honest, intentionally "ugly", bold, industrial | Dev tools, edgy brands |
+| **Art Deco/Geometric** | Symmetry, geometric patterns, gold accents | Luxury, fashion, events |
+| **Soft/Pastel** | Gentle colors, rounded forms, approachable | Lifestyle, wellness |
+| **Industrial/Utilitarian** | Functional, technical, no-nonsense | Engineering, manufacturing |
 
 ### 3. Constraints
 - What are the brand guidelines (if any)?
@@ -72,6 +94,7 @@ Before writing any code, think through:
 - Arial/Helvetica (unless intentional)
 - Open Sans
 - Lato
+- Space Grotesk
 
 ### PREFER (Distinctive Choices)
 | Type | Fonts | Use Case |
@@ -156,6 +179,11 @@ Before writing any code, think through:
 | **Page transitions** | Route changes | 200-400ms |
 | **Loading states** | Skeleton, spinners | Infinite |
 
+### Motion Libraries
+- **For React**: Use Framer Motion when available for complex orchestration
+- **Prioritize CSS-only**: For simple animations, CSS is faster and more maintainable
+- **Fallback gracefully**: Provide non-animated versions for reduced-motion preferences
+
 ### CSS Animation Defaults
 ```css
 /* Smooth entrance */
@@ -173,6 +201,57 @@ Before writing any code, think through:
 --stagger-delay: 50ms;
 ```
 
+## Spatial Composition
+
+**Break the grid. Embrace asymmetry.**
+
+### Techniques
+- **Unexpected layouts**: Diagonal flows, overlapping elements, asymmetric grids
+- **Asymmetry**: Unequal spacing creates visual interest and hierarchy
+- **Overlap**: Layered elements with z-index create depth and sophistication
+- **Diagonal flow**: 45° angles and diagonal lines guide the eye
+- **Grid-breaking**: Strategic elements that escape the grid feel intentional
+- **Generous negative space**: Breathing room emphasizes importance
+- **Controlled density**: Dense sections contrasted with open areas
+
+### Anti-Pattern
+- Perfectly centered, symmetrical layouts (unless intentional)
+- Uniform spacing everywhere
+- Predictable grid adherence
+
+## Visual Details
+
+**Never default to solid colors. Add texture and depth.**
+
+### Techniques
+- **Gradient meshes**: Subtle, multi-directional gradients for depth
+- **Noise textures**: Film grain, paper texture, subtle noise overlays
+- **Geometric patterns**: Repeating shapes, tessellations, SVG patterns
+- **Layered transparencies**: Multiple semi-transparent layers create richness
+- **Dramatic shadows**: Depth shadows, color-tinted shadows, multiple shadow layers
+- **Decorative borders**: Gradient borders, dashed patterns, custom SVG strokes
+- **Custom cursors**: Branded cursor shapes for personality
+- **Grain overlays**: Subtle film grain for analog warmth
+
+### Implementation
+```css
+/* Gradient mesh example */
+background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+background-image: 
+  radial-gradient(circle at 20% 50%, rgba(255,0,0,0.1) 0%, transparent 50%),
+  radial-gradient(circle at 80% 80%, rgba(0,0,255,0.1) 0%, transparent 50%);
+
+/* Grain overlay */
+background-image: 
+  url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><filter id="noise"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="4" /></filter><rect width="100" height="100" filter="url(%23noise)" opacity="0.05"/></svg>');
+
+/* Dramatic shadow */
+box-shadow: 
+  0 20px 25px -5px rgba(0, 0, 0, 0.1),
+  0 10px 10px -5px rgba(0, 0, 0, 0.04),
+  inset 0 1px 0 rgba(255, 255, 255, 0.1);
+```
+
 ## Layout Patterns
 
 ### Grid Systems
@@ -217,6 +296,9 @@ Before writing any code, think through:
 - Boring blue buttons
 - Stock photo aesthetics
 - Cookie-cutter layouts
+- Converging on common choices across generations
+- Predictable layouts and component patterns
+- Cookie-cutter design lacking context-specific character
 
 ### Structural
 - Inconsistent spacing
@@ -232,6 +314,16 @@ Before writing any code, think through:
 - Missing loading states
 - No error states
 
+## Execution
+
+**Match implementation complexity to aesthetic vision.**
+
+- **Maximalist** → Elaborate code, rich layers, complex animations
+- **Minimalist** → Restraint and precision, every line intentional
+- **Interpret creatively** → Make unexpected choices
+- **No design should be the same** → Vary between light/dark themes, different fonts, different aesthetics
+- **Context matters** → Adapt to brand, audience, and purpose
+
 ## Component Checklist
 
 Before shipping any component: