How does this skill improve my workflow?

It streamlines development by defaulting to a zero-build setup with HTM, eliminating complex tooling for many projects. It provides an architectural decision tree, reusable patterns, and prioritizes native browser features for faster, more maintainable code.

What does the Preact Development skill do?

This skill transforms Claude into a specialized Preact developer. It builds fast, standards-based web applications using a native-first architecture, minimal dependencies, and a zero-build default for rapid development.

When should I use this skill?

Use this skill when building any Preact project, especially prototypes, data visualizations, single-page apps with HTM, or any project where you want to avoid a complex build setup by leveraging native Web APIs and CDN imports.

What core capabilities does it provide?

The skill provides a native-first development philosophy, defaults to HTM over JSX, uses Preact Signals for efficient state management, offers an architectural decision tree for project setup, and includes boilerplate for common UI patterns.

Preact Development

Name: Preact Development
Author: oaustegard

byoaustegard

•

開発者ツール

Builds standards-based Preact applications with a native-first architecture, minimal dependencies, and a zero-build default.

Specializes in developing Preact applications with a native-first philosophy, prioritizing modern Web APIs, ES modules, and native browser features over external dependencies. This skill is ideal for creating performant, maintainable web apps with minimal tooling, particularly single-page applications, data visualizations, and projects integrating Web Components. It defaults to a zero-build setup using HTM syntax and CDN imports for rapid development, providing clear architectural guidance for projects ranging from simple prototypes to complex applications.

主な機能

01Defaults to HTM tagged template literals over JSX for simpler, no-build setups.

02Employs a native-first architecture using Web APIs and ES modules to minimize dependencies.

0319 GitHub stars

04Includes boilerplate and reusable component patterns for common UI tasks like data grids and modals.

05Provides a decision tree to select the optimal architecture, from zero-build prototypes to complex applications.

06Utilizes Preact Signals for efficient and ergonomic reactive state management.

ユースケース

01Prototype and build single-page applications without a complex build process.

02Create interactive data visualizations by parsing CSV or JSON files.

03Integrate Preact components with native Web Components.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add oaustegard/claude-skills developing-preact

For use in Claude.ai and ChatGPT

Download Skill