skills.rest
recca0120
recca0120COMMUNITY
Explore all skills by this author →
WebsiteGitHub

extension-ui-reference

Inspect Claude Code VS Code extension DOM and CSS via MCP debugging.

11|2|Updated Feb 5, 2026
Search Tags:#visual inspection#open spec#css tokens#vs code extension#ui matching#mcp debugging#design system alignment
One-click install
npx skills add https://github.com/recca0120/code-quest --skill extension-ui-reference
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: extension-ui-reference
Source: https://github.com/recca0120/code-quest/tree/main/.claude/skills/extension-ui-reference
Command: npx skills add https://github.com/recca0120/code-quest --skill extension-ui-reference

SYSTEM DOCUMENTATION & REQUIREMENTS

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.

Frequently Asked Questions about extension-ui-reference

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I inspect the Claude Code VS Code extension UI at runtime to copy its CSS?▼

To inspect the Claude Code VS Code extension UI at runtime, launch it in the Extension Development Host and use DevTools or evaluate_expression to map the live DOM structure and CSS variables for accurate replication.

How do I map VS Code extension CSS variables to Tailwind tokens for UI alignment?▼

To map VS Code extension CSS variables to Tailwind tokens, probe computed styles via evaluate_expression and translate the extension's sizing, padding, and radius patterns into your existing design system tokens.

What is the best way to replicate the Claude Code extension's interactive elements like the slash action menu?▼

To replicate the slash action menu, use live MCP-driven inspection to extract the concrete UI pattern, then reproduce its effects using existing CSS utilities without adding new packages.

Can I use MCP debugging to inspect VS Code extension UI without modifying my project dependencies?▼

Yes, you can use MCP debugging to inspect VS Code extension UI without modifying dependencies, as the workflow reinforces reproducing effects using existing App.css utilities and Tailwind tokens without adding new packages.

Why does my recreated VS Code extension UI layout not match the original styling?▼

Your recreated VS Code extension UI layout may not match because you are guessing styles instead of deriving them from live inspection; mapping exact CSS variables and computed styling at runtime removes the guesswork.

Related Skills

Explore More Design & Creative Skills→
anilcan-karaanilcan-kara

jupyter-live-kernel

Creates a live Jupyter kernel for executing Python code with persistent variables across sessions.

Community
Advanced
FeedbackFriendsFeedbackFriends
1

tailwind-nextjs-expert

Guide Tailwind CSS and Next.js UI development with design tokens and semantic utilities.

Official
Advanced
jfrometajfrometa

tailwind-patterns

Implement CSS-first Tailwind v4 patterns with container queries and design tokens.

Community
Advanced
daffy0208daffy0208
34

Figma Developer

Convert Figma designs into React components and design tokens.

Community
Intermediate