📦

better-layout

Name: better-layout
Author: jakubkrehel

Revisión del contenido r1 Seguro ⚙️ Comandos externos

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.

Compatible con: Claude Codex Code(CC)

🥉 78 Bronce

Maintain this Skill? Claim it 🥉 78 Bronce

Instalar con mi Agente

Copia esta solicitud en tu Agente. Incluye la página canónica del Skill y el manifiesto.

Solicitud de agente

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.

Tu Agente debe seguir mostrando su plan y solicitar cualquier confirmación exigida por la política de seguridad.

Recursos legibles por agentes

Usa estos enlaces cuando un agente de IA, crawler o script necesite contexto limpio en vez de leer la página completa.

Detalle Markdown GET /skills/jakubkrehel-better-layout.md Manifest firmado GET /api/skills/jakubkrehel-better-layout/manifest Lockfile firmado GET /api/skills/jakubkrehel-better-layout/lockfile

Pruébalo

Usando "better-layout". A settings form uses identical gaps within and between sections, plus separator lines after every field.

Resultado esperado:

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.

Usando "better-layout". A right-to-left interface keeps a floating action on the physical right, while a long translated button label clips.

Resultado esperado:

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.

Auditoría de seguridad

Seguro

v1 • 9/10/2026 Abrir el informe versionado

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.

Archivos escaneados

363

Líneas analizadas

Elementos de revisión

Falsos positivos ignorados

Factores de riesgo

La auditoría estática y semántica completada más reciente no detectó hallazgos de seguridad confirmados. Esto no demuestra que el skill no tenga efectos secundarios.

Auditado por: codex

Compartir y citar este informe

Comparte el informe de evaluación versionado, la insignia neutral, la tarjeta insertable y las citas. Skillstore presenta evidencias sin decidir si este Skill es seguro.

Abrir el informe versionado

Copiar enlace del informe

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

Insignia 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)

Insignia 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>

Tarjeta para insertar

<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>

Citas académicas (APA · BibTeX · CFF)

Cita APA

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

Cita 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"

Puntuación de Skillstore

Por qué esta puntuación Confianza de la evidencia: Medio

Arquitectura

Mantenibilidad

Contenido

Comunidad

Cumplimiento de la especificación

Lo que puedes crear

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.

Prueba estos prompts

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.

Mejores prácticas

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.

Evitar

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.

Preguntas frecuentes

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.