extension-ui-reference

What problem does it solve?

This Skill removes guesswork when recreating or redesigning the Claude Code VS Code extension UI by letting you observe the exact DOM structure, CSS variables, and computed styling at runtime.

Core Features & Use Cases

• Live MCP-driven inspection workflow: Launch the extension in VS Code Extension Development Host and inspect the real rendered UI while debugging.
• Programmatic element/style probing: Use evaluate_expression to query specific elements and derive computed styles (including token-to-class mapping needs).
• CSS-to-design-token translation guidance: Map extension CSS variables and sizing/padding/radius patterns into cc-office Tailwind tokens for consistent alignment.
• Concrete UI pattern extraction: Identify key interactive elements like the @ mention file picker, slash action menu, and input footer layout/behavior.
• Implementation guardrails: Reinforce how to reproduce effects using existing cc-office CSS utilities without adding new packages.

Quick Start

Use the extension-ui-reference Skill to start the Claude Code extension in debug mode via MCP, then inspect a target UI element in DevTools to map its CSS/tokens before implementing the equivalent layout and styles in cc-office.