Menu
Component usage patterns and best practices for @gv-tech/ui-web in Web applications.
The review-first prompt is selected by default. You can switch to a direct command or download a local copy.
Read SKILL.md and any companion files shown by SkillsMP before deciding whether to install.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
A direct command skips the review prompt. Inspect the source before running it.
npx skills add https://github.com/Garcia-Ventures/gvtech-design --skill use-ui-webThe command stays on one line. Scroll horizontally to inspect it before copying.
Prefer a local copy? Download the files currently available to SkillsMP.
Showing SKILL.md
Complete 6-step end-to-end setup guide for @gv-tech/ui-native, NativeWind v5 preview, Metro, Babel, and TypeScript in React Native and Expo projects.
Step-by-step setup guide for integrating @gv-tech/ui-web and Tailwind CSS v4 in web applications.
Component usage patterns, layout rules, and NativeWind v5 practices for @gv-tech/ui-native in React Native and Expo apps.
| name | use-ui-web |
| description | Component usage patterns and best practices for @gv-tech/ui-web in Web applications. |
Use this skill when implementing or using @gv-tech/ui-web components in web applications.
@gv-tech/ui-web.@gv-tech/ui-core.className. All components merge class names via cn().bg-background, text-foreground, bg-card, text-card-foreground, bg-primary, border-border, bg-muted).import { Card, CardHeader, CardTitle, CardDescription, CardContent, Button } from '@gv-tech/ui-web';
export function UserCard() {
return (
<Card className="max-w-md">
<CardHeader>
<CardTitle>Account Overview</CardTitle>
<CardDescription>Manage your profile and settings.</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
<p className="text-sm text-muted-foreground">Your account is active. Explore design system components.</p>
<Button variant="default">View Profile</Button>
</CardContent>
</Card>
);
}