技能 better-layout

📦

better-layout

Name: better-layout
Author: jakubkrehel

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

Improve Responsive Layouts and Reading Order

Interface layouts can lose clarity or clip content when resized, translated, or mirrored. This skill guides focused fixes for grouping, alignment, spacing, and responsive structure.

支援: Claude Codex Code(CC)

🥉 78 銅級

Maintain this Skill? Claim it 🥉 78 銅級

使用我的智慧代理安裝

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

智能體請求

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

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

Agent 可讀資源

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

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

測試它

正在使用「better-layout」。 A settings form uses identical gaps within and between sections, plus separator lines after every field.

預期結果:

Medium: section boundaries are unclear because all spacing is equal.
Use the existing spacing scale to make gaps between groups at least twice the gaps within each group.
Remove separators where spacing already communicates the grouping.
Rendered verification: not verified without browser access.

正在使用「better-layout」。 A right-to-left interface keeps a floating action on the physical right, while a long translated button label clips.

預期結果:

Medium: the floating action does not mirror with the interface.
Pair physical positioning with matching safe-area insets and add a right-to-left override.
High when the clipped label blocks an action: allow the button to grow and the action row to wrap.
Verify the RTL view, expanded labels, supported widths, and 200 percent zoom.

安全審計

安全

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

All 35 static findings are false positives involving Markdown formatting, CSS examples, or interface layout guidance. The approval terminology governs layout review outcomes, not security adjudication. No evidence found of shell execution, system reconnaissance, data exfiltration, or prompt injection in the reviewed files.

已掃描檔案

363

分析行數

複核項目

已忽略的誤報

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

審計單位: codex

分享與引用此報告

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

開啟版本化報告

複製報告連結

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

Markdown 徽章

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

HTML 徽章

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

嵌入卡片

<iframe src="https://skillstore.io/embed/skills/jakubkrehel-better-layout.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-layout security audit report (audit version 1) [Author version unspecified]. Skillstore. https://skillstore.io/skills/jakubkrehel-better-layout/audits/1

BibTeX 引用

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

Skillstore 評分

評分依據證據置信度: 中

架構

可維護性

內容

社群

規範符合度

你可以打造什麼

Repair Responsive Components

Find overflow, clipped actions, and unsuitable breakpoints in components used across different container widths.

Improve Interface Hierarchy

Review grouping, shared edges, control distinction, and primary actions while preserving existing spacing tokens.

Prepare Layouts for Localization

Check long translated labels, wrapping, right-to-left mirroring, and safe-area positioning before a multilingual release.

試試這些提示

Review a Single View

Review this view for grouping, alignment, and reading order. Identify visible failures and suggest small changes using existing spacing tokens.

Fix Responsive Overflow

Review this component at supported widths and 320 pixels. Find overflow or clipped actions, propose focused fixes, and mark unavailable checks as not verified.

Check Translation and Mirroring

Review this layout with expanded labels, German text, and right-to-left direction. Preserve DOM order and identify clipping, broken mirroring, or missing disclosure cues.

Audit a Complete Layout

Audit these views using project tokens. Check supported widths, 320 pixels, 200 percent zoom, RTL, sticky headers, and safe areas. Group findings by principle.

最佳實務

Provide the relevant components, supported widths, and existing spacing or density tokens before requesting a review.
Require a demonstrable failure and user impact for each finding, rather than treating different spacing values as defects.
Verify changes with narrow widths, zoom, expanded translations, and RTL; explicitly record checks that could not run.

避免

Replace established spacing tokens with default measurements without evidence of a layout failure.
Change visual order independently of DOM order to hide reading-order problems.
Approve uninspected views or claim browser verification when only source files were reviewed.

常見問題

What does this skill review?

It reviews grouping, alignment, reading order, spacing, responsive structure, translated-text growth, and right-to-left layout behavior.

Which AI tools are supported?

The marketplace lists Claude, Codex, and Claude Code. Browser verification depends on the tools available in your environment.

Does it run an automated layout scanner?

No. The package contains written guidance and CSS or HTML examples, not an executable scanner.

Will it replace my design system?

No. Fixes should use your project styling system and spacing tokens. Default measurements apply only when no established scale exists.

Can it verify layouts without a browser?

It can inspect source structure, sizing rules, and logical properties. Rendered checks that cannot run must be reported as not verified.

Does it provide a complete accessibility audit?

No. It addresses layout-related visibility and reading order. Focus behavior, target sizes, and other accessibility concerns require a separate review.

開發者詳細資訊

作者

jakubkrehel

授權

MIT

Skillstore 修訂

版本提示

作者未聲明版本。

儲存庫

https://github.com/jakubkrehel/skills/tree/d574cc8a576dc24256ad38268b8d03d86724a1b3/skills/better-layout

引用

e406bf64b5db6e514879399e87b346fa7ff7c2fb

維護新鮮度

2026/10/11

使用量

0 次下載 · 0 次瀏覽

檔案結構

📁 agents/

📄 openai.yaml

📄 grouping-and-alignment.md

📄 SKILL.md

📄 spacing-and-adaptivity.md