ui-component-creation
Create Design-System UI Components
Teams need consistent UI components that follow local design rules. This skill guides shadcn/ui creation with tokens, states, responsive layouts, and accessibility.
Install with my Agent
Copy this request to your Agent. It includes the canonical Skill page and manifest.
Review the Skillstore skill "ui-component-creation" from https://skillstore.io/skills/cleanexpo-ui-component-creation.md and its manifest at https://skillstore.io/api/skills/cleanexpo-ui-component-creation/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.
Test it
Using "ui-component-creation". Create a dashboard summary card for monthly sales data.
Expected outcome:
A reusable card component plan with token-based surface colors, clear title hierarchy, action button styling, and responsive spacing.
Using "ui-component-creation". Refactor a feature panel that uses raw gray and white classes.
Expected outcome:
A design-system aligned panel that replaces raw color classes with approved text, background, accent, and border tokens.
Using "ui-component-creation". Create a responsive three-column statistics section.
Expected outcome:
A responsive layout that avoids fixed mobile columns and defines accessible labels, states, and breakpoint behavior.
Security Audit
SafeThe static findings are false positives caused by Markdown code fences, inline Tailwind class names, and design-token examples. No shell execution, system reconnaissance, network reconnaissance, prompt injection, or data exfiltration intent was found in SKILL.md.
Risk Factors
⚙️ External commands (10)
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.
Copy report link
https://skillstore.io/skills/cleanexpo-ui-component-creation/audits/8?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdown badge
[](https://skillstore.io/skills/cleanexpo-ui-component-creation?utm_source=security_passport_badge)HTML badge
<a href="https://skillstore.io/skills/cleanexpo-ui-component-creation?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/cleanexpo-ui-component-creation/security.svg" alt="Skillstore security assessment" loading="lazy"></a>Embed card
<iframe src="https://skillstore.io/embed/skills/cleanexpo-ui-component-creation.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
CleanExpo. (2026). ui-component-creation security audit report (audit version 8) [Author version unspecified]. Skillstore. https://skillstore.io/skills/cleanexpo-ui-component-creation/audits/8BibTeX citation
@techreport{cleanexpo-cleanexpo-ui-component-creation-2026,
author = {CleanExpo},
title = {ui-component-creation security audit report (audit version 8)},
institution = {Skillstore},
year = {2026},
number = {8},
url = {https://skillstore.io/skills/cleanexpo-ui-component-creation/audits/8},
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-component-creation security audit report (audit version 8)"
version: "unspecified"
type: report
authors:
- name: "CleanExpo"
date-released: "2026-07-06"
url: "https://skillstore.io/skills/cleanexpo-ui-component-creation/audits/8"
identifiers:
- type: other
value: "skillstore:cleanexpo-ui-component-creation:audit:8"
description: "Skillstore immutable audit report identifier"
Skillstore Score
Why this score Evidence Confidence: HighWhat You Can Build
Build a New Product Card
Create a reusable card that follows project tokens, states, and responsive behavior.
Standardize Feature Panels
Turn varied interface requests into components that use the same visual system.
Review UI Generation Requests
Guide AI-assisted component work toward accessible, brand-aligned output.
Try These Prompts
Create a shadcn/ui card component for [purpose]. Use our design tokens, responsive spacing, and accessible labels.
Create a [component type] with hover, focus, disabled, and loading states. Use design tokens instead of raw Tailwind colors.
Refactor this component to use shadcn/ui patterns, project color tokens, responsive breakpoints, and accessible controls: [paste component].
Create a coordinated set of [components] for [workflow]. Include variants, empty states, error states, responsive behavior, and accessibility details.
Best Practices
- Provide the relevant design-system file or token names before requesting component work.
- Ask for all required states, including hover, focus, disabled, loading, empty, and error states.
- Review generated components for accessibility, responsive behavior, and token consistency.
Avoid
- Do not request raw Tailwind color classes when the project has design tokens.
- Do not accept fixed desktop grid layouts without mobile and tablet behavior.
- Do not omit interactive states for buttons, cards, forms, or navigation elements.