์Šคํ‚ฌ flutter-add-widget-preview
๐Ÿ“ฆ

flutter-add-widget-preview

์ฝ˜ํ…์ธ  ๋ฆฌ๋น„์ „ r1 ์•ˆ์ „ โš™๏ธ ์™ธ๋ถ€ ๋ช…๋ น์–ด

Add Flutter Widget Previews

Flutter widgets can be difficult to inspect without launching the full application. This skill adds isolated previews with appropriate annotations, configurations, and workflows.

์ง€์›: Claude Codex Code(CC)
Maintain this Skill? Claim it ๐Ÿฅ‰ 77 ๋ธŒ๋ก ์ฆˆ

๋‚ด ์—์ด์ „ํŠธ๋กœ ์„ค์น˜

์ด ์š”์ฒญ์„ ์—์ด์ „ํŠธ์— ๋ณต์‚ฌํ•˜์„ธ์š”. ๊ณต์‹ Skill ํŽ˜์ด์ง€์™€ ๋งค๋‹ˆํŽ˜์ŠคํŠธ๊ฐ€ ํฌํ•จ๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค.

์—์ด์ „ํŠธ ์š”์ฒญ
Review the Skillstore skill "flutter-add-widget-preview" from https://skillstore.io/skills/flutter-flutter-add-widget-preview.md and its manifest at https://skillstore.io/api/skills/flutter-flutter-add-widget-preview/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.

์—์ด์ „ํŠธ๋Š” ๊ณ„์†ํ•ด์„œ ๊ณ„ํš์„ ํ‘œ์‹œํ•˜๊ณ  ๋ณด์•ˆ ์ •์ฑ…์—์„œ ์š”๊ตฌํ•˜๋Š” ํ™•์ธ์„ ์š”์ฒญํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

์—์ด์ „ํŠธ๊ฐ€ ์ฝ๊ธฐ ์‰ฌ์šด ๋ฆฌ์†Œ์Šค

AI ์—์ด์ „ํŠธ, ํฌ๋กค๋Ÿฌ, ์Šคํฌ๋ฆฝํŠธ๊ฐ€ ์ „์ฒด ํŽ˜์ด์ง€ ๋Œ€์‹  ์ •๋ฆฌ๋œ ์ปจํ…์ŠคํŠธ๋งŒ ํ•„์š”ํ•  ๋•Œ ์ด ๋งํฌ๋ฅผ ์‚ฌ์šฉํ•˜์„ธ์š”.

ํ…Œ์ŠคํŠธํ•ด ๋ณด๊ธฐ

"flutter-add-widget-preview" ์‚ฌ์šฉ ์ค‘์ž…๋‹ˆ๋‹ค. Add a preview for the profile summary card in light and dark modes.

์˜ˆ์ƒ ๊ฒฐ๊ณผ:

The profile summary card gains two grouped previews with descriptive names and theme-specific brightness settings. Existing widget behavior remains unchanged.

"flutter-add-widget-preview" ์‚ฌ์šฉ ์ค‘์ž…๋‹ˆ๋‹ค. Create reusable previews for buttons that need the application theme.

์˜ˆ์ƒ ๊ฒฐ๊ณผ:

  • A custom preview annotation applies the shared application theme.
  • Button previews use consistent grouping and names.
  • Validation steps cover IDE discovery and preview refresh behavior.

"flutter-add-widget-preview" ์‚ฌ์šฉ ์ค‘์ž…๋‹ˆ๋‹ค. Prepare a responsive preview set for the product tile.

์˜ˆ์ƒ ๊ฒฐ๊ณผ:

A MultiPreview configuration presents compact and wide product tile variants with explicit constraints and consistent labels.

๋ณด์•ˆ ๊ฐ์‚ฌ

์•ˆ์ „

All 20 static findings are false positives caused by Markdown backticks, fenced Dart examples, ordinary project inspection guidance, or a fixed Flutter CLI command. No command injection, system reconnaissance, prompt injection, or malicious intent was found.

1
์Šค์บ”๋œ ํŒŒ์ผ
146
๋ถ„์„๋œ ์ค„ ์ˆ˜
0
๊ฒ€ํ†  ํ•ญ๋ชฉ
0
์˜คํƒ ๋ฌด์‹œ๋จ
๊ฐ€์žฅ ์ตœ๊ทผ์— ์™„๋ฃŒ๋œ ์ •์ ยท์˜๋ฏธ๋ก ์  ๊ฐ์‚ฌ์—์„œ ํ™•์ธ๋œ ๋ณด์•ˆ ๋ฐœ๊ฒฌ ์‚ฌํ•ญ์ด ๊ฐ์ง€๋˜์ง€ ์•Š์•˜์Šต๋‹ˆ๋‹ค. ์ด๋Š” ์Šคํ‚ฌ์— ๋ถ€์ž‘์šฉ์ด ์—†์Œ์„ ์ฆ๋ช…ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.
๊ฐ์‚ฌ์ž: codex
์ด ๋ณด๊ณ ์„œ ๊ณต์œ  ๋ฐ ์ธ์šฉ

๋ฒ„์ „์ด ์ง€์ •๋œ ํ‰๊ฐ€ ๋ณด๊ณ ์„œ, ์ค‘๋ฆฝ ๋ฐฐ์ง€, ์ž„๋ฒ ๋“œ ์นด๋“œ ๋ฐ ์ธ์šฉ์„ ๊ณต์œ ํ•˜์„ธ์š”. Skillstore๋Š” ๊ทผ๊ฑฐ๋ฅผ ๋ณด๊ณ ํ•˜์ง€๋งŒ ์ด Skill์˜ ์•ˆ์ „ ์—ฌ๋ถ€๋ฅผ ํŒ๋‹จํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

๋ฒ„์ „๋ณ„ ๋ณด๊ณ ์„œ ์—ด๊ธฐ
๋ณด์•ˆ ํ‰๊ฐ€

๋ณด๊ณ ์„œ ๋งํฌ ๋ณต์‚ฌ

https://skillstore.io/skills/flutter-flutter-add-widget-preview/audits/1?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Markdown ๋ฐฐ์ง€

[![Skillstore security assessment](https://skillstore.io/badges/skills/flutter-flutter-add-widget-preview/security.svg)](https://skillstore.io/skills/flutter-flutter-add-widget-preview?utm_source=security_passport_badge)

HTML ๋ฐฐ์ง€

<a href="https://skillstore.io/skills/flutter-flutter-add-widget-preview?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/flutter-flutter-add-widget-preview/security.svg" alt="Skillstore security assessment" loading="lazy"></a>

์ž„๋ฒ ๋“œ ์นด๋“œ

<iframe src="https://skillstore.io/embed/skills/flutter-flutter-add-widget-preview.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>
ํ•™์ˆ  ์ธ์šฉ (APA ยท BibTeX ยท CFF)

APA ์ธ์šฉ

flutter. (2026). flutter-add-widget-preview security audit report (audit version 1) [Author version unspecified]. Skillstore. https://skillstore.io/skills/flutter-flutter-add-widget-preview/audits/1

BibTeX ์ธ์šฉ

@techreport{flutter-flutter-flutter-add-widget-preview-2026, author = {flutter}, title = {flutter-add-widget-preview security audit report (audit version 1)}, institution = {Skillstore}, year = {2026}, number = {1}, url = {https://skillstore.io/skills/flutter-flutter-add-widget-preview/audits/1}, note = {Author version unspecified} }

CITATION.cff

cff-version: 1.2.0 message: "If you use this Skill, cite its author and this versioned security audit report." title: "flutter-add-widget-preview security audit report (audit version 1)" version: "unspecified" type: report authors: - name: "flutter" date-released: "2026-09-08" url: "https://skillstore.io/skills/flutter-flutter-add-widget-preview/audits/1" identifiers: - type: other value: "skillstore:flutter-flutter-add-widget-preview:audit:1" description: "Skillstore immutable audit report identifier"

Skillstore ์ ์ˆ˜

์ด ์ ์ˆ˜์˜ ์ด์œ  ์ฆ๊ฑฐ ์‹ ๋ขฐ๋„: ์ค‘๊ฐ„
55
์•„ํ‚คํ…์ฒ˜
85
์œ ์ง€๋ณด์ˆ˜์„ฑ
87
์ฝ˜ํ…์ธ 
65
์ปค๋ฎค๋‹ˆํ‹ฐ
83
์‚ฌ์–‘ ์ค€์ˆ˜

๋งŒ๋“ค ์ˆ˜ ์žˆ๋Š” ๊ฒƒ

Preview a New Component

Add an isolated preview for a new widget with a useful name, group, and size.

Review Design Variants

Generate light, dark, and constrained previews for consistent visual review.

Standardize Package Previews

Create reusable preview annotations that apply shared themes and wrappers across a component library.

์ด ํ”„๋กฌํ”„ํŠธ๋ฅผ ์‚ฌ์šฉํ•ด ๋ณด์„ธ์š”

Add a Basic Preview
Add a Flutter widget preview for [widget name]. Use a clear preview name and group, then explain the changes.
Add Visual Variants
Add previews for [widget name] in light and dark modes. Include suitable sizes and preserve existing behavior.
Create a Shared Annotation
Create a reusable Preview annotation for widgets in [feature]. Apply the shared theme, wrapper, naming, and grouping requirements.
Design a MultiPreview Matrix
Build a MultiPreview setup for [widgets] across [configurations]. Handle web preview limitations, minimize duplication, and provide validation steps.

๋ชจ๋ฒ” ์‚ฌ๋ก€

  • Use descriptive preview names and groups so related components remain easy to find.
  • Set explicit sizes for widgets that do not receive reliable constraints.
  • Extract repeated themes, wrappers, and configurations into reusable preview annotations.

ํ”ผํ•˜๊ธฐ

  • Do not call native APIs from widgets rendered in the web-based preview environment.
  • Do not use private or nonconstant callbacks in preview annotations.
  • Do not treat successful preview rendering as complete application testing.

์ž์ฃผ ๋ฌป๋Š” ์งˆ๋ฌธ

Which Flutter elements can receive previews?
Use top-level functions, static methods, or public constructors and factories without required arguments that return supported widget types.
How do I start the Widget Previewer?
Supported IDEs start it automatically. From the project root, the Flutter CLI can start it with the widget-preview command.
Can one widget have several previews?
Yes. Apply multiple Preview annotations or use MultiPreview to generate related configurations.
Can previews use application themes?
Yes. Configure a theme callback directly or create a custom Preview annotation that applies shared theme data.
Why does a widget fail only in the previewer?
The previewer uses a web environment. Native APIs from dart:io, dart:ffi, or dependent plugins can fail there.
Do previews replace tests?
No. Previews support rapid visual iteration but do not replace widget, integration, accessibility, or device testing.

๊ฐœ๋ฐœ์ž ์„ธ๋ถ€ ์ •๋ณด

์ž‘์„ฑ์ž

flutter

๋ผ์ด์„ ์Šค

MIT

Skillstore ๋ฆฌ๋น„์ „

r1

๋ฒ„์ „ ์•ˆ๋‚ด

์ž‘์„ฑ์ž๊ฐ€ ๋ฒ„์ „์„ ์„ ์–ธํ•˜์ง€ ์•Š์•˜์Šต๋‹ˆ๋‹ค.

์ฐธ์กฐ

d9e5ab86dafd32a1ddde9b8b4fde177589b55b95

์œ ์ง€๋ณด์ˆ˜ ์ตœ์‹ ์„ฑ

2026. 9. 8.

์‚ฌ์šฉ๋Ÿ‰

1 ๋‹ค์šด๋กœ๋“œ ยท 0 ์กฐํšŒ

ํŒŒ์ผ ๊ตฌ์กฐ

๐Ÿ“„ SKILL.md