How to use the Image-First Grid Layout agent skill

What the skill makes the agent do

The skill is a visual direction, not a code library. It tells the agent how to lay out and style a web page. The image is treated as the stage: a full-screen or large hero background that fills most or all of the viewport.

Content is arranged as precise overlay blocks rather than stacked marketing sections. Headlines and buttons sit in one anchored grid column, often low in the viewport, and a secondary box for a quote, proof point or metric sits in an adjacent lane.

• Full-bleed background photography or video with dark gradient washes for readability
• Visible structural lines such as outer rails, center guides and small corner markers
• Lightly framed, transparent supporting cards instead of heavy containers
• Restrained neutral palette with at most one subtle accent
• Typography guidance: clean sans-serif headlines, soft low-contrast body copy, small micro-labels
• Slow, subtle motion: masked text entrances, drifting lines, gentle hover sweeps

Install the skill from the ZIP

Download the skill ZIP from this page and unzip it. The skill folder contains SKILL.md, plus a demo folder with index.html, PROMPT.md and source.json.

For a personal install, place the skill folder in ~/.claude/skills/. For a single project, place it in that project's .claude/skills/ folder. Either way, the agent picks it up from the folder location.

You can also upload the skill in the Claude apps under Settings → Capabilities → Skills.

• Personal: ~/.claude/skills/
• Project only: .claude/skills/ inside your project
• Claude apps: Settings → Capabilities → Skills, then upload

Trigger the skill with a natural request

You do not need special syntax. Describe the page you want and mention the visual style, for example a cinematic hero or a full-bleed photo landing page. The skill's description covers image-led grid layouts with full-bleed photography, guide lines and overlays, so requests that match those ideas are the ones it is built for.

The demo prompts in the package use the skill name directly, as in "Use $image-first-grid-layout to create a responsive standalone HTML design". Naming the skill this way makes the request explicit.

• Use $image-first-grid-layout to build a landing page hero for a product launch with a full-bleed architectural photo.
• Use $image-first-grid-layout to create a responsive standalone HTML page based on demo/index.html.
• Build a cinematic product hero with bottom-anchored headline and a metric box in the right grid lane.

Use the demo as a reference

The package includes demo/index.html, a finished example page. Ask the agent to treat it as the visual and interaction reference rather than a loose mood board. demo/PROMPT.md holds the prompts used to recreate the demo, and demo/source.json is included in the files.

Reference files help most when you want consistent spacing, overlay strength and motion across a page.

• Point the agent at demo/index.html when you want a close match
• Use demo/PROMPT.md as a starting prompt and edit the product brief for your own page

Tune the look with the built-in knobs

The SKILL.md file lists tuning controls you can name in your request. Image dominance sets how much of the screen the photo fills. Overlay darkness sets gradient strength, and grid visibility sets how strong the rails and markers appear. Technical atmosphere controls how many animated lines or glows are added, and content anchoring controls where copy sits in the viewport.

Asking for a specific setting, such as a lighter overlay or a higher content anchor, gives the agent a clear target.

• Make the grid rails quieter so the photo stays the main event
• Use a darker gradient on the left for stronger text contrast
• Remove the animated line field for a purely cinematic feel

Know what to expect and what to avoid

The skill steers the agent away from centered SaaS layouts, dense card grids and gallery layouts. Because it imposes its own visual system, it can conflict with strict brand guidelines that call for a different palette or style. If you need a dense, information-heavy site, pick a different approach.

The source does not list required tools, and it states that the skill runs no scripts and uses no network access. It is a style guide the agent reads while writing code.

• Not suited to content-heavy sites or galleries
• Not suited to strict brand guides that conflict with its restrained palette and overlays
• Runs scripts: no. Uses network: no. Requirements listed: none