agentsclimarketplace

Tailwind css

Skill PaulRBerg/agent-skills/skills/tailwind-css

PRB's collection of agent skills

Install
npx -y skills add PaulRBerg/agent-skills --skill tailwind-css

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

SKILL.md

2.7 KB, as published. Nobody here has run it

Tailwind CSS

Style within the installed Tailwind version, existing design tokens, component patterns, and product context.

Authority and Defaults

  • Inspect package versions, CSS entrypoints, theme declarations, shared components, class-merging utilities, and nearby UI before editing. Those are authoritative.
  • Apply this catalog's preferences only where the project is silent. Read references/coding-preferences.md for that fallback style.
  • Prefer existing semantic tokens and components over arbitrary values, new colors, or one-off utilities.
  • Preserve responsive states, interaction states, accessibility, and dark-mode conventions. Do not add decorative UI or redesign beyond the request.
  • Use CSS Modules only when the behavior is materially clearer than utilities; preserve any project-specific Tailwind reference mechanism.

Routing

  • For v4 configuration, migration, removed utilities, variables, gradients, or CSS-first directives, read references/tailwind-v4-rules.md after confirming v4 is installed.
  • For component variants or slots with tailwind-variants, read references/tailwind-variants.md.
  • For tw-animate-css, read references/tw-animate-css.md.
  • For Tailwind ESLint integration, read references/eslint.md.

Do not apply v4 syntax to an older project merely because this skill targets v4. If the installed version differs, use its official documentation or ask whether migration is intended.

Workflow

  1. Define the visual outcome and affected states from the request and product context.
  2. Reuse local tokens, spacing, typography, breakpoints, components, and variant conventions. Make the smallest class/config change that achieves the outcome.
  3. Run the repository's relevant lint/type/build checks.
  4. Render the affected screen or component at representative viewport sizes and inspect it visually, including changed interaction and theme states. Fix visible regressions before completion.

Completion requires code checks plus rendered inspection; textual class review alone is insufficient.

Finish with ### 🎨 Tailwind — ✅ styling updated after edits or ### 🎨 Tailwind — 🔎 inspected, no files written for read-only work, a compact viewport/theme/changed-states/result table, and separate ### 🧪 Code checks and ### 🔎 Rendered inspection evidence. Add ### ⚠️ Remaining only when non-empty. Do not inject decorative emoji into source classes, product copy, or snapshots unless the request calls for it; keep commands and diagnostics exact.

Keep looking

Skills are one crate of 328,083. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.