技能 better-ui

📦

better-ui

Name: better-ui
Author: jakubkrehel

內容修訂 r1 安全 ⚙️ 外部命令

Polish Interfaces with Precise UI Guidance

Small inconsistencies in motion, surfaces, and icons can make an interface feel unfinished. This skill provides concrete rules and values for focused improvements.

支援: Claude Codex Code(CC)

🥉 77 銅級

Maintain this Skill? Claim it 🥉 77 銅級

使用我的智慧代理安裝

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

智能體請求

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

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

Agent 可讀資源

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

Markdown 詳情 GET /skills/jakubkrehel-better-ui.md 已簽名 manifest GET /api/skills/jakubkrehel-better-ui/manifest 已簽名 lockfile GET /api/skills/jakubkrehel-better-ui/lockfile

測試它

正在使用「better-ui」。 Review a card with equal inner and outer radii and eight pixels of padding.

預期結果:

MEDIUM: The nested radii are not concentric. Increase the outer radius by eight pixels to match the visible inset.

正在使用「better-ui」。 Review a toolbar that uses mixed icon libraries and transition-all.

預期結果:

MEDIUM: Mixed stroke conventions make toolbar icons visually inconsistent. Use one icon library for the surface.
MEDIUM: The broad transition can animate unintended properties. Name only the properties that change.

正在使用「better-ui」。 Review a theme toggle that slowly crossfades the whole page.

預期結果:

HIGH: Theme colors transition together and obscure the state change. Disable transitions during the theme update, then restore them after the next paint.

安全審計

安全

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

All 30 static findings are false positives caused by design prose, CSS examples, and Markdown inline-code formatting. The reviewed files contain no keylogging, system reconnaissance, shell execution, prompt injection, or other malicious intent.

已掃描檔案

994

分析行數

複核項目

已忽略的誤報

最近一次完成的靜態與語意稽核未偵測到已確認的安全發現。這並不能證明該 Skill 沒有副作用。

審計單位: codex

分享與引用此報告

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

開啟版本化報告

複製報告連結

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

Markdown 徽章

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

HTML 徽章

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

嵌入卡片

<iframe src="https://skillstore.io/embed/skills/jakubkrehel-better-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 引用

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

BibTeX 引用

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

Skillstore 評分

評分依據證據置信度: 中

架構

可維護性

內容

社群

規範符合度

你可以打造什麼

Review a product interface

Audit an existing interface for inconsistent surfaces, icon treatment, and motion behavior before release.

Refine frontend components

Apply exact CSS and component guidance to buttons, cards, image treatments, and animated states.

Standardize a design system

Turn repeated interface issues into consistent rules for motion, elevation, icon weight, and state feedback.

試試這些提示

Quick interface review

Review this interface for visible UI polish issues. List each issue by severity, location, suggested change, and user impact.

Polish a component

Improve this component while preserving its design system. Check radius, alignment, surfaces, icon weight, interaction feedback, and motion values.

Audit motion behavior

Audit every animated state in this interface. Check interruptibility, duration, easing, first-render behavior, theme switching, exits, and static feedback cues.

Perform a complete polish audit

Inspect all supplied interface files and available browser states. Group root causes, cite every location, propose exact fixes, and report unverified checks.

最佳實務

Preserve the project's component library, tokens, density, and established motion language.
Inspect every defined state and report any browser checks that could not be completed.
Group repeated symptoms under one root cause and cite every affected location.

避免

Do not replace structural borders or accessible focus outlines with decorative shadows.
Do not use transition-all or persistent will-change declarations across many elements.
Do not add expressive motion to frequent interactions or make motion the only state cue.

常見問題

What does this skill review?

It reviews surface depth, nested radii, optical alignment, icons, animations, transitions, and interaction feedback.

Does it redesign complete products?

No. It improves established interfaces while preserving the existing component system, visual language, and density.

Can it work without a browser?

Yes. It can inspect source-defined states and values, but it must mark visual and runtime behavior as unverified.

Does it cover accessibility?

Only related polish concerns are covered. Focus behavior, ARIA, hit areas, keyboard support, and reduced motion require an accessibility review.

Which motion libraries does it support?

It provides guidance for CSS transitions, Motion, and Framer Motion while following the package already used by the project.

How are findings reported?

Findings are grouped by principle and ordered by severity, with locations, before and after guidance, rationale, and verification status.

開發者詳細資訊

作者

jakubkrehel

授權

MIT

Skillstore 修訂

版本提示

作者未聲明版本。

儲存庫

https://github.com/jakubkrehel/skills/tree/267330e1adfc66a718fb65fa6918c1f06d0a689e/skills/better-ui

引用

7c99d96a0368287ee77cc6e97121e473c91ab0a5

維護新鮮度

2026/9/11

使用量

0 次下載 · 0 次瀏覽

檔案結構

📁 agents/

📄 openai.yaml

📄 animations.md

📄 enter-exit.md

📄 icon-transitions.md

📄 icons.md

📄 performance.md

📄 SKILL.md

設計獨特的前端介面

由 Atman36

通用生成介面通常看起來可預測且薄弱。這項技能會引導 Claude、Codex 和 Claude Code 產出獨特且生產環境就緒的前端設計。

設計與創意查看

better-ui

使用我的智慧代理安裝

Agent 可讀資源

測試它

安全審計

風險因素

複製報告連結

Markdown 徽章

HTML 徽章

嵌入卡片

APA 引用

BibTeX 引用

CITATION.cff

Skillstore 評分

你可以打造什麼

Review a product interface

Refine frontend components

Standardize a design system

試試這些提示

最佳實務

避免

常見問題

開發者詳細資訊

jakubkrehel 的更多技能

make-interfaces-feel-better

variant

better-layout

better-colors

better-typography

technical-drawing

相關技能

ui-design

uizze-ui

brag

ui-styling

design-system

frontend-design