[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-algolia-instantsearch":3,"mdc--uaxc44-key":38,"related-repo-algolia-instantsearch":1502,"related-org-algolia-instantsearch":1603},{"slug":4,"name":4,"fn":5,"description":6,"org":7,"tags":11,"stars":22,"repoUrl":23,"updatedAt":24,"license":25,"forks":26,"topics":27,"repo":33,"sourceUrl":36,"mdContent":37},"instantsearch","build search experiences with Algolia InstantSearch","Build production-quality search experiences (autocomplete, search results pages, faceted search) using InstantSearch. Use when user asks to add search, autocomplete, search-as-you-type, faceted filtering, or a search results page to a React, Vue, or vanilla JS application, or mentions Algolia, InstantSearch, or react-instantsearch. Do NOT use for backend index operations (records, synonyms, settings, API keys), use algolia-cli instead. Do NOT use for analytics, recommendations, or MCP server queries, use algolia-mcp instead. Do NOT use for AI\u002Fagent\u002Fconversational search, use algobot-cli instead.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},"algolia","Algolia","https:\u002F\u002Fpexgzepcugksgbtrxkhf.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Forg-logos\u002Falgolia.png",[12,16,19],{"name":13,"slug":14,"type":15},"Search","search","tag",{"name":17,"slug":18,"type":15},"UI Components","ui-components",{"name":20,"slug":21,"type":15},"Frontend","frontend",8,"https:\u002F\u002Fgithub.com\u002Falgolia\u002Fskills","2026-07-12T08:27:39.603882","MIT",2,[28,29,8,30,31,14,32],"agent","ai-assistant","mcp","recommendations","skills",{"repoUrl":23,"stars":22,"forks":26,"topics":34,"description":35},[28,29,8,30,31,14,32],"Algolia skills for AI Agents","https:\u002F\u002Fgithub.com\u002Falgolia\u002Fskills\u002Ftree\u002FHEAD\u002Fskills\u002Finstantsearch","---\nname: instantsearch\ndescription: >-\n  Build production-quality search experiences (autocomplete, search results pages, faceted search) using InstantSearch.\n  Use when user asks to add search, autocomplete, search-as-you-type, faceted filtering, or a search results page\n  to a React, Vue, or vanilla JS application, or mentions Algolia, InstantSearch, or react-instantsearch.\n  Do NOT use for backend index operations (records, synonyms, settings, API keys), use algolia-cli instead.\n  Do NOT use for analytics, recommendations, or MCP server queries, use algolia-mcp instead.\n  Do NOT use for AI\u002Fagent\u002Fconversational search, use algobot-cli instead.\nlicense: MIT\nmetadata:\n  author: algolia\n  version: '1.1'\n---\n\n# InstantSearch\n\nBuild production-quality search experiences with InstantSearch. Follow the workflow below in order. Do not skip steps.\n\n## Supported libraries\n\nInstantSearch comes in three libraries. Detect which one applies from the project's dependencies or framework, or ask the user.\n\n| Library             | Package               | When to use                                              |\n| ------------------- | --------------------- | -------------------------------------------------------- |\n| React InstantSearch | `react-instantsearch` | React, Next.js, Remix                                    |\n| Vue InstantSearch   | `vue-instantsearch`   | Vue, Nuxt                                                |\n| InstantSearch.js    | `instantsearch.js`    | Vanilla JS, or any framework without a dedicated library |\n\nOnce identified, use the matching reference directory (e.g., `references\u002Freact\u002F`) for all technology rules, anti-patterns, styling, glossary, and pattern-specific guidance.\n\n> **Note:** Coverage by library:\n>\n> - **React InstantSearch**: full coverage (autocomplete, search results page, custom widgets, middleware, SSR).\n> - **Vue InstantSearch** and **InstantSearch.js**: library-level rules and autocomplete only. For other patterns, follow the [Source-of-truth check](#2-source-of-truth-check) and ask the user before scaffolding non-trivial flows.\n\n## Workflow\n\n### 1. Discover\n\nBefore writing any code, gather context. First check if InstantSearch is already set up in the codebase (search client, provider, existing widgets). If so, read the existing configuration instead of re-asking.\n\nIf starting fresh, go step by step, waiting for the user's answer before moving on.\n\n- **Credentials**: Ask the user for their Algolia app ID, search-only API key, and index name.\n- **Query Suggestions**: Ask the user if they have a Query Suggestions index.\n- **Schema**: Once you have credentials, fetch a few records from the main index to discover the available attributes and their shape. Confirm with the user rather than asking them to list everything. The schema is needed before you can propose rendering options. No need to fetch from the Query Suggestions index: its shape is standard and handled by the widget.\n\n  ```bash\n  curl -s -X POST \\\n    \"https:\u002F\u002F${APP_ID}.algolia.net\u002F1\u002Findexes\u002F${INDEX_NAME}\u002Fquery\" \\\n    -H \"x-algolia-api-key: ${API_KEY}\" \\\n    -H \"x-algolia-application-id: ${APP_ID}\" \\\n    -H \"content-type: application\u002Fjson\" \\\n    -d '{\"params\": \"hitsPerPage=5\"}'\n  ```\n\n- **Project inspection**: Read the project's existing styling approach, breakpoints, layout, responsive patterns, component library, and framework details. Identify which InstantSearch library to use (see table above).\n- **Routes**: Find the detail page route pattern (e.g., `\u002Fproducts\u002F[id]`, `\u002Farticles\u002F[slug]`) and look for an existing listing or search results page. If one is found, verify it actually reads query parameters and renders dynamic results (not just a static listing). If none is found or the page is static, ask the user: \"What page should search redirect to when a query is submitted? Or is there no results page?\"\n- **Placement**: Find where the search experience should live in the UI. Refer to the pattern's features reference for guidance, or ask the user.\n- **Rendering**: Present the user with concrete, numbered options for how results should appear. These depend on the schema (what attributes are available) and the project's design. Refer to the pattern's features reference for options to present.\n\nDo not proceed until you have credentials, schema, rendering preferences, and an understanding of the project's design.\n\n### 2. Source-of-truth check\n\nThis skill bakes guidance for the highest-value patterns only. Whenever you need a widget, hook, connector, prop, middleware, future flag, or API that is **not explicitly documented in this skill**, you must consult the source of truth before writing code. Training data is stale, lossy, and frequently wrong on prop shapes.\n\nFollow the library's source-of-truth reference for the exact commands and URL patterns:\n\n| Library | Reference                                                  |\n| ------- | ---------------------------------------------------------- |\n| React   | [source-of-truth.md](references\u002Freact\u002Fsource-of-truth.md)  |\n| Vue     | [source-of-truth.md](references\u002Fvue\u002Fsource-of-truth.md)    |\n| JS      | [source-of-truth.md](references\u002Fjs\u002Fsource-of-truth.md)     |\n\nThe reference always covers, in order:\n\n1. **Read installed types** in `node_modules` for prop shapes, renderState, and connector contracts.\n2. **Fetch the live Algolia docs** at the canonical URL pattern.\n3. **Grep installed CSS \u002F source** for class names you intend to style.\n4. **Only then write code.** If a step fails (offline, 404, missing types), ask the user before guessing.\n\nDo this even when a pattern reference exists, if you need any prop or behavior the pattern reference does not explicitly cover.\n\n### 3. Build\n\nPick the matching pattern reference for the library and the user's request. If no pattern reference exists for what the user asked for, fall back on the source-of-truth check (Step 2) and ask the user before scaffolding speculative widget trees.\n\nPatterns available for each library:\n\n| Pattern                                                      | React                                                                                                                                                                                            | Vue                                                                                                                                                                  | JS                                                                                                                                                                  |\n| ------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| Autocomplete                                                 | [features](references\u002Freact\u002Fautocomplete\u002Ffeatures.md), [styling](references\u002Freact\u002Fautocomplete\u002Fstyling.md), [anti-patterns](references\u002Freact\u002Fautocomplete\u002Fanti-patterns.md)                      | [features](references\u002Fvue\u002Fautocomplete\u002Ffeatures.md), [styling](references\u002Fvue\u002Fautocomplete\u002Fstyling.md), [anti-patterns](references\u002Fvue\u002Fautocomplete\u002Fanti-patterns.md) | [features](references\u002Fjs\u002Fautocomplete\u002Ffeatures.md), [styling](references\u002Fjs\u002Fautocomplete\u002Fstyling.md), [anti-patterns](references\u002Fjs\u002Fautocomplete\u002Fanti-patterns.md) |\n| Search results page (incl. faceted search, sort, pagination) | [features](references\u002Freact\u002Fsearch-results-page\u002Ffeatures.md), [styling](references\u002Freact\u002Fsearch-results-page\u002Fstyling.md), [anti-patterns](references\u002Freact\u002Fsearch-results-page\u002Fanti-patterns.md) | —                                                                                                                                                                    | —                                                                                                                                                                  |\n\nAlso read and apply the library-level references (apply regardless of pattern):\n\n| Reference        | React                                                       | Vue                                                       | JS                                                       |\n| ---------------- | ----------------------------------------------------------- | --------------------------------------------------------- | -------------------------------------------------------- |\n| Technology rules | [technology-rules.md](references\u002Freact\u002Ftechnology-rules.md) | [technology-rules.md](references\u002Fvue\u002Ftechnology-rules.md) | [technology-rules.md](references\u002Fjs\u002Ftechnology-rules.md) |\n| Anti-patterns    | [anti-patterns.md](references\u002Freact\u002Fanti-patterns.md)       | [anti-patterns.md](references\u002Fvue\u002Fanti-patterns.md)       | [anti-patterns.md](references\u002Fjs\u002Fanti-patterns.md)       |\n| Styling          | [styling.md](references\u002Freact\u002Fstyling.md)                   | [styling.md](references\u002Fvue\u002Fstyling.md)                   | [styling.md](references\u002Fjs\u002Fstyling.md)                   |\n| Glossary         | [glossary.md](references\u002Freact\u002Fglossary.md)                 | [glossary.md](references\u002Fvue\u002Fglossary.md)                 | [glossary.md](references\u002Fjs\u002Fglossary.md)                 |\n| Source of truth  | [source-of-truth.md](references\u002Freact\u002Fsource-of-truth.md)   | [source-of-truth.md](references\u002Fvue\u002Fsource-of-truth.md)   | [source-of-truth.md](references\u002Fjs\u002Fsource-of-truth.md)   |\n| Custom widgets   | [custom-widgets.md](references\u002Freact\u002Fcustom-widgets.md)     | —                                                         | —                                                        |\n| Middleware       | [middleware.md](references\u002Freact\u002Fmiddleware.md)             | —                                                         | —                                                        |\n| SSR              | [ssr.md](references\u002Freact\u002Fssr.md)                           | —                                                         | —                                                        |\n| Pattern                                                      | React                                                                                                                                                                                            | Vue | JS  |\n| ------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --- | --- |\n| Autocomplete                                                 | [features](references\u002Freact\u002Fautocomplete\u002Ffeatures.md), [styling](references\u002Freact\u002Fautocomplete\u002Fstyling.md), [anti-patterns](references\u002Freact\u002Fautocomplete\u002Fanti-patterns.md)                      | —   | —   |\n| Search results page (incl. faceted search, sort, pagination) | [features](references\u002Freact\u002Fsearch-results-page\u002Ffeatures.md), [styling](references\u002Freact\u002Fsearch-results-page\u002Fstyling.md), [anti-patterns](references\u002Freact\u002Fsearch-results-page\u002Fanti-patterns.md) | —   | —   |\n\nAlso read and apply the library-level references (apply regardless of pattern):\n\n| Reference        | React                                                       | Vue | JS  |\n| ---------------- | ----------------------------------------------------------- | --- | --- |\n| Technology rules | [technology-rules.md](references\u002Freact\u002Ftechnology-rules.md) | —   | —   |\n| Anti-patterns    | [anti-patterns.md](references\u002Freact\u002Fanti-patterns.md)       | —   | —   |\n| Styling          | [styling.md](references\u002Freact\u002Fstyling.md)                   | —   | —   |\n| Glossary         | [glossary.md](references\u002Freact\u002Fglossary.md)                 | —   | —   |\n| Source of truth  | [source-of-truth.md](references\u002Freact\u002Fsource-of-truth.md)   | —   | —   |\n| Custom widgets   | [custom-widgets.md](references\u002Freact\u002Fcustom-widgets.md)     | —   | —   |\n| Middleware       | [middleware.md](references\u002Freact\u002Fmiddleware.md)             | —   | —   |\n| SSR              | [ssr.md](references\u002Freact\u002Fssr.md)                           | —   | —   |\n\nConsult types and live docs first (Step 2). Ask the user only if both fail. Never fall back to legacy libraries or guessed APIs.\n\n### 4. Style\n\nFollow the library's styling guide step by step, then apply the pattern-specific styling guide. Match the site's existing CSS methodology, color scheme, typography, spacing, and component patterns.\n\n### 5. Review\n\nReview your work against the library's anti-patterns, the pattern-specific anti-patterns, and the features checklist. Fix any violations.\n",{"data":39,"body":42},{"name":4,"description":6,"license":25,"metadata":40},{"author":8,"version":41},"1.1",{"type":43,"children":44},"root",[45,53,59,66,71,171,184,237,243,250,255,260,574,579,585,597,602,672,677,729,734,740,745,750,887,892,1261,1265,1469,1474,1480,1485,1491,1496],{"type":46,"tag":47,"props":48,"children":49},"element","h1",{"id":4},[50],{"type":51,"value":52},"text","InstantSearch",{"type":46,"tag":54,"props":55,"children":56},"p",{},[57],{"type":51,"value":58},"Build production-quality search experiences with InstantSearch. Follow the workflow below in order. Do not skip steps.",{"type":46,"tag":60,"props":61,"children":63},"h2",{"id":62},"supported-libraries",[64],{"type":51,"value":65},"Supported libraries",{"type":46,"tag":54,"props":67,"children":68},{},[69],{"type":51,"value":70},"InstantSearch comes in three libraries. Detect which one applies from the project's dependencies or framework, or ask the user.",{"type":46,"tag":72,"props":73,"children":74},"table",{},[75,99],{"type":46,"tag":76,"props":77,"children":78},"thead",{},[79],{"type":46,"tag":80,"props":81,"children":82},"tr",{},[83,89,94],{"type":46,"tag":84,"props":85,"children":86},"th",{},[87],{"type":51,"value":88},"Library",{"type":46,"tag":84,"props":90,"children":91},{},[92],{"type":51,"value":93},"Package",{"type":46,"tag":84,"props":95,"children":96},{},[97],{"type":51,"value":98},"When to use",{"type":46,"tag":100,"props":101,"children":102},"tbody",{},[103,127,149],{"type":46,"tag":80,"props":104,"children":105},{},[106,112,122],{"type":46,"tag":107,"props":108,"children":109},"td",{},[110],{"type":51,"value":111},"React InstantSearch",{"type":46,"tag":107,"props":113,"children":114},{},[115],{"type":46,"tag":116,"props":117,"children":119},"code",{"className":118},[],[120],{"type":51,"value":121},"react-instantsearch",{"type":46,"tag":107,"props":123,"children":124},{},[125],{"type":51,"value":126},"React, Next.js, Remix",{"type":46,"tag":80,"props":128,"children":129},{},[130,135,144],{"type":46,"tag":107,"props":131,"children":132},{},[133],{"type":51,"value":134},"Vue InstantSearch",{"type":46,"tag":107,"props":136,"children":137},{},[138],{"type":46,"tag":116,"props":139,"children":141},{"className":140},[],[142],{"type":51,"value":143},"vue-instantsearch",{"type":46,"tag":107,"props":145,"children":146},{},[147],{"type":51,"value":148},"Vue, Nuxt",{"type":46,"tag":80,"props":150,"children":151},{},[152,157,166],{"type":46,"tag":107,"props":153,"children":154},{},[155],{"type":51,"value":156},"InstantSearch.js",{"type":46,"tag":107,"props":158,"children":159},{},[160],{"type":46,"tag":116,"props":161,"children":163},{"className":162},[],[164],{"type":51,"value":165},"instantsearch.js",{"type":46,"tag":107,"props":167,"children":168},{},[169],{"type":51,"value":170},"Vanilla JS, or any framework without a dedicated library",{"type":46,"tag":54,"props":172,"children":173},{},[174,176,182],{"type":51,"value":175},"Once identified, use the matching reference directory (e.g., ",{"type":46,"tag":116,"props":177,"children":179},{"className":178},[],[180],{"type":51,"value":181},"references\u002Freact\u002F",{"type":51,"value":183},") for all technology rules, anti-patterns, styling, glossary, and pattern-specific guidance.",{"type":46,"tag":185,"props":186,"children":187},"blockquote",{},[188,199],{"type":46,"tag":54,"props":189,"children":190},{},[191,197],{"type":46,"tag":192,"props":193,"children":194},"strong",{},[195],{"type":51,"value":196},"Note:",{"type":51,"value":198}," Coverage by library:",{"type":46,"tag":200,"props":201,"children":202},"ul",{},[203,213],{"type":46,"tag":204,"props":205,"children":206},"li",{},[207,211],{"type":46,"tag":192,"props":208,"children":209},{},[210],{"type":51,"value":111},{"type":51,"value":212},": full coverage (autocomplete, search results page, custom widgets, middleware, SSR).",{"type":46,"tag":204,"props":214,"children":215},{},[216,220,222,226,228,235],{"type":46,"tag":192,"props":217,"children":218},{},[219],{"type":51,"value":134},{"type":51,"value":221}," and ",{"type":46,"tag":192,"props":223,"children":224},{},[225],{"type":51,"value":156},{"type":51,"value":227},": library-level rules and autocomplete only. For other patterns, follow the ",{"type":46,"tag":229,"props":230,"children":232},"a",{"href":231},"#2-source-of-truth-check",[233],{"type":51,"value":234},"Source-of-truth check",{"type":51,"value":236}," and ask the user before scaffolding non-trivial flows.",{"type":46,"tag":60,"props":238,"children":240},{"id":239},"workflow",[241],{"type":51,"value":242},"Workflow",{"type":46,"tag":244,"props":245,"children":247},"h3",{"id":246},"_1-discover",[248],{"type":51,"value":249},"1. Discover",{"type":46,"tag":54,"props":251,"children":252},{},[253],{"type":51,"value":254},"Before writing any code, gather context. First check if InstantSearch is already set up in the codebase (search client, provider, existing widgets). If so, read the existing configuration instead of re-asking.",{"type":46,"tag":54,"props":256,"children":257},{},[258],{"type":51,"value":259},"If starting fresh, go step by step, waiting for the user's answer before moving on.",{"type":46,"tag":200,"props":261,"children":262},{},[263,273,283,518,528,554,564],{"type":46,"tag":204,"props":264,"children":265},{},[266,271],{"type":46,"tag":192,"props":267,"children":268},{},[269],{"type":51,"value":270},"Credentials",{"type":51,"value":272},": Ask the user for their Algolia app ID, search-only API key, and index name.",{"type":46,"tag":204,"props":274,"children":275},{},[276,281],{"type":46,"tag":192,"props":277,"children":278},{},[279],{"type":51,"value":280},"Query Suggestions",{"type":51,"value":282},": Ask the user if they have a Query Suggestions index.",{"type":46,"tag":204,"props":284,"children":285},{},[286,291,293],{"type":46,"tag":192,"props":287,"children":288},{},[289],{"type":51,"value":290},"Schema",{"type":51,"value":292},": Once you have credentials, fetch a few records from the main index to discover the available attributes and their shape. Confirm with the user rather than asking them to list everything. The schema is needed before you can propose rendering options. No need to fetch from the Query Suggestions index: its shape is standard and handled by the widget.",{"type":46,"tag":294,"props":295,"children":300},"pre",{"className":296,"code":297,"language":298,"meta":299,"style":299},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","curl -s -X POST \\\n  \"https:\u002F\u002F${APP_ID}.algolia.net\u002F1\u002Findexes\u002F${INDEX_NAME}\u002Fquery\" \\\n  -H \"x-algolia-api-key: ${API_KEY}\" \\\n  -H \"x-algolia-application-id: ${APP_ID}\" \\\n  -H \"content-type: application\u002Fjson\" \\\n  -d '{\"params\": \"hitsPerPage=5\"}'\n","bash","",[301],{"type":46,"tag":116,"props":302,"children":303},{"__ignoreMap":299},[304,338,399,436,469,494],{"type":46,"tag":305,"props":306,"children":309},"span",{"class":307,"line":308},"line",1,[310,316,322,327,332],{"type":46,"tag":305,"props":311,"children":313},{"style":312},"--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B",[314],{"type":51,"value":315},"curl",{"type":46,"tag":305,"props":317,"children":319},{"style":318},"--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D",[320],{"type":51,"value":321}," -s",{"type":46,"tag":305,"props":323,"children":324},{"style":318},[325],{"type":51,"value":326}," -X",{"type":46,"tag":305,"props":328,"children":329},{"style":318},[330],{"type":51,"value":331}," POST",{"type":46,"tag":305,"props":333,"children":335},{"style":334},"--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8",[336],{"type":51,"value":337}," \\\n",{"type":46,"tag":305,"props":339,"children":340},{"class":307,"line":26},[341,347,352,357,362,367,372,376,381,385,390,395],{"type":46,"tag":305,"props":342,"children":344},{"style":343},"--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF",[345],{"type":51,"value":346},"  \"",{"type":46,"tag":305,"props":348,"children":349},{"style":318},[350],{"type":51,"value":351},"https:\u002F\u002F",{"type":46,"tag":305,"props":353,"children":354},{"style":343},[355],{"type":51,"value":356},"${",{"type":46,"tag":305,"props":358,"children":359},{"style":334},[360],{"type":51,"value":361},"APP_ID",{"type":46,"tag":305,"props":363,"children":364},{"style":343},[365],{"type":51,"value":366},"}",{"type":46,"tag":305,"props":368,"children":369},{"style":318},[370],{"type":51,"value":371},".algolia.net\u002F1\u002Findexes\u002F",{"type":46,"tag":305,"props":373,"children":374},{"style":343},[375],{"type":51,"value":356},{"type":46,"tag":305,"props":377,"children":378},{"style":334},[379],{"type":51,"value":380},"INDEX_NAME",{"type":46,"tag":305,"props":382,"children":383},{"style":343},[384],{"type":51,"value":366},{"type":46,"tag":305,"props":386,"children":387},{"style":318},[388],{"type":51,"value":389},"\u002Fquery",{"type":46,"tag":305,"props":391,"children":392},{"style":343},[393],{"type":51,"value":394},"\"",{"type":46,"tag":305,"props":396,"children":397},{"style":334},[398],{"type":51,"value":337},{"type":46,"tag":305,"props":400,"children":402},{"class":307,"line":401},3,[403,408,413,418,422,427,432],{"type":46,"tag":305,"props":404,"children":405},{"style":318},[406],{"type":51,"value":407},"  -H",{"type":46,"tag":305,"props":409,"children":410},{"style":343},[411],{"type":51,"value":412}," \"",{"type":46,"tag":305,"props":414,"children":415},{"style":318},[416],{"type":51,"value":417},"x-algolia-api-key: ",{"type":46,"tag":305,"props":419,"children":420},{"style":343},[421],{"type":51,"value":356},{"type":46,"tag":305,"props":423,"children":424},{"style":334},[425],{"type":51,"value":426},"API_KEY",{"type":46,"tag":305,"props":428,"children":429},{"style":343},[430],{"type":51,"value":431},"}\"",{"type":46,"tag":305,"props":433,"children":434},{"style":334},[435],{"type":51,"value":337},{"type":46,"tag":305,"props":437,"children":439},{"class":307,"line":438},4,[440,444,448,453,457,461,465],{"type":46,"tag":305,"props":441,"children":442},{"style":318},[443],{"type":51,"value":407},{"type":46,"tag":305,"props":445,"children":446},{"style":343},[447],{"type":51,"value":412},{"type":46,"tag":305,"props":449,"children":450},{"style":318},[451],{"type":51,"value":452},"x-algolia-application-id: ",{"type":46,"tag":305,"props":454,"children":455},{"style":343},[456],{"type":51,"value":356},{"type":46,"tag":305,"props":458,"children":459},{"style":334},[460],{"type":51,"value":361},{"type":46,"tag":305,"props":462,"children":463},{"style":343},[464],{"type":51,"value":431},{"type":46,"tag":305,"props":466,"children":467},{"style":334},[468],{"type":51,"value":337},{"type":46,"tag":305,"props":470,"children":472},{"class":307,"line":471},5,[473,477,481,486,490],{"type":46,"tag":305,"props":474,"children":475},{"style":318},[476],{"type":51,"value":407},{"type":46,"tag":305,"props":478,"children":479},{"style":343},[480],{"type":51,"value":412},{"type":46,"tag":305,"props":482,"children":483},{"style":318},[484],{"type":51,"value":485},"content-type: application\u002Fjson",{"type":46,"tag":305,"props":487,"children":488},{"style":343},[489],{"type":51,"value":394},{"type":46,"tag":305,"props":491,"children":492},{"style":334},[493],{"type":51,"value":337},{"type":46,"tag":305,"props":495,"children":497},{"class":307,"line":496},6,[498,503,508,513],{"type":46,"tag":305,"props":499,"children":500},{"style":318},[501],{"type":51,"value":502},"  -d",{"type":46,"tag":305,"props":504,"children":505},{"style":343},[506],{"type":51,"value":507}," '",{"type":46,"tag":305,"props":509,"children":510},{"style":318},[511],{"type":51,"value":512},"{\"params\": \"hitsPerPage=5\"}",{"type":46,"tag":305,"props":514,"children":515},{"style":343},[516],{"type":51,"value":517},"'\n",{"type":46,"tag":204,"props":519,"children":520},{},[521,526],{"type":46,"tag":192,"props":522,"children":523},{},[524],{"type":51,"value":525},"Project inspection",{"type":51,"value":527},": Read the project's existing styling approach, breakpoints, layout, responsive patterns, component library, and framework details. Identify which InstantSearch library to use (see table above).",{"type":46,"tag":204,"props":529,"children":530},{},[531,536,538,544,546,552],{"type":46,"tag":192,"props":532,"children":533},{},[534],{"type":51,"value":535},"Routes",{"type":51,"value":537},": Find the detail page route pattern (e.g., ",{"type":46,"tag":116,"props":539,"children":541},{"className":540},[],[542],{"type":51,"value":543},"\u002Fproducts\u002F[id]",{"type":51,"value":545},", ",{"type":46,"tag":116,"props":547,"children":549},{"className":548},[],[550],{"type":51,"value":551},"\u002Farticles\u002F[slug]",{"type":51,"value":553},") and look for an existing listing or search results page. If one is found, verify it actually reads query parameters and renders dynamic results (not just a static listing). If none is found or the page is static, ask the user: \"What page should search redirect to when a query is submitted? Or is there no results page?\"",{"type":46,"tag":204,"props":555,"children":556},{},[557,562],{"type":46,"tag":192,"props":558,"children":559},{},[560],{"type":51,"value":561},"Placement",{"type":51,"value":563},": Find where the search experience should live in the UI. Refer to the pattern's features reference for guidance, or ask the user.",{"type":46,"tag":204,"props":565,"children":566},{},[567,572],{"type":46,"tag":192,"props":568,"children":569},{},[570],{"type":51,"value":571},"Rendering",{"type":51,"value":573},": Present the user with concrete, numbered options for how results should appear. These depend on the schema (what attributes are available) and the project's design. Refer to the pattern's features reference for options to present.",{"type":46,"tag":54,"props":575,"children":576},{},[577],{"type":51,"value":578},"Do not proceed until you have credentials, schema, rendering preferences, and an understanding of the project's design.",{"type":46,"tag":244,"props":580,"children":582},{"id":581},"_2-source-of-truth-check",[583],{"type":51,"value":584},"2. Source-of-truth check",{"type":46,"tag":54,"props":586,"children":587},{},[588,590,595],{"type":51,"value":589},"This skill bakes guidance for the highest-value patterns only. Whenever you need a widget, hook, connector, prop, middleware, future flag, or API that is ",{"type":46,"tag":192,"props":591,"children":592},{},[593],{"type":51,"value":594},"not explicitly documented in this skill",{"type":51,"value":596},", you must consult the source of truth before writing code. Training data is stale, lossy, and frequently wrong on prop shapes.",{"type":46,"tag":54,"props":598,"children":599},{},[600],{"type":51,"value":601},"Follow the library's source-of-truth reference for the exact commands and URL patterns:",{"type":46,"tag":72,"props":603,"children":604},{},[605,620],{"type":46,"tag":76,"props":606,"children":607},{},[608],{"type":46,"tag":80,"props":609,"children":610},{},[611,615],{"type":46,"tag":84,"props":612,"children":613},{},[614],{"type":51,"value":88},{"type":46,"tag":84,"props":616,"children":617},{},[618],{"type":51,"value":619},"Reference",{"type":46,"tag":100,"props":621,"children":622},{},[623,640,656],{"type":46,"tag":80,"props":624,"children":625},{},[626,631],{"type":46,"tag":107,"props":627,"children":628},{},[629],{"type":51,"value":630},"React",{"type":46,"tag":107,"props":632,"children":633},{},[634],{"type":46,"tag":229,"props":635,"children":637},{"href":636},"references\u002Freact\u002Fsource-of-truth.md",[638],{"type":51,"value":639},"source-of-truth.md",{"type":46,"tag":80,"props":641,"children":642},{},[643,648],{"type":46,"tag":107,"props":644,"children":645},{},[646],{"type":51,"value":647},"Vue",{"type":46,"tag":107,"props":649,"children":650},{},[651],{"type":46,"tag":229,"props":652,"children":654},{"href":653},"references\u002Fvue\u002Fsource-of-truth.md",[655],{"type":51,"value":639},{"type":46,"tag":80,"props":657,"children":658},{},[659,664],{"type":46,"tag":107,"props":660,"children":661},{},[662],{"type":51,"value":663},"JS",{"type":46,"tag":107,"props":665,"children":666},{},[667],{"type":46,"tag":229,"props":668,"children":670},{"href":669},"references\u002Fjs\u002Fsource-of-truth.md",[671],{"type":51,"value":639},{"type":46,"tag":54,"props":673,"children":674},{},[675],{"type":51,"value":676},"The reference always covers, in order:",{"type":46,"tag":678,"props":679,"children":680},"ol",{},[681,699,709,719],{"type":46,"tag":204,"props":682,"children":683},{},[684,689,691,697],{"type":46,"tag":192,"props":685,"children":686},{},[687],{"type":51,"value":688},"Read installed types",{"type":51,"value":690}," in ",{"type":46,"tag":116,"props":692,"children":694},{"className":693},[],[695],{"type":51,"value":696},"node_modules",{"type":51,"value":698}," for prop shapes, renderState, and connector contracts.",{"type":46,"tag":204,"props":700,"children":701},{},[702,707],{"type":46,"tag":192,"props":703,"children":704},{},[705],{"type":51,"value":706},"Fetch the live Algolia docs",{"type":51,"value":708}," at the canonical URL pattern.",{"type":46,"tag":204,"props":710,"children":711},{},[712,717],{"type":46,"tag":192,"props":713,"children":714},{},[715],{"type":51,"value":716},"Grep installed CSS \u002F source",{"type":51,"value":718}," for class names you intend to style.",{"type":46,"tag":204,"props":720,"children":721},{},[722,727],{"type":46,"tag":192,"props":723,"children":724},{},[725],{"type":51,"value":726},"Only then write code.",{"type":51,"value":728}," If a step fails (offline, 404, missing types), ask the user before guessing.",{"type":46,"tag":54,"props":730,"children":731},{},[732],{"type":51,"value":733},"Do this even when a pattern reference exists, if you need any prop or behavior the pattern reference does not explicitly cover.",{"type":46,"tag":244,"props":735,"children":737},{"id":736},"_3-build",[738],{"type":51,"value":739},"3. Build",{"type":46,"tag":54,"props":741,"children":742},{},[743],{"type":51,"value":744},"Pick the matching pattern reference for the library and the user's request. If no pattern reference exists for what the user asked for, fall back on the source-of-truth check (Step 2) and ask the user before scaffolding speculative widget trees.",{"type":46,"tag":54,"props":746,"children":747},{},[748],{"type":51,"value":749},"Patterns available for each library:",{"type":46,"tag":72,"props":751,"children":752},{},[753,776],{"type":46,"tag":76,"props":754,"children":755},{},[756],{"type":46,"tag":80,"props":757,"children":758},{},[759,764,768,772],{"type":46,"tag":84,"props":760,"children":761},{},[762],{"type":51,"value":763},"Pattern",{"type":46,"tag":84,"props":765,"children":766},{},[767],{"type":51,"value":630},{"type":46,"tag":84,"props":769,"children":770},{},[771],{"type":51,"value":647},{"type":46,"tag":84,"props":773,"children":774},{},[775],{"type":51,"value":663},{"type":46,"tag":100,"props":777,"children":778},{},[779,850],{"type":46,"tag":80,"props":780,"children":781},{},[782,787,810,830],{"type":46,"tag":107,"props":783,"children":784},{},[785],{"type":51,"value":786},"Autocomplete",{"type":46,"tag":107,"props":788,"children":789},{},[790,796,797,803,804],{"type":46,"tag":229,"props":791,"children":793},{"href":792},"references\u002Freact\u002Fautocomplete\u002Ffeatures.md",[794],{"type":51,"value":795},"features",{"type":51,"value":545},{"type":46,"tag":229,"props":798,"children":800},{"href":799},"references\u002Freact\u002Fautocomplete\u002Fstyling.md",[801],{"type":51,"value":802},"styling",{"type":51,"value":545},{"type":46,"tag":229,"props":805,"children":807},{"href":806},"references\u002Freact\u002Fautocomplete\u002Fanti-patterns.md",[808],{"type":51,"value":809},"anti-patterns",{"type":46,"tag":107,"props":811,"children":812},{},[813,818,819,824,825],{"type":46,"tag":229,"props":814,"children":816},{"href":815},"references\u002Fvue\u002Fautocomplete\u002Ffeatures.md",[817],{"type":51,"value":795},{"type":51,"value":545},{"type":46,"tag":229,"props":820,"children":822},{"href":821},"references\u002Fvue\u002Fautocomplete\u002Fstyling.md",[823],{"type":51,"value":802},{"type":51,"value":545},{"type":46,"tag":229,"props":826,"children":828},{"href":827},"references\u002Fvue\u002Fautocomplete\u002Fanti-patterns.md",[829],{"type":51,"value":809},{"type":46,"tag":107,"props":831,"children":832},{},[833,838,839,844,845],{"type":46,"tag":229,"props":834,"children":836},{"href":835},"references\u002Fjs\u002Fautocomplete\u002Ffeatures.md",[837],{"type":51,"value":795},{"type":51,"value":545},{"type":46,"tag":229,"props":840,"children":842},{"href":841},"references\u002Fjs\u002Fautocomplete\u002Fstyling.md",[843],{"type":51,"value":802},{"type":51,"value":545},{"type":46,"tag":229,"props":846,"children":848},{"href":847},"references\u002Fjs\u002Fautocomplete\u002Fanti-patterns.md",[849],{"type":51,"value":809},{"type":46,"tag":80,"props":851,"children":852},{},[853,858,878,883],{"type":46,"tag":107,"props":854,"children":855},{},[856],{"type":51,"value":857},"Search results page (incl. faceted search, sort, pagination)",{"type":46,"tag":107,"props":859,"children":860},{},[861,866,867,872,873],{"type":46,"tag":229,"props":862,"children":864},{"href":863},"references\u002Freact\u002Fsearch-results-page\u002Ffeatures.md",[865],{"type":51,"value":795},{"type":51,"value":545},{"type":46,"tag":229,"props":868,"children":870},{"href":869},"references\u002Freact\u002Fsearch-results-page\u002Fstyling.md",[871],{"type":51,"value":802},{"type":51,"value":545},{"type":46,"tag":229,"props":874,"children":876},{"href":875},"references\u002Freact\u002Fsearch-results-page\u002Fanti-patterns.md",[877],{"type":51,"value":809},{"type":46,"tag":107,"props":879,"children":880},{},[881],{"type":51,"value":882},"—",{"type":46,"tag":107,"props":884,"children":885},{},[886],{"type":51,"value":882},{"type":46,"tag":54,"props":888,"children":889},{},[890],{"type":51,"value":891},"Also read and apply the library-level references (apply regardless of pattern):",{"type":46,"tag":72,"props":893,"children":894},{},[895,917],{"type":46,"tag":76,"props":896,"children":897},{},[898],{"type":46,"tag":80,"props":899,"children":900},{},[901,905,909,913],{"type":46,"tag":84,"props":902,"children":903},{},[904],{"type":51,"value":619},{"type":46,"tag":84,"props":906,"children":907},{},[908],{"type":51,"value":630},{"type":46,"tag":84,"props":910,"children":911},{},[912],{"type":51,"value":647},{"type":46,"tag":84,"props":914,"children":915},{},[916],{"type":51,"value":663},{"type":46,"tag":100,"props":918,"children":919},{},[920,953,986,1019,1052,1081,1106,1131,1156,1175,1197,1229],{"type":46,"tag":80,"props":921,"children":922},{},[923,928,937,945],{"type":46,"tag":107,"props":924,"children":925},{},[926],{"type":51,"value":927},"Technology rules",{"type":46,"tag":107,"props":929,"children":930},{},[931],{"type":46,"tag":229,"props":932,"children":934},{"href":933},"references\u002Freact\u002Ftechnology-rules.md",[935],{"type":51,"value":936},"technology-rules.md",{"type":46,"tag":107,"props":938,"children":939},{},[940],{"type":46,"tag":229,"props":941,"children":943},{"href":942},"references\u002Fvue\u002Ftechnology-rules.md",[944],{"type":51,"value":936},{"type":46,"tag":107,"props":946,"children":947},{},[948],{"type":46,"tag":229,"props":949,"children":951},{"href":950},"references\u002Fjs\u002Ftechnology-rules.md",[952],{"type":51,"value":936},{"type":46,"tag":80,"props":954,"children":955},{},[956,961,970,978],{"type":46,"tag":107,"props":957,"children":958},{},[959],{"type":51,"value":960},"Anti-patterns",{"type":46,"tag":107,"props":962,"children":963},{},[964],{"type":46,"tag":229,"props":965,"children":967},{"href":966},"references\u002Freact\u002Fanti-patterns.md",[968],{"type":51,"value":969},"anti-patterns.md",{"type":46,"tag":107,"props":971,"children":972},{},[973],{"type":46,"tag":229,"props":974,"children":976},{"href":975},"references\u002Fvue\u002Fanti-patterns.md",[977],{"type":51,"value":969},{"type":46,"tag":107,"props":979,"children":980},{},[981],{"type":46,"tag":229,"props":982,"children":984},{"href":983},"references\u002Fjs\u002Fanti-patterns.md",[985],{"type":51,"value":969},{"type":46,"tag":80,"props":987,"children":988},{},[989,994,1003,1011],{"type":46,"tag":107,"props":990,"children":991},{},[992],{"type":51,"value":993},"Styling",{"type":46,"tag":107,"props":995,"children":996},{},[997],{"type":46,"tag":229,"props":998,"children":1000},{"href":999},"references\u002Freact\u002Fstyling.md",[1001],{"type":51,"value":1002},"styling.md",{"type":46,"tag":107,"props":1004,"children":1005},{},[1006],{"type":46,"tag":229,"props":1007,"children":1009},{"href":1008},"references\u002Fvue\u002Fstyling.md",[1010],{"type":51,"value":1002},{"type":46,"tag":107,"props":1012,"children":1013},{},[1014],{"type":46,"tag":229,"props":1015,"children":1017},{"href":1016},"references\u002Fjs\u002Fstyling.md",[1018],{"type":51,"value":1002},{"type":46,"tag":80,"props":1020,"children":1021},{},[1022,1027,1036,1044],{"type":46,"tag":107,"props":1023,"children":1024},{},[1025],{"type":51,"value":1026},"Glossary",{"type":46,"tag":107,"props":1028,"children":1029},{},[1030],{"type":46,"tag":229,"props":1031,"children":1033},{"href":1032},"references\u002Freact\u002Fglossary.md",[1034],{"type":51,"value":1035},"glossary.md",{"type":46,"tag":107,"props":1037,"children":1038},{},[1039],{"type":46,"tag":229,"props":1040,"children":1042},{"href":1041},"references\u002Fvue\u002Fglossary.md",[1043],{"type":51,"value":1035},{"type":46,"tag":107,"props":1045,"children":1046},{},[1047],{"type":46,"tag":229,"props":1048,"children":1050},{"href":1049},"references\u002Fjs\u002Fglossary.md",[1051],{"type":51,"value":1035},{"type":46,"tag":80,"props":1053,"children":1054},{},[1055,1060,1067,1074],{"type":46,"tag":107,"props":1056,"children":1057},{},[1058],{"type":51,"value":1059},"Source of truth",{"type":46,"tag":107,"props":1061,"children":1062},{},[1063],{"type":46,"tag":229,"props":1064,"children":1065},{"href":636},[1066],{"type":51,"value":639},{"type":46,"tag":107,"props":1068,"children":1069},{},[1070],{"type":46,"tag":229,"props":1071,"children":1072},{"href":653},[1073],{"type":51,"value":639},{"type":46,"tag":107,"props":1075,"children":1076},{},[1077],{"type":46,"tag":229,"props":1078,"children":1079},{"href":669},[1080],{"type":51,"value":639},{"type":46,"tag":80,"props":1082,"children":1083},{},[1084,1089,1098,1102],{"type":46,"tag":107,"props":1085,"children":1086},{},[1087],{"type":51,"value":1088},"Custom widgets",{"type":46,"tag":107,"props":1090,"children":1091},{},[1092],{"type":46,"tag":229,"props":1093,"children":1095},{"href":1094},"references\u002Freact\u002Fcustom-widgets.md",[1096],{"type":51,"value":1097},"custom-widgets.md",{"type":46,"tag":107,"props":1099,"children":1100},{},[1101],{"type":51,"value":882},{"type":46,"tag":107,"props":1103,"children":1104},{},[1105],{"type":51,"value":882},{"type":46,"tag":80,"props":1107,"children":1108},{},[1109,1114,1123,1127],{"type":46,"tag":107,"props":1110,"children":1111},{},[1112],{"type":51,"value":1113},"Middleware",{"type":46,"tag":107,"props":1115,"children":1116},{},[1117],{"type":46,"tag":229,"props":1118,"children":1120},{"href":1119},"references\u002Freact\u002Fmiddleware.md",[1121],{"type":51,"value":1122},"middleware.md",{"type":46,"tag":107,"props":1124,"children":1125},{},[1126],{"type":51,"value":882},{"type":46,"tag":107,"props":1128,"children":1129},{},[1130],{"type":51,"value":882},{"type":46,"tag":80,"props":1132,"children":1133},{},[1134,1139,1148,1152],{"type":46,"tag":107,"props":1135,"children":1136},{},[1137],{"type":51,"value":1138},"SSR",{"type":46,"tag":107,"props":1140,"children":1141},{},[1142],{"type":46,"tag":229,"props":1143,"children":1145},{"href":1144},"references\u002Freact\u002Fssr.md",[1146],{"type":51,"value":1147},"ssr.md",{"type":46,"tag":107,"props":1149,"children":1150},{},[1151],{"type":51,"value":882},{"type":46,"tag":107,"props":1153,"children":1154},{},[1155],{"type":51,"value":882},{"type":46,"tag":80,"props":1157,"children":1158},{},[1159,1163,1167,1171],{"type":46,"tag":107,"props":1160,"children":1161},{},[1162],{"type":51,"value":763},{"type":46,"tag":107,"props":1164,"children":1165},{},[1166],{"type":51,"value":630},{"type":46,"tag":107,"props":1168,"children":1169},{},[1170],{"type":51,"value":647},{"type":46,"tag":107,"props":1172,"children":1173},{},[1174],{"type":51,"value":663},{"type":46,"tag":80,"props":1176,"children":1177},{},[1178,1183,1188,1193],{"type":46,"tag":107,"props":1179,"children":1180},{},[1181],{"type":51,"value":1182},"------------------------------------------------------------",{"type":46,"tag":107,"props":1184,"children":1185},{},[1186],{"type":51,"value":1187},"------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------",{"type":46,"tag":107,"props":1189,"children":1190},{},[1191],{"type":51,"value":1192},"---",{"type":46,"tag":107,"props":1194,"children":1195},{},[1196],{"type":51,"value":1192},{"type":46,"tag":80,"props":1198,"children":1199},{},[1200,1204,1221,1225],{"type":46,"tag":107,"props":1201,"children":1202},{},[1203],{"type":51,"value":786},{"type":46,"tag":107,"props":1205,"children":1206},{},[1207,1211,1212,1216,1217],{"type":46,"tag":229,"props":1208,"children":1209},{"href":792},[1210],{"type":51,"value":795},{"type":51,"value":545},{"type":46,"tag":229,"props":1213,"children":1214},{"href":799},[1215],{"type":51,"value":802},{"type":51,"value":545},{"type":46,"tag":229,"props":1218,"children":1219},{"href":806},[1220],{"type":51,"value":809},{"type":46,"tag":107,"props":1222,"children":1223},{},[1224],{"type":51,"value":882},{"type":46,"tag":107,"props":1226,"children":1227},{},[1228],{"type":51,"value":882},{"type":46,"tag":80,"props":1230,"children":1231},{},[1232,1236,1253,1257],{"type":46,"tag":107,"props":1233,"children":1234},{},[1235],{"type":51,"value":857},{"type":46,"tag":107,"props":1237,"children":1238},{},[1239,1243,1244,1248,1249],{"type":46,"tag":229,"props":1240,"children":1241},{"href":863},[1242],{"type":51,"value":795},{"type":51,"value":545},{"type":46,"tag":229,"props":1245,"children":1246},{"href":869},[1247],{"type":51,"value":802},{"type":51,"value":545},{"type":46,"tag":229,"props":1250,"children":1251},{"href":875},[1252],{"type":51,"value":809},{"type":46,"tag":107,"props":1254,"children":1255},{},[1256],{"type":51,"value":882},{"type":46,"tag":107,"props":1258,"children":1259},{},[1260],{"type":51,"value":882},{"type":46,"tag":54,"props":1262,"children":1263},{},[1264],{"type":51,"value":891},{"type":46,"tag":72,"props":1266,"children":1267},{},[1268,1290],{"type":46,"tag":76,"props":1269,"children":1270},{},[1271],{"type":46,"tag":80,"props":1272,"children":1273},{},[1274,1278,1282,1286],{"type":46,"tag":84,"props":1275,"children":1276},{},[1277],{"type":51,"value":619},{"type":46,"tag":84,"props":1279,"children":1280},{},[1281],{"type":51,"value":630},{"type":46,"tag":84,"props":1283,"children":1284},{},[1285],{"type":51,"value":647},{"type":46,"tag":84,"props":1287,"children":1288},{},[1289],{"type":51,"value":663},{"type":46,"tag":100,"props":1291,"children":1292},{},[1293,1315,1337,1359,1381,1403,1425,1447],{"type":46,"tag":80,"props":1294,"children":1295},{},[1296,1300,1307,1311],{"type":46,"tag":107,"props":1297,"children":1298},{},[1299],{"type":51,"value":927},{"type":46,"tag":107,"props":1301,"children":1302},{},[1303],{"type":46,"tag":229,"props":1304,"children":1305},{"href":933},[1306],{"type":51,"value":936},{"type":46,"tag":107,"props":1308,"children":1309},{},[1310],{"type":51,"value":882},{"type":46,"tag":107,"props":1312,"children":1313},{},[1314],{"type":51,"value":882},{"type":46,"tag":80,"props":1316,"children":1317},{},[1318,1322,1329,1333],{"type":46,"tag":107,"props":1319,"children":1320},{},[1321],{"type":51,"value":960},{"type":46,"tag":107,"props":1323,"children":1324},{},[1325],{"type":46,"tag":229,"props":1326,"children":1327},{"href":966},[1328],{"type":51,"value":969},{"type":46,"tag":107,"props":1330,"children":1331},{},[1332],{"type":51,"value":882},{"type":46,"tag":107,"props":1334,"children":1335},{},[1336],{"type":51,"value":882},{"type":46,"tag":80,"props":1338,"children":1339},{},[1340,1344,1351,1355],{"type":46,"tag":107,"props":1341,"children":1342},{},[1343],{"type":51,"value":993},{"type":46,"tag":107,"props":1345,"children":1346},{},[1347],{"type":46,"tag":229,"props":1348,"children":1349},{"href":999},[1350],{"type":51,"value":1002},{"type":46,"tag":107,"props":1352,"children":1353},{},[1354],{"type":51,"value":882},{"type":46,"tag":107,"props":1356,"children":1357},{},[1358],{"type":51,"value":882},{"type":46,"tag":80,"props":1360,"children":1361},{},[1362,1366,1373,1377],{"type":46,"tag":107,"props":1363,"children":1364},{},[1365],{"type":51,"value":1026},{"type":46,"tag":107,"props":1367,"children":1368},{},[1369],{"type":46,"tag":229,"props":1370,"children":1371},{"href":1032},[1372],{"type":51,"value":1035},{"type":46,"tag":107,"props":1374,"children":1375},{},[1376],{"type":51,"value":882},{"type":46,"tag":107,"props":1378,"children":1379},{},[1380],{"type":51,"value":882},{"type":46,"tag":80,"props":1382,"children":1383},{},[1384,1388,1395,1399],{"type":46,"tag":107,"props":1385,"children":1386},{},[1387],{"type":51,"value":1059},{"type":46,"tag":107,"props":1389,"children":1390},{},[1391],{"type":46,"tag":229,"props":1392,"children":1393},{"href":636},[1394],{"type":51,"value":639},{"type":46,"tag":107,"props":1396,"children":1397},{},[1398],{"type":51,"value":882},{"type":46,"tag":107,"props":1400,"children":1401},{},[1402],{"type":51,"value":882},{"type":46,"tag":80,"props":1404,"children":1405},{},[1406,1410,1417,1421],{"type":46,"tag":107,"props":1407,"children":1408},{},[1409],{"type":51,"value":1088},{"type":46,"tag":107,"props":1411,"children":1412},{},[1413],{"type":46,"tag":229,"props":1414,"children":1415},{"href":1094},[1416],{"type":51,"value":1097},{"type":46,"tag":107,"props":1418,"children":1419},{},[1420],{"type":51,"value":882},{"type":46,"tag":107,"props":1422,"children":1423},{},[1424],{"type":51,"value":882},{"type":46,"tag":80,"props":1426,"children":1427},{},[1428,1432,1439,1443],{"type":46,"tag":107,"props":1429,"children":1430},{},[1431],{"type":51,"value":1113},{"type":46,"tag":107,"props":1433,"children":1434},{},[1435],{"type":46,"tag":229,"props":1436,"children":1437},{"href":1119},[1438],{"type":51,"value":1122},{"type":46,"tag":107,"props":1440,"children":1441},{},[1442],{"type":51,"value":882},{"type":46,"tag":107,"props":1444,"children":1445},{},[1446],{"type":51,"value":882},{"type":46,"tag":80,"props":1448,"children":1449},{},[1450,1454,1461,1465],{"type":46,"tag":107,"props":1451,"children":1452},{},[1453],{"type":51,"value":1138},{"type":46,"tag":107,"props":1455,"children":1456},{},[1457],{"type":46,"tag":229,"props":1458,"children":1459},{"href":1144},[1460],{"type":51,"value":1147},{"type":46,"tag":107,"props":1462,"children":1463},{},[1464],{"type":51,"value":882},{"type":46,"tag":107,"props":1466,"children":1467},{},[1468],{"type":51,"value":882},{"type":46,"tag":54,"props":1470,"children":1471},{},[1472],{"type":51,"value":1473},"Consult types and live docs first (Step 2). Ask the user only if both fail. Never fall back to legacy libraries or guessed APIs.",{"type":46,"tag":244,"props":1475,"children":1477},{"id":1476},"_4-style",[1478],{"type":51,"value":1479},"4. Style",{"type":46,"tag":54,"props":1481,"children":1482},{},[1483],{"type":51,"value":1484},"Follow the library's styling guide step by step, then apply the pattern-specific styling guide. Match the site's existing CSS methodology, color scheme, typography, spacing, and component patterns.",{"type":46,"tag":244,"props":1486,"children":1488},{"id":1487},"_5-review",[1489],{"type":51,"value":1490},"5. Review",{"type":46,"tag":54,"props":1492,"children":1493},{},[1494],{"type":51,"value":1495},"Review your work against the library's anti-patterns, the pattern-specific anti-patterns, and the features checklist. Fix any violations.",{"type":46,"tag":1497,"props":1498,"children":1499},"style",{},[1500],{"type":51,"value":1501},"html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"items":1503,"total":1602},[1504,1521,1534,1545,1559,1572,1584],{"slug":1505,"name":1505,"fn":1506,"description":1507,"org":1508,"tags":1509,"stars":22,"repoUrl":23,"updatedAt":1520},"algobot-cli","build conversational AI with Algolia","Use for anything AI\u002Fagent\u002Fconversational built on Algolia: algobot CLI, Agent Studio, RAG systems, conversational product discovery, genAI content generation from search results (carousels, descriptions, headers), chatbots or recommendation agents using Algolia as retrieval, config-as-code workflows, multi-environment deploy (dev\u002Fstaging\u002Fprod), memory and personalization, MCP tool integrations, conversation history \u002F GDPR retention, or adding a chat widget alongside InstantSearch. Trigger on: \"algobot\", \"Agent Studio\", \"RAG with Algolia\", \"conversational experience\", \"AI agent\" + Algolia, \"genAI carousel\", \"chat widget\", or building AI features on top of Algolia search. Do NOT use for raw index ops (records, synonyms, settings) — use algolia-cli. Do NOT use for pure frontend search UI (InstantSearch, autocomplete) with no AI\u002Fagent layer.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1510,1513,1516,1519],{"name":1511,"slug":1512,"type":15},"Agents","agents",{"name":1514,"slug":1515,"type":15},"Automation","automation",{"name":1517,"slug":1518,"type":15},"LLM","llm",{"name":13,"slug":14,"type":15},"2026-07-12T08:27:37.649724",{"slug":1522,"name":1522,"fn":1523,"description":1524,"org":1525,"tags":1526,"stars":22,"repoUrl":23,"updatedAt":1533},"algolia-agent-studio","build conversational agents with Algolia Agent Studio","Product-specific Algolia Agent Studio implementation, validation, and optimization guidance. Use when planning, building, integrating, or auditing Agent Studio agents, AI-powered conversational experiences, LLM provider setup, Algolia Search tools, client-side tools, MCP tools, memory, prompting, conversations, turn context, caching, analytics, feedback, authentication, approved domains, guardrails, or tool security. Do NOT use for live Agent Studio configuration, dry runs, publish\u002Fdeploy actions, or config-as-code operations; use the official algobot-cli skill instead. Do NOT use for generic non-Algolia RAG or chatbot architecture unless Agent Studio is the target product.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1527,1528,1531,1532],{"name":1511,"slug":1512,"type":15},{"name":1529,"slug":1530,"type":15},"AI","ai",{"name":9,"slug":8,"type":15},{"name":13,"slug":14,"type":15},"2026-08-01T06:06:28.033767",{"slug":1535,"name":1535,"fn":1536,"description":1537,"org":1538,"tags":1539,"stars":22,"repoUrl":23,"updatedAt":1544},"algolia-autocomplete","build Algolia autocomplete and query suggestions","Build and review Algolia Autocomplete and query suggestion experiences. Use when planning or implementing typeahead, query suggestions, recent searches, popular searches, federated autocomplete panels, product\u002Fcontent suggestions, detached mobile mode, plugins, keyboard navigation, insights events, or Autocomplete integration with InstantSearch. For net-new search or ecommerce builds, start with algolia-discovery-planning, which loads algolia-search-implementation so source strategy, data contract, and event taxonomy decisions are visible before autocomplete is marked ready. Do NOT use for full search results pages, browse pages, filters, pagination, or current refinements; use algolia-instantsearch-ui instead. Do NOT use for choosing between Algolia UI libraries; use algolia-ui-libraries. Do NOT use as the source of truth for current Autocomplete package APIs; use the official instantsearch skill and current docs alongside this customer-readiness skill.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1540,1541,1542,1543],{"name":9,"slug":8,"type":15},{"name":20,"slug":21,"type":15},{"name":13,"slug":14,"type":15},{"name":17,"slug":18,"type":15},"2026-08-01T06:06:29.968123",{"slug":1546,"name":1546,"fn":1547,"description":1548,"org":1549,"tags":1550,"stars":22,"repoUrl":23,"updatedAt":1558},"algolia-cli","manage Algolia indices and accounts","Use this skill whenever a user wants to execute operations against Algolia indices or accounts — deleting records, copying\u002Fmigrating indices, backing up data, importing\u002Fexporting records, managing API keys, editing synonyms, configuring rules, changing settings like facets, clearing indices, or automating Algolia in CI\u002FCD pipelines. The key signal is that the user wants to *act on* their Algolia data or configuration (server-side \u002F backend \u002F admin operations), regardless of whether they mention \"CLI\" or \"command line.\" If someone names a specific Algolia index and wants to change, move, query, or manage it, use this skill. Do NOT use for frontend search UI work (InstantSearch, React components, autocomplete widgets), Algolia dashboard GUI questions, or evaluating Algolia vs. other providers.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1551,1554,1557],{"name":1552,"slug":1553,"type":15},"CLI","cli",{"name":1555,"slug":1556,"type":15},"Data Engineering","data-engineering",{"name":13,"slug":14,"type":15},"2026-07-12T08:27:35.085246",{"slug":1560,"name":1560,"fn":1561,"description":1562,"org":1563,"tags":1564,"stars":22,"repoUrl":23,"updatedAt":1571},"algolia-crawler","crawl websites into Algolia indices","Use this skill whenever a user wants to crawl one or more web pages or a whole site and turn them into an Algolia index using the Algolia CLI — especially for RAG, AI search, semantic search, or Agent Studio retrieval. Triggers: \"index my website\u002Fdocs with Algolia\", \"set up the Algolia Crawler\", \"crawl this page for RAG\", \"scrape my site into Algolia\", \"build a knowledge base for my AI agent from these URLs\", writing or debugging a crawler recordExtractor, or handling JavaScript-rendered pages that won't index. It guides ingestion end-to-end with `algolia crawler` commands: inspect the page, write a RAG-optimized recordExtractor, validate with `algolia crawler test` BEFORE indexing, apply index settings explicitly, then reindex. Do NOT use for building the chatbot\u002Fagent layer itself (use algobot-cli), raw record\u002Fsynonym\u002Fsettings ops on an existing index (use algolia-cli), frontend search UI (use instantsearch), or read-only search\u002Fanalytics (use algolia-mcp).",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1565,1566,1567,1568],{"name":1514,"slug":1515,"type":15},{"name":1555,"slug":1556,"type":15},{"name":13,"slug":14,"type":15},{"name":1569,"slug":1570,"type":15},"Web Scraping","web-scraping","2026-07-12T08:27:40.981109",{"slug":1573,"name":1573,"fn":1574,"description":1575,"org":1576,"tags":1577,"stars":22,"repoUrl":23,"updatedAt":1583},"algolia-data-modeling","design Algolia data models and indices","Algolia data modeling and indexing guidance. Use before or alongside indexing records or building Algolia search UI for net-new search, browse, autocomplete, ecommerce, personalization, Dynamic Re-Ranking, recommendations, or analytics-aware implementations. Makes record shape, objectID, display fields, facets, ranking fields, and event attribution explicit decisions. Use for records, variants, SKUs, indices, replicas, searchable and faceting attributes, denormalization, merchandising fields, timestamps, inventory, event attribution, indexing pipelines, partial updates, secured data, multi-language or multi-region strategies, and migrations. Do NOT use for live imports, exports, record mutations, settings changes, or account actions; use algolia-cli or algolia-mcp. Do NOT use for frontend UI implementation; use algolia-instantsearch-ui, algolia-autocomplete, algolia-ui-libraries, or the official instantsearch skill.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1578,1579,1582],{"name":9,"slug":8,"type":15},{"name":1580,"slug":1581,"type":15},"Data Modeling","data-modeling",{"name":13,"slug":14,"type":15},"2026-08-01T06:06:01.500756",{"slug":1585,"name":1585,"fn":1586,"description":1587,"org":1588,"tags":1589,"stars":22,"repoUrl":23,"updatedAt":1601},"algolia-discovery-planning","plan and audit Algolia search implementations","START HERE for any non-trivial Algolia work — building, adding, migrating, redesigning, auditing, or configuring search, browse, autocomplete, indexing, relevance, recommendations, personalization, merchandising, events, or analytics. Invoke this FIRST even when the task already seems scoped or the user names one specific feature (e.g. \"add InstantSearch\", \"build a storefront search\"): its job is to map the request to the full Algolia implementation lifecycle and load every companion skill each in-scope phase needs (algolia-search-implementation, algolia-data-modeling, algolia-index-configuration, algolia-ui-libraries, algolia-instantsearch-ui, algolia-autocomplete, algolia-events-insights, algolia-neuralsearch, algolia-agent-studio, algolia-release-qa) rather than jumping straight into a single skill. This skill plans and orchestrates; the focused companion skills and the official Algolia skills execute. Do NOT use for live account inspection or write actions; use algolia-mcp or algolia-cli for those.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1590,1591,1594,1597,1600],{"name":9,"slug":8,"type":15},{"name":1592,"slug":1593,"type":15},"Analytics","analytics",{"name":1595,"slug":1596,"type":15},"Configuration","configuration",{"name":1598,"slug":1599,"type":15},"Personalization","personalization",{"name":13,"slug":14,"type":15},"2026-08-01T06:06:03.021452",18,{"items":1604,"total":1724},[1605,1621,1628,1635,1642,1648,1655,1661,1669,1680,1691,1711],{"slug":1606,"name":1606,"fn":1607,"description":1608,"org":1609,"tags":1610,"stars":1618,"repoUrl":1619,"updatedAt":1620},"algolia-docsearch-mcp","search developer documentation with Algolia","Use this skill when the user asks about public developer documentation, SDKs, APIs, libraries, frameworks, setup, configuration, or code examples. Fetch current docs from Algolia DocSearch MCP and cite source URLs.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1611,1612,1615,1617],{"name":9,"slug":8,"type":15},{"name":1613,"slug":1614,"type":15},"Documentation","documentation",{"name":1616,"slug":30,"type":15},"MCP",{"name":13,"slug":14,"type":15},4365,"https:\u002F\u002Fgithub.com\u002Falgolia\u002Fdocsearch","2026-08-01T06:06:11.572314",{"slug":1505,"name":1505,"fn":1506,"description":1507,"org":1622,"tags":1623,"stars":22,"repoUrl":23,"updatedAt":1520},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1624,1625,1626,1627],{"name":1511,"slug":1512,"type":15},{"name":1514,"slug":1515,"type":15},{"name":1517,"slug":1518,"type":15},{"name":13,"slug":14,"type":15},{"slug":1522,"name":1522,"fn":1523,"description":1524,"org":1629,"tags":1630,"stars":22,"repoUrl":23,"updatedAt":1533},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1631,1632,1633,1634],{"name":1511,"slug":1512,"type":15},{"name":1529,"slug":1530,"type":15},{"name":9,"slug":8,"type":15},{"name":13,"slug":14,"type":15},{"slug":1535,"name":1535,"fn":1536,"description":1537,"org":1636,"tags":1637,"stars":22,"repoUrl":23,"updatedAt":1544},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1638,1639,1640,1641],{"name":9,"slug":8,"type":15},{"name":20,"slug":21,"type":15},{"name":13,"slug":14,"type":15},{"name":17,"slug":18,"type":15},{"slug":1546,"name":1546,"fn":1547,"description":1548,"org":1643,"tags":1644,"stars":22,"repoUrl":23,"updatedAt":1558},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1645,1646,1647],{"name":1552,"slug":1553,"type":15},{"name":1555,"slug":1556,"type":15},{"name":13,"slug":14,"type":15},{"slug":1560,"name":1560,"fn":1561,"description":1562,"org":1649,"tags":1650,"stars":22,"repoUrl":23,"updatedAt":1571},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1651,1652,1653,1654],{"name":1514,"slug":1515,"type":15},{"name":1555,"slug":1556,"type":15},{"name":13,"slug":14,"type":15},{"name":1569,"slug":1570,"type":15},{"slug":1573,"name":1573,"fn":1574,"description":1575,"org":1656,"tags":1657,"stars":22,"repoUrl":23,"updatedAt":1583},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1658,1659,1660],{"name":9,"slug":8,"type":15},{"name":1580,"slug":1581,"type":15},{"name":13,"slug":14,"type":15},{"slug":1585,"name":1585,"fn":1586,"description":1587,"org":1662,"tags":1663,"stars":22,"repoUrl":23,"updatedAt":1601},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1664,1665,1666,1667,1668],{"name":9,"slug":8,"type":15},{"name":1592,"slug":1593,"type":15},{"name":1595,"slug":1596,"type":15},{"name":1598,"slug":1599,"type":15},{"name":13,"slug":14,"type":15},{"slug":1670,"name":1670,"fn":1671,"description":1672,"org":1673,"tags":1674,"stars":22,"repoUrl":23,"updatedAt":1679},"algolia-events-insights","instrument Algolia events for analytics","Algolia event instrumentation guidance for Insights, analytics, personalization, Dynamic Re-Ranking, Recommend, and merchandising feedback loops. Use for search, autocomplete, browse, ecommerce, personalization, recommendations, or analytics instrumentation. Makes event decisions explicit before an Algolia UI is considered ready. Use when implementing or auditing clickedObjectIDsAfterSearch, convertedObjectIDsAfterSearch, viewedObjectIDs, addedToCartObjectIDsAfterSearch, purchasedObjectIDsAfterSearch, userToken, queryID, eventName, eventSubtype, or frontend\u002Fbackend event pipelines. Do NOT use for live analytics retrieval, top-query inspection, or account-aware diagnostics; use algolia-mcp. Do NOT use for framework-specific InstantSearch or Autocomplete APIs; use the official instantsearch skill alongside this planning and validation skill.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1675,1676,1677,1678],{"name":9,"slug":8,"type":15},{"name":1592,"slug":1593,"type":15},{"name":1598,"slug":1599,"type":15},{"name":13,"slug":14,"type":15},"2026-08-01T06:06:02.009712",{"slug":1681,"name":1681,"fn":1682,"description":1683,"org":1684,"tags":1685,"stars":22,"repoUrl":23,"updatedAt":1690},"algolia-index-configuration","configure Algolia index settings and relevance","Algolia index settings and relevance configuration guidance. Use when configuring searchableAttributes, attributesForFaceting, customRanking, ranking, replicas, virtual replicas, rules, synonyms, typo tolerance, distinct, filters, optional filters, merchandising, browse\u002Fcategory relevance, or A\u002FB-testable relevance changes. Do NOT use for live settings writes, backups, copies, or operational account tasks; use algolia-cli or algolia-mcp instead. Do NOT use for record-shape or variant strategy; use algolia-data-modeling instead.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1686,1687,1688,1689],{"name":9,"slug":8,"type":15},{"name":1595,"slug":1596,"type":15},{"name":1580,"slug":1581,"type":15},{"name":13,"slug":14,"type":15},"2026-08-01T06:06:34.19163",{"slug":1692,"name":1692,"fn":1693,"description":1694,"org":1695,"tags":1696,"stars":22,"repoUrl":23,"updatedAt":1710},"algolia-instantsearch-ui","build Algolia InstantSearch frontend experiences","Build and review Algolia InstantSearch experiences in JavaScript, React, Vue, Angular (via InstantSearch.js; Angular InstantSearch is deprecated), or compatible frontend stacks. Use when planning or reviewing search results pages, browse\u002Fcategory pages, routing, widgets, filters, facets, sort-by, pagination, infinite hits, current refinements, insights middleware, SSR, or UI-state synchronization. For net-new search UI builds, start with algolia-discovery-planning, which loads algolia-search-implementation so data contract and event taxonomy decisions are visible before UI is marked ready. Do NOT use for autocomplete\u002Ftypeahead experiences before the user commits to a results page; use algolia-autocomplete instead. Do NOT use for choosing between Algolia UI libraries; use algolia-ui-libraries. Do NOT use as the source of truth for current framework APIs or code-level implementation details; use the official instantsearch skill and current docs alongside this customer-readiness skill.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1697,1698,1701,1702,1705,1707,1708],{"name":9,"slug":8,"type":15},{"name":1699,"slug":1700,"type":15},"Angular","angular",{"name":20,"slug":21,"type":15},{"name":1703,"slug":1704,"type":15},"JavaScript","javascript",{"name":630,"slug":1706,"type":15},"react",{"name":13,"slug":14,"type":15},{"name":647,"slug":1709,"type":15},"vue","2026-08-01T06:06:33.66513",{"slug":1712,"name":1712,"fn":1713,"description":1714,"org":1715,"tags":1716,"stars":22,"repoUrl":23,"updatedAt":1723},"algolia-mcp","search Algolia indices and retrieve analytics","Search Algolia indices via the Algolia MCP server, retrieve analytics (top searches, no-result rates, click positions, user counts), and get product recommendations (bought-together, related, trending). Triggers on search, indexing, analytics, Algolia, recommendations, MCP.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1717,1718,1721,1722],{"name":1592,"slug":1593,"type":15},{"name":1719,"slug":1720,"type":15},"API Development","api-development",{"name":1616,"slug":30,"type":15},{"name":13,"slug":14,"type":15},"2026-07-12T08:27:36.376387",19]