Use when writing HTML/JSX with Tailwind CSS for common UI patterns like heroes, forms, lists, navbars, modals, cards, or any standard web component
/plugin marketplace add alizain/wizard-wheezes/plugin install utils@eightzerothreeThis skill inherits all available tools. When active, it can use any tool Claude has access to.
assets/code/v3/html/application-ui/action-panels/simple-well.htmlassets/code/v3/html/application-ui/action-panels/simple.htmlassets/code/v3/html/application-ui/action-panels/with-button-at-top-right.htmlassets/code/v3/html/application-ui/action-panels/with-button-on-right.htmlassets/code/v3/html/application-ui/action-panels/with-input.htmlassets/code/v3/html/application-ui/action-panels/with-link.htmlassets/code/v3/html/application-ui/action-panels/with-toggle.htmlassets/code/v3/html/application-ui/action-panels/with-well.htmlassets/code/v3/html/application-ui/alerts/with-accent-border.htmlassets/code/v3/html/application-ui/alerts/with-actions.htmlassets/code/v3/html/application-ui/alerts/with-description.htmlassets/code/v3/html/application-ui/alerts/with-dismiss-button.htmlassets/code/v3/html/application-ui/alerts/with-link-on-right.htmlassets/code/v3/html/application-ui/alerts/with-list.htmlassets/code/v3/html/application-ui/avatars/avatar-group-stacked-bottom-to-top.htmlassets/code/v3/html/application-ui/avatars/avatar-group-stacked-top-to-bottom.htmlassets/code/v3/html/application-ui/avatars/circular-avatars-with-bottom-notification.htmlassets/code/v3/html/application-ui/avatars/circular-avatars-with-placeholder-icon.htmlassets/code/v3/html/application-ui/avatars/circular-avatars-with-placeholder-initials.htmlassets/code/v3/html/application-ui/avatars/circular-avatars-with-top-notification.htmlAlways search templates before writing Tailwind UI code from scratch.
You have access to 657 hand-crafted Tailwind UI templates in assets/. These templates include dark mode, accessibility, polish, and edge case handling that you won't replicate from scratch.
Use this skill when:
Skip for:
# Find templates by keyword
grep -i "hero" assets/index.jsonl | jq .
# Browse by category
grep '"category":"marketing"' assets/index.jsonl | jq -r '.subsection' | sort | uniq
# Find specific component type
grep -i "stacked.*list" assets/index.jsonl | jq .
Category (3): marketing, application-ui, ecommerce
└─ Section: Page Sections, Elements, Forms, etc.
└─ Subsection: Hero Sections, Feature Sections, Stacked Lists, etc.
└─ Component: "Simple centered", "Split with screenshot", etc.
assets/code/{version}/{language}/{category}/{subsection}/{slug}.{ext}
Examples:
assets/code/v4/html/marketing/hero-sections/simple-centered.html
assets/code/v4/react/application-ui/stacked-lists/with-badges.tsx
assets/code/v4/vue/ecommerce/product-pages/with-image-grid.vue
Always prefer v4 (latest Tailwind CSS). Use v3 only for legacy projects.
| Mode | When | How |
|---|---|---|
| Verbatim | Template matches exactly | Copy template, swap placeholder content |
| Modify | Template is close | Start from template, adjust structure/styling |
| Synthesize | Need combination | Study 2-3 similar templates, combine patterns |
| Learn & Create | No exact match | Find closest templates, extract patterns, apply to novel component |
Never write truly from scratch. Even for novel components, find inspiration and patterns in existing templates. This ensures your code is consistent with Tailwind UI conventions even when no template exists.
Tailwind UI templates include polish you'll lose if writing from scratch:
dark: variants throughoutaria-* attributes, semantic HTML, focus statessm:, md:, lg: breakpointsfocus-visible:outline-2 focus-visible:outline-offset-2text-pretty, shadow-xs, gradient masks, decorative SVGsIf you catch yourself doing any of these, STOP and search templates:
657 templates exist. One is probably close, or several can teach you the patterns.