add-shared-ui-component

Stars12

Forks6

UpdatedJuly 1, 2026 at 20:07

Add or reuse a shared UI component in PROMPT 2.0 — install shadcn/ui primitives into the shared_library and surface them via @tumaet/prompt-ui-components instead of writing custom UI. Use when adding a button/dialog/table/form or any reusable UI element.

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Source

prompt-edu

prompt-edu/prompt

View GitHub Repository View Creator Repositories

Download

Related occupationsSOC

Based on SOC occupation classification

Web DevelopersComputer and Mathematical Occupations·SOC 15-1254

SKILL.md

readonly

name	add-shared-ui-component
description	Add or reuse a shared UI component in PROMPT 2.0 — install shadcn/ui primitives into the shared_library and surface them via @tumaet/prompt-ui-components instead of writing custom UI. Use when adding a button/dialog/table/form or any reusable UI element.

PROMPT 2.0 has a large shared UI library. ALWAYS prefer reusing it over writing custom components.

1. Check what already exists first

Before adding anything, search the catalog in .claude/rules/react-typescript/shared-libraries.md and AGENTS.md. The library already ships most shadcn/ui primitives (Button, Card, Dialog, Table, Form, Select, Tabs, Tooltip, …) plus custom components (ManagementPageHeader, PromptTable<T>, DatePicker, MultiSelect, rich-text editors, DeleteConfirmation, …). If it exists, import it:

import { Button, PromptTable, ManagementPageHeader } from '@tumaet/prompt-ui-components'

Project-internal shared code uses the @/ alias (@/components/ui/*, @/hooks/*, @/network/*).

2. Add a missing shadcn/ui primitive

cd clients/shared_library
yarn dlx shadcn add <component-name>

Components land in shared_library/components/ui/ and become available to every micro-frontend.

3. Surface a custom shared component

If you build a genuinely new reusable component, add it to the shared library (../prompt-lib/prompt-ui-components/, published as @tumaet/prompt-ui-components) so all phases can use it — do not duplicate it inside a single component.

Verify

Import resolves from @tumaet/prompt-ui-components (or @/... for in-repo shared code).
make lint passes; no any; styling via cn (clsx + tailwind-merge), Tailwind v4 tokens.

More from this repository

same repository

new-course-phase

prompt-edu/prompt

Scaffold a new PROMPT 2.0 course phase end-to-end — a micro-frontend (clients/) plus a Go microservice (servers/) wired into Module Federation, the workspaces, and docker-compose. Use when asked to add a new course phase, component, or phase module/service.

2026-07-1512

address-pr-comments

prompt-edu/prompt

Address unresolved review comments on the current branch's GitHub PR — fetch the open threads, fix the code, and push. Use when asked to handle, resolve, or respond to PR review comments/feedback.

2026-07-0112

docker-patterns

prompt-edu/prompt

Docker Compose patterns for PROMPT's local multi-service stack — networking, volumes, container security, and debugging. Use when editing docker-compose*.yml, adding a service, or troubleshooting containers.

2026-07-0112

github-release-creation

prompt-edu/prompt

Create a GitHub release for the PROMPT 2.0 repository. Use this when asked to create, draft, or publish a GitHub release.

2026-07-0112

golang-patterns

prompt-edu/prompt

Deeper idiomatic Go patterns for PROMPT's services — concurrency (errgroup, context, goroutine leaks), error wrapping, and performance idioms. The go/ rules point here for these; they own the Gin/pgx/sqlc conventions.

2026-07-0112

keycloak-local-setup

prompt-edu/prompt

Get Keycloak auth working for local PROMPT 2.0 development — the .env vs .env.dev split, realm import, and common auth failures (401/403/CORS). Use when setting up local dev, fixing login/token issues, or onboarding a new contributor.

2026-07-0112

name	add-shared-ui-component
description	Add or reuse a shared UI component in PROMPT 2.0 — install shadcn/ui primitives into the shared_library and surface them via @tumaet/prompt-ui-components instead of writing custom UI. Use when adding a button/dialog/table/form or any reusable UI element.

PROMPT 2.0 has a large shared UI library. ALWAYS prefer reusing it over writing custom components.

1. Check what already exists first

import { Button, PromptTable, ManagementPageHeader } from '@tumaet/prompt-ui-components'

Project-internal shared code uses the @/ alias (@/components/ui/*, @/hooks/*, @/network/*).

2. Add a missing shadcn/ui primitive

cd clients/shared_library
yarn dlx shadcn add <component-name>

Components land in shared_library/components/ui/ and become available to every micro-frontend.

3. Surface a custom shared component

Verify

Import resolves from @tumaet/prompt-ui-components (or @/... for in-repo shared code).
make lint passes; no any; styling via cn (clsx + tailwind-merge), Tailwind v4 tokens.