From newtab
Scaffolds a new Firefox New Tab widget with JSX, SCSS, prefs, telemetry, Widgets.jsx integration, and a draft test file. Use when the user wants to add a new widget to the New Tab page.
How this skill is triggered — by the user, by Claude, or both
Slash command
/newtab:widgets-scaffoldThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Widgets live in `browser/extensions/newtab/content-src/components/Widgets/`.
Widgets live in browser/extensions/newtab/content-src/components/Widgets/.
Ask the user to run the requirements script first:
python3 .claude/skills/newtab-widget-scaffold/scripts/gather_requirements.py
The script asks all required questions and prints a widget spec summary. Wait for the user to paste that summary before proceeding.
Enter plan mode. Using the spec and the example in
references/ExampleWidget/, propose the full list of files to
create/modify before writing anything. Read references/notes.md for
non-obvious requirements and gotchas.
Files touched by every widget:
ActivityStream.sys.mjs — register prefs (do this first, then run ./mach build faster before proceeding)Widgets/{Name}/{Name}.jsx — new widget componentWidgets/{Name}/_{Name}.scss — widget stylesWidgets/Widgets.jsx — import, enabled logic, null guard, JSX renderWidgets/_Widgets.scss — add CSS class to :has() selectorcontent-src/styles/activity-stream.scss — add @importstylelint-rollouts.config.js (repo root) — add the new widget's SCSS path in alphabetical order alongside the other widget entriesBase.jsx, CustomizeMenu.jsx, ContentSection.jsx — Customize panel togglebrowser/locales/en-US/browser/newtab/newtab.ftl — FTL stringsAdditional files if the spec requires them:
common/Actions.mjs + common/Reducers.sys.mjs — only if Redux state is neededAfter plan approval, implement all files end-to-end without stopping between
edits. Do not pause to summarize progress or ask for confirmation mid-scaffold.
Work through every file in the plan in sequence, replicating the patterns in
references/ExampleWidget/ and substituting values from the spec.
Only stop if you hit a genuine blocker (e.g. a file doesn't exist where expected, or the codebase structure differs from what the plan assumed). In that case, explain what you found and what decision is needed before continuing.
Remind the user:
./mach lintThen explain how to enable the widget:
Option A — about:config
Set both of these to true:
browser.newtabpage.activity-stream.widgets.{widgetKey}.enabledbrowser.newtabpage.activity-stream.widgets.system.{widgetKey}.enabledOption B — Nimbus trainhop
newtabTrainhop with:{
"type": "widgets",
"payload": {
"enabled": true,
"{widgetKey}Enabled": true
}
}
npx claudepluginhub mozilla/firefox-aidev-plugins --plugin newtabBuilds Manifest V3 browser extensions emphasizing service worker persistence (alarms, offscreen API, storage), side panels, security, and cross-browser support.
Generates React/Vue components with TypeScript, tests, CSS modules, barrel exports, and project-pattern validation. Detects Next.js App Router and adjusts output accordingly.
Builds Chrome, Firefox, and cross-browser extensions with Manifest V3, content scripts, popup UIs, and store publishing guidance.