Editorial design skill for AI agents

Overview

The Editorial design skill is a comprehensive, implementation-ready design system guideline built for AI agents. It encodes the entire visual identity, component specifications, and interaction standards of the Editorial brand into a single SKILL.md file that any AI coding assistant can follow.

Editorial takes a modern, editorial approach to interface design — favoring refined typography, generous whitespace, and a restrained color palette that lets content breathe. Every rule in this skill file is anchored to a concrete token, threshold, or example — no ambiguous adjectives.

Style foundations

The Editorial design system is built on a modern, editorial visual style with carefully defined foundations.

Typography

The type scale uses Gelasio as the primary and display font, giving interfaces a distinctive editorial character with strong readability. Ubuntu Mono is used for code and monospaced elements. The scale follows a progression of 14 / 16 / 18 / 24 / 32 / 40 pixels, and all nine font weights (100–900) are available for precise typographic control.

Color palette

The system uses semantic tokens across primary, secondary, neutral, and success palettes — so components reference tokens rather than raw hex values. The near-black primary paired with a light secondary creates high contrast and a classic editorial feel.

Spacing

All spacing follows an 8pt baseline grid to maintain a consistent vertical and horizontal rhythm across every component.

Component families

The Editorial skill covers a wide range of component families, organized into logical groups:

• Inputs and forms — buttons, inputs, textareas, selects/comboboxes, checkboxes, radios, switches, date/time pickers, file uploaders
• Data display — cards, tables, data lists, data grids, charts, stats/metrics, badges/chips, avatars
• Navigation — breadcrumbs, pagination, steppers, sidebars, top bars/headers, tabs, command palette
• Overlays — modals, drawers/sheets, tooltips, popovers/menus
• Feedback — alerts/toasts, notifications center, progress indicators, skeletons, empty states
• Pages — authentication screens, settings pages, onboarding, documentation layouts, pricing blocks, search
• Visualization — data visualization wrappers, carousels, accordions

Each component family includes defined states (default, hover, focus-visible, active, disabled, loading, error), interaction behavior for keyboard, pointer, and touch, explicit token usage, and responsive behavior with edge cases.

Accessibility

This skill targets WCAG 2.2 AA compliance with a thorough accessibility baseline:

• Keyboard-first interactions with visible focus states
• Semantic HTML before ARIA attributes
• Screen-reader tested labels on all interactive elements
• Reduced-motion support for users who prefer less animation
• Minimum 44px touch targets for mobile interactions
• High-contrast mode support

When conflicts arise between aesthetics and accessibility, accessibility wins.

How to use this skill with AI agents

Pull the skill file into your project with a single command:

npx typeui.sh pull editorial

This saves the SKILL.md file directly into your project. From there you can use it with any AI coding tool — Claude, ChatGPT, Cursor, Windsurf, Copilot, or any other agent that accepts context files, system prompts, or knowledge documents.

The file is standard markdown. Copy it into a project knowledge base, reference it as context in a prompt, upload it as a knowledge file, or drop it into a rules directory. The structured format ensures consistent results regardless of which AI platform you use.

Design principles

The Editorial skill enforces these core rules:

1. Prefer semantic tokens over raw values — always reference design tokens instead of hardcoded colors, sizes, or spacing
2. Preserve visual hierarchy — maintain clear distinctions between headings, body text, and supporting elements
3. Keep interaction states explicit — every interactive element must define its full state set
4. Design for every state — empty, loading, and error states are first-class concerns, not afterthoughts
5. Ensure responsive behavior by default — components must adapt gracefully across screen sizes
6. Document accessibility rationale — every accessibility decision should be traceable and testable

And three strict anti-patterns to avoid:

1. No low contrast text — all text must meet WCAG AA contrast ratios
2. No inconsistent spacing rhythm — every measurement must align to the 8pt grid
3. No ambiguous labels — interactive elements must have clear, descriptive labels

Writing tone

All content generated with this skill follows a concise, confident, helpful, clear, friendly, professional, and action-oriented tone with minimal jargon. Labels are direct. Instructions guide the user toward the next step. There is no unnecessary decoration.