preline
Preline UI is an open-source set of prebuilt UI components based on the utility-first Tailwind CSS framework.
Preline is an agent skill that integrates a comprehensive Tailwind CSS UI component library with AI coding assistants like Cursor, Claude Code, and Gemini CLI. The skill enables developers to leverage over 200 prebuilt UI components, 27 headless plugins, and multiple templates through natural language interactions with their AI agents. It automates theme generation and UI workflow tasks, making it faster to build modern websites and web applications without manually coding every component from scratch. Built on Tailwind CSS, the skill provides production-ready markup with enterprise-grade accessibility built in.
Key Features
Use Cases
- 01Rapidly prototyping landing pages and marketing sites through conversational prompts
- 02Building accessible admin dashboards and SaaS interfaces with pre-configured components
- 03Automating UI theme generation and customization for client projects
- 04Scaffolding ecommerce storefronts with cart, product, and checkout components
- 05Creating CMS and CRM interfaces with data tables, forms, and navigation patterns
- 06Accelerating frontend development workflows by describing desired UI patterns to AI assistants
Related Skills
View moresuperpowers
An agentic skills framework & software development methodology that works.
skills
Skills for Real Engineers. Straight from my .agents directory.
skills
Public repository for Agent Skills
ponytail
Makes your AI agent think like the laziest senior dev in the room. The best code is the code you never wrote.
preline — FAQ
What is the Preline agent skill?+
Preline is an agent skill that brings a complete Tailwind CSS UI component library into AI coding assistants like Cursor, Claude Code, and Gemini CLI. It allows developers to generate and customize UI components, themes, and layouts through natural language interactions with their AI agents.
How do I install the Preline agent skill?+
Install the skill by running 'npx skills add htmlstreamofficial/preline' in your terminal. Your AI coding assistant will then be able to access Preline's component library and documentation to help you build Tailwind CSS interfaces.
Which AI clients and coding assistants work with Preline?+
Preline supports Cursor, Claude Code, and Gemini CLI as agentic coding tools. It can be integrated into any working Tailwind CSS project with Node.js and npm installed.
Do I need API keys or prerequisites to use Preline?+
You need a working Tailwind CSS project with Node.js and npm installed. No API keys are required. The skill integrates with your existing development environment and AI coding assistant.
Is the Preline agent skill free to use?+
Yes, Preline UI is free for personal and commercial projects under the MIT License and Preline UI Fair Use License. A premium Preline Pro version with 740+ additional components and 21 templates is available for purchase.
What components and features does Preline include?+
Preline includes 204 free UI blocks, 27 headless plugins (forms, navigation, overlays, carousels, datepickers), 5 free templates, comprehensive accessibility features, and theme customization tools. Premium versions add 740 more blocks and 21 templates for dashboards, SaaS, and ecommerce.
How do I install preline?+
Open the source repository on GitHub and follow its README. preline is a skill — MCP Agents Market links you directly to the official repo.
Is preline free?+
preline is an open-source project hosted on GitHub. Check the repository for its license and any usage requirements.