How does this skill handle accessibility?

It provides manual implementation patterns for common elements like labels, inputs, and tables when using Preact, and leverages Radix UI primitives when using shadcn/ui.

Can this skill help with CSS styling?

Yes, it enforces Tailwind CSS as the primary styling framework to ensure consistent, utility-first design patterns across all web UI components.

When should I use Next.js instead of Preact?

Use Next.js with shadcn/ui specifically for projects within the workers/ directory to leverage Cloudflare Workers, while Preact is preferred for static application clusters.

Why use the h function instead of JSX?

This skill favors the h function in Preact to maintain a lightweight footprint and avoid build-step complexities for specific static frontend environments defined in the repository.

Preact & Tailwind Frontend

Name: Preact & Tailwind Frontend
Author: hippocampus-dev

byhippocampus-dev

•

Design Tools

Standardizes frontend development workflows using Preact, Tailwind CSS, and accessibility-first design patterns.

This skill provides Claude with specific architectural patterns and coding conventions for building modern web interfaces within the Hippocampus ecosystem. It enforces the use of Preact with the 'h' function for lightweight components and Tailwind CSS for styling, while offering specialized guidance for Next.js and shadcn/ui in Cloudflare Worker environments. By prioritizing manual accessibility implementation and framework-specific best practices, it ensures that all generated frontend code is performant, accessible, and consistent with project-wide standards.

Key Features

01Optimizes frontend code for static clusters and Cloudflare Workers

02Enforces Preact and Tailwind CSS coding standards

032 GitHub stars

04Ensures WCAG compliance via manual accessibility patterns

05Implements lightweight components using the Preact h function

06Provides framework-specific guidance for Next.js and shadcn/ui

Use Cases

01Building accessible UI components without JSX overhead

02Developing static frontends for application clusters

03Designing Cloudflare Worker-compatible interfaces with shadcn/ui

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add hippocampus-dev/hippocampus frontend

For use in Claude.ai and ChatGPT

Download Skill