From mobiscroll
Mobiscroll JavaScript patterns — imperative initialization, render functions, dynamic updates, @mobiscroll/javascript imports. Invoked by mobiscroll-ui after framework detection. Do not auto-trigger — invoked by mobiscroll-ui only.
How this skill is triggered — by the user, by Claude, or both
Slash command
/mobiscroll:mobiscroll-ui-javascriptThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
> This skill is loaded by `mobiscroll-ui`. If you arrived here directly, invoke
This skill is loaded by
mobiscroll-ui. If you arrived here directly, invokemobiscroll-uifirst to run environment detection and the mandatory schema lookup.
Package: @mobiscroll/javascript
CSS import: import '@mobiscroll/javascript/dist/css/mobiscroll.min.css'
import * as mobiscroll from '@mobiscroll/javascript';
var inst = mobiscroll.eventcalendar('#my-calendar', {
data: events,
view: { scheduler: { type: 'week' } },
onEventCreate: function (args) {
// handle
}
});
Component factory functions are lowercase: mobiscroll.eventcalendar(),
mobiscroll.datepicker(), mobiscroll.select(), mobiscroll.popup().
onEventCreate, onCellClick.inst.setOptions(),
inst.getEvents(), inst.destroy().| WRONG | RIGHT |
|---|---|
import { Eventcalendar } from '@mobiscroll/react' | import * as mobiscroll from '@mobiscroll/javascript' |
<Eventcalendar /> JSX component | mobiscroll.eventcalendar('#el', { ... }) |
React hooks (useState, useEffect) | Vanilla DOM events and callbacks |
Angular @Component decorators | Imperative initialization on DOM elements |
Vue <script setup> or ref() | Plain JS variables and event handlers |
jQuery $('#el').mobiscroll() plugin pattern | mobiscroll.eventcalendar('#el', { ... }) |
@mobiscroll/react, @mobiscroll/angular, etc. | @mobiscroll/javascript only |
mobiscroll.eventcalendar('#el', {
onEventClick: function (args) {
console.log(args.event); // the clicked event object
console.log(args.domEvent); // the original DOM event
}
});
var inst = mobiscroll.eventcalendar('#el', { ... });
inst.setOptions({ data: newEvents });
// v6: renderSchedulerEvent (v5: renderScheduleEvent — deprecated in v6)
mobiscroll.eventcalendar('#el', {
renderSchedulerEvent: function (data) {
return '<div class="custom-event">' + data.title + '</div>';
}
});
v5 note:
renderScheduleEvent(withoutr) was the correct name in v5. In v6 it is deprecated — userenderSchedulerEventinstead. The same rename applies to all*Contentvariants.
Always verify available render options via mcp__mobiscroll__getComponentSchema.
Provides 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.
npx claudepluginhub acidb/mobiscroll-marketplace --plugin mobiscroll