skills.rest
superpollo02
superpollo02COMMUNITY
Explore all skills by this author →
GitHub

editorial

Generate magazine-inspired editorial design-system guidance with WCAG 2.2 AA accessibility rules.

Updated May 13, 2026
Search Tags:#typography#accessibility#design-system#WCAG 2.2#layout grid#editorial UI#component rules
One-click install
npx skills add https://github.com/superpollo02/awesome-design-skill --skill editorial-superpollo02
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: editorial
Source: https://github.com/superpollo02/awesome-design-skill/tree/main/skills/editorial
Command: npx skills add https://github.com/superpollo02/awesome-design-skill --skill editorial-superpollo02

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It solves the challenge of producing consistent, magazine-inspired editorial UI patterns with correct typography hierarchy, spacing rhythm, and accessibility.

Core Features & Use Cases

  • Editorial style foundations: Defines serif-first typography, an 14/16/18/24/32/40 scale, Gelasio/Ubuntu Mono font pairing, and an 8pt baseline grid spacing system.
  • Accessible reading-focused layouts: Provides WCAG 2.2 AA, keyboard-first interaction, focus visibility, semantic HTML before ARIA, and touch-target guidance.
  • Implementation-ready component rules: Establishes do/don’t constraints, state expectations, responsive behavior expectations, and a QA checklist for review readiness.

Quick Start

Ask the AI agent to generate editorial design-system guidance using the Editorial skill so it can produce accessible, implementation-ready component rules and tokens.

Frequently Asked Questions about editorial

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

FAQPage Schema
How do I generate editorial UI design system guidelines for a magazine-style layout?▼

Generate editorial UI design system guidelines by defining a serif-first typography scale, 8pt baseline grid spacing, and component state rules. This produces magazine-inspired, structured reading experiences with consistent visual hierarchy and spacing rhythm.

What typography hierarchy and spacing rhythm rules work best for accessible reading-focused layouts?▼

Accessible reading-focused layouts use a serif-first 14/16/18/24/32/40 typography scale paired with an 8pt baseline grid. This spacing rhythm creates structured, elegant reading experiences while maintaining clear visual hierarchy.

How do I ensure my editorial design system meets WCAG 2.2 AA accessibility requirements?▼

Ensure editorial design systems meet WCAG 2.2 AA accessibility by enforcing keyboard-first interaction, explicit focus visibility, semantic HTML before ARIA, and touch-target guidance. Component rules must include explicit loading and error states for compliance.

Can I use this editorial UI guidance to create implementation-ready component rules and design tokens?▼

Yes, editorial UI guidance creates implementation-ready component rules by establishing do/don't constraints, state expectations, and responsive behavior. It outputs testable QA acceptance criteria and color tokens for immediate design system integration.

What font pairing does this editorial design system recommend for structured reading experiences?▼

The editorial design system recommends a Gelasio and Ubuntu Mono font pairing for structured reading experiences. This serif-first typography combination ensures elegant, magazine-inspired visual hierarchy across all UI components.

Does this editorial UI skill require external design dependencies or component libraries?▼

No, this editorial UI skill requires no external design dependencies or component libraries. It provides self-contained design system instructions, typography scales, and accessibility rules that integrate directly into any UI workflow.

Related Skills

Explore More Design & Creative Skills→
bergsidebergside
2.3k

editorial

Define magazine-inspired editorial UI with serif typography, 8pt spacing, and tokenized colors.

Official
Intermediate
PiercingXXPiercingXX
1

cosmic

Generate Cosmic design-system guidelines with WCAG 2.2 AA acceptance criteria.

Community
Intermediate
Fandry96Fandry96
27

design-editorial

Implement editorial design system blueprints for Next.js 15 projects.

Community
Intermediate
nexu-ionexu-io
84.7k

magazine-poster

Create editorial magazine-style posters from briefs using specified typography and grid layouts.

Official
Advanced