skills.rest
Tlahey
TlaheyCOMMUNITY
Explore all skills by this author →
GitHub

reusable-components

Decides whether React components belong in a shared presentational package and scaffolds their Storybook setup.

3|Updated Jun 23, 2026
Search Tags:#react#component library#monorepo#code organization#storybook#tailwind#presentational components
One-click install
npx skills add https://github.com/Tlahey/git-manager --skill reusable-components-tlahey
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: reusable-components
Source: https://github.com/Tlahey/git-manager/tree/main/.claude/skills/reusable-components
Command: npx skills add https://github.com/Tlahey/git-manager --skill reusable-components-tlahey

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? In a monorepo like git-manager, it's unclear whether a new or existing React component should live in the shared packages/components library or stay in apps/desktop. Misplaced components either break Storybook snapshot testing (because they depend on Tauri IPC, Zustand stores, or fetched data) or get prematurely abstracted before real reuse exists. ## Core Features & Use Cases - Placement decision checklist: Applies a four-step test (business logic, domain types, reuse potential, Storybook mountability) to decide if a component is purely presentational and belongs in packages/components. - Component migration workflow: Guides moving a misplaced component into packages/components/src/, generalizing domain-specific props, exporting it from the package index, and updating call sites in apps/desktop. - Storybook scaffolding: Sets up Storybook for packages/components following the existing packages/code-view pattern (Tailwind config, PostCSS, port 6008, telemetry disabled), since that package has none yet. - Use Case: You wrote an EmptyState component in apps/desktop and want to reuse it across three screens. The Skill confirms it has no business logic, moves it to packages/components, exports it, rewires the import, and adds a static-props Storybook story. ## Quick Start Ask the assistant to review whether your new React component belongs in packages/components or apps/desktop, and to move it there with a Storybook story if it qualifies.

Frequently Asked Questions about reusable-components

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

FAQPage Schema
How do I decide if a React component should go in a shared component library?▼

Check four things in order: no imports from app API layers or stores, no domain types in exported props, plausible reuse across unrelated features, and the ability to render in Storybook from static props only. Passing all four makes it a shared-library candidate.

How do I move a component from an app folder into a shared package?▼

Create the file under packages/components/src, generalize any domain-specific prop names, export it from the package index, update every call-site import to use the package name, add a Storybook story, then run typecheck, lint, and test for that package.

Why can't a shared presentational component use useTranslation or a store?▼

Because it must render in Storybook from static props alone without mocking app state. Translated text arrives as string props from the caller, and all interactivity goes through callback props like onClick or onSelect.

How do I set up Storybook for a Tailwind-based React package in a monorepo?▼

Add a tailwind.config extending the shared config with content globs covering src, stories, and the UI primitives package, plus a PostCSS config and .storybook/main.ts pointing at a top-level stories folder. Import the global CSS in preview.ts so utility classes are generated.

Why do Storybook stories render unstyled even after importing the global CSS?▼

Importing globals.css only provides theme tokens, not utility classes. Tailwind's JIT scanner only emits classes found in the content globs of the config running that build, so the package needs its own tailwind.config covering its source and story files.

When should I not extract a component into a shared library?▼

Don't extract one-off UI tied to a single feature, even if it looks generic. Premature abstraction is worse than leaving it in place until real reuse across unrelated features appears.

Related Skills

Explore More Software Engineering Skills→
AlteriomAlteriom

shadcn/ui

Build React UIs with shadcn/ui components, Tailwind CSS, and Radix UI primitives.

Official
Advanced
NostoNosto

repo-workflow

Automate repository validation and commit hygiene with lint, typecheck, tests, and conventional commits.

Official
Intermediate
murphyjosephmurphyjoseph

architecture

Enforce downward-only imports across app, features, shared, and platform boundaries.

Community
Advanced
darkmatterdarkmatter
1

ui-component-architecture

Refactor React screens to reuse shared UI primitives from a monorepo package.

Official
Intermediate