skills.rest
Eva813
Eva813COMMUNITY
Explore all skills by this author →
WebsiteGitHub

vue-layout

Convert Figma designs into Vue 3 components with SCSS and semantic HTML.

2|1|Updated Jan 3, 2026
Search Tags:#layout#vue#figma#handoff#pixel-perfect#scss#ui-components
One-click install
npx skills add https://github.com/Eva813/skills-base --skill vue-layout
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vue-layout
Source: https://github.com/Eva813/skills-base/tree/main/.agents/skills/vue-layout
Command: npx skills add https://github.com/Eva813/skills-base --skill vue-layout

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes assets (resource) and references (resource) components.

What problem does it solve?

Vue UI layout tasks are time-consuming and error-prone when converting designs into Vue 3 components; this skill provides a reliable path for pixel-perfect 1:1 UI reproduction from Figma, focusing on pure UI structure and visuals.

Core Features & Use Cases

  • Pixel-perfect 1:1 Vue 3 components generated from Figma
  • Supports spec-driven handoff or fast-track derivation from visuals
  • Outputs a strict props/emits interface and semantic HTML, no API calls

Quick Start

Provide a Figma URL or node-id and an approved node list to begin mapping nodes to components and generate pixel-perfect Vue 3 UI.

Frequently Asked Questions about vue-layout

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

FAQPage Schema
How do I convert Figma designs into pixel-perfect Vue 3 components?▼

To convert Figma designs into Vue 3 components, provide a Figma URL or node-id with an approved node list to map design elements into clean semantic HTML and SCSS, achieving 1:1 visual fidelity.

Can I generate a strict props and emits interface from Figma handoffs?▼

Yes, generating a strict props and emits interface from Figma handoffs is supported. The process outputs precise node-to-component mappings and semantic HTML without including any API calls or business logic.

Does the Vue layout generation include API calls and business logic?▼

No, Vue layout generation does not include API calls or business logic. It focuses purely on UI structure and visuals, outputting pixel-perfect Vue 3 components with SCSS from your design.

What is the best way to ensure 1:1 visual fidelity when converting Figma to Vue?▼

The best way to ensure 1:1 visual fidelity when converting Figma to Vue is using spec-driven handoffs or fast-track visual derivation to generate precise SCSS and semantic HTML components.

Do I need a draft-spec.md file for spec-driven UI creation from Figma?▼

You do not need a draft-spec.md file, but the tool references draft-spec.md when available to guide spec-driven UI creation and map Figma nodes to pixel-perfect Vue 3 components.

Related Skills

Explore More Software Engineering Skills→
Eva813Eva813
2

ai-pm

Generate engineer-ready draft specifications from Figma designs.

Community
Advanced
mgd34msumgd34msu
4

vue

Guide building Vue 3 interfaces with Composition API and reactivity.

Community
Intermediate
naporin0624naporin0624
3

a11y-self-check

Validate generated HTML/JSX/TSX output for WCAG 2.1 AA accessibility compliance.

Community
Basic
tankpkgtankpkg
1

@tank/figma-to-code

Translate Figma designs into CSS and component structures.

Official
Advanced