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
Convert To Wp Theme
Convert a complete HTML/CSS/JavaScript project into a production-ready WordPress block theme (Full Site Editin
Export Design System
/export-design-system — Export Components as a Publishable Library
Apply Design Md
Consume the project's design contract — a .design file or DESIGN.md — and thread its tokens through UI code (C
Modern UI Builder
Builds production-ready UI components with React/Vue + Tailwind CSS + Shadcn/UI. Invoke when user needs modern
TemplateClaw
Developer template hub and project scaffolding tool packaged as a Claude Code Plugin. 32 production-ready te
UI Forager Skill
Claude/Codex Skill that pulls and adapts real UI components from shadcn/ui, Aceternity, Magic UI, and 25+ othe
Related Agents
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
Web Game Dev
Spezialist für Browser-Spiele mit HTML/CSS/JavaScript, Canvas, Three.js und WebGL. Nutze diesen Agenten für Sp