Modern CSS-first styling with Tailwind CSS v4, @theme directives, container queries, and dynamic utility composition.
Andromity loads skills from folders you trust. Install with andromity skill install tailwind-v4 — autonomy and approval limits stay configurable per session.
# Install the "Tailwind CSS v4 Architect" skill You are installing an AgenticMarket skill into this workspace. Follow these steps exactly. ## 1. Detect your environment and choose the destination file - Andromity: `.andromity/skills/tailwind-v4/SKILL.md` (or user scope `~/.andromity/skills/tailwind-v4/SKILL.md`) - Antigravity / Gemini CLI: `.agent/skills/tailwind-v4/SKILL.md` - Cursor: `.cursor/rules/tailwind-v4.mdc` - Claude Code: append to `CLAUDE.md` (or `.claude/skills/tailwind-v4.md`) - Windsurf: append to `.windsurfrules` - Cline / Roo Code: `.clinerules/tailwind-v4.md` - GitHub Copilot: append to `.github/copilot-instructions.md` - ChatGPT / web only: paste the content into Custom Instructions - Any other agent: save to `.agent/skills/tailwind-v4/SKILL.md` ## 2. Create the destination file - Preserve every existing file and configuration entry. - Create parent folders as needed. - Never overwrite unrelated content. ## 3. Write exactly this content ```markdown --- name: tailwind-v4 description: "Modern CSS-first styling with Tailwind CSS v4, @theme directives, container queries, and dynamic utility composition." author: community license: mit version: 1.0.0 --- # Tailwind CSS v4 Architecture In Tailwind v4, styling is CSS-first: 1. Replace `tailwind.config.js` with direct `@theme` variables in `globals.css`. 2. Use standard OKLCH or HSL color definitions for high-gamut vibrant palettes. 3. Combine `clsx` and `tailwind-merge` for dynamic class merging. 4. Leverage container queries (`@container`) for modular responsive cards. ``` ## 4. Verify - Confirm the file exists and is readable. - Report the destination path and confirm the "Tailwind CSS v4 Architect" skill is installed and active. Skill metadata: - Slug: tailwind-v4 - Category: design - License: mit - Source: AgenticMarket
In Tailwind v4, styling is CSS-first:
AgenticMarkettailwind.config.js with direct @theme variables in globals.css.clsx and tailwind-merge for dynamic class merging.@container) for modular responsive cards.Modern CSS-first styling with Tailwind CSS v4, @theme directives, container queries, and dynamic utility composition.
Tailwind CSS v4 Architect works seamlessly with Cursor (.cursor/rules), Claude Code (CLAUDE.md & .claude/skills), Windsurf (.windsurfrules), Google Antigravity (.agent/skills), Andromity (.andromity/skills), and Cline.
Click '1-Click Prompt Install' in the right sidebar or copy the prompt into your agent chat (Cursor Composer, Claude Code, or Andromity). The agent automatically configures the skill instruction file into your workspace.
Yes, Tailwind CSS v4 Architect is 100% free and open-source under the mit license on AgenticMarket with no per-call fees or paywalls.
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
Toolkit for styling artifacts with a theme. These artifacts can be slides, docs, reportings, HTML landing pages, etc. There are 10 pre-set themes with colors/fonts that you can apply to any artifact that has been creating, or can generate a new theme on-the-fly.
