Sl UI Library — Design skill for Claude Code
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.

**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
[](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

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
Related Skills
Tooling Agent Skill Markdown HTML Design System
Agent skill that decides and builds a complete, accessible HTML/CSS design system (130 components, DTCG tokens
Convert To Wp Theme
Convert a complete HTML/CSS/JavaScript project into a production-ready WordPress block theme (Full Site Editin
Sprite Stack Campfire Exploded
Create a single self-contained HTML file using only HTML, CSS, and JavaScript. No build tools or external asse
Sprite Stack Turntables
Create a single self-contained HTML file using only HTML, CSS, and JavaScript. No build tools or external asse
Ads Component Library
Mevcut tasarım çıktısından component library oluşturur. components/ klasörü varsa oradan alır, yoksa screens/
Export Design System
/export-design-system — Export Components as a Publishable Library
Related Agents
Library Scout
Vets a JavaScript or CSS library that is not yet in the studio-kit index — licence from the LICENSE file, rele
Light Web CodeReview
Use this agent when the user has written or modified HTML, CSS, or JavaScript code and needs it reviewed for e
Web Developer
Frontend web developer for building and improving the personal portfolio website. Specializes in HTML, CSS, Ja