📦

break-ui

Name: break-ui
Author: emilkowalski

コンテンツリビジョン r1 安全 ⚙️ 外部コマンド

Stress-Test UI With Realistic Edge Cases

Demo data can hide layout failures, missing states, and incorrect formatting. This skill guides realistic fixture creation, development-only comparisons, and reports with targeted fixes.

対応: Claude Codex Code(CC)

🥉 77 ブロンズ

Maintain this Skill? Claim it 🥉 77 ブロンズ

自分のエージェントでインストール

このリクエストをエージェントにコピーしてください。正規の Skill ページとマニフェストが含まれています。

エージェントリクエスト

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

エージェントは引き続き計画を提示し、セキュリティポリシーで必要な確認を求める必要があります。

エージェントが読めるリソース

AI エージェント、クローラー、スクリプトがページ全体ではなく整理されたコンテキストを必要とする場合は、これらのリンクを使ってください。

Markdown詳細 GET /skills/emilkowalski-break-ui.md 署名済み manifest GET /api/skills/emilkowalski-break-ui/manifest 署名済み lockfile GET /api/skills/emilkowalski-break-ui/lockfile

テストする

「break-ui」を使用しています。 Stress-test a member list with long emails and missing avatars.

期待される結果:

Illustrative finding: a long email pushes the action menu outside a narrow row, making the action unreachable.
Proposed fix: allow the text column to shrink and wrap while preserving the action width.
Design decision: wrap the full email or shorten it with access to the complete value.
What held up: the missing-avatar fallback retained its size in the tested state.

「break-ui」を使用しています。 Review counts and empty states in a dashboard.

期待される結果:

Illustrative finding: a count of one displays a plural label.
Proposed fix: use locale-aware pluralization and verify zero, one, and larger counts.
Illustrative finding: zero items leaves a blank content region.
Design decision: choose an empty-state message and an appropriate next action.

「break-ui」を使用しています。 Create data only for a project card grid.

期待される結果:

Fixture plan: spread long titles, missing images, duplicate names, and large counts across separate cards.
Comparison states: Demo, Worst case, Empty, One, and a realistic large collection.
Delivery: a development-only fixture switch, or a self-contained HTML comparison when no project exists.

セキュリティ監査

安全

v1 • 2026/10/2 バージョン別レポートを開く

All 44 static findings are false positives: Markdown backticks describe UI examples, and reconnaissance matches concern layout dimensions. The quoted injection phrase warns against obeying repository instructions rather than requesting an override. No evidence found of malicious instruction overrides, credential access, data exfiltration, or executable shell payloads in the two reviewed files.

スキャンされたファイル

312

解析済み行数

レビュー項目

誤検知を無視

最新の完了済み静的・セマンティック監査では、確認済みのセキュリティ検出事項は見つかりませんでした。これは、スキルに副作用がないことを証明するものではありません。

監査者: codex

このレポートを共有・引用

バージョン付き評価レポート、中立的なバッジ、埋め込みカード、引用を共有できます。Skillstore は証拠を報告しますが、この Skill が安全かどうかは判断しません。

バージョン別レポートを開く

レポートリンクをコピー

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

Markdownバッジ

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

HTMLバッジ

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

埋め込みカード

<iframe src="https://skillstore.io/embed/skills/emilkowalski-break-ui.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形式の引用

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

BibTeX形式の引用

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

Skillstore スコア

このスコアの理由証拠の信頼度: 中

アーキテクチャ

保守性

コンテンツ

コミュニティ

仕様準拠

作成できるもの

Check a Component Before Release

Test member rows with long emails, short names, missing avatars, and mixed statuses before shipping.

Compare Layout Decisions

Use a fixture toggle to compare wrapping, truncation, empty states, and narrow layouts before approving design changes.

Reproduce Data-Dependent Failures

Create reusable fixtures for localization, collection boundaries, and missing data, then verify requested fixes across every state.

これらのプロンプトを試す

Review One Component

Stress-test [component] with realistic worst-case data. Add a development-only comparison toggle and report failures before applying fixes.

Create Fixtures Only

Data only [component]. Map its fields and limits, then create demo, worst-case, empty, and single-item fixtures with a development-only toggle.

Verify Responsive and Localized States

Stress-test [screen] at its real container width, 320 pixels, and its widest supported layout. Check 200 percent zoom and supported RTL and dark mode. Separate visually verified findings from inferred findings.

Apply Selected Fixes and Recheck

Fix findings 1 and 3 from the previous report using existing project conventions. Recheck every fixture state and supported layout. Keep fixtures for regression checks and keep the toggle development-only.

ベストプラクティス

Use plausible examples or actual validation limits, and use reserved example domains for fixture emails and URLs.
Inject fixtures at the existing data boundary and keep the comparison toggle out of production.
Review proposed fixes first, then verify approved changes against both demo and worst-case states.

回避

Using arbitrary oversized strings instead of plausible values or schema-backed limits.
Editing markup or CSS to manufacture failures rather than changing the input data.
Stopping after long-text tests while ignoring empty lists, singular counts, missing media, and translated labels.

よくある質問

What does this skill test?

It tests realistic data boundaries, layout behavior, formatting, optional fields, media fallbacks, collection states, and supported display environments.

Does it fix problems automatically?

The default workflow reports first and stops. Explicit fix requests apply selected changes; ambiguous design decisions remain for the user.

Does it require a running application?

A project can use a development-only switch or prototype route. A standalone component can use a self-contained HTML comparison.

Can it work without browser tooling?

Yes, but it reasons from CSS rather than confirming screenshots. It must distinguish inferred findings from visually verified findings.

Should the toggle remain in production?

No. Keep it development-only or inside a prototype route, and retain fixtures for future regression checks.

Is this a complete security or accessibility audit?

No. It focuses on UI behavior under realistic data and environment stress, not comprehensive security testing or accessibility certification.

開発者情報

作成者

emilkowalski

ライセンス

MIT

Skillstore リビジョン

バージョンに関する注意

作者はバージョンを宣言していません。

リポジトリ

https://github.com/emilkowalski/skills/tree/e8a175de22ae1e49370fc144c1f3bb9aeedf988d/skills/break-ui

参照

03f20c3ac209656c882df2c2afa710a6d8e08828

メンテナンスの新しさ

2026/10/2

利用状況

0 ダウンロード · 0 閲覧

ファイル構成

📄 CATALOG.md

📄 SKILL.md

emilkowalski のその他のスキル

すべて表示

📦

apple-design

設計流暢的 Apple 風格網頁介面

手勢驅動的網頁介面常讓人感覺延遲、僵硬或視覺不一致。此技能提供有關響應式動態、材質、字體排印、無障礙功能與互動設計的實用指引。

デザイン＆クリエイティブ表示

📦

pick-ui-library

Choose the Right Frontend UI Library

Choosing among frontend libraries can waste time and create inconsistent dependencies. This skill maps a defined UI task to an opinionated, curated library recommendation.

コーディング＆開発表示

📦

find-animation-opportunities

Find High-Value UI Animation Opportunities

Teams often add motion without a clear user benefit, which can make interfaces feel slow or distracting. This skill audits UI seams, applies a strict decision gate, and produces a short ranked list of precise motion recommendations.

デザイン＆クリエイティブ表示

📦

mobile-native

Make Web Apps Feel Native on Mobile

Mobile web applications often feel awkward because browser defaults conflict with touch interaction and changing viewports. This skill applies focused CSS and metadata fixes for a more native mobile experience.

コーディング＆開発表示

📦

emil-design-eng

以設計工程原則打磨介面

介面細節可能讓人感到不一致、反應緩慢或視覺上缺乏連貫性。此技能運用實用的動態、互動、效能與無障礙建議，提升 UI 的精緻度。

デザイン＆クリエイティブ表示

📦

review-animations

精準審查介面動畫

即使介面動態效果能正常運作，也可能感覺緩慢、分心或不易存取。此技能會依據特定的設計工藝、效能與無障礙標準審查動畫程式碼。

デザイン＆クリエイティブ表示

すべて表示

📦

image-to-ui

Recreate Screenshots as Working Interfaces

作成者 uizze

Recreating a screenshot can introduce unwanted design changes and visible mismatches. This skill guides your agent to implement the reference and compare rendered results.

コーディング＆開発表示

📦