Skip to content
Get packs

Editorial Portfolio Website Builder

Guides an agent to design creative portfolio sites where project work leads the story

Source Download skill
Repository
MengTo/Skills
Stars
7,187
Licence
MIT
Files
6 files

What it does

When installed, the agent follows a set of layout, typography, color and motion guidelines for building portfolio websites for studios, agencies, photographers and artists. Instead of a generic template, the page is structured as a sequence of editorial chapters: a strong opening image, selected case studies shown first, then the studio story, service typography and a decisive contact section. The skill also includes accessibility and motion-safety checks, and it tells the agent to replace all example content with original material rather than copying a source site.

Great for

  • Designers or studios building a portfolio site that should feel like a magazine spread
  • Front-end developers who want a structured design brief for an interactive editorial landing page
  • Photographers or artists who want project-led layouts rather than team-card grids

Skip it if

  • Simple brochure or e-commerce sites, since the guidance is specific to project-led portfolio pages
  • Anyone wanting to copy the reference site's imagery, copy or claims, which the skill explicitly forbids reusing

Try asking

  • “Redesign my photography portfolio so the project work leads and the about section comes later”
  • “Create a dark editorial homepage for my architecture agency with color-coded case-study chapters”
  • “Build a contact finale with one strong call to action for my illustration studio site”
Step-by-step guide: how to use Editorial Portfolio Website BuilderInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 6 original files, the MIT licence and an attribution note.

    editorial-portfolio-chapters.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip editorial-portfolio-chapters.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip editorial-portfolio-chapters.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Supply your own projects, images and copy up front, since the skill asks the agent to replace all sample content and avoid inventing awards or clients
  • Ask the agent to check keyboard focus, reduced motion and mobile layouts, which the skill lists as validation steps
  • Review the demo/index.html file to see the intended look before adapting it

What's inside

  • agents/openai.yaml
  • ARTICLE.md
  • demo/index.html
  • demo/PROMPT.md
  • REFERENCES.md
  • SKILL.md

Redistributed unmodified from MengTo/Skills under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.