AgentStack
Sign in Publish
MCP servers Skills Toolkits Why AgentStack Sell Docs
Sign in
SKILL verified MIT Self-run

Framework Shadcn Tailwind Ui

skill-kainiko943-beautiful-ui-framework-shadcn-tailwind-ui · by Kainiko943

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.

↗ Repository
— No reviews yet
0 installs
9 views
0.0% view→install

Install

$ agentstack add skill-kainiko943-beautiful-ui-framework-shadcn-tailwind-ui

✓ scanned · ✓ verified — works with Claude Code, Cursor, and more.

Security review

✓ Passed

No issues found. Passed automated security review. · v0.1.0 How review works →

  • ✓ Prompt-injection patterns
  • ✓ Secret / credential exfiltration
  • ✓ Dangerous shell & filesystem operations
  • ✓ Untrusted network calls
  • ✓ Known-malicious package signatures

What it can access

  • ✓ Network access No
  • ✓ Filesystem access No
  • ✓ Shell / process execution No
  • ✓ Environment & secrets No
  • ✓ Dynamic code execution No

From automated source analysis of v0.1.0. “Used” means the capability is present in the source — more access means more to trust, not that it’s unsafe.

Are you the author of Framework Shadcn Tailwind Ui? Claim this listing to set pricing, connect Stripe payouts, and keep 70% of every sale.
Sign up to claim

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.

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

Reviews

No reviews yet — be the first.

Write a review

Versions

  • v0.1.0 Imported from the upstream source.

More in Agent Skills