ecomfe/tempad-dev

Overview

This skill implements integration-ready UI code from a Figma selection or a provided nodeId using TemPad Dev MCP as the single source of design evidence. It detects the target repository stack and conventions, then translates TemPad Dev’s Tailwind-like JSX/Vue IR into project-native code without adding new dependencies. If required evidence is missing, contradictory, or assets cannot be handled under repo policy, it stops and returns a safe base with explicit warnings and omissions.

How this skill works

The skill first verifies TemPad Dev MCP availability and requests a baseline design snapshot with tempad-dev:get_code (preferredLang selected to match the repo). It treats the MCP output as authoritative for numeric styles and layout, calls get_structure/get_screenshot only to resolve structural/overlap uncertainty, and never invents typography, colors, spacing, radii, borders, shadows, gradients, or opacity. It then maps tokens and assets according to repository policies and translates the IR into the repo’s conventions (JSX or Vue, utility classes or CSS modules) without introducing new runtime dependencies.

When to use it

• You need a faithful, evidence-backed implementation of a Figma selection into an existing repo.
• The repo must accept no new runtime or styling dependencies without confirmation.
• TemPad Dev MCP is available and authorized in the Figma file.
• You want automated translation from TemPad Dev IR into project-native code without guessing measurements.
• You require clear warnings when evidence is incomplete or assets cannot be stored under repo policy.

Best practices

• Ensure TemPad Dev MCP is installed and activated in the Figma file before requesting work.
• Provide a nodeId for very large designs to avoid depth-cap/truncation issues.
• If the repo’s conventions are unclear, answer up to three short clarification questions rather than letting the skill infer.
• Keep an established token/asset policy in the repo to allow direct mapping from design tokens and MCP assets.
• Avoid requesting visual tuning from screenshots; rely on MCP numeric facts for styles.

Example use cases

• Convert a selected Figma frame into a React TypeScript component using the repo’s CSS Modules pattern.
• Translate a TemPad Dev Vue IR snippet into an existing Vue 3 project with scoped SFC styles.
• Extract assets provided by MCP into the repo’s public assets folder following policy, and wire imports accordingly.
• Map design tokens returned by MCP into the repo’s token file when value equivalence and workflow permit.
• Produce a safe base implementation with explicit warnings when parts of the design are truncated or missing.