pafolioslisted

Mine Pafolios (pafolios.com), a free gallery of designer portfolio examples and annotated product-design case studies, for process narrative and presentation structure — how designers frame problem, process, before/after, and outcome — and translate that narrative anatomy into showcase, specimen, and case-study pages built with Next.js 14 + Tailwind 3.4 + motion v13 (`motion/react`). Use this whenever building or improving a portfolio site, case-study page, project showcase, specimen page, "our work" section, or design-process writeup; whenever someone asks "how should I present this project", "structure my case study", "make the showcase tell a story", or "find portfolio inspiration"; and whenever a pafolios.com link appears in conversation or a Design Lab specimen page needs a narrative spine rather than just aesthetics.
shashidharbabu/claude-design-skills · ★ 0 · Web & Frontend · score 60

Install: claude install-skill shashidharbabu/claude-design-skills

# Pafolios Pafolios (pafolios.com) is a **free, no-login gallery of designer portfolio examples**, run on a "Portfolio of the Day" model. Per-designer coverage is thin by design: one screenshot, the designer's role, a date, and a "Visit site" link — the real portfolio is always one click away. The homepage is **JS-rendered** (a fetch sees only "Loading portfolios..."), so humans browse it in a browser; Claude gets in through the side doors below. The site's hidden gem is `/case-studies`: a small curated set (13 at last check) of product-design case studies, each **annotated with why it works**. This skill's angle is deliberately not aesthetics: it mines portfolios for **process narrative and presentation structure** — how strong designers pace a story — and applies that to showcase and specimen pages (including this repo's Design Lab specimens). 1. **Selection** — routes into the site for humans and for Claude. 2. **Translation** — a narrative-anatomy catalog, then page structure. ## Selection - Humans browse `https://pafolios.com` (grid, JS-rendered) and `https://pafolios.com/staff-picks` (curated subset). - Claude enumerates via `https://pafolios.com/sitemap.xml` — it lists every designer page as `https://pafolios.com/<designer-slug>` (e.g. `/ilia-lushnikov`); those pages are fetchable and carry the role in the page title ("UX & Product Designer Portfolio Inspiration"), the screenshot, and the outbound link. Follow the outbound link — **the live portfolio is