How does this skill help fix inconsistent website designs?

This skill eliminates design debt by creating a standardized system of font pairings, heading hierarchies, and responsive spacing rules that ensure your site remains readable and professional across all devices.

What specific deliverables are included in the output?

You will receive a complete documentation of typography and layout rules, along with production-ready code snippets in formats like CSS, SCSS, Tailwind configurations, or JSON design tokens.

Can I use this skill to audit an existing website instead of starting from scratch?

Yes, the architect can audit your current CSS, screenshots, or design briefs to identify issues like text overflow, poor contrast, or layout shifts, and provide a prioritized list of fixes.

What do I need to provide to get started?

Simply provide your brand guidelines, a content sample, or a link to your current site; the skill then processes these inputs to generate a cohesive layout framework tailored to your project.

Which platforms and coding frameworks are supported?

The skill focuses on defining the structural and visual rules for web layouts, supporting modern frameworks like Tailwind CSS, standard HTML/CSS, and various component-based architectures.

Are there any technical aspects I need to handle manually after using this skill?

While the skill optimizes for readability and responsive behavior, you are responsible for final browser testing and ensuring you have the legal licenses for any fonts used in the system.

Typography And Layout System Architect

Example session with this skill installed

Quick mode: give me two typography directions for an English gardening blog, with palettes, font pairings, reading widths, and starter CSS.

Read your context and instructions
Compiled the typography and layout

Here are two reading-focused directions for your gardening blog, with starter styles for either choice.
Assumption: long articles matter more than dense navigation.

Direction 1: Field Journal

Pairing: Georgia headings and body, Arial navigation. Serif article text suits a journal-style publication; sans-serif labels distinguish controls.

Palette: Text #222222, background #FFFFFF. Calculated contrast: 15.91:1.

Reading layout: Body 1.125rem, equivalent to 18px at a 16px root. Line height 1.6 gives 28.8px. Limit articles to 65ch.

Direction 2: Practical Grower

Pairing: Georgia headings, Arial body and navigation. Sans-serif body text distinguishes this direction for step-by-step guides.

Palette: Text #303030, background #FFFFFF. Calculated contrast: 13.20:1.

Use the same reading dimensions so the choice changes character without changing layout.

Starter CSS

Apply either class to the article container. Heading size uses 1.125 × 1.25² = 1.7578125rem. Side padding is 4 × 0.25rem = 1rem.

.field-journal,.practical-grower {
  box-sizing: border-box;
  max-inline-size: 65ch;
  margin-inline: auto;
  padding-inline: 1rem;
  background: #fff;
  font: 1.125rem/1.6 Georgia, serif;
  color: #222;
}
.practical-grower {
  font-family: Arial, sans-serif;
  color: #303030;
}
h1 { font: bold 1.7578125rem/1.2 Georgia, serif; }
nav { font-family: Arial, sans-serif; }

Next steps

Compare both with a real article; installed fonts may vary.
Check at 320px and 200% zoom. Browser testing is still needed.

Connects securely to your tools. The creator never sees your data.

About this skill

Inconsistent fonts, cramped text, and layouts that break on phones make a website harder to use. Get a documented typography and layout system your designer or developer can apply across the site.

What it does

Sets readable text styles: Defines font pairings, heading sizes, line spacing, and reading widths.
Plans responsive layouts: Specifies columns, margins, spacing, and how content stacks on smaller screens.
Finds existing problems: Audits supplied styles for inconsistent sizing, overflow, readability, and font-loading risks.
Prepares implementation files: Produces reusable design values in CSS, Tailwind configuration, or design tokens JSON.
Provides checks: Includes accessibility, multilingual, and browser verification procedures.

How it works

Share a brief, stylesheet, screenshot, or description of your design.
Ask for a complete system, a focused recommendation, an audit, or a developer handoff.
Review the recommendations, calculations, and stated assumptions.
Apply the supplied styles and run the verification checklist.

Works with

Website and web app projects using CSS, SCSS, Tailwind, HTML, component markup, or existing design tokens. It can also work from brand guidelines and content samples.

Why use this skill

Reduce repeated decisions about text sizes, spacing, and screen widths. Developers get specific values and behavior rules instead of a visual direction they must interpret. Audits include evidence and prioritized fixes.

Use cases

Standardize headings and spacing across a business website.
Improve reading layouts for a blog or documentation site.
Audit a dashboard with crowded tables and forms.
Convert an approved design system into reusable styles.

Known limitations

Browser testing remains your responsibility. Font licensing, language coverage, and platform support may need separate verification.

How to use

1
Connect your agent to the Agensi MCP
Copy the prompt and paste it into Claude, ChatGPT, Cursor or any agent that supports MCP. It sets up the connection for you. Manual setup
2
Sign in to Agensi
Your agent shows a sign-in link. Sign in and click Allow.
3
Ask for what you need
Your agent loads this skill and uses it on your task. It always asks before any payment.

Reviews

No reviews yet

Be one of the first to try it. Every listed skill passes our trust checks below.

Security scanned

Passed our 8-point scan before listing

Fresh listing

Recently published to Agensi

Money-back guarantee

Doesn't do what its page promises? You get your money back.

Typography And Layout System Architect