skills.rest
junevm
junevmCOMMUNITY
Explore all skills by this author →
GitHub

developing-preact

Guide standards-based Preact app design with ES modules and import maps.

Updated Aug 23, 2026
Search Tags:#zero-build#preact#signals#progressive enhancement#web components#htm#import maps
One-click install
npx skills add https://github.com/junevm/avtoolz --skill developing-preact-junevm
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: developing-preact
Source: https://github.com/junevm/avtoolz/tree/main/.agents/skills/developing-preact
Command: npx skills add https://github.com/junevm/avtoolz --skill developing-preact-junevm

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires curl, python3, bash, and includes assets (resource) and references (resource) components.

What problem does it solve?

It eliminates guesswork when designing and implementing standards-based Preact applications by providing a ready decision framework and implementation conventions for reliable, minimal-dependency development.

Core Features & Use Cases

  • Native-first architecture guidance: prioritizes ES modules, import maps, Web APIs, Web Components, progressive enhancement, and accessibility over heavy tooling.
  • Zero-build and low-tooling workflows: supports standalone prototypes with vendored ESM imports and an import-map structure designed to keep a single shared Preact instance.
  • HTM-first implementation patterns: teaches when to use HTM vs JSX, plus clear translation rules for common React/JSX patterns into HTM.
  • Reusable reference assets: includes boilerplate HTML and component patterns for typical app needs (data parsing, grids, file uploads, modals, tabs, toasts).

Quick Start

Use the developing-preact skill to design a standalone Preact app by starting from assets/boilerplate.html, then running bash scripts/vendor.sh to vendor dependencies and following the import-map structure for your app’s components.

Frequently Asked Questions about developing-preact

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

FAQPage Schema
How do I build a zero-build Preact app without bundlers?▼

Build a zero-build Preact app using standards-based ES modules and import maps. Start from the provided boilerplate HTML, run the vendoring script for dependencies, and structure components via HTM to avoid bundlers entirely.

Why do I need an import map structure for native-first Preact applications?▼

An import map structure ensures a single shared Preact instance across native-first ES modules. Vendoring dependencies via the provided bash script prevents module duplication and state conflicts common in browser-native development.

Can I use signals for state management in a Preact app with no build tooling?▼

Signals work in Preact apps without build tooling by importing them as native ES modules. The Skill guides state management decisions and provides conventions for integrating signals within a zero-build, HTM-first architecture.

What are the limitations of using HTM instead of JSX for Preact components?▼

HTM lacks JSX compile-time optimizations and requires adapting syntax via translation rules. Limitations include no type checking by default, making it best suited for small apps, standalone prototypes, and progressive enhancement rather than large-scale builds.

Related Skills

Explore More Software Engineering Skills→
tollamatollama
2

tollama-forecast

Run non-streaming time-series forecasts via a local Tollama daemon.

Official
Intermediate
BoristokaBoristoka

components

Generate reusable React and Tailwind CSS UI components for web development.

Community
Intermediate
qol-toolsqol-tools

preact

Build accessible Preact + htm UI components with keyboard-first patterns and ARIA roles.

Official
Advanced
thesaifalitaithesaifalitai
8

react-native-expert

Build and configure production-grade bare React Native projects with native modules.

Community
Advanced