New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

UI Craft Editorial

by educlopez in educlopez/ui-craft

Editorial / magazine / long-form / Medium / Substack / content-heavy UIs.

MITAuto-check passedWriting & Content

Install UI Craft Editorial

skills CLI
$ npx skills add educlopez/ui-craft --skill ui-craft-editorial -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install educlopez/ui-craft ui-craft-editorial --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/educlopez/ui-craft.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/ui-craft-editorial .claude/skills/ui-craft-editorial && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
ui-craft-editorial
GitHub stars
375
Token cost
~1.3k tokens
SKILL.md length
610 words
Files
1
Skills in repo
13
Repo updated
First seen
Licence
MIT

At a glance

Editorial / magazine / long-form / Medium / Substack / content-heavy UIs.

  • Tasks that involve Newsletters
  • SKILL.md covers Knobs (locked), Style anchors, Base rules (inherited) and Style-specific overrides, plus 2 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

UI Craft Editorial is an agent skill from educlopez/ui-craft. Editorial / magazine / long-form / Medium / Substack / content-heavy UIs. Locked knobs: CRAFT=9, MOTION=4, DENSITY=3. Serif display + humanist body, wide reading column, drop caps, OpenType. Trigger on: editorial, magazine, long-form, blog, Medium-like, Substack-like.

Its SKILL.md is about 1.3k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Writing & Content, covering Newsletters. It works with Substack. The repository describes itself as: Design engineering system for AI coding agents — ship UI with craft-level quality. Install as an agent skill. The licence is MIT.

When your agent uses it

  • Tasks that involve Newsletters

Example prompts

  • “/ui-craft-editorial”

What it can do on your machine

Read from SKILL.md and the folder at commit ceecc8e. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md.

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

UI Craft Editorial loads about 1.3k tokens when it runs. Until then it costs about 72 tokens; SKILL.md has 610 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~72
When it runs · the whole SKILL.md, loaded when a task matches
~1.3k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from educlopez/ui-craft at commit ceecc8e, republished under its MIT licence (© educlopez). 610 words, ~1,265 tokens.

Download SKILL.mdSave it as .claude/skills/ui-craft-editorial/SKILL.md (or your agent's skills folder).
name
ui-craft-editorial
description
Editorial / magazine / long-form / Medium / Substack / content-heavy UIs. Locked knobs: CRAFT=9, MOTION=4, DENSITY=3. Serif display + humanist body, wide reading column, drop caps, OpenType. Trigger on: editorial, magazine, long-form, blog, Medium-like, Substack-like.
argument-hint
[action: build|review|polish] [target]

UI Craft — Editorial

Pre-committed editorial style: magazine, long-form, content-first. Typography carries the hierarchy; layout serves the reading experience.

Knobs (locked)

  • CRAFT_LEVEL = 9 — editorial typography only works at high refinement; Polish Pass mandatory.
  • MOTION_INTENSITY = 4 — reading-aware: fade on reveal, link hovers, no entrance stagger.
  • VISUAL_DENSITY = 3 — wide reading column, generous vertical rhythm, 1 item per row for features.

Do not re-ask these in Discovery. Confirm accent + serif/sans pairing only.

Style anchors

  • Serif display for headings + humanist body sans/serif for reading.
  • Baseline grid feel. leading-relaxed (1.7) on body.
  • Wide reading column max-w-[65ch]. Generous vertical rhythm.
  • Accent used for emphasis — pull quotes, drop caps, link underlines — not decoration.
  • OpenType features ON: small caps, ligatures, stylistic sets, tabular figures where relevant.
  • Asymmetric, text-heavy heroes. Featured image large.
  • Motion respects reading: fades only, never pulls the eye away.
  • Black text, warm/ivory canvas, one accent. Color is a voice, not a decoration.

Base rules (inherited)

All rules in ../ui-craft/SKILL.md apply. This file overrides knob defaults and adds style-specific guidance below. The anti-slop and craft tests still apply in full.

Style-specific overrides

Typography (the whole point)

  • Display: Playfair Display, Fraunces, Lora, or Source Serif 4 for headings and pull quotes.
  • Body: Alegreya, Source Sans 3, ITC Charter, or a humanist pairing. Do NOT use Inter as primary body — it reads as product UI, not editorial.
  • Max two families: one display + one body.
  • Headings: text-wrap: balance, font-optical-sizing: auto, tracking near 0 or slightly negative on large sizes.
  • Body: text-wrap: pretty, line-height: 1.7, font-feature-settings: "liga", "kern".
  • Drop caps via p:first-of-type::first-letter { float: left; font-size: 4.5em; line-height: 0.85; padding: 6px 10px 0 0; font-family: <display>; }.
  • Small caps via font-variant-caps: small-caps for section labels, bylines.
  • Opt-in OpenType: font-feature-settings: "ss01", "cv11" when the chosen font supports them.
  • Pull quotes: serif, large (1.75-2.25em), one accent color, short rule above.

Color

  • Canvas: ivory or warm white — oklch(98% 0.01 85) — not pure #fff.
  • Text: oklch(18% 0.01 40) warm near-black.
  • Restricted palette: black, ivory/warm white, ONE accent. That's it.
  • Accent applied to: drop cap, pull quote, inline link underline, section rule. Not buttons that don't need it.

Spacing & layout

  • Reading column: max-w-[65ch] for body; hero and featured image can break out to max-w-5xl.
  • Vertical rhythm on body: paragraph spacing = line-height × 0.6 minimum.
  • Asymmetric heroes: left-aligned display headline + byline + featured image below or offset.
  • Section breaks: centered ornament or a short rule, not a full-width divider.
Show full SKILL.md (222 more words)Show less

Motion

  • Fade on scroll reveal for hero/featured image only, 300-400ms ease-out.
  • Inline link hover: underline-offset grows 1px, color shifts to accent, 120ms.
  • No entrance stagger, no parallax, no page transitions that fight the reading flow.
  • Honor prefers-reduced-motion — cut all reveals.

Content components

  • Byline: small caps, tracking-wide, secondary text color.
  • Dateline + read time: tabular-nums, separated by a bullet ·.
  • Inline images: full-width or breakout beyond column, with italic serif caption underneath.
  • Blockquote: left border in accent, serif italic, max-w-[55ch].

Reference files to read first

Load these from ../ui-craft/references/:

  • typography.md — the primary reference for this style
  • layout.md — reading column, rhythm, hierarchy
  • color.md — warm palette, accent discipline
  • copy.md — editorial voice, headings, empty states

Skip dashboard.md, sound.md unless relevant.

Anti-patterns for THIS style

  • Inter, Geist, DM Sans as primary body. They signal product UI, not editorial.
  • Three font families. Always one display + one body.
  • Pure #fff canvas. Warm it.
  • Tight leading-tight on body copy. Reading needs 1.6-1.8.
  • Colored pull quote backgrounds, gradient text on headlines, emoji in section rules.
  • Scroll-triggered stagger or parallax — breaks reading flow.
  • Card grids for articles — use stacked list with thumbnail + dek.
  • Sans-serif display headlines by default. If you need sans display, the user probably wants minimal variant.
  • Uppercase headlines. Sentence case, always (small caps for bylines is the exception).
  • CTAs with heavy pill backgrounds — prefer inline underlined links in the serif voice.

© educlopez, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in skills/ui-craft-editorial of educlopez/ui-craft.

Open the folder on GitHubat commit ceecc8e

Compare with similar skills

UI Craft Editorial next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

UI Craft Editorial compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
UI Craft Editorial this skilleduclopez/ui-craft375—~1.3kAutomated safety check: PassMIT
Shakespeare Writing StudioZCZHAO-1999/shakespeare-writing-studio178—~1.5kAutomated safety check: PassMIT
Content Trend Researcheralirezarezvani/claude-code-skill-factory8801 repos~2.1kAutomated safety check: PassMIT
Serenity Replyleslieyeo/serenity-reply136—~3kAutomated safety check: PassMIT
End-of-Article CTA Designersamber/cc-skills228—~3.1kAutomated safety check: PassMIT
Newsletter DigestVarnan-Tech/opendirectory674—~1.9kAutomated safety check: PassMIT

Similar skills

  • Shakespeare Writing Studio

    ZCZHAO-1999/shakespeare-writing-studio

    Produce publish-ready Chinese and English writing packages across WeChat articles, Medium/Substack essays, research notes, founder memos, op-eds, speeches, data storytelling, statistical graphics…

    178 GitHub stars~1.5k tokensUpdated 3 mo ago
    Writing & ContentAuto-check passed

  • Content Trend Researcher

    alirezarezvani/claude-code-skill-factory

    Advanced content and topic research skill that analyzes trends across Google Analytics, Google Trends, Substack, Medium, Reddit, LinkedIn, X, blogs, podcasts, and YouTube to generate data-driven…

    880 GitHub starsUsed in 1 repo~2.1k tokens
    Writing & ContentAuto-check passed

  • Serenity Reply

    leslieyeo/serenity-reply

    Serenity (@aleabitoreddit) 的思维框架与表达方式。基于 6 维度深度调研（1700+ 推文、Substack 长访谈、第三方分析、批评者观点）， 提炼 5 个核心心智模型、8 条决策启发式和完整的表达 DNA。

    136 GitHub stars~3k tokensUpdated 4 mo ago
    Writing & ContentAuto-check passed

  • End-of-Article CTA Designer

    samber/cc-skills

    Interviews you about objective, audience and context, then designs an end-of-article call to action with copy, placement, A/B test plan and accessibility check.

    228 GitHub stars~3.1k tokensUpdated 8 days ago
    Writing & ContentAuto-check passed

  • Newsletter Digest

    Varnan-Tech/opendirectory

    Aggregates RSS feeds from the past week, synthesizes the top stories using Gemini, and publishes a newsletter digest to Ghost CMS.

    674 GitHub stars~1.9k tokensUpdated 1 mo ago
    Writing & ContentAuto-check passed

  • Idea Extractor

    aiskilloftheweek/claude-ai-skill-of-the-week

    Analyzes long-form content (transcripts, articles, interviews, webinars, podcast notes) and extracts the 3 best content ideas for any publishing platform — LinkedIn, Substack, blog, newsletter…

    148 GitHub stars~1.5k tokensUpdated 4 mo ago
    Writing & ContentAuto-check passed

More from educlopez/ui-craft

All 13 skills in this repo

  • Finalize

    educlopez/ui-craft

    Pre-ship gate — runs detector, verifies brief and tokens, applies the 10-pass finish bar, ranks findings by feedback hierarchy.

    375 GitHub stars~1.9k tokensUpdated 1 mo ago
    Auto-check passed

  • Friction Log

    educlopez/ui-craft

    File contributor or agent papercuts as GitHub issues labeled friction, or investigate those issues as the daily friction-log Cloud Agent.

    375 GitHub stars~1.6k tokensUpdated 1 mo ago
    Auto-check passed

  • Remember

    educlopez/ui-craft

    Record a learned design constraint from a correction into the project brief.

    375 GitHub stars~585 tokensUpdated 1 mo ago
    Auto-check passed

  • Sddesign

    educlopez/ui-craft

    Full spec-driven pipeline — walks brief → tokens → shape (spec) → craft (build) → converge → ship in one guided run.

    375 GitHub stars~1.5k tokensUpdated 1 mo ago
    Auto-check passed

  • Start

    educlopez/ui-craft

    Front door. An agent skill from educlopez/ui-craft.

    375 GitHub stars~1.5k tokensUpdated 1 mo ago
    Auto-check passed

  • Tokens

    educlopez/ui-craft

    Audit or establish the project's 3-layer token spine. An agent skill from educlopez/ui-craft.

    375 GitHub stars~1.4k tokensUpdated 1 mo ago
    Auto-check passed

Works with

Categories

Questions about UI Craft Editorial

What does UI Craft Editorial do?

Editorial / magazine / long-form / Medium / Substack / content-heavy UIs. UI Craft Editorial is an agent skill from educlopez/ui-craft. Editorial / magazine / long-form / Medium / Substack / content-heavy UIs.

When should I use UI Craft Editorial?

UI Craft Editorial fits situations like: tasks that involve Newsletters.

How do I install UI Craft Editorial in Claude Code?

Run `npx skills add educlopez/ui-craft --skill ui-craft-editorial -a claude-code`. Or copy the skill folder (skills/ui-craft-editorial in educlopez/ui-craft) into .claude/skills/ui-craft-editorial in your project. Claude Code loads it when a task matches its description.

How do I install UI Craft Editorial in Codex?

Run `npx skills add educlopez/ui-craft --skill ui-craft-editorial -a codex`. Or copy the skill folder (skills/ui-craft-editorial in educlopez/ui-craft) into .agents/skills/ui-craft-editorial in your project. Codex loads it when a task matches its description.

Can I use UI Craft Editorial in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add educlopez/ui-craft --skill ui-craft-editorial -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/ui-craft-editorial, .gemini/skills/ui-craft-editorial, .github/skills/ui-craft-editorial and .opencode/skills/ui-craft-editorial in your project.

What does UI Craft Editorial need to run?

SKILL.md names no scripts, command-line tools or credentials: UI Craft Editorial is instructions for the agent only.

Does UI Craft Editorial access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is UI Craft Editorial safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does UI Craft Editorial use?

UI Craft Editorial is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does UI Craft Editorial use?

About 1.3k tokens (SKILL.md is roughly 5.1k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to UI Craft Editorial?

Skills that share tags, products or a category with UI Craft Editorial: Shakespeare Writing Studio (ZCZHAO-1999/shakespeare-writing-studio, 178 stars), Content Trend Researcher (alirezarezvani/claude-code-skill-factory, 880 stars), Serenity Reply (leslieyeo/serenity-reply, 136 stars) and End-of-Article CTA Designer (samber/cc-skills, 228 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains UI Craft Editorial?

educlopez (a GitHub user) maintains it in educlopez/ui-craft, which has 375 GitHub stars. The repository holds 13 skills in this directory. The repository was last updated on September 3, 2026.

Source: educlopez/ui-craft on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.