Skills
.Work. You
Rest

creating-page-layouts

Community

Design unique, editorial page layouts.

Design & Creative#landing page#layout design#web design#css grid#editorial design#bento grid
Author7a336e6e
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill helps you break free from generic, predictable website layouts and create visually engaging, "editorial" page designs that capture user attention.

Core Features & Use Cases

  • Anti-Template Design: Moves beyond standard "Hero -> 3 Columns -> Footer" structures by using asymmetry, overlap, and horizontal scrolling.
  • Bento Grids: Organizes content into dense, information-rich grids for dashboards or feature sections.
  • Sticky & Parallax Effects: Adds depth and interactivity through subtle scrolling animations.
  • Full-Bleed Elements: Extends design elements to the browser edges for a more immersive feel.
  • Use Case: Designing a new product landing page that needs to feel premium and distinct, avoiding the common SaaS template look.

Quick Start

Use the creating-page-layouts skill to design a landing page with an asymmetrical hero section and a bento grid for features.

Dependency Matrix

Required Modules

None required

Components

references

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: creating-page-layouts
Download link: https://github.com/7a336e6e/skills/archive/main.zip#creating-page-layouts

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.