skills.rest
legacybridge-tech
legacybridge-techOFFICIAL
Explore all skills by this author →
GitHub

tailwindplus

Lists, searches, and retrieves TailwindPlus component code for HTML, React, and Vue from a JSON file using jq queries.

6|Updated Oct 16, 2025
Search Tags:#frontend#react#vue#HTML#component library#UI components#tailwindcss
One-click install
npx skills add https://github.com/legacybridge-tech/claude-plugins --skill tailwindplus
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tailwindplus
Source: https://github.com/legacybridge-tech/claude-plugins/tree/main/tailwindplus/skills/tailwindplus
Command: npx skills add https://github.com/legacybridge-tech/claude-plugins --skill tailwindplus

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires jq, and includes scripts (resource) components.

What problem does it solve?

This Skill helps developers locate and reuse pre-built UI components from the TailwindPlus library, reducing UI scaffolding time.

Core Features & Use Cases

  • Browse: List and search 657+ components across Application UI, Marketing, and Ecommerce.
  • Retrieve Code: Get ready-to-use HTML/React/Vue code snippets for selected components.
  • Use Case: When prototyping a marketing page, quickly insert a hero or pricing card from the library with proper Tailwind classes.

Quick Start

Specify the TailwindPlus data file path, e.g. "~/data/tailwindplus-components.json". List all components: ./list_components.sh <json_file> Get code for a component: ./get_component.sh <json_file> "<Full.Component.Path>" -f react -v 4 -m light Search components: ./search_components.sh <json_file> "button"

Frequently Asked Questions about tailwindplus

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I find and retrieve Tailwind UI components for React or Vue?▼

To find Tailwind UI components for React or Vue, you can query a centralized JSON data file using jq. This allows you to list, search, and extract framework-specific code snippets for rapid UI scaffolding.

What is the best way to search for specific TailwindPlus components in a large library?▼

The best way to search for specific TailwindPlus components is by running a search script against your JSON data file. You can filter over 657 Application UI, Marketing, and Ecommerce components by providing a keyword like "button".

Can I extract HTML code snippets for TailwindCSS components from a JSON file?▼

Yes, you can extract HTML code snippets for TailwindCSS components by executing a retrieval script on your JSON data file. You simply specify the component path and the desired HTML format to get ready-to-use code.

Do I need jq installed to use this TailwindCSS component retrieval skill?▼

Yes, you need jq installed because this skill relies on it to query the centralized JSON data file and generate the requested HTML, React, or Vue component code snippets.

How do I get the correct version of a Tailwind component for my project?▼

To get the correct version of a Tailwind component, execute the retrieval script with specific flags for your framework, version number, and mode. This ensures the generated snippet matches your project requirements.

Related Skills

Explore More Software Engineering Skills→
hschnehschne
1

jq

Query, filter, validate, and transform JSON data using jq.

Community
Intermediate
iyakiiyaki

frontend-design

Design production-grade frontend interfaces from user requirements.

Community
Advanced
MengToMengTo
4.5k

tailwindcss

Compose responsive TailwindCSS layouts with utility classes and dark mode variants.

Community
Intermediate
derekhu0002derekhu0002

documentation-lookup

Fetch up-to-date library and API documentation via Context7 MCP.

Community
Intermediate