Skill

tailwindplus

Access TailwindPlus UI component library - search, list, and retrieve code for Marketing, Application UI, and eCommerce components in HTML/React/Vue with Tailwind CSS v3/v4

npx claudepluginhub legacybridge-tech/claude-plugins --plugin tailwindplus

Tool Access

This skill uses the workspace's default tool permissions.

Preview

This skill provides access to the TailwindPlus UI component library with 657+ professional components.

Supporting Assets

scripts/get_component.shscripts/info.shscripts/list_components.shscripts/search_components.sh

SKILL.md

Similar Skills

cache-components

139.2k

Guides Next.js Cache Components and Partial Prerendering (PPR) with cacheComponents enabled. Implements 'use cache', cacheLife(), cacheTag(), revalidateTag(), static/dynamic optimization, and cache debugging.

cache-components

mcp-builder

124.2k

Guides building MCP servers enabling LLMs to interact with external services via tools. Covers best practices, TypeScript/Node (MCP SDK), Python (FastMCP).

9 files

anthropics-skills-13

canvas-design

124.2k

Generates original PNG/PDF visual art via design philosophy manifestos for posters, graphics, and static designs on user request.

20 files

anthropics-skills-13

Stats

Parent Repo Stars3

Parent Repo Forks0

Last CommitJan 22, 2026

Actions

View Source View Plugin View on GitHub View README

TailwindPlus Component Browser

This skill provides access to the TailwindPlus UI component library with 657+ professional components.

Setup Required

Before using this skill, you need to specify the location of your TailwindPlus JSON data file. Tell Claude the path to your tailwindplus-components-*.json file and Claude will use it in the commands.

Example: "My TailwindPlus data is at ~/data/tailwindplus-components-2026-01-08.json"

Available Commands

All commands require the JSON data file path as the first argument.

Get Component Info

./info.sh <json_file>

Returns metadata about the TailwindPlus data file.

List All Components

./list_components.sh <json_file>

Returns all component names organized by category.

Search Components

./search_components.sh <json_file> "hero"
./search_components.sh <json_file> "pricing table"

Search for components by keyword (case-insensitive, supports multi-word).

Get Component Code

./get_component.sh <json_file> "Application UI.Forms.Input Groups.Simple" -f html -v 4 -m light
./get_component.sh <json_file> "Ecommerce.Components.Product Overviews.With image gallery and expandable details" -f react -v 4 -m none

Required Parameters:

json_file: Path to the TailwindPlus JSON data file
full_name: The complete dotted path (e.g., "Application UI.Forms.Input Groups.Simple")
-f, --framework: html, react, or vue
-v, --version: 3 or 4 (Tailwind CSS version)
-m, --mode: Theme mode

Mode Requirements (CRITICAL):

Application UI and Marketing components: use light, dark, or system
eCommerce components: use none only

Component Categories

Application UI - Forms, navigation, data display, overlays, layout components
Marketing - Hero sections, features, pricing, testimonials, CTAs, footers
Ecommerce - Product lists, shopping carts, checkout forms, order history

Framework Options

html - Pure HTML with Tailwind CSS classes
react - React/JSX components
vue - Vue.js components

Usage Examples

When user asks for a component:

First search to find available components
Get the exact component code with proper parameters

Example workflow for finding a button component:

# Step 1: Search
./search_components.sh <json_file> "button"
# Step 2: Get the component
./get_component.sh <json_file> "Application UI.Elements.Buttons.Primary" -f react -v 4 -m light