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

Port Component

by theexperiencecompany in theexperiencecompany/gaia-ui

Ports a UI component from the gaia mono repo (theexperiencecompany/gaia) into the gaia-ui registry.

MITAuto-check passedFrontend & Design

Install Port Component

skills CLI
$ npx skills add theexperiencecompany/gaia-ui --skill port-component -a claude-code

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

GitHub CLI
$ gh skill install theexperiencecompany/gaia-ui port-component --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/theexperiencecompany/gaia-ui.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/port-component .claude/skills/port-component && 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
port-component
GitHub stars
220
Token cost
~2.9k tokens
SKILL.md length
1,379 words
Files
2 (incl. scripts)
Skills in repo
1
Repo updated
First seen
Licence
MIT

At a glance

Ports a UI component from the gaia mono repo (theexperiencecompany/gaia) into the gaia-ui registry.

  • Works in 9 steps: Locate the source → Check for an existing version → Make it reusable → …
  • Bring over a component from gaia
  • SKILL.md covers Accepting the request, Where to look in the gaia repo, Workflow and Notes
  • Runs Shell scripts from its folder; calls git, pnpm and gh; reaches github.com and ui.heygaia.io

What it does

Port Component is an agent skill from theexperiencecompany/gaia-ui. Ports a UI component from the gaia mono repo (theexperiencecompany/gaia) into the gaia-ui registry. Use when asked to port, copy, migrate, or bring over a component from gaia, the mono repo, or the main repo into gaia-ui. The user may give a component name ("port weather-card"), a file path in the gaia repo, or a screenshot of UI from heygaia.io to identify the component. Pulls from the master branch by default unless a specific branch or ref is given.

Its SKILL.md is about 2.9k tokens, which your agent loads only when the skill is triggered. The skill folder holds 2 other files, including scripts (for example `scripts/find-component.sh`).

It sits in Frontend & Design. It works with React, TypeScript and Git. The repository describes itself as: Beautifully designed components for building AI Agents 🌎. The licence is MIT.

When your agent uses it

  • Bring over a component from gaia
  • The main repo into gaia-ui

Example prompts

  • “port weather-card”
  • “Use the port-component skill to port a UI component from the gaia mono repo (theexperiencecompany/gaia) into the gaia-ui registry”
  • “/port-component”

Requirements

  • Python 3
  • A Bash shell

Workflow steps

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

  1. Locate the source
  2. Check for an existing version
  3. Make it reusable
  4. Follow gaia-ui conventions
  5. Register and build
  6. Preview
  7. Docs
  8. Verify, then it is done
  9. Ship

What it can do on your machine

Read from SKILL.md and the folder at commit 14e2015. 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

    Ships 1 file in scripts/ (Shell), which the agent can run.

    Shell commands in SKILL.md call:

    • git
    • pnpm
    • gh

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

  • Network

    Hosts in commands or code, which the agent is likely to contact:

    • github.com
    • ui.heygaia.io

    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

Port Component loads about 2.9k tokens when it runs. Until then it costs about 118 tokens; SKILL.md has 1,379 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~118
When it runs · the whole SKILL.md, loaded when a task matches
~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); the scripts in this folder are not scanned.

SKILL.md

The full file from theexperiencecompany/gaia-ui at commit 14e2015, republished under its MIT licence (© theexperiencecompany). 1,379 words, ~2,909 tokens.

Download SKILL.mdSave it as .claude/skills/port-component/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.
name
port-component
description
Ports a UI component from the gaia mono repo (theexperiencecompany/gaia) into the gaia-ui registry. Use when asked to port, copy, migrate, or bring over a component from gaia, the mono repo, or the main repo into gaia-ui. The user may give a component name ("port weather-card"), a file path in the gaia repo, or a screenshot of UI from heygaia.io to identify the component. Pulls from the master branch by default unless a specific branch or ref is given.

Port Component from Gaia Mono Repo

Copies a component from the gaia mono repo into this repo (gaia-ui), makes it a reusable open-source component, and wires up registry, preview, and docs.

  • Source repo: ~/work/gaia (override with GAIA_REPO env var). Remote: https://github.com/theexperiencecompany/gaia
  • Default ref: origin/master. Use another branch or ref only if the user asks.
  • Destination: registry/new-york/ui/ in this repo.

Never check out branches in the gaia repo. Read files with git show <ref>:<path> so the user's working tree there stays untouched.

Accepting the request

The user identifies the component in one of three ways:

  1. Component name ("port the footer"). Run the finder script (step 1 below).
  2. File path ("apps/web/src/components/navigation/Footer.tsx"). Read it directly with git show.
  3. Screenshot of UI from heygaia.io. Look at the image, identify what the component is (footer, navbar, pricing section, chat bubble, etc.), then search for it by that name and by distinctive strings visible in the screenshot (git grep -i "Request a Feature" origin/master -- apps/web).

If it is still ambiguous after searching, show the user the candidate paths and ask.

Where to look in the gaia repo

Only search frontend code. Never search backend, infra, or tooling.

Search these paths, in this order:

PathWhat lives there
apps/web/src/components/Shared web components (ui/, navigation/, layout/, shared/, seo/)
apps/web/src/features/<feature>/components/Feature components (chat, landing, pricing, mail, calendar, settings, onboarding, ...)
apps/web/src/config/App config the components import (appConfig.tsx has footerSections, connect, nav links)
apps/web/src/lib/, apps/web/src/hooks/Helpers and hooks components may depend on
apps/web/src/stores/Zustand stores (strip these when porting, replace with props)

Do NOT look in: apps/api (Python backend), apps/bots, apps/bridge, apps/voice-agent, infra, tools, scripts, packages/cli, docs, openspec. apps/mobile and apps/desktop only if the user explicitly asks for a mobile or desktop component.

Workflow

1. Locate the source
bash
.agents/skills/port-component/scripts/find-component.sh <component-name> [ref]

The script fetches origin, searches file names and exported symbols on the ref, and prints matching paths. Read files without checkout:

bash
git -C ~/work/gaia show 'origin/master:apps/web/src/components/navigation/Footer.tsx'

Also read every local import of the component (relative imports, config, hooks, feature utils). Each one must be ported, inlined, or replaced with a prop.

2. Check for an existing version

Look in registry/new-york/ui/ and registry.json. If the component already exists, ask before overwriting.

3. Make it reusable

Most mono repo components are coupled to the app. They must ship as clean open-source components anyone can drop into their project. Apply these rules:

  • Config imports become props. footerSections from appConfig becomes a sections prop. Never hardcode GAIA links, URLs, or copy in the component; demo data belongs in the preview.
  • App-specific chunks become slots. A status iframe, company logo, or analytics widget becomes a ReactNode prop (startSlot, brandSlot) or is dropped.
  • Strip mono repo concerns. SEO/JsonLd, analytics (PostHog), i18n hooks, feature flags, Zustand stores. Replace with props or sensible defaults.
  • Drop hard asset dependencies. If the source loads a wallpaper or logo from /public, make it an optional prop with a CSS fallback so the component works with zero assets.
  • Minimize npm deps. Prefer matchMedia over pulling in motion just for useReducedMotion. Every dependency listed in registry.json gets installed in the consumer's project.
  • HeroUI never survives the port. Map to shadcn primitives (@/components/ui/*) or Radix patterns.
  • Rewrite import paths. cn from @/lib/utils, icons from @/components/icons (Hugeicons), sibling registry components from @/registry/new-york/ui/<name>.
4. Follow gaia-ui conventions
  • One component per file. Never stack multiple components in one file. Multi-part components split into sibling files (footer.tsx, footer-wordmark.tsx) that all get listed in the registry.json files array. Look at weather-card for the pattern.
  • File names are kebab-case. Normalize whatever casing the user gives.
  • Tabs for indentation (biome). Match the existing code style exactly.
  • Exported, documented props interface per component. className pass-through merged with cn().
  • A11y: keyboard focus styles, ARIA labels, aria-hidden on decorative elements, prefers-reduced-motion, semantic elements (nav, footer, button).
  • Theme-aware CSS variables where the design allows; a deliberately dark component (glow footer) may keep its palette but must say so in its docs.
  • No em dashes anywhere: not in code comments, not in docs, not in descriptions. Use commas, colons, or parentheses.
5. Register and build

Add an entry to registry.json items. Edit the file directly and match the existing tab formatting exactly (never round-trip the whole file through a formatter or script). Include dependencies only for npm packages the component actually imports, registryDependencies for gaia-ui components it uses, and every file in files.

Then build the registry artifact and commit it with the rest:

bash
pnpm registry:build     # shadcn build, generates public/r/<name>.json

Only commit the public/r/<name>.json you added plus the footer entry in public/r/registry.json. If the local shadcn version reformats every other public/r/*.json, revert those unrelated files and match the existing format in yours (for example the top-level "type": "registry:ui" field).

Show full SKILL.md (617 more words)Show less
6. Preview

Create components/previews/<name>/default.tsx with realistic demo data (this is where GAIA-branded content is fine). Add variant previews only if the component has real variants. Previews auto-register by path; no index to update.

Port the brand assets too, not just the code. The preview must look like the component does on the GAIA landing page, and the code alone rarely gets you there. Before writing the preview, hunt down every asset the original render depends on and bring the real one over:

  • Images and wallpapers. If the original references anything under apps/web/public (wallpapers, logos, textures), copy the exact file into gaia-ui's public/ at a matching path (git show origin/master:apps/web/public/<path> > public/<path>) and use it in the preview (for example backgroundSrc). Never substitute a CSS-gradient approximation when the original uses an image; a hand-tuned gradient will not match.
  • Fonts. Resolve what the original's font utility actually maps to (check --font-* variables in apps/web/src/app/styles/globals.css and apps/web/src/app/fonts/); gaia's font-serif is Aeonik, not a serif. If gaia-ui does not load that face, copy the woff2 into app/fonts/, register it with next/font/local (see app/fonts/aeonik.ts), and pass it to the preview. The component itself stays font-agnostic via a fontClassName-style prop.
  • Colors. Trace hardcoded colors back to what actually paints on screen (a wallpaper's pixels, a brand token), and expose them as props with the real value as the default.

Then compare your rendered preview against the live landing page (or a recording of it) side by side before calling the port done. If it does not read as the same thing, an asset is still missing.

7. Docs

Create content/docs/components/<name>.mdx. Copy the structure of an existing doc (pricing-card.mdx is the reference) and keep it tight:

  • Frontmatter: category, title, description. The category places it in the sidebar; pick from the list in lib/navigation.ts (CATEGORY_ORDER).
  • Sections in order: intro line, <ComponentPreview name="<name>/default" />, "Usage in Gaia" (one or two lines), Installation (package-install block with the https://ui.heygaia.io/r/<name> URL), Usage (one minimal example), Examples (only meaningfully different ones), Props table per exported component, short Notes if there are real caveats.
  • No filler prose, no marketing fluff, no walls of examples.

The sidebar is generated from docs frontmatter, so a correct category is all that is needed; only touch lib/navigation.ts for a brand new category.

8. Verify, then it is done

Run all of these and fix failures:

bash
pnpm type                 # tsc --noEmit
pnpm lint                 # biome check

Then confirm:

  • public/r/<name>.json exists after the registry build and contains all files.
  • The component appears in the docs sidebar: start pnpm dev, or verify the mdx frontmatter category matches CATEGORY_ORDER in lib/navigation.ts.
  • The preview renders: hit /docs/components/<name> in the dev server and check the browser for runtime errors, or at minimum confirm the preview imports resolve in pnpm type.
  • Take a screenshot of the rendered component (used in the PR, step 9). With the dev server on a port, capture the demo element with playwright and the system chromium:
js
// run from a repo that has playwright installed (~/work/gaia works)
import { chromium } from "playwright";
const b = await chromium.launch({ executablePath: "/usr/bin/chromium" });
const page = await b.newPage({ viewport: { width: 1440, height: 1000 }, colorScheme: "dark" });
await page.goto("http://localhost:<port>/docs/components/<name>", { waitUntil: "networkidle" });
await page.waitForTimeout(3000); // let canvases/animations draw
await page.locator("main <demo-selector>").first().screenshot({ path: "/tmp/<name>.png" });
await b.close();

Eyeball the screenshot before using it: wrong logo, broken layout, or empty canvas means something is off.

  • Run through the AGENTS.md checklist (dark mode, keyboard, ARIA, reduced motion, exported types).
9. Ship

Unless the user says otherwise: branch (sanku/<name>-component), commit, push, and open a PR on gaia-ui with gh pr create, summarizing what was ported, from where (source path and ref), and what was changed to make it reusable.

Include the screenshot in the PR description. Push it to the pr-assets branch and reference the raw URL:

bash
git checkout pr-assets 2>/dev/null || git checkout --orphan pr-assets
# copy image in, commit only the image, push, then switch back

Then embed: ![<name> component](https://raw.githubusercontent.com/theexperiencecompany/gaia-ui/pr-assets/<name>.png)

If gh hangs through the mise shim, call the real binary at ~/.local/share/mise/installs/gh/<version>/gh_*/bin/gh.

Notes

  • If the component pulls in a large dependency tree, summarize what is needed and confirm scope before porting everything.
  • Screenshots may show composed sections (navbar + hero + footer). Port only the component the user asked about; ask if unclear.

© theexperiencecompany, 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 1 other file (scripts) in .agents/skills/port-component of theexperiencecompany/gaia-ui.

  • SKILL.md
  • scripts/find-component.sh

Open the folder on GitHubat commit 14e2015

Compare with similar skills

Port Component 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.

Port Component compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Port Component this skilltheexperiencecompany/gaia-ui220—~2.9kAutomated safety check: PassMIT
Web Artifacts Builderanthropics/skills180k40 repos~769Automated safety check: PassApache-2.0
Ink Tui Wizardnovuhq/novu40k—~1.9kAutomated safety check: PassMIT
Frontend Module Standardssiteboon/claudecodeui14k—~2.6kAutomated safety check: PassAGPL-3.0
Dify Component Writing Guidelanggenius/dify158k—~626Automated safety check: PassCustom licence
React Frontend Development Guidelinesdiet103/claude-code-infrastructure-showcase10k2 repos~2.9kAutomated safety check: PassMIT

Similar skills

  • Web Artifacts Builder

    anthropics/skills

    Official

    Builds multi-component claude.ai HTML artifacts as a small React, TypeScript and Tailwind project, then bundles it into one shareable HTML file.

    180k GitHub starsUsed in 40 repos~769 tokens
    Frontend & DesignAuto-check passed

  • Ink Tui Wizard

    novuhq/novu

    Build terminal user interfaces (TUIs) using Ink (React for CLIs) and @inkjs/ui with a reactive, session-driven wizard pattern.

    40k GitHub stars~1.9k tokensUpdated today
    Frontend & DesignAuto-check passed

  • Frontend Module Standards

    siteboon/claudecodeui

    Enforces one repository's React and TypeScript module layout for code under src/: source-root imports, feature barrels, deliberate exports and no deep imports.

    14k GitHub stars~2.6k tokensUpdated yesterday
    Frontend & DesignAuto-check passed

  • Dify Component Writing Guide

    langgenius/dify

    Use when implementing or refactoring React/TypeScript components and the task requires decisions about component ownership, feature boundaries, state, data…

    158k GitHub stars~626 tokensUpdated today
    Frontend & DesignAuto-check passed

  • React Frontend Development Guidelines

    diet103/claude-code-infrastructure-showcase

    Guidelines for React 18 and TypeScript apps covering Suspense data fetching, lazy loading, feature folders, MUI v7 styling, TanStack Router and performance.

    10k GitHub starsUsed in 2 repos~2.9k tokens
    Frontend & DesignAuto-check passed

  • Formik Form Patterns

    ChrisWiles/claude-code-showcase

    Shows how to build forms with Formik and Yup validation, including conditional rules, field helpers, GraphQL submission, edit forms and multi-step flows.

    6.1k GitHub starsUsed in 3 repos~2.1k tokens
    Frontend & DesignAuto-check passed

Works with

Categories

Questions about Port Component

What does Port Component do?

Ports a UI component from the gaia mono repo (theexperiencecompany/gaia) into the gaia-ui registry. Port Component is an agent skill from theexperiencecompany/gaia-ui. Ports a UI component from the gaia mono repo (theexperiencecompany/gaia) into the gaia-ui registry.

When should I use Port Component?

Port Component fits situations like: bring over a component from gaia; the main repo into gaia-ui.

How do I install Port Component in Claude Code?

Run `npx skills add theexperiencecompany/gaia-ui --skill port-component -a claude-code`. Or copy the skill folder (.agents/skills/port-component in theexperiencecompany/gaia-ui) into .claude/skills/port-component in your project. Claude Code loads it when a task matches its description.

How do I install Port Component in Codex?

Run `npx skills add theexperiencecompany/gaia-ui --skill port-component -a codex`. Or copy the skill folder (.agents/skills/port-component in theexperiencecompany/gaia-ui) into .agents/skills/port-component in your project. Codex loads it when a task matches its description.

Can I use Port Component 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 theexperiencecompany/gaia-ui --skill port-component -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/port-component, .gemini/skills/port-component, .github/skills/port-component and .opencode/skills/port-component in your project.

What does Port Component need to run?

Going by SKILL.md and its folder, Port Component needs a shell for the scripts in its folder and the command-line tools its instructions call (git, pnpm and gh). Our summary lists: Python 3; A Bash shell.

Does Port Component access the network?

SKILL.md names 2 domains. In commands or code: github.com and ui.heygaia.io; the agent is likely to contact these when it follows the instructions. This is read from the text; nothing was executed.

Is Port Component 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. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.

What licence does Port Component use?

Port Component 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 Port Component use?

About 2.9k tokens (SKILL.md is roughly 12k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Port Component?

Skills that share tags, products or a category with Port Component: Web Artifacts Builder (anthropics/skills, 180k stars), Ink Tui Wizard (novuhq/novu, 40k stars), Frontend Module Standards (siteboon/claudecodeui, 14k stars) and Dify Component Writing Guide (langgenius/dify, 158k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Port Component?

theexperiencecompany (a GitHub organization) maintains it in theexperiencecompany/gaia-ui, which has 220 GitHub stars. The repository was last updated on September 3, 2026.

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