From dx-webdev
Use optional DevExtreme jQuery option examples when the user explicitly asks for recipes, starter configurations, or sample option sets.
How this skill is triggered — by the user, by Claude, or both
Slash command
/dx-webdev:dx-options-recipesThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Use this skill only when the user explicitly asks for recipes, starter configurations, or sample option sets. For targeted UX reconfiguration, prefer the capability-map skill so the agent selects options from intent and constraints instead of copying a canned surface.
Use this skill only when the user explicitly asks for recipes, starter configurations, or sample option sets. For targeted UX reconfiguration, prefer the capability-map skill so the agent selects options from intent and constraints instead of copying a canned surface.
Enterprise dxDataGrid:
searchPanel: { visible: true },
filterRow: { visible: true },
headerFilter: { visible: true },
columnChooser: { enabled: true },
grouping: { autoExpandAll: false },
sorting: { mode: 'multiple' },
selection: { mode: 'multiple' },
keyboardNavigation: { enabled: true },
focusedRowEnabled: true,
paging: { pageSize: 20 },
pager: { showInfo: true, showPageSizeSelector: true },
stateStoring: { enabled: true, type: 'localStorage', storageKey: 'orders-grid' }
CRUD grid with popup form editing:
editing: {
mode: 'popup',
allowAdding: true,
allowUpdating: true,
allowDeleting: true,
popup: { title: 'Order', showTitle: true },
form: { items: ['customer', 'status', 'dueDate'] }
}
Master-detail grid:
masterDetail: {
enabled: true,
template(container, options) {
$('<div>').dxDataGrid({ dataSource: options.data.lines }).appendTo(container);
}
}
Filter toolbar:
items: [
{ location: 'before', widget: 'dxSelectBox', options: { dataSource: statuses } },
{ location: 'after', widget: 'dxButton', options: { text: 'Refresh', icon: 'refresh' } }
]
Searchable dashboard: put filters first with dxToolbar, use dxDataGrid search and filter options, and keep summary cards as scoped HTML/CSS when no widget is needed.
Validation-heavy dxForm:
items: [{
dataField: 'email',
editorType: 'dxTextBox',
validationRules: [
{ type: 'required' },
{ type: 'email' }
],
editorOptions: { inputAttr: { 'aria-label': 'Email' } }
}]
Read-only review mode: disable editing, set editor readOnly: true, use clear status labels, and preserve formatting.
Responsive form layout: use colCountByScreen, labelLocation, minColWidth, and grouped items.
Toast and load panel feedback: use DevExpress.ui.notify(...) for short feedback and dxLoadPanel for blocking or long-running work.
Always consider elementAttr and inputAttr for stable styling anchors and accessible labels.
npx claudepluginhub geekhoo/plugins --plugin dx-webdevProvides behavioral guidelines to reduce common LLM coding mistakes, focusing on simplicity, surgical changes, assumption surfacing, and verifiable success criteria.
Searches, retrieves, and installs Agent Skills from prompts.chat registry using MCP tools like search_skills and get_skill. Activates for finding skills, browsing catalogs, or extending Claude.
Creates, edits, and optimizes skills for Claude Code, including drafting, evaluating with test prompts, iterating on performance, and improving skill descriptions for better triggering accuracy.