From mobiscroll
Mobiscroll React patterns — JSX components, render props, hooks, @mobiscroll/react 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-reactThe 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/react
CSS import: import '@mobiscroll/react/dist/css/mobiscroll.min.css'
React uses JSX components with PascalCase names:
import { useState, useMemo } from 'react';
import { Eventcalendar } from '@mobiscroll/react';
function MyCalendar() {
const [events, setEvents] = useState([]);
const myView = useMemo(() => ({ scheduler: { type: 'week' } }), []);
return (
<Eventcalendar
data={events}
view={myView}
onEventCreate={(args) => { /* handle */ }}
/>
);
}
Eventcalendar, Datepicker, Select, Popup.data, view, selectedDate, onEventCreate.on: onEventCreate, onCellClick, onPageChange.view object should be memoized (via useMemo) to avoid unnecessary re-renders.useState, useEffect, useMemo, useCallback).selectedDate + onSelectedDateChange for controlled date state.| WRONG | RIGHT |
|---|---|
import * as mobiscroll from '@mobiscroll/react' | import { Eventcalendar } from '@mobiscroll/react' |
mobiscroll.eventcalendar('#el', {...}) imperative init | <Eventcalendar data={events} view={myView} /> |
Inline view object: view={{ scheduler: { type: 'week' } }} | Memoized: const v = useMemo(() => ({...}), []) |
Using Angular @Input() or @Output() decorators | Use JSX props and on* event handlers |
@mobiscroll/javascript or @mobiscroll/angular imports | @mobiscroll/react only |
React event handlers receive an args object with event-specific data and an inst
reference to the component instance:
<Eventcalendar
onEventClick={(args) => {
console.log(args.event); // the clicked event object
console.log(args.domEvent); // the original DOM event
}}
/>
Use render props (functions returning JSX) for custom rendering:
{/* v6: renderSchedulerEvent (v5: renderScheduleEvent — deprecated in v6) */}
<Eventcalendar
renderSchedulerEvent={(data) => (
<div className="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 props 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