Run any Skill in Manus with one click

$pwd:

component-registry

Name: Component Registry
Author: bitovi

// Track and manage reusable UI components and patterns in the mock-app. Maintains an inventory of extracted components and unextracted patterns to promote incremental refactoring and prevent code duplication.

Run Skill in Manus

$ git log --oneline --stat

stars:1

forks:0

updated:March 27, 2026 at 17:50

File Explorer

2 files

SKILL.md

readonly

name	component-registry
description	Track and manage reusable UI components and patterns in the mock-app. Maintains an inventory of extracted components and unextracted patterns to promote incremental refactoring and prevent code duplication.

Component Registry Skill

Purpose

Maintain a living inventory of UI components and patterns in the mock-app to:

Track what components exist and where to find them
Identify repeated patterns that should be extracted
Enable incremental refactoring - each new feature cleans up before adding
Prevent duplication - check registry before creating new components

Registry Location

/Users/justinmeyer/dev/western-carolina-discovery/.github/skills/component-registry/REGISTRY.md

Registry Structure

Extracted Components

Components that exist as reusable, shared implementations:

### Button
- **Path**: `/mock-app/src/components/ui/Button.tsx`
- **Description**: Reusable button with variants (primary, secondary, success, danger, ghost) and sizes (sm, md, lg)

Potential Components (Not Yet Extracted)

Patterns that might need extraction:

### Card
- **Name**: Card
- **Description**: Container with white background, border, rounded corners, and shadow
- **Found in**: `/mock-app/src/pages/OrganizationJobsPage.tsx`, `/mock-app/src/pages/JobsPage.tsx`

How to Use This Skill

When Starting a New Feature

Check Registry for Existing Components
- Read .github/skills/component-registry/REGISTRY.md
- Look for components you need in the "Extracted Components" section
- If found, read the component file to understand how to use it
Check for Potential Components
- Review "Potential Components" section
- If a pattern you need is listed multiple times, consider extracting it first

After Implementing a Feature

Add New Components
- Add any new reusable components you created (path + brief description)
Note Potential Components
- If you used the same inline pattern 2+ times, add it to "Potential Components"
- Include: name, brief description, and path to file where it appears

Maintenance Commands

Scan for Button Patterns

# Find all button elements with repeated className patterns
grep -r '<button' mock-app/src/pages/ | grep -o "className=\"[^\"]*\"" | sort | uniq -c | sort -rn

Scan for Card/Panel Patterns

# Find repeated card/container patterns
grep -r 'className=".*bg-white.*rounded.*shadow' mock-app/src/pages/ -n

Count Component Usages

# Count usages of an existing component
grep -r "import.*Button.*from.*components/ui" mock-app/src/ | wc -l

Scan for Form Input Patterns

# Find repeated input patterns
grep -r '<input' mock-app/src/pages/ | grep -o "className=\"[^\"]*\"" | sort | uniq -c | sort -rn

Maintenance

Helpful Commands

Scan for repeated button patterns:

grep -r '<button' mock-app/src/pages/ | grep -o "className=\"[^\"]*\"" | sort | uniq -c | sort -rn

Scan for card/panel patterns:

grep -r 'className=".*bg-white.*rounded.*shadow' mock-app/src/pages/ -n

Count component usages:

grep -r "import.*Button.*from.*components/ui" mock-app/src/ | wc -l

Benefits

Find before creating: Check what exists before building something new
Spot duplication: Identify patterns that appear multiple times
Incremental improvement: Registry grows organically with each feature

related-skills.json

same repository

init-mock-app.md

from "bitovi/convey-app-template"

Initialize a minimal hello-world mock-app with React, Vite, TypeScript, Tailwind CSS, React Router, and MSW. Use when scaffolding a new mock-app from scratch, bootstrapping a project skeleton, or starting a fresh prototype. Produces a working app with routing, mock API support, and a hello-world landing page.

2026-05-211

implement-feature.md

from "bitovi/convey-app-template"

End-to-end workflow for implementing a new feature in the mock-app, ensuring data model alignment, sample data, UI/UX consistency, component reuse, and automated verification with Playwright MCP.

2026-03-271

create-skill.md

from "bitovi/convey-app-template"

Create new Agent Skills for this project. Use when asked to create a skill, document a workflow, or teach Copilot a new capability. Skills are stored in .github/skills/ and can include instructions, scripts, examples, and resources.

2026-03-061

debug-e2e-test.md

from "bitovi/convey-app-template"

Debug and fix failing Playwright E2E tests. Use when tests fail, when asked to fix failing tests, or when investigating test failures. Analyzes test output, screenshots, error context, and uses Playwright MCP to identify root causes.

2026-03-061

debugging-skill.md

from "bitovi/convey-app-template"

Always start a fresh browser session after any file change, walk through the full user flow, and monitor for errors before proceeding with further work.

2026-03-061

document-feature.md

from "bitovi/convey-app-template"

Create comprehensive feature requirement documents for the WCU Mosquito Surveillance Web Application. Use when asked to document a feature, write feature requirements, or create feature specifications from the roadmap. Includes user stories, functional requirements, data model review, workflows, and edge cases.

2026-03-061

package.json

"author": "bitovi"

"repository": "bitovi/convey-app-template"

View GitHub Repository View Creator Repositories

$ install --global

$ download --local

Run Skill in Manus

$ useful --forSOC

Software DevelopersComputer and Mathematical Occupations15-1252L4

name	component-registry
description	Track and manage reusable UI components and patterns in the mock-app. Maintains an inventory of extracted components and unextracted patterns to promote incremental refactoring and prevent code duplication.

Component Registry Skill

Purpose

Maintain a living inventory of UI components and patterns in the mock-app to:

Track what components exist and where to find them
Identify repeated patterns that should be extracted
Enable incremental refactoring - each new feature cleans up before adding
Prevent duplication - check registry before creating new components

Registry Location

/Users/justinmeyer/dev/western-carolina-discovery/.github/skills/component-registry/REGISTRY.md

Registry Structure

Extracted Components

Components that exist as reusable, shared implementations:

### Button
- **Path**: `/mock-app/src/components/ui/Button.tsx`
- **Description**: Reusable button with variants (primary, secondary, success, danger, ghost) and sizes (sm, md, lg)

Potential Components (Not Yet Extracted)

Patterns that might need extraction:

### Card
- **Name**: Card
- **Description**: Container with white background, border, rounded corners, and shadow
- **Found in**: `/mock-app/src/pages/OrganizationJobsPage.tsx`, `/mock-app/src/pages/JobsPage.tsx`

How to Use This Skill

When Starting a New Feature

Check Registry for Existing Components
- Read .github/skills/component-registry/REGISTRY.md
- Look for components you need in the "Extracted Components" section
- If found, read the component file to understand how to use it
Check for Potential Components
- Review "Potential Components" section
- If a pattern you need is listed multiple times, consider extracting it first

After Implementing a Feature

Add New Components
- Add any new reusable components you created (path + brief description)
Note Potential Components
- If you used the same inline pattern 2+ times, add it to "Potential Components"
- Include: name, brief description, and path to file where it appears

Maintenance Commands

Scan for Button Patterns

# Find all button elements with repeated className patterns
grep -r '<button' mock-app/src/pages/ | grep -o "className=\"[^\"]*\"" | sort | uniq -c | sort -rn

Scan for Card/Panel Patterns

# Find repeated card/container patterns
grep -r 'className=".*bg-white.*rounded.*shadow' mock-app/src/pages/ -n

Count Component Usages

# Count usages of an existing component
grep -r "import.*Button.*from.*components/ui" mock-app/src/ | wc -l

Scan for Form Input Patterns

# Find repeated input patterns
grep -r '<input' mock-app/src/pages/ | grep -o "className=\"[^\"]*\"" | sort | uniq -c | sort -rn

Maintenance

Helpful Commands

Scan for repeated button patterns:

grep -r '<button' mock-app/src/pages/ | grep -o "className=\"[^\"]*\"" | sort | uniq -c | sort -rn

Scan for card/panel patterns:

grep -r 'className=".*bg-white.*rounded.*shadow' mock-app/src/pages/ -n

Count component usages:

grep -r "import.*Button.*from.*components/ui" mock-app/src/ | wc -l

Benefits

Find before creating: Check what exists before building something new
Spot duplication: Identify patterns that appear multiple times
Incremental improvement: Registry grows organically with each feature

component-registry

Component Registry Skill

Purpose

Registry Location

Registry Structure

Extracted Components

Potential Components (Not Yet Extracted)

How to Use This Skill

When Starting a New Feature

After Implementing a Feature

Maintenance Commands

Scan for Button Patterns

Scan for Card/Panel Patterns

Count Component Usages

Scan for Form Input Patterns

Maintenance

Helpful Commands

Benefits

More from this repository

More from this repository

Component Registry Skill

Purpose

Registry Location

Registry Structure

Extracted Components

Potential Components (Not Yet Extracted)

How to Use This Skill

When Starting a New Feature

After Implementing a Feature

Maintenance Commands

Scan for Button Patterns

Scan for Card/Panel Patterns

Count Component Usages

Scan for Form Input Patterns

Maintenance

Helpful Commands

Benefits