@yeongjaeyou/claude-code-config 0.21.2 → 0.22.0

package/.claude/skills/translate-web-article/SKILL.md

@@ -0,0 +1,194 @@
+---
+name: translate-web-article
+description: Convert web pages to Korean markdown documents. Fetches page via firecrawl, translates text to Korean, analyzes images with VLM for Korean captions, preserves code/tables with explanations. Use for tech blogs, papers, documentation. Triggers on "translate web page", "blog to Korean", "translate this article".
+---
+
+# Web Article Translator
+
+Converts web pages to Korean markdown while analyzing images with VLM to generate context-aware Korean captions.
+
+## Workflow
+
+```
+URL Input
+    |
+    +-- Fetch page via firecrawl (markdown + links)
+    |
+    +-- Ask user options via AskUserQuestion
+    |   +-- Output directory
+    |   +-- Download images locally or not
+    |
+    +-- Process content
+    |   +-- Text: Translate to Korean (keep tech terms)
+    |   +-- Images: Download -> VLM analysis -> Korean caption
+    |   +-- Code/Tables: Keep original + add explanation
+    |
+    +-- Generate markdown file
+```
+
+## Step 1: Fetch Web Page
+
+Use firecrawl MCP:
+
+```
+mcp__firecrawl__firecrawl_scrape
+- url: target URL
+- formats: ["markdown", "links"]
+- onlyMainContent: true
+```
+
+Return error for inaccessible pages:
+- Login required
+- Paywall content
+- Blocked sites
+
+## Step 2: User Options
+
+Use AskUserQuestion to confirm:
+
+1. **Output directory**: Where to save translated markdown
+2. **Download images**: Save locally or keep URL references
+
+## Step 3: Translation Rules
+
+### General Text
+
+Translate to natural Korean.
+
+### Technical Terms
+
+Keep original English. See `references/tech-terms.md`.
+
+```
+Transformer, Fine-tuning, API, GPU, CUDA, Tokenizer,
+Embedding, Attention, Backbone, Checkpoint, Epoch,
+Batch Size, Learning Rate, Loss, Gradient, Weight...
+```
+
+### Code Blocks
+
+Keep original + add Korean explanation below:
+
+````markdown
+```python
+def train(model, data):
+    optimizer.zero_grad()
+    loss = model(data)
+    loss.backward()
+    optimizer.step()
+```
+> 이 코드는 모델 학습의 한 스텝을 수행합니다. gradient 초기화, forward pass, backward pass, weight 업데이트 순으로 진행됩니다.
+````
+
+### Tables
+
+Keep original + add Korean explanation below:
+
+```markdown
+| Model | Params | Score |
+|-------|--------|-------|
+| BERT  | 110M   | 89.3  |
+| GPT-2 | 1.5B   | 91.2  |
+
+> 이 테이블은 모델별 파라미터 수와 성능 점수를 비교합니다.
+```
+
+### Links
+
+Keep URL, translate link text only:
+
+```markdown
+자세한 내용은 [공식 문서](https://example.com/docs)를 참고하세요.
+```
+
+## Step 4: Image Processing
+
+### Process Flow
+
+1. Extract image URLs from markdown
+2. Download to `/tmp` (use scripts/download_image.sh)
+3. Analyze with Read tool (VLM auto-applied)
+4. Generate Korean caption considering surrounding context
+5. Add VLM analysis as blockquote below image (alt text is hidden in preview)
+
+### Caption Guidelines
+
+- Around 2 sentences
+- Describe image meaning and role
+- Reflect surrounding context
+- Use blockquote format for visibility in markdown preview
+
+Example:
+```markdown
+![Transformer 아키텍처](image_url)
+*원문 캡션*
+
+> Transformer 아키텍처의 전체 구조를 보여주는 다이어그램입니다. Encoder와 Decoder가 병렬로 배치되어 있으며, Multi-Head Attention 레이어가 핵심 구성요소입니다.
+```
+
+### Error Handling
+
+When image load fails:
+
+```markdown
+![이미지 로드 실패](original_url)
+> [경고] 이미지를 불러올 수 없습니다: {error_message}
+```
+
+Show warning and continue translation.
+
+## Step 5: Output Generation
+
+### File Structure
+
+```
+{output_dir}/
+├── {article_name}.md          # Translated markdown
+└── images/                    # Downloaded images (if selected)
+    ├── image_001.png
+    └── image_002.png
+```
+
+### Markdown Header
+
+```markdown
+# 번역된 제목
+
+원문: {original_url}
+번역일: {YYYY-MM-DD}
+
+---
+
+(Body starts here)
+```
+
+## Edge Cases
+
+| Scenario | Handling |
+|----------|----------|
+| Image URL inaccessible | Show warning, keep original URL, continue |
+| Login/Paywall | Return error, stop processing |
+| Document > 10,000 chars | Chunk by sections, process sequentially |
+| No images | Translate text only |
+| Non-English source | Translate from that language to Korean |
+
+## Scripts
+
+### download_image.sh
+
+Downloads image URL to /tmp:
+
+```bash
+scripts/download_image.sh "https://example.com/image.png"
+# Output: /tmp/img_<hash>.png
+```
+
+## References
+
+- `references/tech-terms.md` - Technical terms to keep in English
+
+## Limitations
+
+- Cannot process PDF directly
+- Cannot process video content
+- Dynamic JS-rendered content (if firecrawl fails)

package/.claude/skills/translate-web-article/references/tech-terms.md

@@ -0,0 +1,176 @@
+# Technical Terms (Keep Original)
+
+List of technical terms that should remain in English when translating to Korean.
+
+## Machine Learning / Deep Learning
+
+- Transformer
+- Attention
+- Multi-Head Attention
+- Self-Attention
+- Cross-Attention
+- Encoder
+- Decoder
+- Embedding
+- Tokenizer
+- Fine-tuning
+- Pre-training
+- Transfer Learning
+- Zero-shot
+- Few-shot
+- In-context Learning
+- Prompt
+- Prompt Engineering
+
+## Model Architecture
+
+- CNN (Convolutional Neural Network)
+- RNN (Recurrent Neural Network)
+- LSTM (Long Short-Term Memory)
+- GRU (Gated Recurrent Unit)
+- ResNet
+- BERT
+- GPT
+- T5
+- ViT (Vision Transformer)
+- CLIP
+- Diffusion
+- VAE (Variational Autoencoder)
+- GAN (Generative Adversarial Network)
+
+## Training
+
+- Loss
+- Gradient
+- Backpropagation
+- Optimizer
+- SGD (Stochastic Gradient Descent)
+- Adam
+- AdamW
+- Learning Rate
+- Batch Size
+- Epoch
+- Iteration
+- Checkpoint
+- Early Stopping
+- Regularization
+- Dropout
+- Batch Normalization
+- Layer Normalization
+
+## Data
+
+- Dataset
+- Dataloader
+- Preprocessing
+- Augmentation
+- Normalization
+- Train/Val/Test Split
+- Cross-validation
+- Overfitting
+- Underfitting
+- Generalization
+
+## Evaluation
+
+- Accuracy
+- Precision
+- Recall
+- F1 Score
+- AUC
+- ROC
+- BLEU
+- ROUGE
+- Perplexity
+- Benchmark
+
+## Infrastructure
+
+- GPU
+- CUDA
+- TPU
+- CPU
+- VRAM
+- Distributed Training
+- Data Parallel
+- Model Parallel
+- Mixed Precision
+- FP16
+- BF16
+- Quantization
+
+## Frameworks & Libraries
+
+- PyTorch
+- TensorFlow
+- JAX
+- Hugging Face
+- Transformers
+- Diffusers
+- Accelerate
+- DeepSpeed
+- FSDP
+- vLLM
+- TensorRT
+
+## APIs & Services
+
+- API
+- REST
+- gRPC
+- SDK
+- CLI
+- Endpoint
+- Inference
+- Serving
+- Deployment
+
+## LLM Specific
+
+- Context Window
+- Token
+- BPE (Byte Pair Encoding)
+- SentencePiece
+- RLHF (Reinforcement Learning from Human Feedback)
+- DPO (Direct Preference Optimization)
+- RAG (Retrieval Augmented Generation)
+- Chain-of-Thought
+- Reasoning
+- Hallucination
+- Grounding
+
+## Computer Vision
+
+- Backbone
+- Feature Extraction
+- Object Detection
+- Segmentation
+- Classification
+- Bounding Box
+- IoU (Intersection over Union)
+- mAP (mean Average Precision)
+- OCR
+
+## NLP
+
+- NER (Named Entity Recognition)
+- POS Tagging
+- Dependency Parsing
+- Sentiment Analysis
+- Text Classification
+- Summarization
+- Translation
+- Question Answering
+
+## Usage Note
+
+Keep these terms in English when translating.
+
+Good example:
+- "Transformer 모델을 Fine-tuning하여..." (O)
+
+Bad example:
+- "변환기 모델을 미세조정하여..." (X)
+
+When context requires explanation, add Korean in parentheses:
+- "Attention(주의 메커니즘)을 통해..."

package/.claude/skills/translate-web-article/scripts/download_image.sh

@@ -0,0 +1,45 @@
+#!/bin/bash
+# Download image from URL to /tmp directory
+# Usage: download_image.sh <image_url> [output_dir]
+# Output: Prints the local file path
+
+set -e
+
+IMAGE_URL="$1"
+OUTPUT_DIR="${2:-/tmp}"
+
+if [ -z "$IMAGE_URL" ]; then
+    echo "Usage: download_image.sh <image_url> [output_dir]" >&2
+    exit 1
+fi
+
+# Generate hash from URL for unique filename
+URL_HASH=$(echo -n "$IMAGE_URL" | md5sum | cut -d' ' -f1 | head -c 12)
+
+# Extract extension from URL (default to png)
+EXT=$(echo "$IMAGE_URL" | grep -oE '\.(png|jpg|jpeg|gif|webp|svg)' | tail -1 || echo ".png")
+if [ -z "$EXT" ]; then
+    EXT=".png"
+fi
+
+# Create output directory if needed
+mkdir -p "$OUTPUT_DIR"
+
+# Generate output filename
+OUTPUT_FILE="${OUTPUT_DIR}/img_${URL_HASH}${EXT}"
+
+# Download image
+if curl -sL -o "$OUTPUT_FILE" "$IMAGE_URL"; then
+    # Verify file is not empty
+    if [ -s "$OUTPUT_FILE" ]; then
+        echo "$OUTPUT_FILE"
+        exit 0
+    else
+        echo "Error: Downloaded file is empty" >&2
+        rm -f "$OUTPUT_FILE"
+        exit 1
+    fi
+else
+    echo "Error: Failed to download image from $IMAGE_URL" >&2
+    exit 1
+fi

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yeongjaeyou/claude-code-config",
-  "version": "0.21.2",
+  "version": "0.22.0",
   "description": "Claude Code CLI custom commands, agents, and skills",
   "bin": {
     "claude-code-config": "./bin/cli.js"