Agent skill
new-component
How to write a new component of GPUI Component.
Install this agent skill to your Project
npx add-skill https://github.com/johnlindquist/script-kit-next/tree/main/vendor/gpui-component/.claude/skills/new-component
SKILL.md
Rules
- Based on existing components in
crates/ui/srcfolder, e.g.:Button,Select. - The UI and API follow the existing components style, we also based on Shadcn UI style.
- If the new component are simple, we'd like to use stateless element like the Button.
- If the new component are complex with data, we'd like to use stateful element like the Select and SelectState.
- Keep same API style like other elements.
- Write a new component story in story folder.
- Write document.
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
johnlindquist/script-kit-next
Generate Component Documentation
Based on existing docs styles and specific API implementations, and referencing same name stories, generate comprehensive documentation for the new component.
johnlindquist/script-kit-next
Generate Component Story
Generate a comprehensive story for a new component for as example.
johnlindquist/script-kit-next
troubleshooting
Diagnose and fix common Script Kit issues. Use when the user reports bugs, crashes, missing features, or unexpected behavior in Script Kit GPUI.
johnlindquist/script-kit-next
script-authoring
Create and manage TypeScript scripts for Script Kit. Use when the user wants to write a new script, edit an existing script, or understand Script Kit's SDK and metadata system.
johnlindquist/script-kit-next
agents
Create mdflow-backed agent files for Script Kit. Use when the user wants to create AI agents, configure agent backends (Claude, Gemini, Codex), or manage agent metadata.
johnlindquist/script-kit-next
scriptlets
Create extension bundles (scriptlets) for text expansions, snippets, shell commands, and lightweight helpers in a single markdown file. Use when the user wants quick shortcuts or grouped utilities.
Didn't find tool you were looking for?