What is the ui-craft-editorial skill?
The ui-craft-editorial skill is a SKILL.md in educlopez/ui-craft that sets CRAFT 9, MOTION 4 and DENSITY 3. It tells your agent to pair a serif display face with a humanist body, cap the column at 65ch, use line-height 1.7 and fade in the hero image.
The ui-craft-editorial skill is the reading-focused variant in the UI Craft system. It locks CRAFT at 9, MOTION at 4 and DENSITY at 3, and applies when you want a publication feel rather than an app feel.
The folder contains only a SKILL.md. It reads typography, layout, color and copy references from the main ui-craft skill, and skips dashboard.md and sound.md unless they are relevant.
Type is the design
- A serif display face such as Playfair Display, Fraunces, Lora or Source Serif 4.
- A humanist body such as Alegreya, Source Sans 3 or ITC Charter, and explicitly not Inter.
- Two families at most.
- Small caps bylines, OpenType features and drop caps through the ::first-letter selector.
Page and color
The reading column is max-w-[65ch] with line-height 1.7, on an ivory canvas of oklch(98% 0.01 85). The palette is black, ivory and one accent, which appears on the drop cap, the pull quote, link underlines and the section rule.
Motion and structure
The MOTION knob is locked at 4. Fade reveals of 300 to 400ms apply to the hero or featured image, plus a 120ms link hover. Article lists are stacked rows with a thumbnail and dek, and copy uses sentence case.
Who the ui-craft-editorial skill is for
Best for
- Blogs and magazines.
- Long-form, Medium-like or Substack-like content pages.
- Brands that want type to carry the hierarchy, with the accent restrained and the copy leading.
Not for
- Dashboards and tools, where the dense dashboard variant fits.
- Sites that must use a single sans family such as Inter, since the skill rules it out for body text.
- Sans display headlines by default. If you need sans display, the SKILL.md points to the minimal variant.
Use it with UiChemy
An editorial blog or content site often lives in WordPress. If you design it in Figma, UiChemy Figma to WordPress can convert that design into editable pages. Click Get Started on uichemy.com.
How to install UI Craft Editorial Skill: Magazine-Style Reading Layouts
curl -fsSL https://skills.smoothui.dev/install | bash
ui-craft installnpx skills add educlopez/ui-craft, which installs the skill only, without agents or MCP gates.Run the installer
On macOS or Linux run the curl command above. On Windows run
irm https://skills.smoothui.dev/install.ps1 | iex. The script downloads the ui-craft binary and verifies its checksum.Run ui-craft install
The installer detects Claude Code, Cursor, Codex, Gemini and OpenCode, and lets you pick components, either in an interactive TUI or with --yes.
Or use the Claude Code plugin
In Claude Code run
/plugin marketplace add educlopez/ui-craftand then/plugin install ui-craft. The README says the plugin installs the skill, 25 slash commands, 2 review agents and the MCP quality gates.Ask for an editorial layout
The variant triggers on editorial, magazine, long-form, blog, Medium-like and Substack-like requests.
Check that it loaded
Ask for an article page. Expect a serif headline, a 65ch column, an ivory background, a drop cap and a fade on the hero image.
Key features
- Locked knobsCRAFT 9, MOTION 4 and DENSITY 3 set a high-polish, quiet, low-density baseline for reading layouts, and the skill does not re-ask them in Discovery.
- Serif display typePlayfair Display, Fraunces, Lora or Source Serif 4 carry headlines and pull quotes, with a maximum of two font families overall.
- Humanist body textAlegreya, Source Sans 3 or ITC Charter set the body, and the skill states Inter is not the primary body face because it reads as product UI.
- Reading columnText sits in max-w-[65ch] with line-height 1.7, while the hero and featured image can break out to max-w-5xl.
- Ivory canvasThe page background is oklch(98% 0.01 85), a warm off-white, and the skill says not to use pure #fff.
- Focused accentAccent color is spent on the drop cap, pull quote, link underline and section rule instead of on buttons that do not need it.
- Typographic detailsDrop caps use ::first-letter, bylines use small caps, and OpenType features such as ligatures and stylistic sets add finishing detail.
- Quiet motionThe hero or featured image fades in over 300 to 400ms, and inline links shift color with a 120ms hover. There is no stagger, parallax or page transition.
- Stacked article listsLists of posts run as rows with a thumbnail and dek, not card grids, and headlines use sentence case instead of uppercase.
Frequently asked questions
What is the ui-craft-editorial skill?
It is a style variant in the educlopez/ui-craft repository, locking CRAFT at 9, MOTION at 4 and DENSITY at 3. It steers your agent toward serif display type, a humanist body, a 65ch reading column, an ivory canvas, drop caps and a fade on the hero image.
How do I install ui-craft-editorial?
Use the ui-craft installer from the README: run the curl or PowerShell install script, then run ui-craft install and choose your components. In Claude Code you can instead run /plugin marketplace add educlopez/ui-craft followed by /plugin install ui-craft.
Which fonts does ui-craft-editorial recommend?
Serif display options are Playfair Display, Fraunces, Lora or Source Serif 4. Body options are Alegreya, Source Sans 3 or ITC Charter. The skill says not to use Inter as the primary body face, and caps the design at two font families.
How wide is the reading column?
The column is max-w-[65ch] with a line-height of 1.7. The hero and featured image can break out to max-w-5xl, while body text stays in the narrower column. Paragraph spacing is at least 0.6 times the line height.
Does ui-craft-editorial use animation?
The MOTION knob is locked at 4. A 300 to 400ms ease-out fade applies to the hero or featured image, and inline link hovers run 120ms with the underline offset growing and the color shifting to the accent. It rules out entrance stagger, parallax and page transitions.
Where does ui-craft-editorial use its accent color?
The palette is black text, an ivory canvas and one accent. The accent goes on the drop cap, the pull quote, inline link underlines and the section rule. The skill does not spread it across buttons or other interface chrome that does not need it.
Does ui-craft-editorial work with Claude Code?
Yes. The README says ui-craft install detects Claude Code, Cursor, Codex, Gemini and OpenCode, and it also offers a Claude Code plugin that installs the skill, slash commands, review agents and MCP quality gates with two commands.