Agent skill · software engineering · aiskillstore
algolia-search
Expert patterns for Algolia search implementation, indexing
Why this skill is useful
Provides specific implementation patterns and anti-patterns for Algolia search that the AI wouldn't reliably generate on its own.
What it needs
Requires algoliasearch, react-instantsearch-hooks-web installed locally. Requires algolia account access. About 8k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
Algolia Search Integration Expert patterns for Algolia search implementation, indexing strategies, React InstantSearch, and relevance tuning Patterns React InstantSearch with Hooks Modern React InstantSearch setup using hooks for type-ahead search. Uses react-instantsearch-hooks-web package with algoliasearch client. Widgets are components that can be customized with classnames. Key hooks: useSearchBox: Search input handling useHits: Access search results useRefinementList: Facet filtering usePagination: Result pagination useInstantSearch: Full state access Codeexample // lib/algolia.ts import algoliasearch from 'algoliasearch/lite'; export const searchClient = algoliasearch( process.env.NEXTPUBLICALGOLIAAPPID!, process.env.NEXTPUBLICALGOLIASEARCHKEY! // Search-only key! ); export const INDEXNAME = 'products'; // components/Search.tsx 'use client'; import { InstantSearch, SearchBox, Hits, Configure } from 'react-instantsearch'; import { searchClient, INDEXNAME } from '@/lib/algolia'; function Hit({ hit }: { hit: ProductHit }) { return ( <article> <h3>{hit.name}</h3> <p>{hit.description}</p> <span>${hit.price}</span> </article> ); } export function ProductSearch() { return ( <InstantSearch searchClient={searchClient} indexName={INDEXNAME}> <Configure hitsPerPage={20} /> <SearchBox placeholder="Search products..." classNames={{ root: 'relative', input: 'w-full px-4 py-2 border rounded', }} /> <Hits hitComponent={Hit} /> </InstantSearch> ); } // Custom hook usage import { useSearchBox, useHits, useInstantSearch } from 'react-instantsearch'; function CustomSearch() { const { query, refine } = useSearchBox(); const { hits } = useHits<ProductHit>(); const { status } = useInstantSearch(); return ( <div> <input value={query} onChange={(e) => refine(e.target.value)} placeholder="Search..." /> {status === 'loading' && <p>Loading...</p>} <ul> {hits.map((hit) => ( <li key={hit.objectID}>{hit.name}</li> ))} </ul> </div> ); } Antipatterns Pattern: Using Admin API key in frontend …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/algolia-search