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

Editorial Portfolio Chapters

by boraoztunc in boraoztunc/skills

Create or redesign creative-studio, agency, photographer, artist, and portfolio websites where project work leads the story.

Apache-2.0Auto-check passedFrontend & Design

Install Editorial Portfolio Chapters

skills CLI
$ npx skills add boraoztunc/skills --skill editorial-portfolio-chapters -a claude-code

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

GitHub CLI
$ gh skill install boraoztunc/skills editorial-portfolio-chapters --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/boraoztunc/skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/editorial-portfolio-chapters .claude/skills/editorial-portfolio-chapters && 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
editorial-portfolio-chapters
GitHub stars
398
Used in
2 other repos
Token cost
~1.1k tokens
SKILL.md length
594 words
Files
3
Skills in repo
52
Repo updated
First seen
Licence
Apache-2.0

At a glance

Create or redesign creative-studio, agency, photographer, artist, and portfolio websites where project work leads the story.

  • Works in 5 steps: Open with one strong campaign image and… → Move directly into selected work. Treat… → Explain the studio point of view only… → …
  • Dark editorial shells
  • SKILL.md covers Establish the Story, Build the Visual System, Compose the Page and Implement the Signature…, plus 4 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Editorial Portfolio Chapters is an agent skill from boraoztunc/skills. Create or redesign creative-studio, agency, photographer, artist, and portfolio websites where project work leads the story. Use for dark editorial shells, full-bleed campaign media, color-coded case-study chapters, oversized service typography, restrained project reveals, and a decisive contact finale.

Its SKILL.md is about 1.1k tokens, which your agent loads only when the skill is triggered. The skill folder holds 2 other files (for example `ARTICLE.md` and `REFERENCES.md`).

It sits in Frontend & Design, covering Typography. The repository describes itself as: Claude Code skills for copywriting, SEO, design, and more. The licence is Apache-2.0.

When your agent uses it

  • Dark editorial shells
  • Full-bleed campaign media
  • Color-coded case-study chapters
  • Oversized service typography

Example prompts

  • “/editorial-portfolio-chapters”

Workflow steps

5 steps, taken from the first numbered list in SKILL.md.

  1. Open with one strong campaign image and a concise positioning line.
  2. Move directly into selected work. Treat each case study as a new magazine cover.
  3. Explain the studio point of view only after the work has earned attention.
  4. Use oversized service typography as the handoff from proof to contact.
  5. End with a high-contrast contact chapter that feels final, not appended.

What it can do on your machine

Read from SKILL.md and the folder at commit 645553c. 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

Editorial Portfolio Chapters loads about 1.1k tokens when it runs. Until then it costs about 83 tokens; SKILL.md has 594 words of instructions outside code blocks.

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

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 boraoztunc/skills at commit 645553c, republished under its Apache-2.0 licence (© boraoztunc). 594 words, ~1,124 tokens.

Download SKILL.mdSave it as .claude/skills/editorial-portfolio-chapters/SKILL.md (or your agent's skills folder). This skill also uses 2 other files; get the full folder from GitHub.
name
editorial-portfolio-chapters
description
Create or redesign creative-studio, agency, photographer, artist, and portfolio websites where project work leads the story. Use for dark editorial shells, full-bleed campaign media, color-coded case-study chapters, oversized service typography, restrained project reveals, and a decisive contact finale.

Editorial Portfolio Chapters

Build the page as a sequence of distinct editorial chapters. Let the work establish desire before explaining the studio.

Establish the Story

  1. Open with one strong campaign image and a concise positioning line.
  2. Move directly into selected work. Treat each case study as a new magazine cover.
  3. Explain the studio point of view only after the work has earned attention.
  4. Use oversized service typography as the handoff from proof to contact.
  5. End with a high-contrast contact chapter that feels final, not appended.

Replace all source brands, projects, people, claims, images, labels, and links with original or client-provided content. Preserve pacing and hierarchy, not source content.

Build the Visual System

  • Frame the page with near-black, then introduce warm white and one muted color field per project.
  • Use a grotesk display face with a neutral text companion. Keep labels compact and copy readable.
  • Align to a 12-column grid with 40–64px desktop edge margins.
  • Favor square or deliberately cropped media, restrained radii, hairline rules, and almost no shadow.
  • Let the strongest proof change scale. Do not turn every section into a hero or bento grid.
  • Keep full-bleed chapters rare and purposeful.

Compose the Page

  • Header: place compact navigation at the outer edges and keep the identity centered or strongly anchored.
  • Hero: reserve most of the first viewport for one stable image; expose the first project below the fold.
  • Projects: alternate dark framing with muted color panels; show title, role, year, and action without hover.
  • Studio: use an asymmetrical portrait or process composition instead of a generic team-card grid.
  • Services: set capabilities as large semantic headings or links with controlled wrapping.
  • Contact: switch to one unmistakable signal color and one primary action.
  • Footer: resolve navigation, location, social links, and legal text without competing with the contact ask.

Implement the Signature Interactions

Editorial project panel reveal
  • Reserve the panel height before media loads.
  • Clip only the image layer; keep title and metadata selectable.
  • Reveal with a 500–760ms mask or shallow translate.
  • On hover or focus, scale media no more than 1.02 and expose the same project action.
  • Keep every panel understandable when static.
Show full SKILL.md (238 more words)Show less
Oversized service handoff
  • Use clamp() for scale and a short edge-aligned text mask.
  • Shift weight, underline, or tone on hover and focus without moving layout.
  • Open optional details with semantic disclosure behavior, Escape support, and focus return.
  • Wrap deliberately on mobile and render immediately under reduced motion.

Motion Defaults

  • Use 160–220ms for control feedback and 500–760ms for section entrances.
  • Stagger direct children by 45–70ms with cubic-bezier(.22,.61,.36,1).
  • Keep parallax below 5% and the hero stable enough to study.
  • Tie navigation or background changes to section boundaries.
  • Pause offscreen media and observers; clean up timelines on route changes.
  • Do not hijack scroll.

Validate

  • Confirm logical heading order, visible focus, useful alt text, and contrast through every color change.
  • Test keyboard, touch, 200% zoom, narrow mobile, slow media, missing media, and reduced motion.
  • Confirm case studies remain readable before animation and no source content was lightly paraphrased.
  • Remove invented awards, clients, outcomes, or claims when evidence is unavailable.

Source-Backed Prompt Pack

Use Mara Voss Interaction Prompt Pack as a worked example for turning one editorial portfolio into portable loader, pinned chapter, archive, inspection, sticky-stack, and footer interaction prompts. Reuse the motion logic, not the reference identity, copy, imagery, or claims.

Avoid

  • Explaining the studio before showing its work.
  • Repeating identical rounded cards across every chapter.
  • Fast card choreography, large parallax, or decorative motion loops.
  • Hiding project titles or actions until hover.
  • Copying source imagery, brand language, project names, or client claims.

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

Files

SKILL.md and 2 other files in editorial-portfolio-chapters of boraoztunc/skills.

  • SKILL.md
  • ARTICLE.md
  • REFERENCES.md

Open the folder on GitHubat commit 645553c

Used in 2 other repositories

We found 2 copies of this SKILL.md (exact, near-identical or edited) in other folders, from 2 other GitHub owners. This page covers the copy in boraoztunc/skills, which our catalogue first saw on October 7, 2026.

Compare with similar skills

Editorial Portfolio Chapters 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.

Editorial Portfolio Chapters compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Editorial Portfolio Chapters this skillboraoztunc/skills3982 repos~1.1kAutomated safety check: PassApache-2.0
Impeccablebestofjs/bestofjs3.1k26 repos~2.6kAutomated safety check: PassMIT
Tailwindcss Developmentanonaddy/anonaddy4.9k10 repos~865Automated safety check: PassMIT
Design SystemOhh-889/skyroc79511 repos~1.7kAutomated safety check: PassMIT
Make Interfaces Feel Bettersamuelclay/NewsBlur7.6k10 repos~1.5kAutomated safety check: PassMIT
UI UX Pro Maxsaoudi-h/solar-icons19018 repos~11kAutomated safety check: NotesCustom licence

Similar skills

  • Impeccable

    bestofjs/bestofjs

    A skill your agent uses when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a…

    3.1k GitHub starsUsed in 26 repos~2.6k tokens
    Frontend & DesignAuto-check passed

  • Tailwindcss Development

    anonaddy/anonaddy

    Always invoke when the user's message includes 'tailwind' in any form.

    4.9k GitHub starsUsed in 10 repos~865 tokens
    Frontend & DesignAuto-check passed

  • Design System

    Ohh-889/skyroc

    Token architecture, component specifications, and slide generation.

    795 GitHub starsUsed in 11 repos~1.7k tokens
    Frontend & DesignAuto-check passed

  • Make Interfaces Feel Better

    samuelclay/NewsBlur

    Design engineering principles for making interfaces feel polished.

    7.6k GitHub starsUsed in 10 repos~1.5k tokens
    Frontend & DesignAuto-check passed

  • UI UX Pro Max

    saoudi-h/solar-icons

    UI/UX design intelligence for web and mobile. An agent skill from saoudi-h/solar-icons.

    190 GitHub starsUsed in 18 repos~11k tokens
    Frontend & DesignAuto-check: notes

  • Baseline UI

    ibelick/ui-skills

    Applies a fixed set of UI rules for stack, components, interaction, animation, typography and layout, or reviews a file against them with concrete fixes.

    9.6k GitHub starsUsed in 8 repos~855 tokens
    Frontend & DesignAuto-check passed

More from boraoztunc/skills

All 52 skills in this repo

  • Gsap

    boraoztunc/skills

    GSAP animation reference for HyperFrames. An agent skill from boraoztunc/skills.

    398 GitHub starsUsed in 5 repos~1.9k tokens
    Auto-check passed

  • Hyperframes

    boraoztunc/skills

    Create video compositions, animations, title cards, overlays, captions, voiceovers, audio-reactive visuals, and scene transitions in HyperFrames HTML.

    398 GitHub starsUsed in 9 repos~7.6k tokens
    Auto-check passed

  • Remotion To Hyperframes

    boraoztunc/skills

    Translate an existing Remotion (React-based) video composition into a HyperFrames HTML composition.

    398 GitHub stars~2.2k tokensUpdated 1 mo ago
    Auto-check passed

  • Animejs

    boraoztunc/skills

    Anime.js adapter patterns for HyperFrames. An agent skill from boraoztunc/skills.

    398 GitHub starsUsed in 2 repos~828 tokens
    Auto-check passed

  • Beam Glow States

    boraoztunc/skills

    Create React loading, processing, selected, current, focus, and pressed states with the border-beam package's animated edge glow.

    398 GitHub starsUsed in 2 repos~3.2k tokens
    Auto-check passed

  • Minimal Zine Poster

    boraoztunc/skills

    Compile a theme, sentence, object, mood, article idea, or photo into a quiet Japanese/Korean zine-style editorial poster — tall aged paper, large negative space, one small image anchor, experimental…

    398 GitHub stars~2.5k tokensUpdated 1 mo ago
    Auto-check passed

Categories

Questions about Editorial Portfolio Chapters

What does Editorial Portfolio Chapters do?

Create or redesign creative-studio, agency, photographer, artist, and portfolio websites where project work leads the story. Editorial Portfolio Chapters is an agent skill from boraoztunc/skills. Create or redesign creative-studio, agency, photographer, artist, and portfolio websites where project work leads the story.

When should I use Editorial Portfolio Chapters?

Editorial Portfolio Chapters fits situations like: dark editorial shells; full-bleed campaign media; color-coded case-study chapters; oversized service typography.

How do I install Editorial Portfolio Chapters in Claude Code?

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

How do I install Editorial Portfolio Chapters in Codex?

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

Can I use Editorial Portfolio Chapters 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 boraoztunc/skills --skill editorial-portfolio-chapters -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/editorial-portfolio-chapters, .gemini/skills/editorial-portfolio-chapters, .github/skills/editorial-portfolio-chapters and .opencode/skills/editorial-portfolio-chapters in your project.

What does Editorial Portfolio Chapters need to run?

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

Does Editorial Portfolio Chapters 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 Editorial Portfolio Chapters 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 Editorial Portfolio Chapters use?

Editorial Portfolio Chapters is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Editorial Portfolio Chapters use?

About 1.1k tokens (SKILL.md is roughly 4.5k 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 Editorial Portfolio Chapters?

Skills that share tags, products or a category with Editorial Portfolio Chapters: Impeccable (bestofjs/bestofjs, 3.1k stars), Tailwindcss Development (anonaddy/anonaddy, 4.9k stars), Design System (Ohh-889/skyroc, 795 stars) and Make Interfaces Feel Better (samuelclay/NewsBlur, 7.6k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Editorial Portfolio Chapters?

boraoztunc (a GitHub user) maintains it in boraoztunc/skills, which has 398 GitHub stars. The repository holds 52 skills in this directory. The repository was last updated on August 15, 2026.

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