← ClaudeAtlas

bld-find-21stlisted

f2: Find a ready-made shadcn/Tailwind component on 21st.dev, shortlist options, install the pick. Use for "find a component", "get me a navbar/hero/card", or premade UI instead of building from scratch.
mnguyenht/bld-package · ★ 1 · Web & Frontend · score 64
Install: claude install-skill mnguyenht/bld-package
# bld-find-21st — shop the 21st.dev marketplace Find existing, human-made UI components on 21st.dev and let the user pick. This does NOT use an MCP server, an API key, or AI generation — just web search + fetch. Nothing of the user's leaves the machine beyond normal web requests. The user's default stack is **shadcn/ui + Tailwind** (see their preferences), which is exactly what 21st.dev ships — so components drop in cleanly. ## Workflow 1. **Pin the need.** Get the component type (hero, navbar, pricing card, login form, testimonial, etc.), which app it's for, and any style cue (dark, playful, minimal). Ask only if it's unclear — don't over-interrogate. 2. **Search the marketplace** with WebSearch: ``` site:21st.dev <component type> <optional style> ``` Category pages (`21st.dev/s/...`, `21st.dev/community/components/s/...`) are JS-rendered and NOT readable by WebFetch — use them only to discover URLs. Individual component pages (`21st.dev/<author>/<component>`) ARE readable. 3. **Read 3–4 specific component pages** with WebFetch. Pull: name, author, what it looks like, key features, dependencies, and the install command. 4. **Present a shortlist** (3–4 options), one compact block each: - **Name** by @author — one-line look/feel - Features + dependencies (flag heavy deps like `framer-motion`) - Link to the page - Install: `npx @21st-dev/cli add <author>/<component>` Let the user pick. Don't install anything yet. 5. **Install t