Vibeyard UI Development Skill
Enforces consistent UI conventions for Vibeyard's renderer: reusable components, CSS-variable theming, and DOM patterns so AI agents don't write off-style interface code.
The project's own UI development conventions (vanilla TypeScript DOM manipulation, bans native <select>), for its contributors.
What does this skill do, and when should you use it?
This is the ui-dev skill from the Vibeyard repository (an IDE built for AI coding agents), located at .claude/skills/ui-dev/SKILL.md. It contains no executable scripts — it is a conventions document that Claude Code must load whenever a task touches src/renderer/, modifies components, or adjusts styles. The content covers the APIs of the custom dropdown and modal components, the existing button and badge CSS classes, CSS-variable theming rules, component factory and destroy patterns, text-selection preservation, and which CSS file new styles belong in. It is most useful for contributors to Vibeyard and developers building on top of its codebase.
When a triggered task involves UI or renderer files, the skill injects a set of constraints and patterns into the agent: never use native select — use createCustomSelect(); build form modals with showModal()/closeModal()/setModalError(); use showAlertBanner() for inline alert banners; reuse existing button classes like .btn-primary/.btn-secondary instead of inventing styles; use CSS variables from base.css instead of hardcoded colors; build components as factory functions that must provide a destroy() method to remove listeners; check window.getSelection() before periodic re-renders to preserve user text selection; escape user content in innerHTML with esc(); and add styles to the appropriate existing CSS file rather than creating new ones.
- A contributor using Claude Code to add a button, dropdown, or sidebar change to Vibeyard wants output consistent with the existing component system
- A maintainer asks the agent to build a new preferences-style modal and needs it to follow the showModal pattern and land styles in preferences.css
- A fork developer adds a new UI feature and requires colors to go through CSS variables so light/dark theming keeps working
- The agent needs to write a component with periodic refreshes and uses this skill to implement selection guards and destroy() cleanup, avoiding memory leaks and lost selections
- A new contributor uses the skill document to quickly learn the component structure and CSS organization of src/renderer/
What are this skill's strengths and limitations?
- Provides copy-paste component API examples (custom-select, modal, alert-banner) that reduce agent mistakes
- Mandates CSS variables and existing button/badge classes, protecting theme consistency and preventing style fragmentation
- Covers real engineering details: destroy() cleanup, innerHTML escaping, text-selection preservation
- Includes an explicit mapping of which CSS file new styles belong in
- Tightly bound to Vibeyard's components and style conventions — little direct value for other projects
- Pure documentation skill with no scripts or automated validation; compliance depends on the agent following it
- No tests or runnable examples included to verify the conventions are enforced
How do you install this skill?
The skill ships with the vibeyard repository: after cloning https://github.com/elirantutia/vibeyard, it is already present at .claude/skills/ui-dev/. Opening the repository in Claude Code makes it discoverable. To reuse it in another project, copy the ui-dev folder into that project's .claude/skills/ directory. No other installation methods are documented.
How do you use this skill?
No manual invocation is needed: the SKILL.md description states it must be used whenever a task involves UI development, component changes, modals, CSS styling, or any file in src/renderer/. In Claude Code, simply make a request such as "add a dropdown to the sidebar", "create a confirmation modal", or "update the styling of this component" and the skill's guidance will steer the agent to the relevant component APIs and CSS conventions.