Communitygithub.com

giuseppe-trisciuoglio/tailwind-css-patterns

Bietet umfassende Tailwind CSS Utility-First-Styling-Patterns für responsives Design, Layout, Flexbox, Grid, Abstände, Typografie, Farben und moderne CSS-Best-Practices. Verwenden Sie es beim Stylen von React/Vue/Svelte-Komponenten, beim Erstellen responsiver Layouts, bei der Implementierung von Designsystemen oder zur Optimierung des CSS-Workflows.

Was ist tailwind-css-patterns?

Diese Skill bietet einen umfassenden Satz an Tailwind CSS Utility-First-Styling-Patterns, die auf moderne Frontend-Entwicklung zugeschnitten sind. Sie deckt responsive Designstrategien, Layout-Utilities (Flexbox und Grid), Abstands- und Typographiesysteme sowie Farbpaletten ab. Nützlich für Entwickler, die mit React, Vue oder Svelte arbeiten und schnelle, konsistente und skalierbare Benutzeroberflächen erstellen möchten. Die Patterns folgen den Best Practices von Tailwind CSS und ermöglichen eine optimierte CSS-Arbeitsweise ohne umfangreiche benutzerdefinierte Styles.

Funktioniert mit~Claude Code~Codex CLI~Cursor
Part ofDesign & UI
npx skills add https://github.com/giuseppe-trisciuoglio/developer-kit/tree/main/skills/tailwind-css-patterns
Original anzeigen→Alle Skills durchsuchen

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Dokumentation

Was macht tailwind-css-patterns?

Bietet umfassende Tailwind CSS Utility-First-Styling-Patterns inklusive responsivem Design, Layout-Utilities, Flexbox, Grid, Abstände, Typografie, Farben und modernen CSS-Best Practices. Verwenden Sie es beim Stylen von React/Vue/Svelte-Komponenten, beim Erstellen responsiver Layouts, bei der Implementierung von Designsystemen oder zur Optimierung des CSS-Workflows.

Übersicht

Dieser Skill enthält eine Reihe von wiederverwendbaren Tailwind-CSS-Patterns, die dabei helfen, konsistente und flexible Benutzeroberflächen zu erstellen. Sie decken häufig benötigte Aspekte der Frontendentwicklung ab, wie:

  • Responsives Design: Patterns für adaptive Layouts mit Breakpoints.
  • Layout-Utilities: Flexbox- und Grid-Systeme für komplexe Anordnungen.
  • Abstände: Abstands-Patterns für konsistente Margins und Paddings.
  • Typografie: Schriftart-, -größen- und -gewichtszuweisungen.
  • Farben: Farbpaletten und Akzentfarben-Patterns.
  • Best Practices: Hinweise zur Optimierung des CSS-Workflows mit Tailwind.

Voraussetzungen

  • Installiertes Tailwind CSS (Version 3.x oder höher wird empfohlen)
  • Node.js und npm/yarn
  • Grundkenntnisse in Tailwind CSS

Verwendung

Die Patterns können direkt in HTML- oder JSX/TSX-Dateien mit Tailwind-Klassen verwendet werden. Beispiel:

<div class="container mx-auto p-4">
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
    <!-- Inhalt -->
  </div>
</div>

Für Farben und Typografie können Sie die vordefinierten Klassen von Tailwind wie bg-blue-500, text-lg, font-bold etc. nutzen.

Beispiele

Responsives Layout mit Flexbox

<nav class="flex flex-col md:flex-row justify-between items-center p-6">
  <div class="text-xl font-bold">Logo</div>
  <ul class="flex space-x-4">
    <li><a href="#" class="hover:text-blue-500">Start</a></li>
    <li><a href="#" class="hover:text-blue-500">Über uns</a></li>
    <li><a href="#" class="hover:text-blue-500">Kontakt</a></li>
  </ul>
</nav>

Grid-System für Karten

<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6 p-4">
  <div class="bg-white rounded-lg shadow-md p-6">
    <h3 class="text-lg font-semibold">Karte 1</h3>
    <p class="text-gray-600">Inhalt der Karte</p>
  </div>
  <!-- Weitere Karten -->
</div>

Kompatibilität

  • React
  • Vue
  • Svelte
  • Reines HTML/CSS

Lizenz

MIT

Individual skills in this repo

This repo contains 20 individual skills — each has its own dedicated page.

giuseppe-trisciuoglio/aws-lambda-java-integration

Provides AWS Lambda integration patterns for Java with cold start optimization. Use when deploying Java functions to AWS Lambda, choosing between Micronaut and Raw Java approaches, optimizing cold starts below 1 second, configuring API Gateway or ALB integration, or implementing serverless Java applications. Triggers include "create lambda java", "deploy java lambda", "micronaut lambda aws", "java lambda cold start", "aws lambda java performance", "java serverless framework".

giuseppe-trisciuoglio/aws-lambda-php-integration

Provides AWS Lambda integration patterns for PHP with Symfony using the Bref framework. Creates Lambda handler classes, configures runtime layers, sets up SQS/SNS event triggers, implements warm-up strategies, and optimizes cold starts. Use when deploying PHP/Symfony applications to AWS Lambda, configuring API Gateway integration, implementing serverless PHP applications, or optimizing Lambda performance with Bref. Triggers include "create lambda php", "deploy symfony lambda", "bref lambda aws", "php lambda cold start", "aws lambda php performance", "symfony serverless", "php serverless framework".

giuseppe-trisciuoglio/aws-lambda-python-integration

Provides AWS Lambda integration patterns for Python with cold start optimization. Use when deploying Python functions to AWS Lambda, choosing between AWS Chalice and raw Python approaches, optimizing cold starts, configuring API Gateway or ALB integration, or implementing serverless Python applications. Triggers include "create lambda python", "deploy python lambda", "chalice lambda aws", "python lambda cold start", "aws lambda python performance", "python serverless framework".

giuseppe-trisciuoglio/aws-lambda-typescript-integration

Provides AWS Lambda integration patterns for TypeScript with cold start optimization. Use when creating or deploying TypeScript Lambda functions, choosing between NestJS framework and raw TypeScript approaches, optimizing cold starts, configuring API Gateway or ALB integration, or implementing serverless TypeScript applications. Triggers include "create lambda typescript", "deploy typescript lambda", "nestjs lambda aws", "raw typescript lambda", "aws lambda typescript performance".

giuseppe-trisciuoglio/aws-rds-spring-boot-integration

Provides patterns to configure AWS RDS (Aurora, MySQL, PostgreSQL) with Spring Boot applications. Configures HikariCP connection pools, implements read/write splitting, sets up IAM database authentication, enables SSL connections, and integrates with AWS Secrets Manager. Use when setting up RDS connections in Spring Boot, configuring connection pooling, or managing database credentials securely.

giuseppe-trisciuoglio/aws-sdk-java-v2-bedrock

Provides Amazon Bedrock patterns using AWS SDK for Java 2.x. Invokes foundation models (Claude, Llama, Titan), generates text and images, creates embeddings for RAG, streams real-time responses, and configures Spring Boot integration. Use when asking about Bedrock integration, Java SDK for AI models, AWS generative AI, Claude/Llama invocation, embeddings for RAG, or Spring Boot AI setup.

giuseppe-trisciuoglio/aws-sdk-java-v2-core

Provides AWS SDK for Java 2.x client configuration, credential resolution, HTTP client tuning, timeout, retry, and testing patterns. Use when creating or hardening AWS service clients, wiring Spring Boot beans, debugging auth or region issues, or choosing sync vs async SDK usage.

giuseppe-trisciuoglio/aws-sdk-java-v2-dynamodb

Provides Amazon DynamoDB patterns using AWS SDK for Java 2.x. Use when creating, querying, scanning, or performing CRUD operations on DynamoDB tables, working with indexes, batch operations, transactions, or integrating with Spring Boot applications.

giuseppe-trisciuoglio/aws-sdk-java-v2-kms

Provides AWS Key Management Service (KMS) patterns using AWS SDK for Java 2.x. Use when creating/managing encryption keys, encrypting/decrypting data, generating data keys, digital signing, key rotation, or integrating encryption into Spring Boot applications.

giuseppe-trisciuoglio/aws-sdk-java-v2-lambda

Provides AWS Lambda patterns using AWS SDK for Java 2.x. Use when invoking Lambda functions, creating/updating functions, managing function configurations, working with Lambda layers, or integrating Lambda with Spring Boot applications.

giuseppe-trisciuoglio/aws-sdk-java-v2-messaging

Provides AWS messaging patterns using AWS SDK for Java 2.x for SQS queues and SNS topics. Handles sending/receiving messages, FIFO queues, DLQ, subscriptions, and pub/sub patterns. Use when implementing messaging with SQS or SNS.

giuseppe-trisciuoglio/aws-sdk-java-v2-rds

Provides AWS RDS (Relational Database Service) management patterns using AWS SDK for Java 2.x. Use when creating, modifying, monitoring, or managing Amazon RDS database instances, snapshots, parameter groups, and configurations.

giuseppe-trisciuoglio/aws-sdk-java-v2-s3

Provides Amazon S3 patterns and examples using AWS SDK for Java 2.x. Use when working with S3 buckets, uploading/downloading objects, multipart uploads, presigned URLs, S3 Transfer Manager, object operations, or S3-specific configurations.

giuseppe-trisciuoglio/aws-sdk-java-v2-secrets-manager

Provides AWS Secrets Manager patterns for AWS SDK for Java 2.x, including secret retrieval, caching, rotation-aware access, and Spring Boot integration. Use when storing or reading secrets in Java services, replacing hardcoded credentials, or wiring secret-backed configuration into applications.

giuseppe-trisciuoglio/better-auth

Provides Better Auth integration patterns for NestJS backend and Next.js frontend with Drizzle ORM and PostgreSQL. Use when setting up Better Auth with NestJS backend, integrating Next.js App Router frontend, configuring Drizzle ORM schema, implementing social login (GitHub, Google), adding plugins (2FA, Organization, SSO, Magic Link, Passkey), implementing email/password authentication with session management, or creating protected routes and middleware.

giuseppe-trisciuoglio/chunking-strategy

Provides chunking strategies for RAG systems. Generates chunk size recommendations (256-1024 tokens), overlap percentages (10-20%), and semantic boundary detection methods. Validates semantic coherence and evaluates retrieval precision/recall metrics. Use when building retrieval-augmented generation systems, vector databases, or processing large documents.

giuseppe-trisciuoglio/clean-architecture

Provides implementation patterns for Clean Architecture, Hexagonal Architecture (Ports & Adapters), and Domain-Driven Design in Java 21+ Spring Boot 3.5+ applications. Use when structuring layered architectures, separating domain logic from frameworks, implementing ports and adapters, creating entities/value objects/aggregates, or refactoring monolithic codebases for testability and maintainability.

giuseppe-trisciuoglio/docs-updater

Provides automated documentation updates by analyzing git changes between the current branch and the last release tag. Performs git diff analysis to identify modifications, then updates README.md, CHANGELOG.md following Keep a Changelog standard, and discovers documentation folders for contextual updates. Use when preparing a release, maintaining documentation sync, or before creating a pull request. Triggers on "update docs", "update changelog", "sync documentation", "update readme", "prepare release documentation".

giuseppe-trisciuoglio/drawio-logical-diagrams

Creates professional logical flow diagrams and logical system architecture diagrams using draw.io XML format (.drawio files). Use when creating: (1) logical flow diagrams showing data/process flow between system components, (2) logical architecture diagrams representing system structure without cloud provider specifics, (3) BPMN process diagrams, (4) UML diagrams (class, sequence, activity), (5) data flow diagrams (DFD), (6) decision flowcharts, or (7) system interaction diagrams. This skill focuses on generic/abstract representations, not AWS/Azure-specific architectures (use aws-drawio-architecture-diagrams for cloud diagrams).

giuseppe-trisciuoglio/drizzle-orm-patterns

Provides comprehensive Drizzle ORM patterns for schema definition, CRUD operations, relations, queries, transactions, and migrations. Proactively use for any Drizzle ORM development including defining database schemas, writing type-safe queries, implementing relations, managing transactions, and setting up migrations with Drizzle Kit. Supports PostgreSQL, MySQL, SQLite, MSSQL, and CockroachDB.

Verwandte Skills

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community