type-craft

Generate CSS typography and layout systems with mathematical ratios and WCAG checks.

1|Updated Feb 13, 2026

Search Tags:#typography #accessibility #web development #layout #design system #css

Ready to run

npx skills add https://github.com/AgentCTO/claude-skills --skill type-craft

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: type-craft
Source: https://github.com/AgentCTO/claude-skills/tree/main/skills/type-craft
Command: npx skills add https://github.com/AgentCTO/claude-skills --skill type-craft

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill automates the creation of mathematically sound and accessible CSS typography and layout systems, ensuring visual harmony and professional design across web projects.

Core Features & Use Cases

Type Scale Generation: Creates harmonious font size scales based on mathematical ratios (e.g., Major Third, Golden Ratio).
Font Pairing: Recommends and integrates font combinations for headings and body text.
Spacing & Layout Systems: Generates consistent spacing tokens and layout proportions.
Accessibility Checks: Validates color contrast and fluid type scaling against WCAG standards.
Use Case: You're starting a new website and need a robust, scalable type system. This Skill will generate production-ready CSS custom properties for font sizes, line heights, spacing, and more, tailored to your project's needs.

Quick Start

Use the type-craft skill to generate a CSS type system for a marketing website using the major third ratio and system fonts.

Frequently Asked Questions about type-craft

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I generate a CSS typography scale using mathematical ratios?▼

To generate a CSS typography scale, this tool calculates harmonious font sizes using mathematical ratios like Major Third or Golden Ratio. It outputs production-ready CSS custom properties for font sizes, line heights, and spacing tokens tailored to your project.

What is the best way to create an accessible web design system with CSS custom properties?▼

The best way to create an accessible web design system is by generating mathematically-grounded CSS custom properties. This approach validates color contrast and fluid type scaling against WCAG standards while handling content density and brand personality.

Can I get font pairing recommendations and spacing tokens for a new web project?▼

Yes, you can get font pairing recommendations and consistent spacing tokens for new web projects. It analyzes project type, content density, and audience to recommend optimal fonts, spacing systems, and layout proportions as CSS custom properties.

Does this approach work for calculating fluid type scales that meet WCAG standards?▼

Yes, this approach works for calculating fluid type scales and validating them against WCAG standards. It ensures visual harmony and accessibility by generating mathematically sound CSS typography systems tailored to your specific project constraints.

How do I build a layout system for a marketing website using system fonts and the major third ratio?▼

To build a layout system for a marketing website, specify the major third ratio and system fonts. The tool processes these constraints to generate a complete, scalable CSS typography and layout system with production-ready custom properties.