ReddRadar
Agent skill
tailwind-patterns
Quick reference for Tailwind CSS utility patterns, responsive design, and configuration. Triggers on: tailwind, utility classes, responsive design, tailwind config, dark mode css, tw classes.
Install this agent skill to your Project
npx add-skill https://github.com/aiskillstore/marketplace/tree/main/skills/0xdarkmatter/tailwind-patterns
SKILL.md
Tailwind Patterns
Quick reference for Tailwind CSS utility patterns.
Responsive Breakpoints
| Prefix | Min Width |
|---|---|
sm: |
640px |
md: |
768px |
lg: |
1024px |
xl: |
1280px |
2xl: |
1536px |
<div class="w-full md:w-1/2 lg:w-1/3">
<!-- Full on mobile, half on tablet, third on desktop -->
</div>
Common Layout Patterns
<!-- Centered container -->
<div class="container mx-auto px-4">
<!-- Flexbox row -->
<div class="flex items-center justify-between gap-4">
<!-- Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Stack -->
<div class="flex flex-col gap-4">
Card
<div class="bg-white rounded-lg shadow-md p-6">
<h3 class="text-lg font-semibold mb-2">Title</h3>
<p class="text-gray-600">Content</p>
</div>
Button
<button class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors">
Button
</button>
Form Input
<input type="text"
class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
placeholder="Enter text">
Dark Mode
<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white">
// tailwind.config.js
module.exports = { darkMode: 'class' }
State Modifiers
| Modifier | Triggers On |
|---|---|
hover: |
Mouse hover |
focus: |
Element focused |
active: |
Being clicked |
disabled: |
Disabled state |
group-hover: |
Parent hovered |
Spacing Scale
| Class | Size |
|---|---|
p-1 |
4px |
p-2 |
8px |
p-4 |
16px |
p-6 |
24px |
p-8 |
32px |
Arbitrary Values
<div class="w-[137px] h-[calc(100vh-64px)]">
Additional Resources
For detailed patterns, load:
./references/component-patterns.md- Navbar, cards, forms, alerts, loading states
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
aiskillstore/marketplace
perigon-backend
Perigon ASP.NET Core + EF Core + Aspire conventions
aiskillstore/marketplace
perigon-agent
Pointers for Copilot/agents to apply Perigon conventions
aiskillstore/marketplace
perigon-angular
Angular 21+ standalone/Material/signal conventions for Perigon WebApp
aiskillstore/marketplace
fastapi-mastery
Comprehensive FastAPI development skill covering REST API creation, routing, request/response handling, validation, authentication, database integration, middleware, and deployment. Use when working with FastAPI projects, building APIs, implementing CRUD operations, setting up authentication/authorization, integrating databases (SQL/NoSQL), adding middleware, handling WebSockets, or deploying FastAPI applications. Triggered by requests involving .py files with FastAPI code, API endpoint creation, Pydantic models, or FastAPI-specific features.
aiskillstore/marketplace
context7-efficient
Token-efficient library documentation fetcher using Context7 MCP with 86.8% token savings through intelligent shell pipeline filtering. Fetches code examples, API references, and best practices for JavaScript, Python, Go, Rust, and other libraries. Use when users ask about library documentation, need code examples, want API usage patterns, are learning a new framework, need syntax reference, or troubleshooting with library-specific information. Triggers include questions like "Show me React hooks", "How do I use Prisma", "What's the Next.js routing syntax", or any request for library/framework documentation.
aiskillstore/marketplace
browser-use
Browser automation using Playwright MCP. Navigate websites, fill forms, click elements, take screenshots, and extract data. Use when tasks require web browsing, form submission, web scraping, UI testing, or any browser interaction.
Didn't find tool you were looking for?