# UI Customization

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

- Skill: `majiayu000/ui-customization` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add majiayu000/ui-customization`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/ui-customization/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: AI & ML
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/ui-customization

---


# 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.