Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →elirantutia/ui-dev
This skill MUST be used whenever the task involves UI development, renderer code changes, adding or modifying components, creating modals or dialogs, working with CSS styles, building new UI features, or touching any file in src/renderer/.
Passed 22 of 22 test cases with the skill, and 5 of 22 without it.
and 27 more in the full report
17 fixed5 passed either way0 still failing0 broke
Tokens, turns and time describe resource use, not a dollar price.
One of 17 test cases the skill fixed. Same model, same prompt, with and without the skill.
I'm adding custom styles for a new form dialog and path autocomplete menu in `src/renderer/`. Which stylesheet should hold these styles?
| Checked | Without skill | With skill |
|---|---|---|
| Places modal and autocomplete styles into styles/modals.css | Missed | Passed |
| Avoids creating a new CSS file for modal field styling | Passed | Passed |
The instructions your model reads when the skill loads.
This project uses vanilla TypeScript DOM manipulation — no framework. All UI lives in src/renderer/. Follow the patterns and reuse the components documented below.
Never use native <select>. Always use the custom select component:
import { createCustomSelect } from './components/custom-select';
const select = createCustomSelect('my-select', [
{ value: 'a', label: 'Option A' },
{ value: 'b', label: 'Option B' },
{ value: 'c', label: 'Disabled', disabled: true },
], 'a'); // default value
// select.getValue() — get current value
// select.destroy() — cleanup
src/renderer/components/custom-select.ts.custom-select, .custom-select-trigger, .custom-select-dropdown, .custom-select-itemUse showModal() for generic modals with form fields:
import { showModal, closeModal, setModalError } from './components/modal';
showModal('My Title', [
{ id: 'name', label: 'Name', type: 'text', placeholder: 'Enter name' },
{ id: 'option', label: 'Option', type: 'select', options: [...] },
{ id: 'enabled', label: 'Enable feature', type: 'checkbox' },
], (values) => {
// values is Record<string, string>
if (!values.name) {
setModalError('name', 'Name is required');
test cases passed, vs 5 / 22 without
More skills from the same source and nearby in the registry, with their headline benchmark lift.