Frontend llm output handler

Skill HaoliangCheng/skills/skills/frontend-llm-output-handler

A collection of my personal created skills used for LLM

Install

npx -y skills add HaoliangCheng/skills --skill frontend-llm-output-handler

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

1 stars1 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Guide for enhancing frontend code with the capability to render AI/LLM outputs (Markdown, LaTeX, code blocks) securely and accurately in the UI.

SKILL.md

2.8 KB, as published. Nobody here has run it

Frontend LLM Output Handler

Goal

Enhance existing frontend code to support the rendering of complex LLM response strings.

Input: Frontend code (JavaScript, React, TypeScript).
Output: Enhanced frontend code with integrated capabilities for parsing Markdown, rendering LaTeX math formulas, and displaying interactive code blocks.

Dependencies

The implementation uses the following packages:

Markdown: marked
Math/LaTeX: katex
Sanitization: dompurify
Syntax Highlighting: highlight.js
React Styling: styled-components
DOM Utility: jQuery (optional, for non-React implementations)

Instructions

To enhance frontend components for AI-generated responses, follow this 4-step integration pipeline:

1. Pre-processing (Math Compatibility)

AI models often produce single backslashes in LaTeX (e.g., \frac). Most Markdown parsers consume these as escape characters. You must normalize them before parsing.

// Normalize backslashes for KaTeX compatibility
const normalized = rawText.replace(/\\/g, '\\\\');

2. Markdown Parsing

Use a robust parser like marked. Ensure you handle the output as an HTML string.

3. Code Block Decoration

AI responses frequently contain code. Enhance standard output by wrapping it in a container with a language label to improve readability and visual structure.

4. Security & Post-processing

Sanitize with Config: ALWAYS use DOMPurify. Ensure your configuration allows the specific tags and attributes you've added (e.g., class).

DOMPurify.sanitize(html, {
  ALLOWED_TAGS: ['p', 'br', 'strong', 'em', 'img', 'code', 'pre', 'ul', 'ol', 'li', 'h1', 'h2', 'h3', 'div', 'span', 'table', 'thead', 'tbody', 'tr', 'th', 'td'],
  ALLOWED_ATTR: ['src', 'alt', 'class', 'href', 'style']
});

Math Rendering (KaTeX): Call renderMathInElement after the content is added to the DOM. You MUST specify delimiters so the renderer knows what to look for:

renderMathInElement(container, {
  delimiters: [
    { left: '$$', right: '$$', display: true },
    { left: '$', right: '$', display: false },
    { left: '\\(', right: '\\)', display: false },
    { left: '\\[', right: '\\]', display: true }
  ],
  throwOnError: false
});

Performance & UX Tips (React)

Memoization: Use useMemo to wrap the parsing logic and React.memo for message components. This prevents expensive re-parsing of the entire chat history when new messages arrive.
Auto-scroll: Implement a useEffect that monitors the message list and updates scrollTop to keep the latest AI response in view.