# Flutter Add Widget Preview

> Adds interactive widget previews to the project using the previews.dart system. Use when creating new UI components or updating existing screens to ensure consistent design and interactive testing. Use when this capability is needed.

- Skill: `tomevault-io/flutter-add-widget-preview-3` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/flutter-add-widget-preview-3`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/flutter-add-widget-preview-3/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: AI & ML
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/flutter-add-widget-preview-3

---


## flutter-add-widget-preview
> Curated from flutter's skills

Adds interactive widget previews to the project using the previews.dart system. Use when creating new UI components or updating existing screens to ensure consistent design and interactive testing.

## Source
- Upstream: https://github.com/flutter/skills/tree/main/skills/flutter-add-widget-preview

## How to use
该 Skill 由 hyar 跨端框架精选, 用于 Flutter UI 组件预览和交互设计验证前被 Agent 发现。若要运行包含原始资源、脚本和参考资料的完整上游工作流，请将上游 bundle 安装到当前活跃 Agent 的 skills 目录中：
``` bash
# 查看上游 README，确认准确路径
open https://github.com/flutter/skills/tree/main/skills/flutter-add-widget-preview
```
然后，让 Agent 通过该 skill 的名称（flutter-add-widget-preview）来调用它，或使用该 skill frontmatter 中列出的任一触发短语来调用它。

---
> Source: [Yemomo511/hybrid-agent-rail](https://github.com/Yemomo511/hybrid-agent-rail) — distributed by [TomeVault](https://tomevault.io).
<!-- tomevault:4.0:skill_md:2026-06-15 -->