npx claudepluginhub giuseppe-trisciuoglio/developer-kit --plugin developer-kit-typescriptThis skill is limited to using the following tools:
references/accessibility.mdreferences/animations.mdreferences/component-patterns.mdreferences/configuration.mdreferences/layout-patterns.mdreferences/performance.mdreferences/reference.mdreferences/responsive-design.mdSearches, retrieves, and installs Agent Skills from prompts.chat registry using MCP tools like search_skills and get_skill. Activates for finding skills, browsing catalogs, or extending Claude.
Searches prompts.chat for AI prompt templates by keyword or category, retrieves by ID with variable handling, and improves prompts via AI. Use for discovering or enhancing prompts.
Guides agent creation for Claude Code plugins with file templates, frontmatter specs (name, description, model), triggering examples, system prompts, and best practices.
Expert guide for building modern, responsive user interfaces with Tailwind CSS utility-first framework. Covers v4.1+ features including CSS-first configuration, custom utilities, and enhanced developer experience.
Provides actionable patterns for responsive, accessible UIs with Tailwind CSS v4.1+. Covers utility composition, dark mode, component patterns, and performance optimization.
| Prefix | Min Width | Description |
|---|---|---|
sm: | 640px | Small screens |
md: | 768px | Tablets |
lg: | 1024px | Desktops |
xl: | 1280px | Large screens |
2xl: | 1536px | Extra large |
<!-- Center content -->
<div class="flex items-center justify-center min-h-screen">
Content
</div>
<!-- Responsive grid -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
<!-- Items -->
</div>
<!-- Card component -->
<div class="bg-white rounded-lg shadow-lg p-6">
<h3 class="text-xl font-bold">Title</h3>
<p class="text-gray-600">Description</p>
</div>
sm:, md:, lg:) for larger screenstailwind.config.js or using @themefunction ProductCard({ product }: { product: Product }) {
return (
<div className="bg-white rounded-lg shadow-lg overflow-hidden sm:flex">
<img className="h-48 w-full object-cover sm:h-auto sm:w-48" src={product.image} />
<div className="p-6">
<h3 className="text-lg font-semibold">{product.name}</h3>
<button className="mt-4 px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700">
Add to Cart
</button>
</div>
</div>
);
}
<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white">
<h1 class="dark:text-white">Title</h1>
</div>
<input
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
placeholder="you@example.com"
/>
@apply for maintainabilitycontent: [] in confignpm run build to regenerate purged CSSnpx tailwindcss -o with --watch flag for live updatesmd:flex not flex md:flex)darkMode: 'class' or 'media' is set correctlydocument.documentElement.classList.toggle('dark') for class strategydark class to <html> before body renders@apply with complex selectorsclass or media strategy)