algolia-search
Algolia-Suche mit React InstantSearch implementieren
Das Hinzufügen von Suchfunktionen zu Webanwendungen erfordert das Verständnis komplexer Indexierungsstrategien und UI-Muster. Diese Skill bietet expertenhafte Anleitung zur Algolia-Integration, React InstantSearch Hooks und Relevanzoptimierung für optimale Sucherlebnisse.
Die Skill-ZIP herunterladen
In Claude hochladen
Gehe zu Einstellungen → Fähigkeiten → Skills → Skill hochladen
Einschalten und loslegen
Teste es
Verwendung von "algolia-search". Erstellen Sie ein Suchfeld mit sofortigen Ergebnissen
Erwartetes Ergebnis:
Eine React-Komponente, die den useSearchBox-Hook für die Eingabehandlung und useHits für die Anzeige von Echtzeit-Suchergebnissen verwendet, eingebettet in einen InstantSearch-Provider mit korrekter Algolia-Konfiguration.
Verwendung von "algolia-search". Wie implementiere ich Kategorienfilterung?
Erwartetes Ergebnis:
Verwenden Sie den useRefinementList-Hook mit dem Attribut, das auf Ihr Kategorienfeld gesetzt ist. Verbinden Sie es mit einer RefinementList-Komponente, die Checkboxen für jede Kategorienoption mit Trefferzahlen anzeigt.
Sicherheitsaudit
SicherStatic analysis flagged 3 patterns as potential security issues, but all are false positives. The flagged lines contain documentation text about Algolia search implementation, not executable code. Line 3 and 70 contain descriptive text misidentified as weak crypto. Line 53 discusses Algolia indexing best practices, not system reconnaissance. This is a documentation-only skill file with no security risks.
Qualitätsbewertung
Was du bauen kannst
E-Commerce-Produktsuche
Implementieren Sie eine schnelle, faktengestützte Produktsuche mit Kategorienfiltern, Preisbereichen und sofortigen Ergebnissen für Online-Shops.
Dokumentationssite-Suche
Fügen Sie Typ-ahead-Suche zu Dokumentationsseiten hinzu mit Relevanzoptimierung für technische Inhalte und API-Referenzen.
Content-Discovery-Portal
Erstellen Sie durchsuchbare Content-Hubs mit Paginierung, Sortierung und Multi-Index-Suche für Blogs oder Medienbibliotheken.
Probiere diese Prompts
Erstellen Sie eine React-Suchkomponente mit Algolia InstantSearch Hooks. Fügen Sie ein Suchfeld, Ergebnisanzeige und grundlegendes Styling für einen einfachen Produktkatalog hinzu.
Implementieren Sie faktengestützte Suche mit Verfeinerungslisten für Kategorien, Preisbereiche und Markenfilter. Verwenden Sie useRefinementList und konfigurieren Sie die Algolia-Indexeinstellungen für Facettierung.
Richten Sie Algolia InstantSearch mit Next.js Server-Side-Rendering unter Verwendung der InstantSearchNext-Komponente ein. Fügen Sie URL-Synchronisation und initiale Server-State-Behandlung für eine App Router-Anwendung hinzu.
Entwerfen Sie eine Indexierungsstrategie zur Synchronisation von Algolia mit einer PostgreSQL-Datenbank. Implementieren Sie partialUpdateObjects für attributbasierte Änderungen und stapeln Sie Datensätze effizient ohne deleteBy.
Bewährte Verfahren
- Batch-Indexoperationen mit 10MB oder 1K-10K Datensätzen pro Batch für optimale Leistung
- Verwenden Sie partialUpdateObjects anstatt vollständiger Datensatzersetzung, wenn nur bestimmte Attribute aktualisiert werden
- Vermeiden Sie deleteBy-Operationen, da sie rechenintensiv sind - verwenden Sie stattdessen Objektlöschung mit Batch
Vermeiden
- Durchführung vollständiger Neuindizierung bei jeder Datenänderung statt inkrementeller Updates
- Senden einzelner Datensätze an Algolia statt Batch-Operationen
- Verwendung von deleteBy für Massenlöschungen statt Batch-Objektlöschung