Agent Skills
Dragble provides official Agent Skills for AI coding assistants. Once installed, your AI assistant gains expert-level knowledge of the Dragble Editor SDK -- producing correct integration code without hallucinated APIs or outdated patterns.
What's Included​
Five focused skills, each self-contained:
| Skill | Description |
|---|---|
dragble-integration | Add the editor to React, Vue, Angular, or vanilla JS. Events, callbacks, versioning, TypeScript types. |
dragble-custom-tools | Build custom drag-and-drop tools and property editor widgets. Template engine, property states, transformers, validators. |
dragble-export | Export HTML, JSON, plain text, image, PDF, or ZIP. Save/load designs, auto-save, design JSON structure, validation. |
dragble-config | Configure appearance, features, merge tags, fonts, localization, display conditions, collaboration, editor behavior. |
dragble-ai | Configure AI text/image generation, external AI backends, asset storage, image upload. |
Your AI agent automatically picks the right skill based on your question. No manual selection needed.
Quick Install​
npx skills add dragble/dragble-skills
The CLI auto-detects your AI tools and installs files to the correct location. See the installation guide for details.
Supported AI Tools​
| Tool | Skill Location |
|---|---|
| Claude Code | .claude/skills/ |
| OpenCode | .agents/skills/ |
| Cursor | .agents/skills/ |
| GitHub Copilot | .agents/skills/ |
| Windsurf | .windsurf/skills/ |
| Codex | .agents/skills/ |
And 50+ more agents supported by the skills CLI.
Example Prompts​
After installing, try these in your AI assistant:
- "Add the Dragble editor to my React app with save and load"
- "Create a custom product card tool with image, title, price, and buy button"
- "Set up auto-save that debounces on design changes"
- "Configure external AI callbacks for smart heading generation"
- "Enable dark theme with the indigo accent color"