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.

Responsive layouts that hold up on mobile v1.0.0

Use this resource to fix or build the responsive layout of a website or app

New

  • 554 downloads
  • 186 likes
  • 177 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 responsive-layout-system

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 inspects your CSS, spots fixed widths and fragile positioning, then produces refactored code applying clear Grid versus Flexbox rules. You get a mobile-first page shell, justified breakpoints and a verification checklist from 320 to 1440 px.

Mostly picked by

Updated November 2, 2026

No preview image: drawn card.

Details

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

Similar resources

View all

What you get

  • SKILL.md: a four-step method and a quality checklist
  • references/layout-patterns.md: hero, card grid, sidebar, navigation, sticky footer
  • A summary of decisions made and layout smells removed

Good fit for

  • A page that overflows or breaks on phones
  • A dashboard or card grid to build
  • Inconsistent spacing between sections of a site

Not for

  • Defining a spacing scale or design tokens
  • Choosing fonts or tuning text readability
  • Creating a brand's visual identity

Tags

  • responsive
  • css-grid
  • flexbox
  • mobile
  • layout

About

You say

"My site breaks on mobile and the card grid is misaligned. Fix the layout."

No preview image: drawn card.

Skill published by sanky369 under the MIT license.

Show more

Prerequisites

You bring
The code of the page or component to fix and The screen widths that matter most

How to use it

  1. Tell the agent which screen or component is affected
  2. It finds the layout problems and proposes refactored code
  3. Check the result at 320, 375, 768, 1024 and 1440 px

Content preview

Files

  • LICENSE1 KB
  • NOTICE-PALATEKIT.md0.4 KB
  • references/layout-patterns.md4.8 KB
  • SKILL.md7.4 KB

Origin and licence

Modified by PalateKit

Author
sanky369
Source
github.com/sanky369/vibe-building-skills/tree/e9714d8decbc9a76eaab3bd85866117b8010e9bc/skills/frontend-design/layout-system
Licence
MIT

Notice

Version modifiée de « layout-system » (sanky369, 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

Do I need Tailwind?

No. The agent delivers in whatever styling system your project already uses: Tailwind, CSS Modules or plain CSS.

What about the companion skills it mentions?

They are optional. Without them, the agent reuses the tokens and breakpoints already in your project.