tailwindcss skills

tutur3u/platform

Skill Claude CodeCodex

Create a new Tambo generative UI app from scratch. Use for brand-new projects where users describe UI in natural language. For existing apps, use build-with-tambo.

tutur3u/platform

Skill Claude CodeCodex

Guidance for a developer's first steps on Google Cloud, covering account creation, billing setup, project management, and deploying a first resource.

tutur3u/platform

Skill Claude CodeCodex

Manages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI. Provides project context, component docs, and usage examples. Applies when working with shadcn/ui, component registries, presets, --preset codes, or any project with a components.json file. Also triggers for…

pedrobalsa/balsa-ui

Skill Claude CodeCodex

Create distinctive, production-ready Balsa UI templates, blocks, showcases, demos, and visually led Vue surfaces without generic AI-template aesthetics. Use with the balsa-ui skill when generating a new page-level composition, beautifying a Balsa interface, establishing art direction, or producing a polished one-shot…

pedrobalsa/balsa-ui

Skill Claude CodeCodex

Build, fix, review, install, and validate Balsa UI open-code components for Vue applications. Use for focused Balsa repository maintenance, Vue UI built from Balsa components, compositions or blocks, semantic tokens, registry metadata, accessibility behavior, and installed-source update safety. Scale the workflow from…

enisbu/tw-easing-gradients

Skill Claude CodeCodex

Replace Tailwind CSS linear gradients with smooth eased gradients using tw-easing-gradients. Use when upgrading bg-gradient-to-, creating fading backgrounds, or smooth color transitions.

adrianhajdin/skild

Skill Claude CodeCodex

Develop AI-powered applications using Genkit in Node.js/TypeScript. Use when the user asks about Genkit, AI agents, flows, or tools in JavaScript/TypeScript, or when encountering Genkit errors, validation issues, type errors, or API problems.

adrianhajdin/skild

Skill Claude CodeCodex

Official skill for integrating Firebase AI Logic (Gemini API) into web applications. Covers setup, multimodal inference, structured output, and security.

adrianhajdin/skild

Skill Claude CodeCodex

The definitive, foundational skill for ANY Firebase task. Make sure to ALWAYS use this skill whenever the user mentions or interacts with Firebase, even if they do not explicitly ask for it. This skill covers everything from the bare minimum INITIAL setup (Node.js setup, Firebase CLI installation, first-time login) to…

fluttersdk/wind

Skill Claude CodeCodex

Utility-first Flutter styling. Every visual decision lives in a className: String? parsed at build time into an immutable WindStyle and composed into a native Flutter widget tree. Tailwind syntax (flex, p-4, dark:bg-gray-800, hover:shadow-lg), Flutter physics.

electrikhq/slate

Skill Claude CodeCodexCursor

Build Laravel Blade UI with Electrik Slate 3.x and optional slate-blocks. Use when writing x-slate or x-slate-block components, Livewire forms, tokens, toasts, blocks, or when the user mentions Slate, electrik/slate, electrik/slate-blocks, or slate.electrik.dev.

Dwsy/agent

Skill Claude CodeCodex

Comprehensive project planning and documentation generator for software projects. Creates structured requirements documents, system design documents, and task breakdown plans with implementation tracking. Use when starting a new project, defining specifications, creating technical designs, or breaking down complex…

Dwsy/agent

Skill Claude CodeCodex

A skill for creating, editing, and benchmarking Pi skills stored in SKILL.md files. Benchmarking means testing a skill against examples to measure and improve its behavior.

Dwsy/agent

Skill Claude CodeCodex

Use when designing, architecting, or planning a new system from requirements or ideas - transforms concepts into navigable design catalog using EventStorming methodology, Mermaid diagrams, and progressive elaboration through 5 phases (Requirements, Big Picture, Processes, Data/Flows, Integration).

aahil62/unslop

Skill Claude CodeCodex

Part of unslop

Score an existing React + Tailwind site against the anti-slop checklist and produce DESIGN-AUDIT.md with evidence. Use when the user says their site "looks AI-generated", "looks generic", "feels off", asks "why is my site ugly", or wants a design audit/score before improving it. Read-only — never edits source.

aahil62/unslop

Skill Claude CodeCodex

Part of unslop

Interview the user about taste, brand, and audience, then synthesize a custom design lane (LANE.md + tokens) for their React + Tailwind site. Use when the user wants a design direction, says "make it look premium/professional/not AI-generated", or after /unslop:audit before any re-theming. No code changes — output is…

aahil62/unslop

Skill Claude CodeCodex

Part of unslop

Systematically apply an approved design lane (LANE.md) to a React + Tailwind site — tokens first, then section-by-section, with build + screenshot verification after every pass. Use when the user says "retheme", "apply the lane", "make it match the design", or after /unslop:interview produced an approved LANE.md.

ofershap/tailwind-best-practices

Skill Claude CodeCodex

Part of tailwind-best-practices

Stop your AI agent from generating Tailwind CSS v3 code. Rules for v4 syntax, CSS-first config, modern utility patterns, and common anti-patterns.

voidmatcha/ui-clone-skills

Skill Claude CodeCodex

Part of ui-clone-skills

Local-only regression / benchmark skill for ui-clone-skills maintainers. Drives the standard ui-reverse-engineering pipeline against the canonical reference site (https://realfood.gov) and records AE/SSIM, iteration count, gate fail counts, and outcome to benchmark/history.csv so prompt / sub-doc / model-version drift…

voidmatcha/ui-clone-skills

Skill Claude CodeCodex

Part of ui-clone-skills

Capture website visuals and behavior: screenshots, scroll, hover, mouse, parallax, timers, and comparison evidence.

voidmatcha/ui-clone-skills

Skill Claude CodeCodex

Part of ui-clone-skills

Compare reference vs implementation with AE/SSIM/pixel diff; find visual mismatches when UI looks off or doesn't match.

jonathanmoore/kona-theme

Skill Claude CodeCodex

WCAG 2.2 accessibility patterns for Shopify Liquid themes. Covers e-commerce components — product cards, carousels, cart drawers, price display, forms, filters, and modals. Use when building accessible theme components, fixing accessibility issues, or reviewing ARIA patterns in .liquid files.

jonathanmoore/kona-theme

Skill Claude CodeCodex

Interactive guided workflow for creating new Shopify theme components — sections, blocks, and snippets — with correct schema, translation keys, LiquidDoc, accessibility, and Kona conventions. Invoke with: /shopify-liquid-kona-new [section|block|snippet] [name].

jonathanmoore/kona-theme

Skill Claude CodeCodex

CSS, JavaScript, and HTML coding standards for this Kona theme. Covers Tailwind CSS v4 utility-first patterns, Vite build pipeline, island hydration architecture, design tokens via @theme, Web Components, defensive CSS, and progressive enhancement. Use when writing CSS/JS/HTML in .liquid files or theme frontend source…