skills.rest
julieclarkson
julieclarksonCOMMUNITY
Explore all skills by this author →
Website𝕏@julieishumanGitHub

generate-portfolio-card

Generate embeddable HTML portfolio cards linking to case studies.

Updated Aug 27, 2026
Search Tags:#templates#html#css#portfolio#generate#card#case-study
One-click install
npx skills add https://github.com/julieclarkson/case-study-maker --skill generate-portfolio-card
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: generate-portfolio-card
Source: https://github.com/julieclarkson/case-study-maker/tree/main/skills/generate-portfolio-card
Command: npx skills add https://github.com/julieclarkson/case-study-maker --skill generate-portfolio-card

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Help developers and makers create a compact, embeddable HTML card that links to a full case study or marketing page so projects can be showcased quickly on portfolio sites without hand-crafting markup or styles.

Core Features & Use Cases

  • Read project metadata and captured reflections to synthesize a brief project description suitable for a portfolio card.
  • Resolve a selected template and theme, fill required placeholders, escape user content, and produce a self-contained HTML fragment and optional stylesheet.
  • Use case: generate a card to embed on a personal portfolio, plugin marketplace listing, or marketing landing page that links to the full case study or signup flow.

Quick Start

Use the generate-portfolio-card command to produce an embeddable HTML card that links to your project's case study.

Frequently Asked Questions about generate-portfolio-card

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate an HTML portfolio card from project metadata?▼

You can generate an embeddable portfolio card by providing project metadata and captured reflections. The Skill resolves templates and themes, fills placeholders, escapes user content, and writes self-contained HTML fragments and optional CSS files into your output directory.

What is an embeddable portfolio card and when do I need one?▼

An embeddable portfolio card is a compact HTML fragment linking to a full case study or marketing page. You need one to showcase projects quickly on developer portfolios, plugin marketplace listings, or landing pages without hand-crafting markup or styles.

Can I use my own templates and themes to generate portfolio cards?▼

Yes, you can use your own templates and themes to generate portfolio cards. The Skill resolves selected template and theme files, fills required placeholders with project metadata, escapes user content, and produces a self-contained or inherit-styled HTML fragment.

How does the generate-portfolio-card Skill handle security and path validation?▼

The Skill validates the outputBase parameter to prevent path traversal attacks before writing generated HTML and optional CSS files into the OUTPUTS directory, ensuring safe file generation.

Does the portfolio card generator work without external dependencies?▼

Yes, the portfolio card generator works without external dependencies. It reads .case-study/events.json, resolves templates and themes, fills and escapes placeholders, and writes HTML and optional CSS files entirely through its internal processing logic.

Related Skills

Explore More Software Engineering Skills→
chat-promptchat-prompt
1

case-study-writer

Guide structured interviews to generate formatted case study documents.

Official
Basic
keokukzhkeokukzh

theme-factory

Apply selected theme colors and typography to slides, documents, and HTML pages.

Community
Basic
CortaLabsCortaLabs

Atlas Bootstrap — One-Shot Portfolio Setup

Automate the Atlas portfolio generation pipeline from configuration to static site building.

Community
Advanced
yw662yw662
6

template-binding

Create declarative custom element templates with reactive text, attribute, and event bindings.

Community
Intermediate