Menu
Create visually impressive HTML showcases using Tailwind CSS for product demos, landing pages, and social media
The review-first prompt is selected by default. You can switch to a direct command or download a local copy.
Read SKILL.md and any companion files shown by SkillsMP before deciding whether to install.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
A direct command skips the review prompt. Inspect the source before running it.
npx skills add https://github.com/trungdo9/ClauKit --skill show-offThe command stays on one line. Scroll horizontally to inspect it before copying.
Prefer a local copy? Download the files currently available to SkillsMP.
WordPress REST API client — connect to a live WP site to publish/update posts & pages (draft→publish), upload media, manage categories/tags, write Yoast/RankMath SEO meta, and audit existing content. Use when pushing generated marketing content to WordPress or auditing live WP articles. Auth via Application Passwords (env vars only). Consumer/client skill (not for building WP plugin endpoints).
Conversion Rate Optimization — landing pages, signup flows, popups, A/B tests. 25-point framework.
End-to-end SEO article production pipeline — from keyword strategy to published post. Standardizes a 6-stage flow (research/strategy → competitor analysis + outline → section-by-section writing → on-page optimization → media → internal-link + publish) into a Claude-native workflow. Ported from an n8n production pipeline. Use to plan, write, optimize, and publish complete SEO articles (single or at scale), incl. WordPress. State tracked via a content pipeline table (Supabase or a local plan file).
Based on SOC occupation classification
Showing SKILL.md
| name | show-off |
| description | Create visually impressive HTML showcases using Tailwind CSS for product demos, landing pages, and social media |
| category | Documentation & Content |
| status | active |
Build stunning single-page showcases with Tailwind CSS utility classes—no design skills needed. Combines pre-built component patterns (cards, hero sections, feature grids) with custom branding to create shareable, demo-ready HTML that impresses on GitHub Pages, product hunts, or social media.
Do NOT use when: Creating long-form content (use blogs instead), building complex applications (not SPAs), or needing backend integration—static HTML only.
<iframe> or embedded playersInstead of writing CSS, compose styles by stacking classes: <div class="bg-blue-600 text-white rounded-lg p-8 hover:shadow-lg transition-shadow">. Tailwind generates only the CSS you use—fast and minimal.
Hero sections (headline + CTA + background image), feature grids (3-col cards with icons), testimonial carousels, pricing tables, footer navigation. Mix and match pre-built patterns instead of designing from scratch.
Tailwind outputs plain HTML/CSS—fast to load, works offline, no JavaScript framework required. Ensure color contrast (WCAG AA), semantic HTML (<button> not <div>), and alt text for images.
<!-- Hero Section -->
<section class="bg-gradient-to-r from-blue-600 to-purple-600 text-white py-20">
<div class="max-w-4xl mx-auto text-center">
<h1 class="text-5xl font-bold mb-4">Ship 10x Faster</h1>
<p class="text-xl mb-8">Deploy with confidence</p>
<button class="bg-white text-blue-600 px-8 py-3 rounded-lg font-bold hover:bg-gray-100">
Get Started
</button>
</div>
</section>
<!-- Feature Grid -->
<section class="grid grid-cols-3 gap-8 py-20">
<div class="p-6 border rounded-lg hover:shadow-lg transition-shadow">
<h3 class="font-bold mb-2">Fast</h3>
<p>Deploy in 60 seconds</p>
</div>
<!-- Repeat card pattern -->
</section>
md:, lg: breakpoints)