What is the main benefit of using this skill?

It streamlines the creation of minimal, fast, and accessible UIs by leveraging server-side patterns and reducing client-side JavaScript overhead through htmx.

Is this skill compatible with any web project?

While optimized for Hiccup and htmx environments, its principles of semantic structure and BEM-based styling are applicable to any project prioritizing lean frontend code.

Can I use this for complex animations?

Yes, it includes support for transition animations while prioritizing accessibility standards, such as respecting user reduced-motion preferences.

Does it support modern CSS frameworks?

The skill specifically follows BEM (Block Element Modifier) conventions to ensure scalable and modular CSS architectures that are easy to maintain.

Hiccup & HTMX UI Builder

Name: Hiccup & HTMX UI Builder
Author: u473t8

byu473t8

0•

デザインツール

Builds semantic, high-performance web interfaces using Hiccup markup, htmx interactivity, and BEM-compliant CSS.

The UI Builder skill automates the creation of lightweight, accessible frontend components by combining the power of Clojure-style Hiccup syntax with the hypermedia-driven interactivity of htmx. It enforces Block Element Modifier (BEM) conventions for CSS to ensure maintainable, scalable styles while prioritizing minimal JavaScript and smooth transition animations. This skill is ideal for developers building modern web applications that favor server-side simplicity and fast, reactive user experiences without the overhead of heavy client-side frameworks.

主な機能

01Hypermedia-driven interactivity with htmx attributes

02Standardized BEM (Block Element Modifier) CSS styling

03Accessible UI component and lesson page construction

04Motion-aware transition animations with reduced-motion support

05Semantic Hiccup markup generation for structured HTML

060 GitHub stars

ユースケース

01Refactoring legacy HTML into structured Hiccup and htmx patterns

02Creating fast, accessible UI components without heavy JS frameworks

03Building interactive educational dashboards or lesson pages

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add u473t8/learning-app ui-builder

For use in Claude.ai and ChatGPT

Download Skill