Skills suchen.../

Figma To Liveview | Skills Pool

Skill-Datei

Figma To Liveview

Use when implementing a Figma frame, component, or selection as Phoenix LiveView + function components + HEEx. Trigger when the user shares a figma.com design link or asks to build UI from Figma.

ilgaur0 Sterne28.03.2026

Beruf
Kategorien: Mobil

Skill-Inhalt

Figma → LiveView

Preconditions

docs/figma-mcp.md — tool choice.
docs/frontend.md — component layers and HEEx rules.
docs/design-system.md — token tiers and naming.
product/figma.md — file registered.

Read path

Parse fileKey and node-id from the URL (hyphens → colons in node id).
Prefer get_design_context on the target node. For huge pages, get_metadata first.
Use get_screenshot when layout fidelity is uncertain.

Adaptation rules (non-negotiable)

MCP output is often React + Tailwind reference. Rewrite to:
- Phoenix function components with / .

Verwandte Skills

Schnellinstallation

Figma To Liveview

npx skills add ilgaur/orkestra

Skill herunterladen Repository öffnen

Autor: ilgaur
Sterne: 0
Aktualisiert: 28.03.2026
Beruf

Auf dieser Seite

01Figma → LiveView

attr

slot

Semantic Tailwind token classes from this project — no permanent hex.

LiveView for state; Phoenix.LiveView.JS for micro-interactions; hooks only when required.

Reuse MyAppWeb.UI.* and MyAppWeb.Domain.* when they exist.

Product alignment

If the UI implies a new workflow or entity, update or create product/specs/* and product/discovery.md before deep implementation.

Verification

Compare rendered UI to screenshot when possible.
When Chrome DevTools MCP is configured, run a browser pass (skill browser-verification, docs/chrome-devtools-mcp.md) on the implemented routes.
Update product/figma.md last-synced when parity is intentional.

02

Preconditions

04Adaptation rules (non-negotiable)

05Product alignment

Liquid Glass Design

iOS 26 Liquid Glass design system — dynamic glass material with blur, reflection, and interactive morphing for SwiftUI, UIKit, and WidgetKit.

Compose Multiplatform Patterns

Compose Multiplatform and Jetpack Compose patterns for KMP projects — state management, navigation, theming, performance, and platform-specific UI.

Foundation Models On Device

苹果FoundationModels框架用于设备上的LLM——文本生成、使用@Generable进行引导生成、工具调用，以及在iOS 26+中的快照流。

Swiftui Patterns

SwiftUI architecture patterns, state management with @Observable, view composition, navigation, performance optimization, and modern iOS/macOS UI best practices.

Foundation Models On Device

Apple FoundationModels framework for on-device LLM — text generation, guided generation with @Generable, tool calling, and snapshot streaming in iOS 26+.

Swiftui Patterns

SwiftUI 架构模式，使用 @Observable 进行状态管理，视图组合，导航，性能优化，以及现代 iOS/macOS UI 最佳实践。