New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Project Showcase

by ooiyeefei in ooiyeefei/ccc

Add a filterable, project-based showcase catalog to a personal or company site — the pattern where every project is one card that opens a detail page, and visitors filter by the KIND of project (a…

MITAuto-check passed

Install Project Showcase

skills CLI
$ npx skills add ooiyeefei/ccc --skill project-showcase -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install ooiyeefei/ccc project-showcase --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/ooiyeefei/ccc.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/project-showcase .claude/skills/project-showcase && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
project-showcase
GitHub stars
494
Token cost
~1.1k tokens
SKILL.md length
630 words
Files
4 (incl. references)
Skills in repo
22
Repo updated
First seen
Licence
MIT

At a glance

Add a filterable, project-based showcase catalog to a personal or company site — the pattern where every project is one card that opens a detail page, and visitors filter by the KIND of project (a…

  • Works in 4 steps: Interview (before you write any code) → The data model → Build it → …
  • Someone wants to build a portfolio / projects / things Ive built page
  • SKILL.md covers Step 1 — Interview (before you…, Step 2 — The data model, Step 3 — Build it and Step 4 — Verify, plus 1 more section
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Project Showcase is an agent skill from ooiyeefei/ccc. Add a filterable, project-based showcase catalog to a personal or company site — the pattern where every project is one card that opens a detail page, and visitors filter by the KIND of project (a launched product vs a hackathon build vs an R&D experiment). Use when someone wants to build a portfolio / projects / "things I've built" page, a showcase grid with filters, or wants to add one new project to an existing showcase and isn't sure how to categorize or present it. Interviews you about your stack and what…

Its SKILL.md is about 1.1k tokens, which your agent loads only when the skill is triggered. The skill folder holds 4 other files, including reference files (for example `README.md`, `references/patterns.md` and `references/schema.md`).

The repository describes itself as: Claude Code Custom Plugins - Custom plugins for Claude Code CLI. The licence is MIT.

When your agent uses it

  • Someone wants to build a portfolio / projects / things Ive built page
  • A showcase grid with filters
  • Wants to add one new project to an existing showcase and isnt sure how to categorize

Example prompts

  • “things I”
  • “/project-showcase”

Workflow steps

4 steps, taken from the step headings in SKILL.md.

  1. Interview (before you write any code)
  2. The data model
  3. Build it
  4. Verify

What it can do on your machine

Read from SKILL.md and the folder at commit c0fd926. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md.

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Project Showcase loads about 1.1k tokens when it runs, and up to ~2.9k if it reads all its reference files. Until then it costs about 144 tokens; SKILL.md has 630 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~144
When it runs · the whole SKILL.md, loaded when a task matches
~1.1k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~2.9k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from ooiyeefei/ccc at commit c0fd926, republished under its MIT licence (© ooiyeefei). 630 words, ~1,109 tokens.

Download SKILL.mdSave it as .claude/skills/project-showcase/SKILL.md (or your agent's skills folder). This skill also uses 3 other files; get the full folder from GitHub.
name
project-showcase
description
Add a filterable, project-based showcase catalog to a personal or company site — the pattern where every project is one card that opens a detail page, and visitors filter by the KIND of project (a launched product vs a hackathon build vs an R&D experiment). Use when someone wants to build a portfolio / projects / "things I've built" page, a showcase grid with filters, or wants to add one new project to an existing showcase and isn't sure how to categorize or present it. Interviews you about your stack and what you already have before writing anything.

Project Showcase

Turn a pile of projects into a catalog a visitor can filter and scan. One card per project, each opening a detail page, grouped by the kind of project. The framing that makes it work: track is the primary axis — a visitor does not care what stack you used, they care whether this is a real product to try, a competition build, or a lab experiment. Sort by that first, everything else second.

Keep two leading ideas in your reasoning the whole way through:

  • One card, one project. Every project is a single card. The card is the hook; the detail page is the proof.
  • Interview before you build. Never assume the stack, the categories, or what already exists. Ask, then build.

Step 1 — Interview (before you write any code)

STOP. Do not design a schema or write a component until you have answers. Ask, adapting to what they've already said:

  1. What site is this going into? Framework (Next.js / React, Astro, SvelteKit, plain HTML) and where projects would live — a data file, a CMS, or a database? This decides how everything below is built.
  2. Is there already a projects page or project data? If yes, read it first and extend it — do not replace it. Match its existing field names and visual style.
  3. What kinds of projects do you have? A sensible default track split is product / hackathon / rnd, but confirm it. Some people want "client work", "writing", or "open source" instead. The tracks are the primary filter, so get them right — they are the user's call, not yours.
  4. Per project, how much do you have? A one-liner, a longer "what it is", a live URL, a repo, a demo video, a diagram or screenshot, slides? This decides which optional fields and media each card and page use.
  5. What is the one action per card? Open the app, watch a demo, read the repo, view slides. That is the card's call-to-action.

Reflect their answers back in a sentence or two, then proceed. If they only want to add one project to an existing showcase, skip schema design entirely — read their existing data shape and write that one entry to match it.

Show full SKILL.md (262 more words)Show less

Step 2 — The data model

Read references/schema.md for the field-by-field model and the trackOf() derivation trick (so existing entries don't all need editing when you add the filter). The essentials: a flat list of items, each with a slug, name, one-line description, a richer whatItIs, a track (the primary filter), a status, a stack[], links[], and a single cta. Media fields are optional, per item.

Step 3 — Build it

Read references/patterns.md for the card-vs-detail split, the filter bar, the media block, and the writing rules. The shape:

  • A gallery: the filter bar (track first, then any secondary filters like kind/tier/status) + a responsive card grid.
  • A card: concise — name, status, the one-line description, a couple of tags, one CTA. Concise, not a confession — a card says what a thing is; it is not a lengthy essay.
  • A detail page, one per slug: the richer whatItIs, optional embedded video (with a poster image so it doesn't open black), an optional hero image / diagram, and the links rendered as buttons.

Match the site's existing design tokens and components. Do not invent a new visual language.

Step 4 — Verify

Build or typecheck. Then confirm three things actually work, don't just assert them: the track filter narrows the grid, a card opens its detail page, and any embedded media renders (the video plays, the image loads). Show the user.

Guardrails (confirm, don't assume)

  • The tracks are the user's — surface a default, but let them decide the categories.
  • Extend an existing showcase, never silently replace it.
  • Keep card copy concise; the long form lives on the detail page.

© ooiyeefei, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 3 other files (references) in skills/project-showcase of ooiyeefei/ccc.

  • SKILL.md
  • README.md
  • references/patterns.md
  • references/schema.md

Open the folder on GitHubat commit c0fd926

Compare with similar skills

Project Showcase next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Project Showcase compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Project Showcase this skillooiyeefei/ccc494—~1.1kAutomated safety check: PassMIT
Filterzalando/skipper3.3k—~527Automated safety check: PassMIT
Adding Warehouse Person PropertiesPostHog/posthog40k—~2.9kAutomated safety check: PassCustom licence
Django Filter Benchmarksaleor/saleor23k—~2.3kAutomated safety check: PassBSD-3-Clause
Build A Personal Skill From HistoryTHU-MAIC/OpenMAIC40k—~678Automated safety check: PassMIT
Filteringhashgraph-online/awesome-codex-plugins1.2k—~1.5kAutomated safety check: PassApache-2.0

Similar skills

  • Filter

    zalando/skipper

    Create or modify code in the filters package and all its sub-folders

    3.3k GitHub stars~527 tokensUpdated 2 days ago
    DevOps & CloudAuto-check passed

  • Adding Warehouse Person Properties

    PostHog/posthog

    Official

    Sync columns from a synced data warehouse table onto PostHog person or group properties, so warehouse data becomes usable anywhere person and group properties already work: feature flag targeting…

    40k GitHub stars~2.9k tokensUpdated today
    DatabasesAuto-check passed

  • Django Filter Benchmark

    saleor/saleor

    Benchmarks Django ORM filters in Saleor by generating bulk data, extracting the SQL and running EXPLAIN ANALYZE to check index usage.

    23k GitHub stars~2.3k tokensUpdated yesterday
    DatabasesAuto-check passed

  • Build A Personal Skill From History

    THU-MAIC/OpenMAIC

    Derives a reusable personal skill for course-making from a representative sample of the user's own past classrooms and chat history, confirmed with them before saving.

    40k GitHub stars~678 tokensUpdated today
    Agent WorkflowsAuto-check passed

  • Filtering

    hashgraph-online/awesome-codex-plugins

    A skill your agent uses when the user needs to filter data — whether in a structured query, a metric aggregation, or an attribute expression.

    1.2k GitHub stars~1.5k tokensUpdated today
    DatabasesAuto-check passed

  • Personalized Email

    topoteretes/cognee

    Draft a reply to your newest Gmail email that knows what you discussed in your Granola meetings, what you promised the sender, and how you write, using cognee memory.

    32k GitHub stars~695 tokensUpdated yesterday
    Productivity & AutomationAuto-check: notes

More from ooiyeefei/ccc

All 22 skills in this repo

  • Scribe Meeting Notes

    ooiyeefei/ccc

    Turns meeting recordings into notes with a chain of custody from audio to claim, auditing transcripts for gaps and low-confidence numbers and names.

    494 GitHub stars~876 tokensUpdated 2 mo ago
    Auto-check passed

  • Motion Video in Remotion

    ooiyeefei/ccc

    Builds marketing and explainer videos in Remotion from rendered scenes, with one real product capture as proof, and cuts them for each platform's formats.

    494 GitHub stars~2.9k tokensUpdated 2 mo ago
    Auto-check passed

  • Product Demo Video Recorder

    ooiyeefei/ccc

    Records a sharp product demo video by driving the real app with a browser agent, from storyboard to Xvfb capture and a narration script synced to the frames.

    494 GitHub stars~2.8k tokensUpdated 2 mo ago
    Auto-check passed

  • Excalidraw Architecture Diagrams

    ooiyeefei/ccc

    Generates architecture diagrams as .excalidraw files by analyzing a codebase, with optional PNG or SVG export through Playwright.

    494 GitHub stars~2k tokensUpdated 2 mo ago
    Auto-check passed

  • Google Analytics 4 Setup

    ooiyeefei/ccc

    Sets up GA4 on a website and wires one real conversion event end to end, verified in DebugView before any money goes into ads.

    494 GitHub stars~2.2k tokensUpdated 2 mo ago
    Auto-check passed

  • Landing Page GTM Copy

    ooiyeefei/ccc

    Builds or rewrites SaaS landing pages by researching the real product, positioning it against alternatives and writing buyer-focused copy, then implementing it in the codebase.

    494 GitHub stars~1.8k tokensUpdated 2 mo ago
    Auto-check passed

Questions about Project Showcase

What does Project Showcase do?

Add a filterable, project-based showcase catalog to a personal or company site — the pattern where every project is one card that opens a detail page, and visitors filter by the KIND of project (a…. Project Showcase is an agent skill from ooiyeefei/ccc. Add a filterable, project-based showcase catalog to a personal or company site — the pattern where every project is one card that opens a detail page, and visitors filter by the KIND of project (a launched product vs a hackathon build vs an R&D experiment).

When should I use Project Showcase?

Project Showcase fits situations like: someone wants to build a portfolio / projects / things Ive built page; A showcase grid with filters; wants to add one new project to an existing showcase and isnt sure how to categorize.

How do I install Project Showcase in Claude Code?

Run `npx skills add ooiyeefei/ccc --skill project-showcase -a claude-code`. Or copy the skill folder (skills/project-showcase in ooiyeefei/ccc) into .claude/skills/project-showcase in your project. Claude Code loads it when a task matches its description.

How do I install Project Showcase in Codex?

Run `npx skills add ooiyeefei/ccc --skill project-showcase -a codex`. Or copy the skill folder (skills/project-showcase in ooiyeefei/ccc) into .agents/skills/project-showcase in your project. Codex loads it when a task matches its description.

Can I use Project Showcase in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add ooiyeefei/ccc --skill project-showcase -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/project-showcase, .gemini/skills/project-showcase, .github/skills/project-showcase and .opencode/skills/project-showcase in your project.

What does Project Showcase need to run?

SKILL.md names no scripts, command-line tools or credentials: Project Showcase is instructions for the agent only.

Does Project Showcase access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Project Showcase safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Project Showcase use?

Project Showcase is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Project Showcase use?

About 1.1k tokens (SKILL.md is roughly 4.4k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 1.8k tokens, read only when the agent opens those files.

What are the alternatives to Project Showcase?

Skills that share tags, products or a category with Project Showcase: Filter (zalando/skipper, 3.3k stars), Adding Warehouse Person Properties (PostHog/posthog, 40k stars), Django Filter Benchmark (saleor/saleor, 23k stars) and Build A Personal Skill From History (THU-MAIC/OpenMAIC, 40k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Project Showcase?

ooiyeefei (a GitHub user) maintains it in ooiyeefei/ccc, which has 494 GitHub stars. The repository holds 22 skills in this directory. The repository was last updated on July 29, 2026.

Source: ooiyeefei/ccc on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.