algolia-search
Implements Algolia search with best practices for indexing, performance, and React integration.
Install
mkdir -p .claude/skills/algolia-search && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/7915" && unzip -o skill.zip -d .claude/skills/algolia-search && rm skill.zipInstalls to .claude/skills/algolia-search
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Expert patterns for Algolia search implementation, indexing strategies, React InstantSearch, and relevance tuning Use when: adding search to, algolia, instantsearch, search api, search functionality.Key capabilities
- →Initialize React InstantSearch with hooks
- →Configure SSR using InstantSearchNext
- →Perform partial record updates
- →Manage search state through widgets
- →Implement batch record indexing
How it works
Provides code templates for hooks-based React integration and RESTful batch synchronization scripts for record maintenance.
Inputs & outputs
When to use algolia-search
- →Implement type-ahead search with React InstantSearch
- →Configure SSR for Algolia in Next.js
- →Optimize indexing strategies for large datasets
- →Perform partial record updates to sync data
About this skill
Algolia Search Integration
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
Next.js Server-Side Rendering
SSR integration for Next.js with react-instantsearch-nextjs package.
Use <InstantSearchNext> instead of <InstantSearch> for SSR. Supports both Pages Router and App Router (experimental).
Key considerations:
- Set dynamic = 'force-dynamic' for fresh results
- Handle URL synchronization with routing prop
- Use getServerState for initial state
Data Synchronization and Indexing
Indexing strategies for keeping Algolia in sync with your data.
Three main approaches:
- Full Reindexing - Replace entire index (expensive)
- Full Record Updates - Replace individual records
- Partial Updates - Update specific attributes only
Best practices:
- Batch records (ideal: 10MB, 1K-10K records per batch)
- Use incremental updates when possible
- partialUpdateObjects for attribute-only changes
- Avoid deleteBy (computationally expensive)
⚠️ Sharp Edges
| Issue | Severity | Solution |
|---|---|---|
| Issue | critical | See docs |
| Issue | high | See docs |
| Issue | medium | See docs |
| Issue | medium | See docs |
| Issue | medium | See docs |
| Issue | medium | See docs |
| Issue | medium | See docs |
| Issue | medium | See docs |
When not to use it
- →Small datasets not requiring cloud search
- →Projects requiring full-text search without external APIs
Prerequisites
Limitations
- →Batch indexing requires careful record size management
- →Expensive computational cost of deleteBy operations
- →SSR requires complex state synchronization handling
How it compares
Offers specific patterns for Next.js SSR and partial synchronization rather than general API implementation advice.
Compared to similar skills
algolia-search side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| algolia-search (this skill) | 0 | 6mo | No flags | Intermediate |
| javascript-typescript-typescript-scaffold | 3 | 4mo | Review | Beginner |
| server-actions | 1 | 7mo | No flags | Intermediate |
| fullstack-developer | 0 | 5mo | Review | Advanced |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by davila7
View all by davila7 →You might also like
javascript-typescript-typescript-scaffold
sickn33
You are a TypeScript project architecture expert specializing in scaffolding production-ready Node.js and frontend applications. Generate complete project structures with modern tooling (pnpm, Vite, N
server-actions
davepoon
This skill should be used when the user asks about "Server Actions", "form handling in Next.js", "mutations", "useFormState", "useFormStatus", "revalidatePath", "revalidateTag", or needs guidance on data mutations and form submissions in Next.js App Router.
fullstack-developer
daithang59
|
open-notebook-lm-guidelines
RainLib
Core project guidelines, architecture, and UI styling instructions for the FerrisMind (openNotebookLm) AI workspace project. Use this whenever working on the frontend or backend of this project.
hr-portal-skill
hariventures2000-ship-it
Use this skill when developing, testing, debugging, or modifying code inside the HR Portal frontend (apps/hr-portal). It applies to handling HR administration tasks such as employee roster management, contract seeding, leave request approvals, attendance monitoring, payroll calculation, and recruitm
dapp
salazarsebas
Stellar dApp / frontend development. Covers the JavaScript stellar-sdk (browser + Node.js), Freighter wallet, Stellar Wallets Kit (multi-wallet), Wallet Standard, smart accounts with passkeys, transaction building / signing / submission, Soroban contract invocation from the client, simulation, and e