C · Make a skill your own

Make a skill your own

Mount a provided skill, point it at one of your own folders, and watch it generate a designed page of your files. Then change one line in the skill and re-run to see the result shift. The point: a skill is plain-language instructions you control.

Get the skill

↓ Download directory-showcase.md Plain-text markdown file. Or read it on this page first.

Part 1 · Mount the skill

Download the skill file using the button above.
In the Claude desktop app, go to Customize → Skills.
Click "+" → Create skill → Upload a skill and select the downloaded file.
Wait for it to appear in your skills list. That means it's mounted.

Part 2 · Run it on a folder of your own

Open a new Cowork session and point it at a folder of your own. A project folder, Downloads, or a desktop pile all work. Best results with about 6 to 20 files.
Invoke the skill: type /directory-showcase, or just say "showcase this folder."
It will ask you two or three questions about what you care about. Answer them. It then builds a styled showcase.html you can open in a browser.

While it builds — read the skill

The page takes a minute or two. Use that time to scroll to the bottom and read the skill. The realization: it's just plain-language instructions, no code. Things to look at:

The top "description" line — tells Claude when to reach for the skill (the trigger phrases).
Step 2, the framing questions — the questions it just asked you are written right here. That's why it paused.
Step 3 and "Styling" — the rules for the page. Loosely described, yet the result is consistent.
"What good looks like" at the bottom — the bar the skill is holding itself to.

As you read, mark the one line you'd change. That's Part 3.

Part 3 · Modify it with Claude

Go back to Customize → Skills and open the directory-showcase skill.
Click the three-dot menu (⋮) in the top-right of the skill panel, then choose "Edit with Claude."
Type your request in plain language. Examples: "only ask one question," "use a dark theme," "group items by date instead of theme."
Claude rewrites that part of the skill. Re-run the skill (new session, or invoke again) and compare. The same skill, new behavior, because you changed plain-language instructions.

Heads-up: Custom skills work when your Team workspace has the org-wide plugins/skills toggle on. Cipriana can confirm.

The skill, in full

Plain language, no code. This is the whole skill, rendered for reading. To use it, download the file at the top of this page.

name

directory-showcase

description

Survey the contents of a directory, ask the user two or three quick questions about what they care about, then generate a styled, self-contained web page that showcases each item with a visual, a clear title, and a short description, browsable in a compelling way. Use when someone wants an attractive, navigable overview of what's inside a folder: a document set, a research collection, a photo folder, a shared drive, or any mixed pile of files. Triggers on /directory-showcase, "showcase this folder," "make a browsable page of this directory," "give me a visual overview of what's in here," or any request to turn a directory into a presentable, explorable web page.

Directory Showcase

Turns any directory into a single, good-looking, browsable web page. The skill looks at what's actually in the folder, asks the user a couple of framing questions so the result is tailored rather than generic, and then builds a self-contained HTML page where every item has a visual, a title, and a short description.

The same skill should produce a noticeably different page for a legal folder, a photo folder, and a research folder, because it adapts to both the contents and the user's stated interest. That adaptiveness is the point; do not produce a one-size-fits-all template.

Step 1. Survey the directory

Determine the target directory (the connected folder by default, or a path the user names).

List the files and subfolders. Note count, types, and rough sizes.
Sample contents to understand what the collection actually is. Read readable files (.md, .txt, .csv, code, .html) directly; extract text from .pdf/.docx; for images, note them as images (you'll thumbnail them later). Cap reading at roughly the first 1–2 pages or ~1,500 characters per file — enough to summarize, not so much that it burns the session. If there are more than ~25 items, sample the most substantial ones and group the rest.
Form a quick internal picture: What is this collection? What themes run across it? What's the natural way someone would want to browse it (by topic, by type, by date, by project)?

Do not narrate the raw file listing back to the user. Move to the questions.

Step 2. Ask two or three framing questions

Based on what you actually found (not generic boilerplate), ask two or three short questions that will shape the page. Make them specific to this directory. Cover:

Purpose / audience. "Who's this overview for, and what are they trying to do with it?"
Emphasis. Surface the 2–4 real themes you detected and ask which matter most, e.g. "I'm seeing contracts, research notes, and meeting recaps. Which should lead?"
Browse logic (optional third). "Group by topic, by type, or by date?"

Keep it to one round. The answers steer how descriptions are written, what leads, how items are grouped or sorted, and the one-line synthesis at the top.

Step 3. Generate the showcase page

Build a single, self-contained HTML file (inline CSS and minimal inline JS; no build step; web fonts/icons from a CDN are fine but the page must work offline-ish). Save it in the target directory as showcase.html and tell the user the path so they can open it.

Page structure

Header. The collection's name, item count, and a one-line synthesis of what this directory is, written through the lens of the user's answers.
Controls. A search box (filters cards by title and description live) and filter/sort controls matching the chosen browse logic (by topic, type, or date).
Card grid. One card per item (or per group), responsive, that reads as a gallery, not a file listing.

Each card has

A visual. For image files, embed an actual thumbnail (reference the file by relative path, or inline as base64 if small). For everything else, render a tasteful tile: a type glyph or emoji (📄 doc, 📊 sheet, 📑 PDF, 🖼️ image, 🗂️ folder, etc.) on a color keyed to the item's type or theme. The visual should make the item recognizable at a glance.
A title. Human-readable. Clean up the filename, or use the document's real title if you extracted one. Not final_v3_FINAL.docx.
A description. One to two sentences, written to emphasize what the user said they care about. Summary, not metadata.
Light meta. Type, size, modified date; optional topic tag.
Expand on click. Clicking a card reveals a longer summary or key points without leaving the page.

Styling

Make it genuinely attractive, something you'd be happy to present. Use a small, coherent palette and a CSS variable block at the top of the <style> so the whole look can be re-themed by changing a few values. Generous spacing, clear type hierarchy, subtle hover states, responsive grid. Avoid default-browser styling and avoid clutter.

Technical constraints

One file, self-contained. No server, no external data files required to view it.
Never invent file contents. Every title and description must come from what you actually read. If a file couldn't be read (binary, encrypted), say so plainly on its card rather than guessing.
Don't expose absolute system paths in the visible page.

What good looks like

A non-technical person opens showcase.html, immediately understands what's in the folder, can search and filter it, and can click into anything for more, and it looks like a designed page, not a directory dump. If you handed the same folder to this skill twice with different answers to Step 2, the two pages would lead with different things.