Tailwind CSS Best Practices
Skill GeverifieerdTailwind CSS patterns and conventions for frontend apps. Use when writing component styles, layouts, or working with CSS classes.
This skill provides a detailed set of rules and patterns for using Tailwind CSS effectively in frontend applications. It covers critical areas like layout utilities, color schemes, and className handling, with clear code examples and anti-patterns. The skill promotes consistency and maintainability in styling by leveraging custom stack utilities and proper prop typing.
Maintenance
- warning:Commit recencyThere are no commits in the last 12 months, indicating potential unmaintained status.
Versioning
- warning:Release ManagementNo version information is present in any manifest, releases, or CHANGELOG, and installation instructions reference 'main'.
Installatie
npx skills add sergiodxa/agent-skillsVoert de Vercel skills CLI (skills.sh) uit via npx — vereist Node.js lokaal en minstens één geïnstalleerde skills-compatibele agent (Claude Code, Cursor, Codex, …). Gaat ervan uit dat de repo het agentskills.io-formaat volgt.
Vergelijkbare extensies
Frontend Design Skill
95Transform UI style requirements into production-ready frontend code with systematic design tokens, accessibility compliance, and creative execution. Use when building websites, web applications, React/Vue components, dashboards, landing pages, or any web UI requiring both design consistency and aesthetic quality.
shadcn/Tailwind Layouts
95Generate correct shadcn/Tailwind layouts by applying CSS mental models. This skill should be used when the user asks to 'create a shadcn layout', 'fix layout issues', 'debug CSS height problems', 'make scrolling work', or has issues with Tailwind flex/grid. Keywords: shadcn, Tailwind, layout, CSS, flex, grid, height, scroll, overflow.
Frontend Design
99Create distinctive, production-grade frontend interfaces with high design quality. Provides analysis tools for auditing existing designs and generation tools for creating color palettes, typography systems, design tokens, and component templates. Supports React, Vue, Svelte, and vanilla HTML/CSS. Use when building web components, pages, or applications. Keywords: design, UI, frontend, CSS, components, palette, typography, tokens, accessibility.
Frontend Design
98Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
React Router Best Practices
98React Router performance and architecture patterns. Use when writing loaders, actions, forms, routes, or working with React Router data fetching. Triggers on tasks involving React Router routes, data loading, form handling, or route organization.
Modern CSS
96Proactively apply when creating design systems, component libraries, or any frontend application. Triggers on CSS Grid, Subgrid, Flexbox, Container Queries, :has(), @layer, @scope, CSS nesting, @property, @function, if(), oklch, color-mix, light-dark, relative color, @starting-style, scroll-driven animations, view transitions, anchor positioning, popover, customizable select, content-visibility, logical properties, text-wrap, interpolate-size, clamp, field-sizing, modern CSS, CSS architecture, responsive design, dark mode, theming, design tokens, cascade layers. Use when writing CSS for any web project, choosing layout approaches, building responsive components, implementing dark mode or theming, creating animations or transitions, styling form elements, or modernizing legacy stylesheets. Modern CSS features and best practices for building interfaces with pure native CSS.