Exécutez n'importe quel Skill dans Manus
en un clic

Exécutez n'importe quel Skill dans Manus en un clic

tailwind-css-patterns

Étoiles0

Forks0

Mis à jour25 mars 2026 à 00:21

Comprehensive Tailwind CSS utility-first styling patterns including responsive design, layout utilities, flexbox, grid, spacing, typography, colors, and modern CSS best practices. Use when styling React/Vue/Svelte components, building responsive layouts, implementing design systems, or optimizing CSS workflow.

Installation

Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.

Exécuter dans Manus

Source

ihj04982

ihj04982/my-cursor-settings

Ouvrir le dépôt GitHub Voir les dépôts du créateur

Téléchargement

Exécuter dans Manus

Métiers associésSOC

Basé sur la classification professionnelle SOC

Développeurs webProfessions informatiques et mathématiques·SOC 15-1254

Explorateur de fichiers

2 fichiers

SKILL.md

readonly

name	tailwind-css-patterns
description	Comprehensive Tailwind CSS utility-first styling patterns including responsive design, layout utilities, flexbox, grid, spacing, typography, colors, and modern CSS best practices. Use when styling React/Vue/Svelte components, building responsive layouts, implementing design systems, or optimizing CSS workflow.
language	html,tsx,jsx,vue,svelte
framework	tailwindcss
license	MIT

Tailwind CSS Development Patterns

Expert guide for building modern, responsive UIs with Tailwind CSS. Covers v4.1+ (CSS-first config, custom utilities).

When to Use

Styling React/HTML components with utility classes
Building responsive layouts with breakpoints
Flexbox and grid layouts, spacing, typography, colors
Custom design systems, mobile-first, dark mode

Core Concepts

Utility-first: Apply styles in markup (e.g. bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded).

Responsive: Mobile-first breakpoints: sm: 640px, md: 768px, lg: 1024px, xl: 1280px, 2xl: 1536px. Example: w-full md:w-1/2 lg:w-1/3.

Additional Resources

For layout utilities (flexbox, grid), spacing, typography, colors, component patterns, responsive patterns, dark mode, animations, and performance optimization, see reference.md.

Plus depuis ce dépôt

même dépôt

frontend-skill

ihj04982/my-cursor-settings

Use when the task asks for a visually strong landing page, website, app, prototype, demo, or game UI. This skill enforces restrained composition, image-led hierarchy, cohesive content structure, and tasteful motion while avoiding generic cards, weak branding, and UI clutter.

2026-04-140

playwright-cli

ihj04982/my-cursor-settings

Automate browser interactions, test web pages and work with Playwright tests.

2026-04-140

vitest-testing-skills

ihj04982/my-cursor-settings

Advanced guidelines and best practices for writing tests using Vitest. Apply this skill when generating, reviewing, or refactoring test codes to prevent common pitfalls and ensure high performance.

2026-04-140

design-guide-1536x864-touch

ihj04982/my-cursor-settings

Fixed 1536×864 touch viewport — grid, margins, 8px rhythm, touch targets, typography, components, vertical rhythm, and QA checklist for panel/kiosk/HMI. Use when designing or implementing UIs for this resolution with touch-first input.

2026-03-260

agent-orchestration

ihj04982/my-cursor-settings

Lists available Cursor agents (planner, architect, tdd-guide, code-reviewer, security-reviewer, build-error-resolver, e2e-runner, refactor-cleaner, doc-updater) and when to use each. Use when the user asks which agent to use, how to delegate work, or what agents are available.

2026-03-250

async-parallelization-patterns

ihj04982/my-cursor-settings

Async parallelization patterns — Promise.all, waterfall prevention, dependency-based parallelism, RSC component composition, deferred await. Use when optimizing async operations, API routes, or data fetching.

2026-03-250

name	tailwind-css-patterns
description	Comprehensive Tailwind CSS utility-first styling patterns including responsive design, layout utilities, flexbox, grid, spacing, typography, colors, and modern CSS best practices. Use when styling React/Vue/Svelte components, building responsive layouts, implementing design systems, or optimizing CSS workflow.
language	html,tsx,jsx,vue,svelte
framework	tailwindcss
license	MIT

Tailwind CSS Development Patterns

Expert guide for building modern, responsive UIs with Tailwind CSS. Covers v4.1+ (CSS-first config, custom utilities).

When to Use

Styling React/HTML components with utility classes
Building responsive layouts with breakpoints
Flexbox and grid layouts, spacing, typography, colors
Custom design systems, mobile-first, dark mode

Core Concepts

Utility-first: Apply styles in markup (e.g. bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded).

Responsive: Mobile-first breakpoints: sm: 640px, md: 768px, lg: 1024px, xl: 1280px, 2xl: 1536px. Example: w-full md:w-1/2 lg:w-1/3.

Additional Resources

For layout utilities (flexbox, grid), spacing, typography, colors, component patterns, responsive patterns, dark mode, animations, and performance optimization, see reference.md.