lab

Create, list, search, and view HTML or React examples from the lab data directory.

Updated Nov 4, 2025

Search Tags:#workflow #documentation #frontend #auto-discovery #code-examples #lab

Ready to run

npx skills add https://github.com/chasemccoy/scripts --skill lab

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: lab
Source: https://github.com/chasemccoy/scripts/tree/main/skills/lab
Command: npx skills add https://github.com/chasemccoy/scripts --skill lab

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Manage code examples and demos in the lab project manually, making it tedious to locate, create, list, search, or view relevant examples.

Core Features & Use Cases

Auto-discovery of code examples in the data directory for quick access.
Support for HTML and React examples with frontmatter or meta exports to describe each item.
Streamlined workflows for creating, listing, and searching examples, with consistent naming and slug conventions.

Quick Start

Create a new HTML or React example in the lab data directory with appropriate frontmatter or meta.

Frequently Asked Questions about lab

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

FAQPage Schema

How do I auto-discover HTML and React code examples in a project directory?▼

Auto-discovery of code examples is achieved by scanning the data directory for files with appropriate frontmatter or meta exports, allowing you to automatically list and view HTML or React demos without manual registration.

What is the best way to organize frontend lab code examples for easy searching?▼

Organizing frontend lab code examples involves applying consistent naming and slug conventions alongside frontmatter meta handling, streamlining the workflow to create, list, and search relevant demos efficiently.

How do I create a new React or HTML demo with frontmatter metadata?▼

Creating a new React or HTML demo requires placing the file in the lab data directory and adding appropriate frontmatter or meta exports to describe the item for the auto-discovery system.

Does auto-discovery work with both HTML and React example files?▼

Auto-discovery works with both HTML and React example files, utilizing frontmatter or meta exports to parse and load each item from the designated data directory for quick access.

Why does my frontend code example not show up when listing lab demos?▼

If a frontend code example does not appear when listing lab demos, it likely lacks the required frontmatter or meta exports needed for the auto-discovery mechanism to identify and load it from the data directory.

Can I search lab code examples by metadata instead of file names?▼

Searching lab code examples by metadata is supported through frontmatter or meta exports, enabling you to locate specific HTML or React demos based on their described attributes rather than manual file names.