frontend

hippocampus-dev's avatarfrom hippocampus-dev

Frontend coding conventions using Preact and Tailwind. Use when writing or reviewing frontend JavaScript, HTML, or CSS code for web UI components.

⭐1stars🔀0forks📁View on GitHub🕐Updated Jan 4, 2026
[Code Generation]

When & Why to Use This Skill

This Claude skill streamlines frontend development by enforcing standardized coding conventions for Preact and Tailwind CSS. It helps developers generate high-quality UI components using the `h` function, ensures consistent styling with Tailwind utility classes, and guarantees web accessibility (A11y) through manual implementation patterns. By providing clear architectural guidance and best practices, it reduces technical debt and accelerates the creation of performant, accessible web interfaces.

Use Cases

  • Developing lightweight Preact components using the `h` function for optimized performance in static frontend applications.
  • Rapidly styling UI elements with Tailwind CSS while maintaining a consistent design system and code structure.
  • Ensuring WCAG compliance by implementing manual accessibility features like ARIA labels, for/id associations, and semantic table headers.
  • Standardizing frontend architecture across projects by following predefined framework selection rules (e.g., Next.js for Workers vs. Preact for static sites).
  • Reviewing existing frontend code to ensure adherence to specific UI component standards and accessibility requirements.
namefrontend
descriptionFrontend coding conventions using Preact and Tailwind. Use when writing or reviewing frontend JavaScript, HTML, or CSS code for web UI components.
keywordspreact, tailwind, frontend, フロントエンド, UI, コンポーネント, css, html
  • Use Preact unless otherwise specified
  • Use Tailwind unless otherwise specified

Framework Selection

Framework When to Use
Next.js + shadcn/ui workers/ directory (Cloudflare Workers)
Preact + Tailwind cluster/applications/ static frontends

Preact

  • Create elements with h function instead of JSX/TSX syntax

Accessibility

Framework Approach
shadcn/ui Built-in accessibility via Radix UI primitives
Preact + Tailwind Manual implementation required

Manual Accessibility Implementation

When not using shadcn/ui, ensure accessibility compliance:

Element Required
<select> Associate with <label> using for/id, use class: "sr-only" if visual label not needed
<input> Associate with <label> or use aria-label attribute
<table> headers Use <th scope="col"> or <th scope="row">

Example (Preact):

h("div", {class: "flex flex-col"}, [
    h("label", {for: "search-box", class: "sr-only"}, "Search"),
    h("select", {id: "search-box", ...}, [...]),
])