원클릭으로
shadcn-ui
Using shadcn/ui component library for UI components. Use when creating or modifying UI components in .tsx files.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
메뉴
Using shadcn/ui component library for UI components. Use when creating or modifying UI components in .tsx files.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Guidelines for writing Supabase database migrations, functions, RLS policies, and SQL. Use when creating or modifying database schemas, writing migrations, creating Postgres functions, or setting up Row Level Security policies.
Documentation for Agicash wallet transaction flows and entities. Use when touching app/features/send/, app/features/receive/, app/features/wallet/, token receive routes, Lightning Address routes, account selection logic, or working with Quote/Swap/Transaction entities and payment state machines.
TanStack Query v5 patterns specific to this project. Covers our cache class pattern, repository integration, suspense queries, event-driven updates, version-aware caching, and mutation patterns. Use for all server state management and cache operations.
Use this skill when the task requires understanding *why* the app does something (blind signatures, keyset rotation, spending conditions), not just *what* it does. References Cashu NUT specifications for the ecash protocol on Bitcoin. Complements /agicash-wallet-documentation — that skill describes our implementation, this describes the protocol it implements. Invoke for learning, explaining, implementing, or debugging Cashu concepts like minting, swapping, melting, blind signatures, keysets, or quote flows.
Validation tool for Lightning Address endpoints. Use after modifying Lightning Address routes (app/routes/[.]well-known.*, app/routes/api.lnurlp.*) or lightning-address-service.ts to verify LUD-16, LUD-06, and LUD-21 endpoints still work.
Tailwind CSS design system for this mobile-first wallet app. Covers theme system (USD/BTC/dark), CSS variables, CVA components, shadcn/ui patterns, custom animations, and layout conventions. Use when creating or modifying UI components.
| name | shadcn-ui |
| description | Using shadcn/ui component library for UI components. Use when creating or modifying UI components in .tsx files. |
This project uses @shadcn/ui for UI components. These are beautifully designed, accessible components that you can copy and paste into your apps.
Components are available in the app/components/ui directory, following the aliases configured in components.json
Import components from the ui directory using the configured aliases:
import { Button } from '~/components/ui/button'
import { Tabs, TabsContent, TabsList, TabsTrigger } from '~/components/ui/tabs';
import {
Card,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from '~/components/ui/card';
Example usage:
<Button variant="outline">Click me</Button>
<Card>
<CardHeader>
<CardTitle>Card Title</CardTitle>
<CardDescription>Card Description</CardDescription>
</CardHeader>
<CardContent>
<p>Card Content</p>
</CardContent>
<CardFooter>
<p>Card Footer</p>
</CardFooter>
</Card>
Many more components are available but not currently installed. You can view the complete list at https://ui.shadcn.com/r
To install additional components, use the Shadcn CLI:
bunx shadcn@latest add [component-name]
For example, to add the Accordion component:
bunx shadcn@latest add accordion
Note: bunx shadcn-ui@latest is deprecated, use bunx shadcn@latest instead
Some commonly used components are:
This project uses the "default" style variant with the "neutral" base color and CSS variables for theming, as configured in components.json.