# Framework Shadcn Tailwind Ui

> Use with beautiful-ui and platform-web-ui when the target web app uses shadcn/ui components, Tailwind CSS utilities, or a React component system built from copied component source.

- **Type:** Skill
- **Install:** `agentstack add skill-kainiko943-beautiful-ui-framework-shadcn-tailwind-ui`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [Kainiko943](https://agentstack.voostack.com/s/kainiko943)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [Kainiko943](https://github.com/Kainiko943)
- **Source:** https://github.com/Kainiko943/beautiful-ui/tree/main/framework-shadcn-tailwind-ui

## Install

```sh
agentstack add skill-kainiko943-beautiful-ui-framework-shadcn-tailwind-ui
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# Framework Shadcn Tailwind UI

## Overview

Use this adapter after `beautiful-ui` and `platform-web-ui` when implementation should land in a shadcn/ui + Tailwind codebase. Preserve the product-specific visual direction, then express it through local components, tokens, variants, and stateful composition.

## Current Setup Notes

As of April 26, 2026, shadcn/ui recommends `shadcn/create` or `shadcn@latest init -t [framework]` for supported frameworks, with existing-project setup handled through the official framework guide. Tailwind CSS v4 uses CSS-first configuration and `@import "tailwindcss"` in new installs. Verify official docs before giving exact setup commands in generated project work.

Official references:

- https://ui.shadcn.com/docs/installation
- https://ui.shadcn.com/docs/installation/next
- https://tailwindcss.com/docs/installation

## Rules

- Treat shadcn/ui as editable source, not a black-box component library.
- Use existing local components before adding new shadcn components.
- Define theme tokens in CSS variables or the repo's established Tailwind setup before adding one-off utility piles.
- Prefer component variants for repeated states such as intent, density, size, loading, invalid, and selected.
- Use `data-*` attributes, `aria-*` attributes, and visible focus styles for stateful controls.
- Keep class strings readable; extract variants or local wrappers when repeated class combinations carry product meaning.
- Do not turn every surface into a `Card`; reserve cards for repeated objects, tools, modals, and framed content.

## Handoff Must Include

- Components to add or reuse.
- Token changes and where they belong.
- Variant names for recurring states.
- Tailwind layout constraints for desktop and mobile.
- Accessibility attributes and focus behavior.
- Verification commands and screenshot targets.

## Read These References

- `references/component-patterns.md`

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [Kainiko943](https://github.com/Kainiko943)
- **Source:** [Kainiko943/beautiful-ui](https://github.com/Kainiko943/beautiful-ui)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-kainiko943-beautiful-ui-framework-shadcn-tailwind-ui
- Seller: https://agentstack.voostack.com/s/kainiko943
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.