skills.rest
Hyperxq
HyperxqCOMMUNITY
Explore all skills by this author →
𝕏@DanielB05817361GitHub

preact

Enforce Preact-specific imports and build settings in monorepo TypeScript projects.

1|Updated Dec 30, 2025
Search Tags:#preact#micro-frontend#rsbuild#module-federation#rslib#pluginpreact#jsx-import-source
One-click install
npx skills add https://github.com/Hyperxq/modular-frontend-architecture --skill preact-hyperxq
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: preact
Source: https://github.com/Hyperxq/modular-frontend-architecture/tree/main/.claude/skills/preact
Command: npx skills add https://github.com/Hyperxq/modular-frontend-architecture --skill preact-hyperxq

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill prevents silent runtime failures and broken hooks caused by incorrect Preact imports, missing JSX transform configuration, absent pluginPreact in build/test configs, and duplicate Preact runtimes across Module Federation boundaries in a monorepo.

Core Features & Use Cases

  • Enforces correct import sources for hooks, primitives, and compat utilities so components use preact and preact/hooks rather than react.
  • Documents architecture rules that separate smart shell responsibilities (stores, providers, routing) from dumb ui-components, ensuring predictable state flow.
  • Prescribes build and federation requirements: set jsxImportSource to preact in tsconfig, include pluginPreact() in rsbuild/rslib/rstest configs, and configure Module Federation shares as singletons for preact packages.
  • Use cases: writing functional components and hooks, adding forwardRef-compatible components, configuring MF remotes/hosts, auditing packages for duplicate Preact runtimes, and preventing ref+Suspense timing bugs.

Quick Start

Audit and update each package to set jsxImportSource to preact, add pluginPreact() to every rsbuild/rslib/rstest config, and configure preact, preact/hooks, preact/compat, and preact/jsx-runtime as singletons in Module Federation shared settings.

Frequently Asked Questions about preact

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

FAQPage Schema
Why do my Preact hooks break silently in a Module Federation monorepo?▼

Preact hooks break silently when duplicate Preact runtimes exist across Module Federation boundaries. Configure preact, preact/hooks, preact/compat, and preact/jsx-runtime as singletons in shared settings to enforce a single runtime instance.

How do I configure jsxImportSource for Preact in a TypeScript monorepo?▼

Set jsxImportSource to preact in your tsconfig to enable correct Preact JSX transforms. This prevents broken hooks and runtime failures by ensuring components use preact and preact/hooks rather than react.

What build configurations do I need for Rsbuild and Rslib when using Preact?▼

Include pluginPreact() in every Rsbuild, Rslib, and Rstest configuration file. This applies the necessary Preact build and runtime settings to prevent silent failures in functional components and hooks.

Does Module Federation require singleton configuration for preact/compat?▼

Yes, Module Federation requires setting singleton: true for preact/compat. This prevents duplicate Preact runtimes across host and remote boundaries, avoiding ref and Suspense timing bugs in your components.

How do I separate smart shell responsibilities from dumb UI components in Preact?▼

Separate smart shell responsibilities like stores, providers, and routing from dumb UI components. This architecture rule ensures predictable state flow and prevents runtime breakage when authoring forwardRef-compatible Preact components.

Related Skills

Explore More Software Engineering Skills→
HyperxqHyperxq
1

rspack

Customize Rspack configuration entries and Module Federation settings in Rsbuild/Rslib projects.

Community
Intermediate
erxeserxes
4.1k

module-federation-expose

Manage Module Federation exposes in erxes frontend plugin configuration files.

Official
Advanced
joshsmithxrmjoshsmithxrm
5

workflow-verify

Validate .claude workflow infrastructure changes across development and test environments.

Community
Intermediate
grafanagrafana
213

react-19-plugin-migration

Detect and resolve React 19 compatibility issues in Grafana plugins.

Official
Advanced