@leejungkiin/awkit 1.6.3 → 1.6.5

package/skills/app-store-screenshots/SKILL.md

@@ -0,0 +1,86 @@
+---
+name: app-store-screenshots
+description: Specializes in generating high-conversion App Store and Google Play screenshots using Next.js and html-to-image. Handles design, copywriting, and bulk export at correct resolutions.
+version: 1.0.0
+trigger: conditional
+activation_keywords:
+  - "app store screenshots"
+  - "play store screenshots"
+  - "marketing screenshots"
+  - "marketing assets"
+  - "screenshot generator"
+  - "android screenshots"
+  - "ios screenshots"
+---
+
+# 📱 App Store & Google Play Screenshots Generator
+
+This skill empowers you to build professional screenshot generators that render as **advertisements**, not just UI showcases. It leverages Next.js and `html-to-image` to ensure high-fidelity exports at all required Apple and Google resolutions.
+
+## 🚀 Activation Triggers
+Trigger this skill when asked to:
+- "Build/Create App Store screenshots"
+- "Generate marketing assets for the Play Store"
+- "Design exportable screenshots for iOS/Android"
+
+## 🛠️ Resources
+- **Mockup**: iPhone mockup at `./resources/mockup.png`.
+- **Note**: All other device frames (Android, iPad, Tablet) are rendered via CSS-only components defined in this skill.
+
+## 📋 Interaction Flow
+
+### Phase 1: Brand & Asset Discovery
+Before any code is written, you MUST collect:
+1. **Source Screenshots**: PNG captures of the actual app UI.
+2. **App Icon**: PNG icon for branding slides.
+3. **Brand Palette**: Accent, background, and text colors.
+4. **Style Direction**: e.g., Dark/Moody, Clean/Minimal, Bold/Vibrant.
+5. **Feature Priority**: Top 3-5 outcomes/benefits the app provides.
+
+### Phase 2: Narrative & Copywriting
+- **Rule**: One idea per slide.
+- **Copy**: 3-5 words per headline. Readable at thumbnail size.
+- **Tone**: Focus on outcomes, not feature lists.
+
+### Phase 3: Scaffolding (Next.js)
+The generator is always a single-file Next.js page (`page.tsx`) for simplicity.
+- **Library**: `html-to-image` (Native SVG serialization).
+- **Setup**: `bun create-next-app` (preferred) or `npx`.
+
+### Phase 4: Resolution-Independent Design
+Use the following coordinates and sizing logic provided in the reference instructions below.
+
+---
+
+## 📖 Reference Instructions (The Core Engine)
+
+Build a Next.js page that renders App Store **and** Google Play screenshots as **advertisements** (not UI showcases) and exports them via `html-to-image` at Apple's and Google's required resolutions.
+
+### Supported Devices
+- **iPhone** (1320x2868)
+- **iPad** (2064x2752)
+- **Android Phone** (1080x1920)
+- **Android Tablet 7" & 10"** (Portrait & Landscape)
+- **Feature Graphic** (1024x500)
+
+### ⚠️ Critical Implementation Rules
+- **Double-Capture Trick**: `html-to-image` requires two sequential calls to warm up fonts/images.
+- **Data URI Preloading**: ALL images (mockups, screenshots) MUST be converted to base64 data URIs at load time to prevent blank exports.
+- **Canvas Scaling**: Use `ResizeObserver` and `transform: scale()` for the preview grid, but render at true resolution for export.
+
+### [Core Device Geometries]
+(Included in full in the implementation)
+- iPhone Mockup Ratios (based on `./resources/mockup.png`)
+- CSS-only frame components for iPad and Android.
+
+---
+
+> [!TIP]
+> **Narrative Arc**: Start with a Hero (Main Benefit), follow with Differentiators, and end with a "Trust/More Features" slide.
+
+> [!IMPORTANT]
+> **Localization**: Supports RTL-native layouts for Arabic/Hebrew by mirroring asymmetric compositions intentionally.
+
+---
+
+*This skill was shipped by Antigravity from ParthJadhav/app-store-screenshots.*

package/skills/aseprite-artist/SKILL.md

@@ -0,0 +1,346 @@
+---
+name: aseprite-artist
+description: "Pixel art creation, animation, and export via Aseprite + pixel-mcp MCP Server. Supports natural language drawing, retro palettes (NES, Game Boy, PICO-8, C64), dithering, shading, antialiasing, animation frames, and game-engine spritesheet export. Keywords: pixel art, sprite, aseprite, dithering, palette, animation, mascot, retro, 8-bit, 16-bit, pixel, spritesheet, game asset, icon."
+version: 1.0.0
+trigger: conditional
+activation_keywords:
+  - "pixel art"
+  - "sprite"
+  - "aseprite"
+  - "pixel"
+  - "dithering"
+  - "retro palette"
+  - "spritesheet"
+  - "game asset"
+  - "mascot"
+  - "8-bit"
+  - "16-bit"
+  - "pixel icon"
+  - "walk cycle"
+  - "idle animation"
+  - "NES palette"
+  - "Game Boy"
+  - "PICO-8"
+---
+
+# 🎨 Aseprite Artist — Pixel Art Creation Skill
+
+> Adapted from [pixel-plugin](https://github.com/willibrandon/pixel-plugin) by Brandon Williams (MIT).
+> Powered by [pixel-mcp](https://github.com/willibrandon/pixel-mcp) — 40+ MCP tools for Aseprite.
+
+## Purpose
+
+Enable AI to create, edit, animate, and export pixel art sprites through natural language using the **pixel-mcp** MCP server as the bridge to Aseprite. This skill consolidates what was originally 4 separate Claude Code skills (creator, animator, professional, exporter) into a single, unified Antigravity skill.
+
+## Prerequisites
+
+1. **Aseprite v1.3.0+** installed on the system.
+2. **pixel-mcp** MCP server configured and running.
+3. Config file at `~/.config/pixel-mcp/config.json` with valid `aseprite_path`.
+
+### First-Time Setup
+
+If user has never set up pixel-mcp, run the `/pixel-setup` workflow or do it manually:
+
+```bash
+# 1. Install pixel-mcp (Go binary — download from releases or build)
+# GitHub: https://github.com/willibrandon/pixel-mcp/releases
+
+# 2. Create config
+mkdir -p ~/.config/pixel-mcp
+cat > ~/.config/pixel-mcp/config.json << 'EOF'
+{
+  "aseprite_path": "/Applications/Aseprite.app/Contents/MacOS/aseprite",
+  "temp_dir": "/tmp/pixel-mcp",
+  "timeout": 30,
+  "log_level": "info"
+}
+EOF
+
+# 3. Add to MCP config (mcp_config.json) — the "aseprite" server entry
+```
+
+### MCP Config Entry
+
+Add to `mcp_config.json`:
+
+```json
+{
+  "mcpServers": {
+    "aseprite": {
+      "command": "/path/to/pixel-mcp",
+      "args": []
+    }
+  }
+}
+```
+
+Or if using npx (if published):
+```json
+{
+  "mcpServers": {
+    "aseprite": {
+      "command": "npx",
+      "args": ["-y", "pixel-mcp"]
+    }
+  }
+}
+```
+
+---
+
+## Tool Reference (40+ MCP Tools)
+
+All tools are prefixed with `mcp__aseprite__` in the MCP protocol.
+
+### Canvas & Layer Management
+| Tool | Purpose |
+|------|---------|
+| `create_canvas` | Create new sprite (width, height, color_mode: RGB/Grayscale/Indexed) |
+| `add_layer` | Add named layer to sprite |
+| `delete_layer` | Remove layer (cannot delete last layer) |
+| `flatten_layers` | Merge all layers into one |
+| `get_sprite_info` | Get sprite dimensions, color mode, layer count, frame count |
+
+### Drawing Primitives
+| Tool | Purpose |
+|------|---------|
+| `draw_pixels` | Batch draw individual pixels (coordinates + colors) |
+| `draw_line` | Draw line between two points |
+| `draw_rectangle` | Draw filled or outline rectangle |
+| `draw_circle` | Draw filled or outline circle/ellipse |
+| `draw_contour` | Draw polyline/polygon connecting multiple points |
+| `fill_area` | Flood fill connected area (paint bucket) |
+
+### Selection & Clipboard
+| Tool | Purpose |
+|------|---------|
+| `select_rectangle` | Rectangle selection |
+| `select_ellipse` | Ellipse selection |
+| `select_all` | Select entire canvas |
+| `deselect` | Clear selection |
+| `move_selection` | Move selection area |
+| `cut_selection` | Cut selected area to clipboard |
+| `copy_selection` | Copy selected area to clipboard |
+| `paste_clipboard` | Paste clipboard content |
+
+### Professional Pixel Art
+| Tool | Purpose |
+|------|---------|
+| `analyze_reference` | Extract palettes, brightness maps, edge detection from images |
+| `draw_with_dither` | Apply dithering patterns (Bayer 2x2/4x4/8x8, Floyd-Steinberg, checkerboard, textures) |
+| `downsample_image` | Convert image to pixel art by reducing resolution |
+| `quantize_palette` | Reduce colors intelligently (median_cut, k-means, octree) |
+| `apply_auto_shading` | Automatic geometry-based shading (cell/smooth/soft, 8 directions) |
+| `suggest_antialiasing` | Detect jagged edges and suggest smoothing colors |
+| `analyze_palette_harmonies` | Analyze color harmony (complementary/triadic/analogous) |
+
+### Palette Management
+| Tool | Purpose |
+|------|---------|
+| `get_palette` | Read current palette |
+| `set_palette` | Set entire palette (array of hex colors) |
+| `set_palette_color` | Change single palette entry |
+| `add_palette_color` | Add color to palette |
+| `sort_palette` | Sort by hue/luminance |
+
+### Transform & Filter
+| Tool | Purpose |
+|------|---------|
+| `flip_sprite` | Flip horizontal/vertical |
+| `rotate_sprite` | Rotate sprite |
+| `scale_sprite` | Scale up/down |
+| `crop_sprite` | Crop to content |
+| `resize_canvas` | Resize canvas without scaling content |
+| `apply_outline` | Add outline around opaque pixels |
+
+### Animation
+| Tool | Purpose |
+|------|---------|
+| `add_frame` | Add new animation frame |
+| `delete_frame` | Remove frame |
+| `duplicate_frame` | Copy frame |
+| `set_frame_duration` | Set frame timing (ms) |
+| `create_tag` | Create animation tag (idle, walk, etc.) |
+| `delete_tag` | Remove animation tag |
+| `link_cel` | Link cel between frames (shared content) |
+
+### Export
+| Tool | Purpose |
+|------|---------|
+| `export_sprite` | Export as PNG/GIF/JPG/BMP with scale |
+| `export_spritesheet` | Export spritesheet (horizontal/vertical/grid/packed layout) |
+| `import_image` | Import external image into sprite |
+| `save_as` | Save sprite in Aseprite format |
+| `get_pixels` | Read pixel data for verification |
+
+---
+
+## Workflow: Creating Pixel Art
+
+### Phase 1: Understand Requirements
+- What size? (16x16 icon, 32x32 character, 64x64 detailed, 128x128 scene)
+- What style? (modern RGB vs retro indexed)
+- What palette? (custom, NES, Game Boy, PICO-8, etc.)
+- Animation needed? (idle, walk, attack, etc.)
+
+### Phase 2: Canvas Setup
+1. `create_canvas` with appropriate width, height, color_mode
+2. `set_palette` if using retro/indexed mode
+3. `add_layer` for organization (Background, Character, Effects)
+
+### Phase 3: Drawing
+1. Start with silhouette using `draw_rectangle`, `draw_circle`, `draw_contour`
+2. Refine with `draw_pixels` for details
+3. Use `fill_area` for large regions
+4. Apply `draw_with_dither` for textures
+
+### Phase 4: Polish
+1. `apply_auto_shading` for quick lighting (or manual shading with layers)
+2. `suggest_antialiasing` for smooth edges on larger sprites
+3. `quantize_palette` if reducing colors
+4. `sort_palette` for organized color table
+
+### Phase 5: Animate (if needed)
+1. `add_frame` for each animation frame
+2. `set_frame_duration` for timing (typical: 80-150ms per frame)
+3. `create_tag` to label animation sequences
+4. Use `duplicate_frame` as starting point, then modify
+
+### Phase 6: Export
+1. `export_sprite` for single image (PNG with scale)
+2. `export_spritesheet` for game engines (grid layout + JSON)
+3. `export_sprite` with GIF format for animated preview
+
+---
+
+## Retro Palette Reference
+
+### Console Palettes
+| Name | Colors | Hex Values |
+|------|--------|------------|
+| **Game Boy** | 4 | `#0F380F`, `#306230`, `#8BAC0F`, `#9BBC0F` |
+| **Game Boy Gray** | 4 | `#000000`, `#555555`, `#AAAAAA`, `#FFFFFF` |
+| **NES** | 54 | Full NES palette (use `set_palette` with NES hex array) |
+| **C64** | 16 | Commodore 64 palette |
+| **CGA** | 4 | IBM CGA palette |
+| **SNES** | 256 | Super Nintendo full palette |
+
+### Modern Pixel Art Palettes
+| Name | Colors | Description |
+|------|--------|-------------|
+| **PICO-8** | 16 | Fantasy console, very popular |
+| **Sweetie 16** | 16 | Popular warm palette by GrafxKid |
+| **DB16** | 16 | DawnBringer's 16 colors |
+| **DB32** | 32 | DawnBringer's 32 colors |
+
+### Generic
+| Name | Colors |
+|------|--------|
+| **retro16** | 16 generic retro colors |
+| **retro8** | 8 generic retro colors |
+| **grayscale4/8/16** | Grayscale variants |
+
+> 📋 Full palette hex values: see `resources/palettes.md`
+
+---
+
+## Dithering Patterns (16 Available)
+
+| Category | Patterns |
+|----------|----------|
+| **Bayer (Ordered)** | bayer_2x2, bayer_4x4, bayer_8x8 |
+| **Error Diffusion** | floyd_steinberg |
+| **Simple** | checkerboard |
+| **Textures** | grass, water, stone, cloud, brick, dots, diagonal, cross, noise, lines |
+
+**When to use which:**
+- **Bayer**: Retro aesthetic, regular patterns, backgrounds
+- **Floyd-Steinberg**: Smooth gradients, natural images
+- **Textures**: Specific material simulation
+- **Checkerboard**: Quick 50% color mix
+
+---
+
+## Shading Quick Reference
+
+| Style | Use When | Settings |
+|-------|----------|----------|
+| **Cell (Hard)** | Cartoon, bold sprites | `style: "hard"` |
+| **Smooth** | Realistic, gradual lighting | `style: "smooth"` |
+| **Soft (Pillow)** | Rounded objects, UI elements | `style: "soft"` |
+
+**Light Directions:** top_left, top, top_right, left, right, bottom_left, bottom, bottom_right
+
+**Best Practice:** Default to `top_left` light source, `intensity: 0.4`, `style: "smooth"`, `hue_shift: true`.
+
+---
+
+## Size Recommendations
+
+| Use Case | Dimensions | Notes |
+|----------|------------|-------|
+| Icon | 16x16, 24x24, 32x32 | High contrast, simple shapes |
+| Character Sprite | 32x32, 48x48, 64x64 | Room for detail + animation |
+| Tile | 16x16, 32x32 | Must tile seamlessly |
+| Mascot | 64x64, 128x128 | Detailed, personality |
+| Scene / Background | 256x144, 320x180 | Retro resolution |
+| Profile Avatar | 64x64, 128x128 | Circular crop friendly |
+
+---
+
+## Export Formats
+
+| Format | Best For | Options |
+|--------|----------|---------|
+| **PNG** | Single frame, transparency | `scale`: 1x, 2x, 4x, 8x |
+| **GIF** | Animated preview | `fps`, `loop` |
+| **Spritesheet** | Game engines | Layout: horizontal, vertical, grid, packed |
+| **JSON** | Game metadata | Compatible with: Aseprite, Unity, Godot, TexturePacker |
+
+---
+
+## Integration with Antigravity Ecosystem
+
+### With visual-design-gate (Gate 2.5)
+When designing UI that needs pixel art assets:
+1. Use this skill to generate icons, sprites, or mascots
+2. Export as PNG with appropriate scale
+3. Reference exported files in design specifications
+
+### With mascot-creator skill
+Chain this skill for pixel-art style mascots:
+1. mascot-creator defines character concept
+2. aseprite-artist creates the pixel art version
+3. Add animation states (idle, wave, blink)
+4. Export transparent PNGs + animated GIF
+
+### With project assets
+When a project needs game-ready assets:
+1. Create sprite with this skill
+2. Export spritesheet + JSON metadata
+3. Copy to project's assets directory
+4. Reference in code (Compose, SwiftUI, React, etc.)
+
+---
+
+## Error Handling
+
+| Error | Cause | Fix |
+|-------|-------|-----|
+| "Aseprite not found" | Wrong path in config | Update `~/.config/pixel-mcp/config.json` |
+| "MCP server not responding" | Server not running | Restart pixel-mcp, check `bin/pixel-mcp --health` |
+| "Export failed" | No sprite created | Create sprite first before exporting |
+| "Cannot delete last layer" | Only one layer | Add another layer before deleting |
+| "Palette index out of range" | Index > palette size | Check palette size with `get_palette` first |
+
+---
+
+## Anti-Patterns (AVOID)
+
+- ❌ Drawing pixel-by-pixel for large areas → Use `fill_area` or `draw_rectangle`
+- ❌ Using `set_palette` to convert colors → Use `quantize_palette` (it remaps pixels too)
+- ❌ Antialiasing on 16x16 sprites → Too small, looks blurry
+- ❌ Floyd-Steinberg on 4-color palette → Use Bayer for very limited palettes
+- ❌ Pillow shading (light from all edges) → Pick one light direction
+- ❌ Pure black shadows / pure white highlights → Use hue-shifted dark/light colors

package/skills/aseprite-artist/resources/examples.md

@@ -0,0 +1,188 @@
+# Aseprite Artist — Example Workflows
+
+## Example 1: Game Boy Character Sprite
+
+**Request:** "Tạo một character sprite Game Boy 48x48"
+
+**Steps:**
+1. Create 48x48 Indexed canvas
+2. Set Game Boy palette: `["#0F380F", "#306230", "#8BAC0F", "#9BBC0F"]`
+3. Add layers: "Background", "Character", "Details"
+4. Draw character silhouette on Character layer
+5. Add details (eyes, mouth, accessories)
+6. Export as PNG at 4x scale
+
+**MCP Calls:**
+```
+create_canvas(width: 48, height: 48, color_mode: "Indexed")
+set_palette(colors: ["#0F380F", "#306230", "#8BAC0F", "#9BBC0F"])
+add_layer(name: "Background")
+add_layer(name: "Character")
+add_layer(name: "Details")
+# ... drawing operations ...
+export_sprite(format: "png", scale: 4, output_path: "character.png")
+```
+
+---
+
+## Example 2: Animated Idle Mascot
+
+**Request:** "Tạo mascot 64x64 với animation idle 4 frames"
+
+**Steps:**
+1. Create 64x64 RGB canvas
+2. Draw mascot character on frame 1
+3. Duplicate frame → make subtle breathing motion (frame 2)
+4. Duplicate frame 1 → neutral pose (frame 3)
+5. Duplicate frame → opposite breathing (frame 4)
+6. Set frame durations to 150ms each
+7. Create "idle" animation tag
+8. Export as GIF
+
+**MCP Calls:**
+```
+create_canvas(width: 64, height: 64, color_mode: "RGB")
+# Draw mascot on frame 1...
+duplicate_frame(frame: 1)
+# Modify frame 2 (slightly expand body 1px)
+duplicate_frame(frame: 1)
+# Frame 3 stays neutral
+duplicate_frame(frame: 2)
+# Frame 4 mirror of frame 2
+set_frame_duration(frame: 1, duration: 150)
+set_frame_duration(frame: 2, duration: 150)
+set_frame_duration(frame: 3, duration: 150)
+set_frame_duration(frame: 4, duration: 150)
+create_tag(name: "idle", from_frame: 1, to_frame: 4)
+export_sprite(format: "gif", output_path: "mascot-idle.gif")
+```
+
+---
+
+## Example 3: NES-Style Game Tile
+
+**Request:** "Tạo tile brick wall 16x16 NES style"
+
+**Steps:**
+1. Create 16x16 Indexed canvas
+2. Set NES brick colors (subset of NES palette)
+3. Draw brick pattern (3 rows of offset rectangles)
+4. Apply Bayer 2x2 dithering for mortar texture
+5. Export at 4x scale
+
+**MCP Calls:**
+```
+create_canvas(width: 16, height: 16, color_mode: "Indexed")
+set_palette(colors: ["#000000", "#882400", "#A81000", "#F87858", "#FCA044"])
+draw_rectangle(x: 0, y: 0, w: 16, h: 16, color: "#A81000", filled: true)
+# Draw brick lines and mortar...
+draw_with_dither(pattern: "bayer_2x2", color1: "#A81000", color2: "#882400", region: {...})
+export_sprite(format: "png", scale: 4, output_path: "brick-tile.png")
+```
+
+---
+
+## Example 4: Modern Sword with Shading
+
+**Request:** "Vẽ thanh kiếm pixel art 64x64 với shading"
+
+**Steps:**
+1. Create 64x64 RGB canvas
+2. Draw blade silhouette (silver/white triangular shape)
+3. Draw hilt (gold rectangle + guard)
+4. Apply auto-shading from top-left
+5. Add antialiasing to blade edges
+6. Export at 2x scale
+
+**MCP Calls:**
+```
+create_canvas(width: 64, height: 64, color_mode: "RGB")
+add_layer(name: "Blade")
+add_layer(name: "Hilt")
+# Draw blade shape...
+# Draw hilt shape...
+apply_auto_shading(light_direction: "top_left", intensity: 0.5, style: "smooth", hue_shift: true)
+suggest_antialiasing(auto_apply: true)
+export_sprite(format: "png", scale: 2, output_path: "sword.png")
+```
+
+---
+
+## Example 5: Spritesheet for Unity
+
+**Request:** "Tạo character 32x32 PICO-8 với 8-frame run cycle, export cho Unity"
+
+**Steps:**
+1. Create 32x32 Indexed canvas
+2. Set PICO-8 palette
+3. Draw character pose frame 1
+4. Create 7 more frames for run cycle
+5. Set frame durations to 80ms
+6. Tag as "run"
+7. Export spritesheet (grid layout) + JSON metadata
+
+**MCP Calls:**
+```
+create_canvas(width: 32, height: 32, color_mode: "Indexed")
+set_palette(colors: ["#000000", "#1D2B53", "#7E2553", ...PICO-8 full palette...])
+# Draw frame 1 (neutral standing)
+# Add frames 2-8 with progressive leg/arm positions
+create_tag(name: "run", from_frame: 1, to_frame: 8)
+set_frame_duration(frame: 1, duration: 80)  # repeat for all frames
+export_spritesheet(
+  layout: "grid",
+  output_path: "character-run.png",
+  json_path: "character-run.json",
+  json_format: "unity"
+)
+```
+
+---
+
+## Example 6: App Icon from Reference Image
+
+**Request:** "Chuyển logo này thành pixel art icon 32x32"
+
+**Steps:**
+1. Import reference image
+2. Analyze reference (extract palette, brightness map)
+3. Downsample to 32x32
+4. Quantize to 16 colors
+5. Clean up edges manually
+6. Export at multiple scales (1x, 2x, 4x)
+
+**MCP Calls:**
+```
+import_image(path: "logo.png")
+analyze_reference(path: "logo.png", analyses: ["palette", "brightness"])
+downsample_image(target_width: 32, target_height: 32)
+quantize_palette(target_colors: 16, algorithm: "k_means", dither: false)
+# Manual cleanup with draw_pixels...
+export_sprite(format: "png", scale: 1, output_path: "icon-1x.png")
+export_sprite(format: "png", scale: 2, output_path: "icon-2x.png")
+export_sprite(format: "png", scale: 4, output_path: "icon-4x.png")
+```
+
+---
+
+## Example 7: Texture Dithering
+
+**Request:** "Tạo texture stone wall 32x32 với dithering"
+
+**Steps:**
+1. Create 32x32 RGB canvas
+2. Set stone color palette (browns, grays)
+3. Draw base stone shapes
+4. Apply stone dithering texture
+5. Add depth with Bayer 4x4 dithering
+6. Export as tileable PNG
+
+**MCP Calls:**
+```
+create_canvas(width: 32, height: 32, color_mode: "RGB")
+set_palette(colors: ["#333333", "#555555", "#777777", "#999999", "#666644"])
+# Draw stone block shapes...
+draw_with_dither(pattern: "stone", color1: "#555555", color2: "#777777", region: {...})
+draw_with_dither(pattern: "bayer_4x4", color1: "#333333", color2: "#555555", region: {...})
+export_sprite(format: "png", scale: 2, output_path: "stone-wall.png")
+```