SLtowl

Sl UI Library — Design skill for Claude Code

Design community

HTML, CSS and JavaScript components, with a plugin for Codex and Claude Code.

How to install Sl UI Library

This entry records only its repository, not the path inside it, so there is no exact command to give. Open SLtowl/sl-ui-library and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Sl UI Library does

HTML, CSS and JavaScript components, with a plugin for Codex and Claude Code.

Alternatives in Design

  • Frontend Design — Create distinctive, production-grade frontend interfaces with high design quality 94.1k ★
  • Pair — Fuse two extracted designs into a single hybrid identity 3.6k ★
  • Extract — Design System & Product Reverse-Engineering - Extract tokens, components, architecture, and PRDs from codebase 2.8k ★

README

SL UI Library

An AI plugin for finding and integrating UI components, with a browsable HTML, CSS and JavaScript library.

![Graphite SL UI Library controls in a warm studio composition](docs/media/cover.png)

**110 interactive components** in HTML, CSS and JavaScript. No runtime dependencies, remote fonts or stock icon libraries. Preview components and download their source files. The plugin helps a coding agent find and integrate components.

[Open the library](https://sltowl.github.io/sl-ui-library/) · [Install the plugin](#plugin-installation) · [Components](#components) · [Integration guide](docs/integration.md) · [Quality notes](QA.md)

Component demos

[![Cursor-free 3D studio film of real component interactions](docs/media/studio-motion.gif)](https://sltowl.github.io/sl-ui-library/media/studio-motion.mp4)

The demo shows saving, liking, theme switching, rating and tab navigation. It uses the library's components with CSS 3D styling. No cursor.

[Watch / download MP4](https://sltowl.github.io/sl-ui-library/media/studio-motion.mp4) · [WebM](https://sltowl.github.io/sl-ui-library/media/studio-motion.webm) · [Live 3D scene](https://sltowl.github.io/sl-ui-library/studio-motion.html) · [Interactive showcase](https://sltowl.github.io/sl-ui-library/showcase.html)

Studio photography is generated artwork; the film uses library components with CSS 3D styling.

Components

Buttons 10, Inputs 10, Toggles 10, Checkboxes 25, Sliders 20, Menus 15, Navigation 10, Overlays 10

110 components, 112 export variants. Save & Cancel is available together or separately. Feedback and Data display are reserved for later versions: **Nothing added yet**.

Plugin installation

Install directly from this GitHub repository. No official marketplace listing or library account is required.

Claude Code

Paste this line into a terminal with Claude Code installed:

claude plugin marketplace add