Skills
.Work. You
Rest

developing-web-ui

Community

Guide React UI development and troubleshooting.

Software Engineering#debugging#React#UI#Tailwind#TanStack Query#develop#ContentRenderer
Authorshren207
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This skill helps frontend developers design, implement, and troubleshoot React UI components, content rendering pipelines, and styling flows, reducing friction when asked to add components, adjust ContentRenderer, or fix UI bugs.

Core Features & Use Cases

  • ContentRenderer: Markdown+Cloze rendering with KaTeX and nid link handling.
  • SplitWorkspace and dashboards: three-column layouts for preview, original, and candidates; integration with TanStack Query for caching and quick previews.
  • Reference guidance: detailed pages describing components, query patterns, and troubleshooting to accelerate debugging and UI improvements.
  • Onboarding/help: accessible help content and tooltips to assist developers.

Quick Start

  • Use the web UI development skill to guide creating or debugging a React frontend module, for example: "Add a ContentRenderer that renders Markdown with Cloze and KaTeX support to a CardBrowser page, wired to a useCards query and a SplitWorkspace view."

Dependency Matrix

Required Modules

None required

Components

references

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: developing-web-ui
Download link: https://github.com/shren207/awesome-anki/archive/main.zip#developing-web-ui

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.