Agent skill · Frontend

Chatbot Implementation

Details of the RAG Chatbot, including UI and backend logic.

majiayu000github.com/majiayu000GitHub ↗
claude-codeMIT
Install
npx skills add majiayu000/claude-skill-registry --skill chatbot-abdulsamad94-hackhaton-specskitpl-2 --agent claude-code

Same command for any agent — swap --agent for codex, cursor, copilot.

Facts
Files in the skill folder: 2
SKILL.md size: 1 KB
Bundled scripts: none
Path: skills/ai-llm/chatbot-abdulsamad94-hackhaton-specskitpl-2/SKILL.md
Open the folder on GitHub →
Where it comes from
Stars: 534
Language: HTML

Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.

From the SKILL.md

# Chatbot Logic ## Overview A specialized RAG (Retrieval Augmented Generation) chatbot that helps users learn from the textbook content. ## Backend - **Route**: `app/api/chat/route.ts` - **Logic**: 1. Receives `query` and `history`. 2. Embeds query using Gemini or OpenAI embedding model. 3. Searches Qdrant (vector DB) for relevant textbook chunks. 4. Constructs context from matches. 5. Generates response using Gemini Flash/Pro. ## Vector Search (Qdrant) We use Qdrant for storing embeddings of the textbook. - Collection: `textbook_chunks` (or similar). - Fields: `text`, `source`, `chunk_id`. ## UI Component - **Location**: `textbook/src/components/Chatbot/index.tsx`. - **Features**: - Floating chat window. - Size controls (Small, Medium, Large). - Markdown rendering of responses. - Context selection (highlight text to ask about it). - Mobile responsive design. - Auth awareness (personalizes answer based on user profile). ## Styling - **CSS**: `styles.module.css` (Premium animations, shadow effects). - **Themes**: Dark/Light mode compatible (using `--ifm` variables).

What's inside
Steps it walks through
  1. Overview
  2. Backend
  3. Vector Search (Qdrant)
  4. UI Component
  5. Styling
Ships with 1 file
  • metadata.json
More from claude-skill-registry
All skills →
descriptive-statisticsSummarizing and visualizing data through measures of center, spread, shape, and position. Covers…Data & Analyticsperplexity-researcher-reasoning-proHighest level of research and reasoning capabilities for complex decision-making with significant…OtherretroBrutally honest engineering retrospective. Analyzes git history for what actually happened — not…Data & AnalyticsanalyzeUniversal multi-perspective analyzer for any topic, file, idea, or decision. Extract key points…Otherarize-prompt-optimizationINVOKE THIS SKILL when optimizing, improving, or debugging LLM prompts using production trace data…Data & Analyticscellxgene-contextGuide for integrating CellxGene Census single-cell data with ENCODE bulk experiments. Use when…Data & Analytics
About this skill
What does the Chatbot Implementation skill do?

Details of the RAG Chatbot, including UI and backend logic.

How do I install it?

Run `npx skills add majiayu000/claude-skill-registry --skill chatbot-abdulsamad94-hackhaton-specskitpl-2 --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.

Where does this skill come from?

From majiayu000/claude-skill-registry, a repository with 534 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.

Is a popular skill a good skill?

Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.

Keep going
All skills →
The full catalog, by category and by tool.
Open Source Radar →
The repositories these skills come from, watched daily.
The people behind them →
Makers and builders across the ecosystem.