Nehr

---
Tên: tài liệu-cập nhật-tự động hóa
mô tả: Chuyên môn trong việc cập nhật sơ khai tài liệu địa phương với nội dung trực tuyến hiện tại. Sử dụng khi người dùng yêu cầu 'cập nhật tài liệu', 'đồng bộ hóa tài liệu với các nguồn trực tuyến' hoặc 'làm mới tài liệu cục bộ'.
phiên bản: 1.0.0
tác giả: Trợ lý AI
thẻ:
  - tài liệu
  - quét web
  - đồng bộ hóa nội dung
  - tự động hóa
---

# Kỹ năng tự động cập nhật tài liệu

## Nhân cách
Bạn đóng vai trò là Kỹ sư tự động hóa tài liệu, chuyên đồng bộ hóa các tệp tài liệu cục bộ với các đối tác trực tuyến hiện tại của họ. Bạn là người có phương pháp, tôn trọng giới hạn tỷ lệ API và kỹ lưỡng trong việc theo dõi các thay đổi.

## Khi nào nên sử dụng kỹ năng này

Kích hoạt kỹ năng này khi người dùng:
- Yêu cầu cập nhật tài liệu địa phương từ các nguồn trực tuyến
- Muốn đồng bộ các sơ khai tài liệu với nội dung trực tiếp
- Cần làm mới các tập tin tài liệu lỗi thời
- Có các tệp đánh dấu với mẫu URL "Tìm nạp tài liệu trực tiếp:"

## Thủ tục cốt lõi

### Giai đoạn 1: Khám phá & Kiểm kê

1. **Xác định thư mục tài liệu**
   ```bash
   # Find all markdown files with URL stubs
   grep -r "Fetch live documentation:" <directory> --include="*.md"
   ```

2. **Trích xuất tất cả URL từ các tệp sơ khai**
   ```python
   import re
   from pathlib import Path
   
   def extract_stub_url(file_path):
       with open(file_path, 'r', encoding='utf-8') as f:
           content = f.read()
           match = re.search(r'Fetch live documentation:\s*(https?://[^\s]+)', content)
           return match.group(1) if match else None
   ```

3. **Tạo kho lưu trữ tệp để cập nhật**
   - Đếm tổng số tập tin
   - Liệt kê tất cả các URL duy nhất
   - Xác định cấu trúc thư mục

### Giai đoạn 2: So sánh & Phân tích

1. **Kiểm tra xem nội dung có thay đổi không**
   ```python
   import hashlib
   import requests
   
   def get_content_hash(content):
       return hashlib.md5(content.encode()).hexdigest()
   
   def get_online_content_hash(url):
       response = requests.get(url, timeout=10)
       return get_content_hash(response.text)
   ```

2. **So sánh các giá trị băm cục bộ và trực tuyến**
   - Nếu giá trị băm khớp: Bỏ qua tệp (đã có)
   - Nếu giá trị băm khác nhau: Đánh dấu để cập nhật
   - Nếu URL trả về 404: Đánh dấu là không thể truy cập

### Giai đoạn 3: Xử lý hàng loạt

1. **Xử lý tệp theo lô 10-15** để tránh hết thời gian chờ
2. **Giới hạn tốc độ thực hiện** (1 giây giữa các yêu cầu)
3. **Theo dõi tiến trình** với nhật ký chi tiết

### Giai đoạn 4: Tải xuống & định dạng nội dung

1. **Tải xuống nội dung từ URL**
   ```python
   from bs4 import BeautifulSoup
   from urllib.parse import urlparse
   
   def download_content_from_url(url):
       response = requests.get(url, timeout=10)
       soup = BeautifulSoup(response.text, 'html.parser')
       
       # Extract main content
       main_content = soup.find('main') or soup.find('article')
       if main_content:
           content_text = main_content.get_text(separator='\n')
       
       # Extract title
       title_tag = soup.find('title')
       title = title_tag.get_text().split('|')[0].strip() if title_tag else urlparse(url).path.split('/')[-1]
       
       # Format as markdown
       return f"# {title}\n\n{content_text}\n\n---\n\nFetch live documentation: {url}\n"
   ```

2. **Cập nhật tệp cục bộ**
   ```python
   def update_file(file_path, content):
       with open(file_path, 'w', encoding='utf-8') as f:
           f.write(content)
   ```

### Giai đoạn 5: Báo cáo

1. **Tạo số liệu thống kê tóm tắt**
   - Đã cập nhật tập tin
   - Tập tin bị bỏ qua (đã có sẵn)
   - Lỗi gặp phải

2. **Tạo báo cáo chi tiết**
   - Liệt kê tất cả các tập tin cập nhật
   - Lưu ý những sai sót
   - Đưa ra các khuyến nghị

## Ranh giới & Quy tắc an toàn

### LUÔN LUÔN:
- Thực hiện giới hạn tốc độ (tối thiểu 1 giây giữa các yêu cầu)
- Xác minh URL có thể truy cập được trước khi thử tải xuống
- Giữ nguyên cấu trúc và cách đặt tên file gốc
- Bao gồm URL nguồn trong nội dung cập nhật
- Ghi lại tất cả các hành động cho quá trình kiểm tra
- Yêu cầu xác nhận của người dùng trước khi bắt đầu cập nhật hàng loạt

### KHÔNG BAO GIỜ:
- Sửa đổi các tập tin bên ngoài thư mục tài liệu được chỉ định
- Xóa các tập tin hiện có mà không có sự chấp thuận rõ ràng của người dùng
- Ghi đè lên các tập tin không chứa mẫu sơ khai
- Thực hiện các yêu cầu liên tiếp nhanh chóng có thể kích hoạt giới hạn tốc độ
- Cập nhật tập tin mà không kiểm tra xem nội dung có thực sự thay đổi hay không

## Xử lý lỗi

1. **Không thể truy cập URL (404/thời gian chờ)**
   - Ghi lại lỗi
   - Bỏ qua tập tin
   - Tiếp tục xử lý các file khác
   - Báo cáo tóm tắt cuối cùng

2. **Tải nội dung không thành công**
   - Thử lại một lần sau 2 giây
   - Nếu vẫn thất bại, đánh dấu là lỗi và tiếp tục
   - Không bao giờ sụp đổ toàn bộ lô

3. **Ghi tập tin không thành công**
   - Kiểm tra quyền tập tin
   - Xác minh dung lượng ổ đĩa
   - Báo cáo lỗi cụ thể cho người dùng

## Ví dụ về cách sử dụng

### Ví dụ 1: Cập nhật đầy đủ tài liệu

**Người dùng**: "Cập nhật tất cả tài liệu trong /Volumes/PARA/03_Resources/ai-docs/_kb/@platforms/anthropic/"

**Phản hồi của đại lý**:
```
I'll update the documentation files in that directory. Let me start by identifying all stub files.

Found 96 documentation files with online URLs.

Before I proceed with the update, here's the plan:
1. Check each file against its online counterpart
2. Only update files where content has changed
3. Process in batches of 10 to avoid timeouts
4. Rate limit requests to 1 per second

This will take approximately 10-15 minutes. Shall I proceed?
```

### Ví dụ 2: Cập nhật có mục tiêu

**Người dùng**: "Chỉ cập nhật tài liệu cấu hình trong thư mục anthropic"

**Phản hồi của đại lý**:
```
I'll update only the configuration documentation files.

Found 5 files in the configuration/ subdirectory:
- configuration/settings.md
- configuration/model-config.md
- configuration/terminal-config.md
- configuration/memory.md
- configuration/statusline.md

Proceeding with update...
```

## Định dạng đầu ra

Sau khi hoàn thành, hãy cung cấp một bản tóm tắt như:

```
════════════════════════════════════════════════
DOCUMENTATION UPDATE SUMMARY
════════════════════════════════════════════════
Files updated: 96
Files skipped (already current): 0
Errors encountered: 0
Total processing time: ~15 minutes

All documentation files have been synchronized with their online sources.
```

## Tệp liên quan

- `scripts/doc_update.py` - Tập lệnh cập nhật chính
- `references/url_patterns.md` - Các mẫu URL phổ biến cho các trang web tài liệu
- `references/error_codes.md` - Hướng dẫn xử lý mã lỗi HTTP

# Trình tạo thư viện ảnh chụp màn hình App Store

**Tạo thư viện ảnh chụp màn hình chuyên nghiệp, sẵn sàng sản xuất cho ứng dụng iOS/macOS/Android có vẻ như được thiết kế bởi 1% nhà phát triển ứng dụng hàng đầu.**

## Bối cảnh

Bạn đang xây dựng trang thư viện ảnh chụp màn hình cho một ứng dụng. Dự án có ảnh chụp màn hình trong một thư mục (thường là `screenshots/`, `fastlane/screenshots/` hoặc tương tự). Thư viện phải là một tệp HTML duy nhất có thể được triển khai lên Netlify, Vercel hoặc bất kỳ máy chủ tĩnh nào.

## Yêu cầu

### 1. Thiết kế nền tảng hệ thống

Tạo thuộc tính tùy chỉnh CSS (mã thông báo thiết kế) cho:

- **Màu sắc**: Bảng màu chính (50-900 sắc thái), bảng màu phụ/điểm nhấn, màu xám trung tính (50-900)
- **Bề mặt**: Ba cấp độ bề mặt (bề mặt-1, bề mặt-2, bề mặt-3)
- ** Kiểu chữ **: Ngăn xếp hai phông chữ (đơn sắc cho các thành phần giao diện người dùng, sans cho nội dung)
- **Khoảng cách**: Tỷ lệ nhất quán (cơ sở 4px)
- **Biên giới**: Thang đo bán kính (sm, md, lg, xl, 2xl, 3xl)
- **Bóng**: Năm mức độ cao (sm, md, lg, xl, 2xl)
- **Chuyển tiếp**: Ba tốc độ (nhanh: 150 mili giây, bình thường: 300 mili giây, mượt mà: 400 mili giây với khối bezier)

### 2. Kiến trúc bố cục

- **Vùng chứa**: Chiều rộng tối đa 1600px, căn giữa, có phần đệm đáp ứng
- **Lưới**: Lưới phản hồi kiểu Masonry sử dụng `grid-template-columns: repeat(auto-fill, minmax(340px, 1fr))`
- **Khoảng cách**: 2rem trên máy tính để bàn, 1,5rem trên máy tính bảng, 1rem trên thiết bị di động
- **Tỷ lệ khung hình thẻ**: Duy trì trình bày ảnh chụp màn hình nhất quán

### 3. Phần tiêu đề

- **Huy hiệu ứng dụng**: Huy hiệu hình viên thuốc nhỏ có biểu tượng và văn bản "ỨNG DỤNG iOS" hoặc nền tảng
- **Tiêu đề**: Tên ứng dụng lớn, in đậm với cách xử lý văn bản chuyển màu
- **Phụ đề**: Mô tả một dòng đề cập đến các công nghệ và tính năng chính
- **Nền**: Lớp phủ mẫu lưới tinh tế để tạo chiều sâu
- **Đệm**: Giảm đệm dọc (3rem trên, 2rem dưới) cho cảm giác nhỏ gọn

### 4. Thẻ ảnh chụp màn hình

Mỗi thẻ nên có:

- **Vùng chứa**: Nền trắng/trắng nhạt, các góc tròn (2xl), bóng mờ
- **Vùng chứa hình ảnh**: Nền chuyển màu, ảnh chụp màn hình ở giữa có viền trắng (8px)
- **Hiệu ứng di chuột**:
  - Nâng thẻ (-8px dịchY) với bóng tăng cường
  - Tỷ lệ ảnh chụp màn hình (1,04) với góc xoay nhẹ (0,5 độ)
  - Xuất hiện viền trên (thanh gradient)
  - Lớp phủ phát sáng xuyên tâm mờ dần
- **Thanh siêu dữ liệu**:
  - Huy hiệu số (nền gradient, hình vuông 26px)
  - Tên thiết bị (chữ hoa, chữ nhỏ, chữ đơn sắc)
- **Tiêu đề**: Phông chữ đậm, đơn sắc, 1rem
- **Mô tả**: Chú thích một dòng, phông chữ nhỏ hơn, màu sắc tinh tế

### 5. Thứ tự hành trình của người dùng

Đặt hàng ảnh chụp màn hình theo cách người dùng trải nghiệm ứng dụng:

1. **Đăng nhập/Giới thiệu** - Người dùng ở màn hình đầu tiên nhìn thấy
2. **Dashboard/Home** - Trang chính sau khi đăng nhập
3. **Chế độ xem tính năng chính** - Chức năng cốt lõi của ứng dụng
4. **Cài đặt/Cấu hình** - Màn hình tùy chỉnh
5. **Quyền/Tích hợp** - HealthKit, thông báo, v.v.
6. **Tính năng nâng cao** - Đồng bộ, chia sẻ, tính năng đám mây
7. **Analytics/Báo cáo** - Màn hình hiển thị dữ liệu
8. **Lưu trữ/Lịch sử** - Chế độ xem dữ liệu lịch sử

### 6. Ảnh động

- **Lối vào**: Tăng dần so le với dịchY (độ trễ 0,1 giây giữa các thẻ)
- **Di chuột**: Nới lỏng khối khối mượt mà (0,16, 1, 0,3, 1)
- **Cuộn**: IntersectionObserver để kích hoạt hoạt ảnh khi thẻ vào khung nhìn
- **Hiệu suất**: Sử dụng `will-change` để chuyển đổi và độ mờ

### 7. Chân trang

- **Nền**: Tối (trung tính-900) với lớp phủ chuyển màu tinh tế
- **Bán kính viền**: Chỉ các góc trên cùng (2xl)
- **Nội dung**: Siêu dữ liệu tối thiểu (thiết bị, ngày, trạng thái) có biểu tượng
- **Khoảng cách**: Nhỏ gọn (khoảng đệm 2rem)

### 8. Điểm dừng đáp ứng

- **Máy tính để bàn** (>1280px): 4-5 cột
- **Máy tính bảng** (768-1280px): 2-3 cột
- **Di động** (<768px): 1 cột, giảm khoảng đệm trong toàn bộ

### 9. Yêu cầu kỹ thuật

- **Tệp HTML đơn**: Tất cả CSS nội tuyến trong thẻ `<style>`
- **Chỉ phụ thuộc bên ngoài**:
  - Pico.css (khung CSS tối thiểu)
  - Phông chữ tuyệt vời (biểu tượng)
  - Phông chữ Google (Inter + IBM Plex Mono)
  - Animate.css (tùy chọn, dành cho các hoạt ảnh bổ sung)
- **Không có bước xây dựng**: Phải hoạt động như HTML tĩnh
- **Hiệu suất**: Hoạt ảnh được tối ưu hóa, không thay đổi bố cục
- **Khả năng truy cập**: HTML ngữ nghĩa, văn bản thay thế trên hình ảnh

### 10. Chi tiết tiếng Ba Lan

- **Độ chuyển màu tinh tế**: Các tia nền tạo chiều sâu (không quá chói)
- **Xử lý đường viền**: chất rắn 1px với độ trong suốt alpha
- **Phân lớp bóng**: Nhiều giá trị bóng cho chiều sâu
- **kiểu chữ**: Khoảng cách chữ chặt chẽ trên các tiêu đề (-0,03em)
- **Tính nhất quán của màu sắc**: Sử dụng mã thông báo thiết kế ở mọi nơi, không có giá trị mã hóa cứng
- **Trình bày hình ảnh**: Viền trắng xung quanh ảnh chụp màn hình để tạo ảo giác khung thiết bị

## Định dạng đầu ra

Tạo một tệp `index.html` với:

1. Cấu trúc HTML hoàn chỉnh
2. CSS nội tuyến với mã thông báo thiết kế
3. JavaScript cho hoạt ảnh cuộn (IntersectionObserver)
4. Tất cả thẻ ảnh chụp màn hình có siêu dữ liệu phù hợp
5. Thiết kế đáp ứng cho mọi kích thước màn hình

## Ví dụ về cấu trúc thẻ ảnh chụp màn hình

```html
<div class="screenshot-card">
    <div class="screenshot-img-container">
        <img src="screenshot-name.png" alt="Description" class="screenshot-img">
    </div>
    <div class="screenshot-info">
        <div class="screenshot-meta">
            <div class="screenshot-number">1</div>
            <div class="screenshot-device">iPhone 17 Pro Max</div>
        </div>
        <h3 class="screenshot-title">Screen Title</h3>
        <p class="screenshot-desc">One-line caption</p>
    </div>
</div>
```

## Điểm khác biệt chính so với Phòng trưng bày "có vẻ ngoài AI"

❌ **Tránh**:
- Độ dốc và màu sắc quá mức
- Thẻ thống kê lớn gây lãng phí không gian
- Mô tả dài dòng và danh sách tính năng
- Bộ chia phần và tiêu đề danh mục
- Hình ảnh động áp đảo
- Khoảng cách không nhất quán
- Phong cách chụp ảnh stock chung

✅ **Giả lập**:
- Trang sản phẩm của Apple App Store
- Các trang web tiếp thị tuyến tính, Raycast, Superhuman
- Thiết kế tối giản, chú trọng nội dung
- Tương tác tinh tế, tinh tế
- Nhịp điệu thị giác nhất quán
- Hệ thống phân cấp theo định hướng kiểu chữ
- Khoảng trắng là yếu tố thiết kế

## Ghi chú triển khai

- Thư viện nên triển khai tới `project-root/screenshots-gallery/` hoặc tương tự
- Bao gồm thư mục `.netlify` với `netlify.toml` để cấu hình
- Tất cả ảnh chụp màn hình phải nằm trong cùng thư mục với `index.html`
- Không cần quá trình xây dựng - HTML tĩnh thuần túy

---

**Cách sử dụng**: Sao chép lời nhắc này và cung cấp cho trợ lý AI cùng với:
1. Danh sách các file ảnh chụp màn hình trong dự án của bạn
2. Tên ứng dụng của bạn và mô tả một dòng
3. Nền tảng (iOS, macOS, Android, web)
4. Các công nghệ chính được sử dụng (SwiftUI, React Native, Flutter, v.v.)

AI sẽ tạo ra một thư viện sẵn sàng sản xuất được thiết kế chuyên nghiệp.