Skills ui-handler
📦

ui-handler

Content revision r1 Safe 📁 Filesystem access⚙️ External commands

Build UI with Shadcn and 21st.dev

Frontend teams need consistent UI components and page sections. This skill guides Claude, Codex, and Claude Code to use Shadcn MCP and 21st.dev MCP.

Supports: Claude Codex Code(CC)
🥉 78 Bronze

Install with my Agent

Copy this request to your Agent. It includes the canonical Skill page and manifest.

Agent request
Review the Skillstore skill "ui-handler" from https://skillstore.io/skills/aayushbaniya2006-ui-handler.md and its manifest at https://skillstore.io/api/skills/aayushbaniya2006-ui-handler/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.

Your Agent should still show its plan and request any confirmation required by the security policy.

Agent-readable resources

Use these links when an AI agent, crawler, or script needs clean context instead of reading the full page.

Markdown detail GET /skills/aayushbaniya2006-ui-handler.md Signed manifest GET /api/skills/aayushbaniya2006-ui-handler/manifest Signed lockfile GET /api/skills/aayushbaniya2006-ui-handler/lockfile

Test it

Using "ui-handler". Add a landing page hero with an email capture form.

Expected outcome:

  • Generated a responsive hero section plan with email capture and a clear call to action.
  • Placed shared section guidance in the correct component area.
  • Listed integration steps and noted that external commands need confirmation.

Using "ui-handler". Update the app theme to use a neutral base and blue primary color.

Expected outcome:

  • Reviewed the theme update path through Shadcn MCP or the global stylesheet.
  • Recommended semantic color tokens for light mode and dark mode.
  • Flagged hard-coded color choices that could break theme consistency.

Using "ui-handler". Create a dashboard shell with navigation and content sections.

Expected outcome:

  • Outlined a header, sidebar, and main content structure.
  • Recommended Shadcn atoms for controls and 21st.dev sections for larger blocks.
  • Defined where shared and page-specific components should live.

Security Audit

Safe
v10 • 7/9/2026 Open versioned report

I confirmed one medium risk: SKILL.md line 16 recommends an unpinned pnpm dlx command that executes external package code. The other static alerts are markdown path, import, or class examples rather than executable shell use or path traversal. No prompt injection or malicious intent was found in SKILL.md or reference.md.

2
Files scanned
65
Lines analyzed
1
Review items
0
False positives ignored
Capability review items (1)

These are real local capabilities that may be expected for this skill, so they require review but are not counted as confirmed malicious behavior.

Medium
SKILL.md:16
Ruby/shell backtick execution
2. **Manual Fallback**: `pnpm dlx shadcn@latest add {component}`
The line recommends pnpm dlx shadcn@latest add {component}, which runs external package code and uses an unpinned latest package. This creates a real supply-chain and command-execution risk during manual fallback use.

Risk Factors

📁 Filesystem access (1)
reference.md:9
⚙️ External commands (7)
SKILL.md:16 SKILL.md:22 SKILL.md:23 SKILL.md:26 SKILL.md:29 SKILL.md:33 SKILL.md:34
Audited by: codex View Audit History →
Share & cite this report

Share the versioned assessment report, neutral badge, embed card, and citations. Skillstore reports evidence without deciding whether this Skill is safe.

Open versioned report
Security Assessment

Copy report link

https://skillstore.io/skills/aayushbaniya2006-ui-handler/audits/10?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Markdown badge

[![Skillstore security assessment](https://skillstore.io/badges/skills/aayushbaniya2006-ui-handler/security.svg)](https://skillstore.io/skills/aayushbaniya2006-ui-handler?utm_source=security_passport_badge)

HTML badge

<a href="https://skillstore.io/skills/aayushbaniya2006-ui-handler?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/aayushbaniya2006-ui-handler/security.svg" alt="Skillstore security assessment" loading="lazy"></a>

Embed card

<iframe src="https://skillstore.io/embed/skills/aayushbaniya2006-ui-handler.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>
Academic citations (APA · BibTeX · CFF)

APA citation

AayushBaniya2006. (2026). ui-handler security audit report (audit version 10) [Author version unspecified]. Skillstore. https://skillstore.io/skills/aayushbaniya2006-ui-handler/audits/10

BibTeX citation

@techreport{aayushbaniya2006-aayushbaniya2006-ui-handler-2026, author = {AayushBaniya2006}, title = {ui-handler security audit report (audit version 10)}, institution = {Skillstore}, year = {2026}, number = {10}, url = {https://skillstore.io/skills/aayushbaniya2006-ui-handler/audits/10}, note = {Author version unspecified} }

CITATION.cff

cff-version: 1.2.0 message: "If you use this Skill, cite its author and this versioned security audit report." title: "ui-handler security audit report (audit version 10)" version: "unspecified" type: report authors: - name: "AayushBaniya2006" date-released: "2026-07-09" url: "https://skillstore.io/skills/aayushbaniya2006-ui-handler/audits/10" identifiers: - type: other value: "skillstore:aayushbaniya2006-ui-handler:audit:10" description: "Skillstore immutable audit report identifier"

Skillstore Score

Why this score Evidence Confidence: High
55
Architecture
85
Maintainability
85
Content
71
Community
83
Spec Compliance

What You Can Build

Add Standard UI Controls

Use Shadcn MCP to add buttons, inputs, and dialogs, then compose them in app layouts.

Generate Landing Sections

Create hero, footer, and dashboard sections with 21st.dev MCP for product pages.

Apply Consistent Theme Rules

Update theme variables and Tailwind classes so new screens match the existing design system.

Try These Prompts

Add Basic Components 
Use the ui-handler skill to add a button and dialog with Shadcn MCP for my Next.js page.
Create a Responsive Section 
Use 21st.dev MCP to generate a responsive SaaS hero section. Place it in the sections folder and explain integration steps.
Update Theme Tokens 
Use the ui-handler skill to update the app theme with semantic colors, CSS variables, and Tailwind utilities.
Compose a Product Dashboard 
Use Shadcn atoms and 21st.dev sections to design a responsive dashboard with header, sidebar, content area, and empty states.

Best Practices

  • Prefer MCP tools before writing custom components from scratch.
  • Place shared atoms and sections in the documented component folders.
  • Use semantic Tailwind tokens so dark mode remains consistent.

Avoid

  • Run pnpm dlx commands without user confirmation or version review.
  • Place one-off page components in global UI folders.
  • Hard-code colors that bypass theme variables.

Frequently Asked Questions

What does this skill help with?
It helps agents build UI components, page sections, layouts, and theme updates with project conventions.
Which tools does it expect?
It expects Shadcn MCP for atoms and theme work, plus 21st.dev MCP for larger sections.
Can it work with Claude, Codex, and Claude Code?
Yes. The report lists Claude, Codex, and Claude Code as supported tools.
Does it require command execution?
Not always. The manual fallback includes a pnpm dlx command that should require user approval.
Can it update an existing theme?
Yes. It guides theme updates through Shadcn MCP or global CSS variables.
Does it replace design review?
No. Users should still review accessibility, responsiveness, visual quality, and dependency choices.

Developer Details

License

MIT

Skillstore revision

r1

Version notice

The author did not declare a version.

Repository

https://github.com/AayushBaniya2006/blinkfund/tree/main/.claude/skills/ui-handler

Ref

0519034dad657fb1f7706e0550e962beeda73fdf

Maintenance freshness

7/18/2026

Usage

10 downloads · 257 views

File structure

📄 reference.md

📄 SKILL.md