skills.rest
algolia
algoliaOFFICIAL
Explore all skills by this author →
WebsiteGitHub

port-widget

Port InstantSearch widgets across JavaScript, React, and Vue flavors.

4.1k|550|Updated Jul 21, 2015
Search Tags:#react#vue#connectors#instantsearch#widget porting#monorepo testing#cross-package exports
One-click install
npx skills add https://github.com/algolia/instantsearch --skill port-widget
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: port-widget
Source: https://github.com/algolia/instantsearch/tree/main/.claude/skills/port-widget
Command: npx skills add https://github.com/algolia/instantsearch --skill port-widget

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires argparse, subprocess, sys, pathlib, typing, and includes scripts (resource) and references (resource) components.

What problem does it solve?

It solves the challenge of adding or synchronizing InstantSearch widget support across JavaScript, React, and Vue packages without drifting APIs or breaking shared test contracts.

Core Features & Use Cases

  • Widget and connector porting across flavors: Move or introduce a widget/feature so the same connector-driven behavior is available in instantsearch.js, react-instantsearch, and vue-instantsearch.
  • End-to-end wrapper implementation: Create the required layers (connector, JS widget, React hook/widget, and Vue component) and register exports consistently across packages.
  • Coverage-first validation: Use the audit script and update shared common widget/connector test suites so behavior stays aligned and placeholders are replaced with real implementations.
  • Variant widget support: Handle cases where a widget is a UI/behavior variant that reuses an existing connector/hook, such as mapping menuSelect to connectMenu/useMenu.

Quick Start

Ask the AI to port the widget 'refinement-list' to Vue and ensure it is implemented end-to-end across all InstantSearch flavors with common widget and connector tests updated.

Frequently Asked Questions about port-widget

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I port an InstantSearch widget to React and Vue from instantsearch.js?▼

To port an InstantSearch widget, you map the shared connector behavior across the JS widget, React hook, and Vue component layers, ensuring consistent exports and $$widgetType registration across all flavors to prevent API drift.

What is the best way to synchronize cross-package widget behavior in an InstantSearch monorepo?▼

Synchronizing cross-package widget behavior involves auditing coverage with scripts/audit_widget_coverage.py, mapping connector layers, and updating shared test suites in tests/common/widgets and tests/common/connectors to validate consistent end-to-end behavior.

How does a connector-driven widget variant work across React InstantSearch and Vue InstantSearch?▼

A connector-driven widget variant reuses an existing connector or hook, such as mapping a menuSelect widget to the connectMenu connector and useMenu hook, ensuring the UI variant shares consistent behavior across React and Vue flavors.

Do I need to update common tests when adding a new widget to vue-instantsearch?▼

Yes, you must update tests/common/widgets and tests/common/connectors along with flavor-specific common test registrations to replace placeholders with real implementations and maintain shared test contracts across packages.

Why does my ported widget cause API drift across different InstantSearch packages?▼

API drift occurs when the connector, widget, hook, and component layers are not consistently mapped or when $$widgetType and package exports are misaligned across instantsearch.js, react-instantsearch, and vue-instantsearch during the porting process.

Can I use a single connector for multiple UI widget variants in react-instantsearch?▼

Yes, you can map multiple UI or behavior variants to a single existing connector and hook, such as reusing connectMenu for different menu-based widgets, ensuring shared behavior stays aligned across JavaScript, React, and Vue.

Related Skills

Explore More Software Engineering Skills→
vasilyu1983vasilyu1983
73

qa-docs-coverage

Audit codebases to identify documentation gaps and generate coverage reports.

Community
Advanced
flutterflutter
2.8k

flutter-add-widget-test

Write Flutter widget tests using the WidgetTester API to verify UI rendering and interactions.

Official
Intermediate
kimjuyoung1127kimjuyoung1127

dangapp-motion-wrapper

Apply shared Framer Motion wrapper patterns for route and component transitions.

Community
Intermediate
algoliaalgolia
9

instantsearch

Implement Algolia InstantSearch autocomplete, results pages, and faceted search across React, Vue, and vanilla JS.

Official
Advanced