7K Skill Planner

A standalone skill planning tool for Seven Knights (7K)

Live Demo | Report Issue

Overview

7K Skill Planner is a browser-based tool designed to help Seven Knights players plan and visualize their skill builds. Targeted at Thai players who capture game screenshots, auto-detect skills, select/reorder, and export as PNG with tier calculation.

Screenshots

Auto-Detection

Capture your game screen and the app automatically detects skills in a 2×5 grid pattern with overlay buttons.

Export Result

Drag to reorder skills, enter your name, and export as a formatted PNG image with tier calculation.

Features

• Screen Capture Integration - Capture game screenshots directly using the Screen Capture API
• Auto-Detection - Automatically detects skills in a 2×5 grid pattern with overlay buttons
• Click-to-Capture - Simply click on skills to capture them (repeatable selection supported)
• Drag & Drop Reordering - Easily rearrange captured skills via drag and drop
• Tier Calculation - Automatically calculates skill progression: (skills - 1) × 4 (max 70)
• Export as Image - Download your skill plan as formatted PNG: [name]_จบ[tier]_70.png
• Copy to Clipboard - Copy image directly to clipboard for easy sharing to Discord/social media
• PWA Support - Install as an app, works offline with service worker caching
• Standalone - Single HTML file, no server or installation required
• Privacy Focused - All processing happens locally in your browser

How to Use

Online (Recommended)

1. Visit the live demo page
2. Click the 📸 จับภาพหน้าจอ (Screenshot) button
3. Select the window/screen to capture
4. Click on each skill you want to add to your build
5. Drag skills to reorder as needed
6. Enter your character name
7. Click 👁️ ดูตัวอย่างก่อนดาวน์โหลด to preview
8. Click 📥 ดาวน์โหลด to download or 📋 คัดลอก to copy to clipboard

Offline

1. Download index.html
2. Open it in any modern browser (Chrome, Edge, Firefox)
3. Follow the same steps as above

Note: PWA features (offline support, install prompt) require HTTPS or localhost.

Example Output

7K Skill Order
ชื่อ: น่องไก้
[Skill1] [Skill2] [Skill3] ... [SkillN]
10 Skills - จบ 36/70 เทิร์น

Export filename: น่องไก้_จบ36_70.png

Version History

Browser Support

Note: Screen Capture API requires HTTPS or localhost. Safari has limited support for screen capture and PWA features.

Technical Details

• Built with: Vanilla HTML, CSS, JavaScript (no frameworks)
• Dependencies: None
• Pattern Detection: 2×5 grid at startX: 347, startY: 365, gapX: 173, gapY: 70
• Tier Formula: (skill_count - 1) * 4 with maximum 70
• Canvas API - Image manipulation and cropping
• Screen Capture API - navigator.mediaDevices.getDisplayMedia()
• Drag and Drop API - Skill reordering
• Service Worker - Offline caching strategy

Project Structure

7k-autoskill/
├── index.html            # Main application
├── manifest.json         # PWA manifest
├── sw.js                 # Service worker for offline support
├── Example.png           # Example screenshot reference
├── Finish.png            # Finished state reference
├── AGENTS.md             # Development guide & credits
├── README.md             # This file
├── LICENSE               # MIT License
└── .gitignore            # Git ignore rules

Deployment

# Deploy to Vercel (auto-deploy on push)
git add -A && git commit -m "message" && git push

Live Demo: https://7k-autoskill.vercel.app/

License

This project is licensed under the MIT License - see the LICENSE file for details.

Credits

Created by snowb4ll for the Seven Knights community. See AGENTS.md for full development guide and credits.

Contributing

Contributions are welcome! Feel free to:

• Report bugs
• Suggest new features
• Submit pull requests

Disclaimer

This is an unofficial fan tool. Seven Knights is a trademark of its respective owners.