kongponents

Setup Check

Before using this skill, verify the documentation is synced:

1. •Check if docs/VERSION file exists
2. •If not found: Display error message and stop
   code

   ❌ Kongponents documentation not synced.
   
   Run the following command to download documentation:
   /kongponents sync
   

3. •If found: Proceed to help user with Kongponents

Commands

/kongponents sync

Downloads and indexes Kongponents component documentation.

What it does:

1. •Clones Kong/kongponents repository (docs/components only)
2. •Generates component index
3. •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:

1. •Check if synced - Verify docs/VERSION exists first
2. •Read component index - Use docs/component-index.md to see all components
3. •Read component docs - Use docs/components/<component-name>.md for details
4. •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"

1. •Check docs/VERSION exists ✓
2. •Read docs/components/button.md
3. •Extract props section
4. •Provide formatted answer with examples

User asks: "Create a danger button"

1. •Check docs/VERSION exists ✓
2. •Read docs/components/button.md
3. •Find danger appearance prop
4. •Generate code:
   vue

   <KButton appearance="danger">
     Delete
   </KButton>
   

Update Check (Optional)

To check if documentation is outdated:

1. •Read docs/last-check.txt timestamp
2. •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

Error Handling

Missing sync:

❌ Kongponents documentation not synced.
Run: /kongponents sync

Sync failures:

• •Git not installed: "Error: git not found. Please install git first."
• •Network issues: "Error: Failed to clone repository. Check your internet connection."
• •Permission issues: "Error: Cannot write to docs/ directory."

Component not found:

• •Check docs/component-index.md for available components
• •Suggest similar component names if typo detected