Every premium and members-only resource for $9.99/month, as a no-commitment subscription. See the plans

PalateKit

Sign in
Menu

Request a resource

Describe the resource you are missing in one sentence. We will email you when it is published.

0 / 280

A page, a video or an image online.

Unlock PalateKit

Unlock everything

Plan

Paying means accepting our terms of sale.

Secure payment by Stripe. Receipts and invoices sent by email.

Welcome back

Sign in to install, download or save this resource. A free account is enough for free resources.

PalateKit Pick

Layout robustness for resizing, translation and RTL v1.0.0

Use this resource to check and fix the structure of a web page for every screen size and language

New

  • 574 downloads
  • 211 likes
  • 165 saves

$4.99

Lifetime access to this resource, with its updates.

Install with the CLI

In a terminal, from the folder you want:

npx --yes palatekit@latest install layout-stress-test

With no option, the skill goes to ~/.agents/skills/; add --agent claude-code (or codex, cursor…) to target an agent.

First time: connect the CLI with

npx --yes palatekit@latest login

The agent applies precise rules for grouping with space, aligning to shared edges, reading order and breakpoints. It then stress-tests the page at 320px, at 200% zoom, with longer strings and in an RTL mirror. You get fixes written in the project's own styling system and a report ranked by severity.

Mostly picked by

Updated November 2, 2026

Sketch of a page whose groups, alignment and spacing hold up when resized or mirrored for RTL.

Details

Works in
Install guides
Generates with
Your agent's model
Licence
MIT

Similar resources

View all

What you get

  • SKILL.md: principles, a detection-to-fix table and the report format
  • grouping-and-alignment.md: recipes for grouping, alignment and logical (RTL-safe) properties
  • spacing-and-adaptivity.md: spacing, hidden content, breakpoints and room for longer translated text

Good fit for

  • A page that breaks when its labels are translated into German or French
  • A site that must work in Arabic or Hebrew (right-to-left)
  • A layout review before handing a site to a client

Not for

  • Choosing an art direction, colors or fonts
  • Writing the interface copy
  • Strict accessibility audits (hit areas, focus)

Tags

  • layout
  • responsive
  • rtl
  • localization
  • css

About

You say

"Review the layout of my home page: check it holds at 320px, with strings 40% longer, and in an RTL mirror."

Sketch of a page whose groups, alignment and spacing hold up when resized or mirrored for RTL.

Skill published by jakubkrehel under the MIT license.

Show more

Prerequisites

You bring
The code or URL of the page to review and The list of widths and languages to support

How to use it

  1. Copy the skill folder into your agent's skills folder.
  2. Ask the agent to review a page or component, naming the skill.
  3. Apply the fixes from the table, starting with HIGH severity.

Content preview

Files

  • grouping-and-alignment.md3.9 KB
  • LICENSE1.1 KB
  • NOTICE-PALATEKIT.md0.4 KB
  • SKILL.md8.3 KB
  • spacing-and-adaptivity.md5.8 KB

Origin and licence

Modified by PalateKit

Author
jakubkrehel
Source
github.com/jakubkrehel/skills/tree/592aedc44d7d5b3e29740984252902f3e5402a1c/skills/better-layout
Licence
MIT

Notice

Version modifiée de « better-layout » (jakubkrehel, MIT) : traduction française et fiche par PalateKit.

User reviews

–

No ratings yet

Loading reviews…

Delete your review?

Your rating and comment will be removed from the page.

Frequently asked questions

Does the skill refer to other skills?

Yes, it mentions better-accessibility, better-typography, better-colors, better-ui and better-writing for neighboring topics. None is required: it works alone on layout.

Are the pixel values mandatory?

No. They are starting points, used only when the project has no spacing scale or design tokens; otherwise the agent uses the project's own.