AgentSkillsCN

tailwindplus

访问TailwindPlus UI组件库——在HTML/React/Vue环境中，以Tailwind CSS v3/v4为基础，搜索、列出并获取用于营销、应用UI以及电商领域的组件代码。

SKILL.md
--- frontmatter
name: tailwindplus
description: 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

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

bash
./info.sh <json_file>

Returns metadata about the TailwindPlus data file.

List All Components

bash
./list_components.sh <json_file>

Returns all component names organized by category.

Search Components

bash
./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

bash
./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

  1. •Application UI - Forms, navigation, data display, overlays, layout components
  2. •Marketing - Hero sections, features, pricing, testimonials, CTAs, footers
  3. •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:

  1. •First search to find available components
  2. •Get the exact component code with proper parameters

Example workflow for finding a button component:

bash
# 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