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/
How do you install this skill?
- Local filesystem
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.
tmp="$(mktemp -d)"
git clone --depth 1 https://github.com/elirantutia/vibeyard.git "$tmp"
mkdir -p ~/.claude/skills
cp -R "$tmp/.claude/skills/ui-dev" ~/.claude/skills/
rm -rf "$tmp"Generated from the source repository and skill path; it copies only this skill's folder. If the author's install steps above differ, follow those first. To scope it to one project, replace ~/.claude/skills with that project's .claude/skills.
How do you use this skill?
Once installed, send your agent any of these to trigger it:
- add a dropdown to the sidebar
- create a confirmation modal
- update the styling of this component
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.
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 does this skill compare with similar options?
Side by side with related skills; every score comes from the same FSRS standard.
| Skill | FS score | Stars | Last updated | License |
|---|---|---|---|---|
| Vibeyard UI Development Skill this page | 56 · Use with care | ★ 1.4k | 1mo ago | MIT |
| Vibeyard: Add npm Dependency Skill | 55 · Use with care | ★ 1.4k | 1mo ago | MIT |
| VS Code Unit Test Runner ✓ Microsoft · Official | 55 · Use with care | ★ 194k | 11d ago | MIT |
| VS Code Smoke Test Failure Diagnosis ✓ Microsoft · Official | 45 · Not recommended | ★ 194k | 11d ago | MIT |
| Frontend Conventions Skill | 50 · Use with care | ★ 5.2k | 11d ago | Apache-2.0 |
How did FollowSkills review this skill?
The project's own UI development conventions (vanilla TypeScript DOM manipulation, bans native <select>), for its contributors.
Open a dimension to read why it scored that way
Evidence confidence：Low — Mostly static review, author material or a limited demo; useful for discovery, not high-risk decisions.
This review was completed under FSRS 1.0. Dimension scores are not converted; it is queued for re-review under FSRS 2.0.
See the full review method →