技能 wunderui-screen

📦

wunderui-screen

Name: wunderui-screen
Author: wunder-ui

內容修訂 r1 中風險 🌐 網路存取📁 檔案系統存取⚙️ 外部命令🔑 環境變數

Build React Screens with WunderUI

Generated screens often miss UI states, responsive layouts, and consistent design tokens. This skill guides WunderUI component selection, screen assembly, and validation within the selected plan.

支援: Claude Codex Code(CC)

📊 72 尚可

Maintain this Skill? Claim it 📊 72 尚可

使用我的智慧代理安裝

將此請求複製給你的智慧代理，其中包含權威 Skill 頁面和清單。

智能體請求

Review the Skillstore skill "wunderui-screen" from https://skillstore.io/skills/wunder-ui-wunderui-screen.md and its manifest at https://skillstore.io/api/skills/wunder-ui-wunderui-screen/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.

你的智慧代理仍應顯示其計畫，並依安全政策請求必要確認。

Agent 可讀資源

當 AI Agent、爬蟲或腳本需要乾淨脈絡、而不是讀取完整頁面時，請使用這些連結。

Markdown 詳情 GET /skills/wunder-ui-wunderui-screen.md 已簽名 manifest GET /api/skills/wunder-ui-wunderui-screen/manifest 已簽名 lockfile GET /api/skills/wunder-ui-wunderui-screen/lockfile

測試它

正在使用「wunderui-screen」。 Build a profile settings screen on the Free plan.

預期結果:

Illustrative result: a settings screen using free form and feedback components.
Loading, empty, and error states are available through a development status control.
The completion report identifies changed files, selected components, defaults, and validation results.

正在使用「wunderui-screen」。 Create a Free-plan revenue overview without paid charts.

預期結果:

Illustrative result: metric cards, trend indicators, and progress bars replace chart regions.
Loading placeholders, an empty overview, and retryable errors remain available.
The report notes that paid charts and the full app shell require an appropriate paid plan.

安全審計

中風險

v1 • 2026/10/10 開啟版本化報告

All 62 static findings are false positives involving documentation, JavaScript syntax, expected project reads, or public metadata requests. A semantic finding identifies plan enforcement that defaults to Pro and permits imports with unknown licensing metadata. No evidence found of malicious prompt injection, credential collection, or data exfiltration.

已掃描檔案

305

分析行數

複核項目

已忽略的誤報

已確認的安全問題 (1)

中

scripts/screen.mjs:17-18 scripts/screen.mjs:113-114 scripts/screen.mjs:139-140 SKILL.md:22

Plan Restrictions Fail Open

Missing plan configuration defaults to Pro, and Core is not restricted separately. Free checks accept unknown component tiers when design metadata is unavailable or incomplete.

The code restricts only Free and rejects only known Pro tiers, despite instructions to determine the user plan first. This permits licensing violations.

風險因素

🌐 網路存取 (5)

package.json:17 scripts/screen.mjs:25 scripts/screen.mjs:54 scripts/screen.mjs:11 scripts/screen.mjs:20

📁 檔案系統存取 (14)

references/layouts.md:7 scripts/screen.mjs:12 scripts/screen.mjs:17 scripts/screen.mjs:24 scripts/screen.mjs:119 scripts/screen.mjs:121 scripts/screen.mjs:124 scripts/screen.mjs:129 scripts/screen.mjs:131 scripts/screen.mjs:135 scripts/screen.mjs:136 scripts/screen.mjs:137 scripts/screen.mjs:141 scripts/screen.mjs:144

⚙️ 外部命令 (34)

🔑 環境變數 (2)

scripts/screen.mjs:20 scripts/screen.mjs:20

審計單位: codex

分享與引用此報告

分享版本化評估報告、中性徽章、嵌入卡片與引用。Skillstore 只報告證據，不判斷該 Skill 是否安全。

開啟版本化報告

複製報告連結

https://skillstore.io/skills/wunder-ui-wunderui-screen/audits/1?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Markdown 徽章

[![Skillstore security assessment](https://skillstore.io/badges/skills/wunder-ui-wunderui-screen/security.svg)](https://skillstore.io/skills/wunder-ui-wunderui-screen?utm_source=security_passport_badge)

HTML 徽章

<a href="https://skillstore.io/skills/wunder-ui-wunderui-screen?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/wunder-ui-wunderui-screen/security.svg" alt="Skillstore security assessment" loading="lazy"></a>

嵌入卡片

<iframe src="https://skillstore.io/embed/skills/wunder-ui-wunderui-screen.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 引用

wunder-ui. (2026). wunderui-screen security audit report (audit version 1) [Author version unspecified]. Skillstore. https://skillstore.io/skills/wunder-ui-wunderui-screen/audits/1

BibTeX 引用

@techreport{wunder-ui-wunder-ui-wunderui-screen-2026,
  author = {wunder-ui},
  title = {wunderui-screen security audit report (audit version 1)},
  institution = {Skillstore},
  year = {2026},
  number = {1},
  url = {https://skillstore.io/skills/wunder-ui-wunderui-screen/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: "wunderui-screen security audit report (audit version 1)"
version: "unspecified"
type: report
authors:
  - name: "wunder-ui"
date-released: "2026-10-10"
url: "https://skillstore.io/skills/wunder-ui-wunderui-screen/audits/1"
identifiers:
  - type: other
    value: "skillstore:wunder-ui-wunderui-screen:audit:1"
    description: "Skillstore immutable audit report identifier"

Skillstore 評分

評分依據證據置信度: 中

架構

可維護性

內容

社群

規範符合度

你可以打造什麼

Build Product Dashboards

Assemble a responsive dashboard with plan-appropriate metrics, data regions, actions, and reviewable loading, empty, and error states.

Prototype Settings Screens

Create a Free-plan settings screen using forms, feedback components, design tokens, and invented sample data.

Review Screen Consistency

Check existing screen files for token violations, deep imports, missing state indicators, and known paid components before project validation.

試試這些提示

Create a Simple Settings Screen

Build a WunderUI profile settings screen on the Free plan. Use invented data, design tokens, and loading, empty, and error states.

Build a Responsive Dashboard

Build a sales dashboard on my WunderUI Pro plan. Find matching blocks, verify component props, and add responsive layouts and reviewable UI states.

Adapt a Screen for Free

Adapt my analytics screen for WunderUI Free. Replace paid components with documented free alternatives, preserve UI states, and explain the lost functionality.

Audit and Validate a Screen

Review [screen files] for my confirmed WunderUI plan. Verify component signatures, tokens, motion, and every data region. Run checks, typecheck, and build.

最佳實務

Confirm the plan explicitly and verify component entitlements before accepting suggestions or importing blocks.
Read real component signatures and use design tokens before implementing each screen region.
Review each UI state on mobile and desktop, then run source checks, typecheck, and build.

避免

Treating a successful regex check as proof of runtime correctness or license compliance.
Copying paid component designs by hand to bypass plan restrictions.
Using real personal data, guessed props, or hardcoded motion and color values in generated screens.

常見問題

Which assistants can use this skill?

The skill supports Claude, Codex, and Claude Code in a React project that uses WunderUI.

What does the bundled helper do?

It searches component and block metadata, then checks specified source files for WunderUI conventions. The assistant performs screen implementation.

Can I use the Free plan?

Yes. Specify Free explicitly and use documented free alternatives. Verify entitlements manually because missing metadata can bypass the helper checks.

Does it need network access?

Block search retrieves a public registry index. Component metadata is read locally when available, otherwise it is fetched from the configured site.

Does it guarantee a working screen?

No. Its regex checks are limited. The workflow also calls for project typechecking, building, and manual review of responsive layouts and UI states.

Does it upload project source or credentials?

No evidence found of source or credential uploads in the bundled helper. Network requests retrieve metadata, and source checks read explicitly selected files.