hoangsonww

Frontend UI — Design skill for Claude Code

Design community

Use when changing the React and Vite frontend in client/, including LandingPage, Home chat UX, auth pages, Navbar, Sidebar, ChatArea, theme, markdown rendering, responsiveness, animation, or client-si.

How to install Frontend UI

Installs to ~/.claude/skills/hoangsonww-ai-rag-assistant-chatbot-frontend-ui/SKILL.md

Terminal

mkdir -p ~/.claude/skills/hoangsonww-ai-rag-assistant-chatbot-frontend-ui && curl -fsSL https://raw.githubusercontent.com/hoangsonww/AI-RAG-Assistant-Chatbot/HEAD/.claude/skills/frontend-ui.md -o ~/.claude/skills/hoangsonww-ai-rag-assistant-chatbot-frontend-ui/SKILL.md

Restart Claude Code, or start a new session, for it to be picked up.

What Frontend UI does

name: frontend-ui description: Use when changing the React and Vite frontend in client/, including LandingPage, Home chat UX, auth pages, Navbar, Sidebar, ChatArea, theme, markdown rendering, responsiveness, animation, or client-side API integration.

Frontend UI

Use this skill for work centered in `client/`.

First read

@client/CLAUDE.md
@.claude/skills/references/frontend-map.md

Workflow

Start from the user-facing entry point, then trace inward.
Keep layout, m

Alternatives in Design

Theme Factory — Style artifacts with professional themes including 10 pre-set color/font combinations 94.1k ★
NotebookLM Automation — Complete programmatic access to Google NotebookLM—including capabilities not exposed in the web UI 6.8k ★
Design Review Workflow — by Patrick Ellis - A tailored workflow for enabling automated UI/UX design review, including specialized sub a 3.7k ★