How to use the Editorial Portfolio Website Builder agent skill

What the skill makes the agent do

Without the skill, an agent building a portfolio tends to produce a generic template with a hero, a grid of team cards and a contact form. This skill changes the order and the feel. The page opens with one strong campaign image and a short positioning line, then shows selected case studies before explaining the studio. Service names are set as large typography that leads to a high-contrast contact section.

The skill also gives the agent concrete rules: a near-black frame with warm white and one muted colour field per project, a 12-column grid with 40–64px desktop edge margins, square or deliberately cropped media, and hairline rules with almost no shadow. It defines motion timings, such as 160–220ms for control feedback and 500–760ms for section entrances, and it asks for accessibility and reduced-motion checks.

The skill also tells the agent to replace all example content with original or client-provided material and not to copy a source site's imagery, copy, brands or claims.

Install the skill from the ZIP download

Download the skill ZIP from this page. Unzip it so that the folder named editorial-portfolio-chapters, which contains SKILL.md, sits in one of these locations. For a personal install, use ~/.claude/skills/. For a single project, use the .claude/skills/ folder inside that project.

If you use the Claude apps instead, open Settings, go to Capabilities, and upload the skill under Skills.

The package contains agents/openai.yaml, ARTICLE.md, demo/index.html, demo/PROMPT.md, REFERENCES.md and SKILL.md. SKILL.md is the file that holds the instructions. The demo folder and the prompt pack are reference material.

• Personal install: ~/.claude/skills/editorial-portfolio-chapters/
• Project install: .claude/skills/editorial-portfolio-chapters/ inside your project
• Claude apps: Settings → Capabilities → Skills, then upload

Trigger the skill with a natural request

You do not need special syntax. Describe the site you want and say it is a portfolio where the work leads. The skill's description covers creative studios, agencies, photographers, artists and portfolio sites, so a request that names one of those and mentions project work should match. The demo prompt in the package uses the explicit form $editorial-portfolio-chapters, which is a reliable way to make sure the skill is used.

Be specific about the content you have. The skill asks for original material, so tell the agent what you can supply: project names, a headline, photos, and which projects to feature first.

• Use $editorial-portfolio-chapters to create an original responsive creative-studio portfolio where the work leads.
• Use $editorial-portfolio-chapters to redesign my photographer portfolio so each project reads as an editorial chapter.
• Build an artist portfolio with a full-bleed opening image, three case studies, a service list and a contact section.

Give the agent the right inputs

The skill sets a design and structure brief. It does not supply images, copy or client details. Give the agent your own studio name, project titles, roles and years, and the images you have rights to use. If you have none yet, ask for placeholder content that is clearly marked as original example material, and replace it before launch.

The skill lists no required tools, runs no scripts and makes no network calls, so the agent works from the instructions and whatever content you provide.

• Studio or artist name, positioning line and services
• Selected projects with title, role, year and a one-line summary you have verified
• Images and media you own or are licensed to use
• Contact action you want as the primary button

Review the output against the skill's checks

The skill asks the agent to check its own work. Read the result yourself as well. Confirm that heading order is logical, focus is visible, images have useful alt text, and contrast holds through every colour change. Test with keyboard, touch, 200% zoom, a narrow phone, slow or missing media, and reduced motion.

Confirm that every claim has evidence. The skill says to remove invented awards, clients, outcomes or claims when you cannot back them up.

• Project titles and actions are visible without hover
• Case studies read clearly before animation runs
• No source content was lightly paraphrased
• Removed any award, client or outcome you cannot prove

Safety notes on scripts and network use

The skill itself runs no scripts and uses no network access, according to its listing. Its instructions only guide how the agent writes the site. The agent still writes code into your project, so review the files it creates before you deploy them. The package's demo and ARTICLE.md refer to animation libraries such as GSAP and Lenis as part of a reference example; the skill does not install them, so check any dependencies the agent adds to your project.

Do not use the skill to reproduce a reference site's imagery, copy or claims. The skill forbids it, and the reference links in the package are for structure study only.

Tips for better results

Ask for chapters in order and name them, because the skill is built around sequence. Ask for one primary action in the contact section. If the first draft has too many full-bleed sections or identical rounded cards, say so and point the agent to the Avoid list in SKILL.md.

For motion, ask for reduced-motion behaviour explicitly. Parallax should stay below 5%, and you can ask the agent to keep the hero stable.

• Name each chapter you want, such as hero, selected work, studio, services and contact
• Ask the agent to explain which section uses which project colour
• Iterate section by section rather than rewriting the whole page