shingzhang

Lwc In Chat — Design skill for Claude Code

Design community

Turn a Figma design into a Lightning Web Component that renders inside an Agentforce chat bubble.

How to install Lwc In Chat

Installs to ~/.claude/skills/shingzhang-lwc-to-agentforce-chat-lwc-in-chat/SKILL.md

Terminal

mkdir -p ~/.claude/skills/shingzhang-lwc-to-agentforce-chat-lwc-in-chat && curl -fsSL https://raw.githubusercontent.com/shingzhang/lwc-to-agentforce-chat/HEAD/commands/lwc-in-chat.md -o ~/.claude/skills/shingzhang-lwc-to-agentforce-chat-lwc-in-chat/SKILL.md

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

What Lwc In Chat does

description: Turn a Figma design into a Lightning Web Component that renders inside an Agentforce chat bubble. Guided walkthrough with a mandatory HTML preview step in the middle.

/lwc-to-agentforce-chat:lwc-in-chat

Launches the `lwc-to-agentforce-chat` skill's Step 1 prompt — paste a Figma URL, PNG path, or MCP node ID. From there, the skill guides you one question at a time through: Figma extraction → HTML preview (mandatory review in a browser) → LWC transform → 5-piece contract →

Alternatives in Design

Theme Swap — Recolour an extracted site's design around a new brand primary 3.6k ★
Stitch Remotion — Generate walkthrough videos from app designs 2.6k ★
Design Present — Generate an interactive HTML presentation from Figma screens — annotated walkthrough with transitions, speaker 309 ★