Components
- Accordion
- Alert
- Alert Dialog
- Autocomplete
- Avatar
- Badge
- Breadcrumb
- Button
- Card
- Checkbox
- Checkbox Group
- Collapsible
- Combobox
- Code Block
- Dialog
- Empty
- Field
- Fieldset
- Form
- Frame
- Group
- Input
- Label
- Menu
- Meter
- Number Field
- Pagination
- Popover
- Preview Card
- Progress
- Radio Group
- Scroll Area
- Select
- Separator
- Sheet
- Skeleton
- Slider
- Switch
- Table
- Tabs
- Textarea
- Toast
- Gooey Toast
- Toggle
- Toggle Group
- Toolbar
- Tooltip
LoveUI Skills
Production-focused agent skill instructions for building polished LoveUI interfaces.
LoveUI Skills is a reusable skill package for coding agents that need to build high-quality product UI with LoveUI.
It works with any AI coding agent — no specific provider required.
It provides concrete rules for visual direction, layout systems, state coverage, and production-ready UX patterns.
What It Includes
- A structured workflow from scope definition to implementation and quality checks.
- A design quality bar for typography, spacing, color, component APIs, and responsive behavior.
- Agent UX requirements for sensitive actions: Plan, Preview, Apply, plus undo and history patterns.
- Guidance to use LoveUI MCP as the source of truth before selecting packages or components.
Required MCP Usage
The skill expects the loveui MCP server to be available and used during UI work:
- Call
resources/listto discover available registry items. - Call
get-loveui-packageto fetch exact package JSON before implementation. - Treat MCP responses as authoritative instead of relying on memory.
Default Prompt
Use $loveui-skills to create a beautiful, professional web app/page with LoveUI and production-ready UX quality.Skill Source
The full skill definition lives on GitHub at github.com/loveconnor/loveui-skills.
The core skill file is SKILL.md at the root of the repository.