AI SummaryKongponents is a Kong Vue component library reference skill that helps developers quickly access component props, slots, events, and code examples within Claude Code. It's essential for teams building with Kong's Vue components.
Install
Copy this and paste it into Claude Code, Cursor, or any AI assistant:
I want to install the "kongponents" skill in my project. Please run this command in my terminal: # Install skill into the correct directory mkdir -p .claude/skills/kongponents-skill && curl --retry 3 --retry-delay 2 --retry-all-errors -o .claude/skills/kongponents-skill/SKILL.md "https://raw.githubusercontent.com/2eha0/kongponents-skill/main/SKILL.md" Then restart Claude Code (or reload the window in Cursor) so the skill is picked up.
Description
Kong Vue component library reference - provides props, slots, events, and code examples for Kongponents components
Setup Check
Before using this skill, verify the documentation is synced: • Check if docs/VERSION file exists • If not found: Display error message and stop ` ❌ Kongponents documentation not synced. Run the following command to download documentation: /kongponents sync ` • If found: Proceed to help user with Kongponents
/kongponents sync
Downloads and indexes Kongponents component documentation. What it does: • Clones Kong/kongponents repository (docs/components only) • Generates component index • Creates searchable reference in docs/components/ Usage: ` /kongponents sync ` Implementation: • Use Bash tool to execute: bash scripts/sync.sh • Display progress output to user • Report success or failure First time setup: Run this command once after installing the skill.
Component Reference
After syncing, component documentation is available in docs/components/. To help users: • Check if synced - Verify docs/VERSION exists first • Read component index - Use docs/component-index.md to see all components • Read component docs - Use docs/components/<component-name>.md for details • Provide examples - Generate Vue code using Kongponents patterns Common components: • KButton - Button with various appearances and sizes • KInput - Text input with validation states • KModal - Modal dialog with overlay • KSelect - Dropdown select with search • KTable - Data table component (deprecated, use KTableData) • KAlert - Alert/notification messages • KBadge - Status badges • KCard - Card container • KIcon - Icon component • ... and 30+ more Example workflow: User asks: "Show me KButton props" • Check docs/VERSION exists ✓ • Read docs/components/button.md • Extract props section • Provide formatted answer with examples User asks: "Create a danger button" • Check docs/VERSION exists ✓ • Read docs/components/button.md • Find danger appearance prop • Generate code: `vue <KButton appearance="danger"> Delete </KButton> `
Update Check (Optional)
To check if documentation is outdated: • Read docs/last-check.txt timestamp • If more than 86400 seconds (24 hours) old: • Show message: "Kongponents docs may be outdated (last synced X days ago). Run /kongponents sync to update." • User can choose to continue or sync
Discussion
Health Signals
My Fox Den
Community Rating
Sign in to rate this booster