스킬 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.

에이전트는 계속해서 계획을 표시하고 보안 정책에서 요구하는 확인을 요청해야 합니다.

에이전트가 읽기 쉬운 리소스

AI 에이전트, 크롤러, 스크립트가 전체 페이지 대신 정리된 컨텍스트만 필요할 때 이 링크를 사용하세요.

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

분석된 줄 수

검토 항목

오탐 무시됨

가장 최근에 완료된 정적·의미론적 감사에서 확인된 보안 발견 사항이 감지되지 않았습니다. 이는 스킬에 부작용이 없음을 증명하지 않습니다.

감사자: 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