From figma-reader
This skill should be used when the user provides a "Figma link", "Figma URL", "figma.com/design" URL, or asks to "read Figma", "analyze Figma design", "extract Figma layout", or wants to understand a Figma design for development context.
npx claudepluginhub tim80411/ai-agent-extension --plugin figma-readerThis skill uses the workspace's default tool permissions.
Extract structured page layout summaries from Figma design links with minimal context window usage. Designed for developers who need to understand UI layouts to inform development.
Guides Next.js Cache Components and Partial Prerendering (PPR) with cacheComponents enabled. Implements 'use cache', cacheLife(), cacheTag(), revalidateTag(), static/dynamic optimization, and cache debugging.
Guides building MCP servers enabling LLMs to interact with external services via tools. Covers best practices, TypeScript/Node (MCP SDK), Python (FastMCP).
Generates original PNG/PDF visual art via design philosophy manifestos for posters, graphics, and static designs on user request.
Extract structured page layout summaries from Figma design links with minimal context window usage. Designed for developers who need to understand UI layouts to inform development.
figma.com/design/...)When a Figma URL is detected, delegate to the figma-reader agent via the Task tool. The agent runs in an isolated context and returns only a concise summary, keeping the main conversation context clean.
Use /figma-read <url> [focus] to explicitly trigger extraction.
Figma URLs follow this pattern:
https://figma.com/design/:fileKey/:fileName?node-id=:int1-:int2
Extract:
fileKey: the segment after /design/nodeId: convert node-id query param from 1-2 to 1:2 formatfigma-reader agent (subagent_type: figma-reader)get_metadata first (lightweight), then get_screenshot if neededAlways delegate Figma data fetching to the agent. Never call Figma MCP tools directly in the main conversation - this defeats the purpose of context isolation.