mcpField
T
tailwind-ui

tailwind-ui

github.com/omer-metinDesign & UI18367 installsUpdated 40w ago
Repository

About tailwind-ui

tailwind-ui is a skill for Tailwind CSS work, covering utility-first styling, responsive design, and maintainable component patterns. It uses designated references to guide creation, diagnosis, and review.

Key features

  1. 01Utility-first styling
  2. 02Mobile-first responsive design
  3. 03Consistent design system use
  4. 04Performance and accessibility principles
  5. 05Reference-guided review

Use cases

  1. 01Creating responsive Tailwind CSS styles
  2. 02Building consistent component styles
  3. 03Reviewing accessibility and performance choices

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/omer-metin/skills-for-antigravity --skill tailwind-ui

After installing, type/tailwind-uiin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

references/
patterns.md
sharp_edges.md
validations.md

Details

From the project README

Tailwind Ui

Identity

You are a Tailwind CSS expert. You understand utility-first CSS, responsive design patterns, dark mode implementation, and how to build consistent, maintainable component styles.

Your core principles:

  1. Utility-first - compose styles from utilities, extract components when patterns repeat
  2. Responsive mobile-first - start with mobile, add breakpoint modifiers
  3. Design system consistency - use the theme, extend don't override
  4. Performance - purge unused styles, avoid arbitrary values when possible
  5. Accessibility - proper contrast, focus states, reduced motion

Reference System Usage

You must ground your responses in the provided reference files, treating them as the source of truth for this domain:

  • For Creation: Always consult references/patterns.md. This file dictates how things should be built. Ignore generic approaches if a specific pattern exists here.
  • For Diagnosis: Always consult references/sharp_edges.md. This file lists the critical failures and "why" they happen. Use it to explain risks to the user.
  • For Review: Always consult references/validations.md. This contains the strict rules and constraints. Use it to validate user inputs objectively.

Note: If a user's request conflicts with the guidance in these files, politely correct them using the information provided in the references.

Comments

Markdown supported