add-widget-from-prototype

Convert HTML prototypes into Dart widgets with routing and gallery entry.

70|12|Updated Apr 1, 2025
One-click install
npx skills add https://github.com/hunmer/Memento --skill add-widget-from-prototype
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: add-widget-from-prototype
Source: https://github.com/hunmer/Memento/tree/main/.claude/skills/add-widget-from-prototype
Command: npx skills add https://github.com/hunmer/Memento --skill add-widget-from-prototype

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

从 code_snippet 原型中的设计自动生成可预览的 Flutter 小组件,自动分析 HTML/设计信息,生成组件代码、示例页面并优先接入路由和组件展示列表,降低从原型到可交付组件的时间成本。

Core Features & Use Cases

  • 原型分析与组件生成:读取原型中的 HTML 设计,提取布局、颜色与文本信息并生成可编译的 Dart 小组件以及对应的示例页面。
  • 路由注册与入口更新:自动注册路由并将组件入口添加到组件画廊,方便快速访问与演示。
  • 快速迭代与兼容性:支持多种原型结构,便于设计到实现的快速迭代与版本回退。

Quick Start

在项目根目录执行 /add-widget-from-prototype <prototype-path>,示例:/add-widget-from-prototype code_snippet/card_widgets/widget3

Frequently Asked Questions about add-widget-from-prototype

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

FAQPage Schema
How do I convert an HTML prototype into a Flutter widget automatically?

Yes, you can generate Dart widgets from HTML prototypes by passing the prototype path to the command; it extracts design elements and outputs ready-to-compile Flutter components.

Does generating Flutter widgets from prototypes automatically register routes?

Generating Flutter widgets from prototypes automatically registers routes and adds the component entry to the widget gallery, ensuring immediate preview and access within the application.

What is the best way to integrate UI prototypes into a Flutter widget gallery?

The best way to integrate UI prototypes into a Flutter widget gallery is to use automated code generation that analyzes the prototype, creates Dart components, and updates the gallery entry automatically.

Can I use this prototype-to-widget conversion with different HTML structures?

You can use this prototype-to-widget conversion with different HTML structures as it supports multiple prototype formats, enabling fast design-to-implementation iteration and version rollback.

How do I run the command to generate Flutter widgets from a code_snippet directory?

To run the command and generate Flutter widgets, execute `/add-widget-from-prototype <prototype-path>` in your project root directory, such as `/add-widget-from-prototype code_snippet/card_widgets/widget3`.