skills.rest
weiloon1234
weiloon1234COMMUNITY
Explore all skills by this author →
WebsiteGitHub

shared-components

Catalog shared UI primitives and theming rules for React portals.

Updated Apr 14, 2026
Search Tags:#theming#frontend#react#ui-components#shared-components#component-catalog#anti-raw-html
One-click install
npx skills add https://github.com/weiloon1234/Forge-Starter --skill shared-components
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: shared-components
Source: https://github.com/weiloon1234/Forge-Starter/tree/main/.claude/skills/shared-components
Command: npx skills add https://github.com/weiloon1234/Forge-Starter --skill shared-components

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Standardizes the use of frontend primitives by cataloging shared components, hooks, modals, and theming rules to reduce raw HTML usage and ensure consistent UX across portals.

Core Features & Use Cases

  • Authoritative catalog of shared primitives across @shared/* libraries (components, hooks, modal, store, i18n, etc.) to help developers select the right primitive for a task.
  • Enforces anti-raw-HTML discipline and consistent theming across portals.
  • Guidance on importing via path aliases and composing UI without touching native HTML elements.
  • Real-world scenarios include forming, modal interactions, and UI composition using the shared primitives to maintain design consistency.

Quick Start

Locate the appropriate shared primitive from the catalog and start using it in your UI by following the usage examples in this guide.

Frequently Asked Questions about shared-components

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

FAQPage Schema
How do I standardize React UI components and avoid raw HTML across multiple portals?▼

Standardize React UI components by cataloging shared UI primitives, hooks, and modals to enforce anti-raw-HTML discipline and ensure consistent theming across portals.

What is the best way to select the right shared primitive for a React frontend task?▼

The best way to select shared primitives is consulting an authoritative catalog of @shared/* libraries, which guides component choice for forming, modal interactions, and UI composition.

How do I import shared components using path aliases in React applications?▼

Import shared components using path aliases by following the provided import conventions to compose UI elements without touching native HTML, maintaining design consistency across portals.

Can I use shared UI primitives for modal interactions and theming in React portals?▼

Yes, you can use shared UI primitives for modal interactions and theming in React portals, as the catalog provides guidance and usage examples to maintain consistent UX.

Why should I use shared UI primitives instead of writing native HTML elements in React?▼

Use shared UI primitives instead of native HTML to reduce raw HTML usage, enforce anti-raw-HTML discipline, and ensure consistent UX and theming across all portal applications.

Are there limitations to using a shared component catalog for frontend development?▼

The shared component catalog requires conforming to frontmatter requirements and import conventions; developers must select from cataloged primitives rather than writing custom native HTML elements.

Related Skills

Explore More Software Engineering Skills→
futureteafuturetea

Vite Configuration

Generate typed Vite configs for React and TypeScript projects.

Community
Advanced
rafasoaresrafasoares

nuxt-ui

Build accessible Nuxt/Vue interfaces with themed components and layout primitives.

Community
Advanced
inbharataiinbharatai
22

svelte-component

Create Svelte 5 components with runes, stores, and SvelteKit integration.

Community
Intermediate
monch1962monch1962
3

frontend-patterns

Provides reusable React and Next.js frontend patterns for UI architecture.

Community
Intermediate