Stats
Actions
Tags
From jspsych
Guide for creating shareable jsPsych timelines (experiment components). Use when the user wants to create a reusable experimental procedure, task, or component to share in the jspsych-timelines repository, or when they ask about building modular experiment components in jsPsych. Covers the timeline export structure (createTimeline, timelineUnits, utils), initialization, parameterization, documentation, and publishing.
How this skill is triggered — by the user, by Claude, or both
Slash command
/jspsych:jspsych-timeline-builderThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
This skill guides the creation of shareable jsPsych timelines - reusable experiment components that can be easily adapted and combined by other researchers.
This skill guides the creation of shareable jsPsych timelines - reusable experiment components that can be easily adapted and combined by other researchers.
Timelines are modular, parameterized experiment components built in jsPsych (v8+). They represent reusable procedures that can be composed into larger experiments. Unlike plugins (which define individual screen events), timelines compose plugins together to create reusable experimental units like:
Important: A timeline typically represents a single experimental procedure or component, not a complete multi-procedure experiment. For example, an experiment studying correlations between working memory and language processing might include both a working memory timeline and a lexical decision timeline as separate components.
Create a timeline when:
Don't create a timeline when:
Key insight: Think about whether the procedure you're building could be useful as a component in someone else's experiment, not just as a standalone experiment.
Every timeline exports three modules:
Function that returns the complete procedure as a jsPsych timeline. This is the "top-level" export representing the full reusable component (e.g., a complete lexical decision task, a working memory assessment, etc.) that can be incorporated into larger experiments.
Object containing reusable components, each being a timeline or function that returns a timeline. Components can be:
Key principle: No rigid hierarchy. Export whatever components make sense for your experiment. The only requirement is that items in timelineUnits are timelines or functions returning timelines.
Supporting functions, constants, or utilities:
Before initializing, clarify:
For contribution to jspsych-timelines:
# Fork https://github.com/jspsych/jspsych-timelines on GitHub
git clone https://github.com/YOUR-USERNAME/jspsych-timelines.git
cd jspsych-timelines/packages
npx @jspsych/new-timeline
For personal/independent use:
npx @jspsych/new-timeline
The tool prompts for:
Fill out all fields if sharing publicly.
This creates:
Plugin dependencies: If your timeline requires functionality not available in existing plugins, create a new plugin first:
Important: Never create plugins inside timeline packages. Plugins should be independent packages that timelines depend on.
Build from bottom up:
Example structure (for a lexical decision task):
export function createTimeline() {
// Returns the complete lexical decision task procedure
return {
timeline: [
instructionsTimeline,
practiceTimeline,
testTimeline
]
};
}
export const timelineUnits = {
instructions: instructionsTimeline,
practice: practiceTimeline,
test: testTimeline,
// Or parameterized functions:
testBlock: (stimuli, feedback) => { /* return timeline */ }
};
export const utils = {
stimulusSets: { /* ... */ },
generateStimuli: (wordList) => { /* ... */ }
};
Composing timelines into experiments: Researchers can then compose multiple timelines into larger experiments:
// An experiment studying working memory and language
const experiment = {
timeline: [
primingTimeline.createTimeline(),
lexicalDecisionTimeline.createTimeline(),
workingMemoryTimeline.createTimeline()
]
};
Effective parameterization:
Example: A working memory test section might take:
dimension: Number of stimulus categories (1 for 1-list, 2 for 2-list)stimulusSets: Array of stimulus arrays grouped by categorytrials: Number of test trialsgiveFeedback: Boolean for practice vs test phasesCritical: Add comprehensive DocStrings to every exported component.
Format:
/**
* Creates a practice phase with feedback
* @param {number} numTrials - Number of practice trials (default: 2)
* @param {Array} stimuli - Array of stimulus objects
* @param {boolean} showInstructions - Whether to show instructions first (default: true)
* @returns {Object} jsPsych timeline object
*/
export function practicePhase(numTrials = 2, stimuli, showInstructions = true) {
// implementation
}
These DocStrings auto-generate the README documentation table.
Use example/index.html to test:
To jspsych-timelines repository:
Independent publishing: Publish directly to npm as a package
Plugin separation:
Flexibility:
Documentation:
Interoperability:
Testing:
Standard experimental procedures: Create reusable timelines for common tasks
Multi-phase procedures: Package instruction + practice + test as a cohesive unit
Cognitive assessments: Individual tests that might be part of larger batteries
Experimental manipulations: Reusable procedure components
Composing experiments: Mix timelines to create multi-component studies
npx claudepluginhub jspsych/skills --plugin jspsychProvides 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.