Claude Code Plugins

Community-maintained marketplace

Feedback

UI Customization

@nadeemsangrasi/humanoid-and-robotic-book
0
0

Customize ChatKit layout, theme, and presentation for RAG textbook chatbot with proper styling and textbook theme integration.

Install Skill

1Download skill
2Enable skills in Claude

Open claude.ai/settings/capabilities and find the "Skills" section

3Upload to Claude

Click "Upload skill" and select the downloaded ZIP file

Note: Please verify skill by going through its instructions before using it.

SKILL.md

name UI Customization
description Customize ChatKit layout, theme, and presentation for RAG textbook chatbot with proper styling and textbook theme integration.

UI Customization

Instructions

  1. Customize ChatKit layout and theme:

    • Add sidebar with "Sources" section
    • Implement Math/Code formatting support
    • Match textbook theme colors and typography
    • Improve layout spacing and visual hierarchy

  2. Integrate textbook theme elements:

    • Use colors consistent with textbook design
    • Apply proper typography for technical content
    • Include styling for code blocks and equations
    • Maintain readability for technical content

  3. Add RAG-specific UI elements:

    • Display source citations clearly
    • Show confidence indicators
    • Add metadata display for retrieved content
    • Include visual indicators for RAG responses

  4. Maintain ChatKit functionality:

    • Don't break internal component states
    • Preserve existing user interactions
    • Maintain accessibility standards
    • Keep performance optimizations

  5. Follow Context7 MCP documentation:

    • Follow ChatKit component architecture
    • Use deterministic patch protocols
    • Include proper error handling
    • Document all styling changes

Examples

Input: "Customize ChatKit for textbook RAG interface" Output: Updates UI components and styles to match textbook theme with proper source citation display.