Menú
Enforces Trustless Work dApp visual language (radix-luma, Space Grotesk, brand blue
Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.
Basado en la clasificación ocupacional SOC
Next.js best practices - file conventions, RSC boundaries, data patterns, async APIs, metadata, error handling, route handlers, image/font optimization, bundling
Use this skill when users want to add, customize, or troubleshoot Magic UI components in React/Next.js projects. It covers component selection, shadcn registry installation (`@magicui/*`), integration patterns, and practical quality checks for accessibility and maintainability.
NestJS best practices and architecture patterns for building production-ready applications. This skill should be used when writing, reviewing, or refactoring NestJS code to ensure proper patterns for modules, dependency injection, security, and performance.
Next.js 16 Cache Components - PPR, use cache directive, cacheLife, cacheTag, updateTag
Guides for configuring Prisma with different database providers (PostgreSQL, MySQL, SQLite, MongoDB, etc.). Use when setting up a new project, changing databases, or troubleshooting connection issues. Triggers on "configure postgres", "connect to mysql", "setup mongodb", "sqlite setup".
End-to-end Stellar development playbook. Covers Soroban smart contracts (Rust SDK), Stellar CLI, JavaScript/Python/Go SDKs for client apps, Stellar RPC (preferred) and Horizon API (legacy), Stellar Assets vs Soroban tokens (SAC bridge), wallet integration (Freighter, Stellar Wallets Kit), smart accounts with passkeys, status-sensitive zero-knowledge proof patterns, testing strategies, security patterns, and common pitfalls. Optimized for payments, asset tokenization, DeFi, privacy-aware applications, and financial applications. Use when building on Stellar, Soroban, or working with XLM, Stellar Assets, trustlines, anchors, SEPs, ZK proofs, or the Stellar RPC/Horizon APIs.
| name | trustless-work-ui |
| description | Enforces Trustless Work dApp visual language (radix-luma, Space Grotesk, brand blue |
Product design system for the dApp. Stay on the existing visual line — do not invent a new aesthetic.
Canonical source (full, portable): docs/DESIGN_SYSTEM.md
Rule (always on): .cursor/rules/DESIGN_SYSTEM.mdc
Stack: shadcn radix-luma · Tailwind v4 · Space Grotesk · Lucide · tokens in src/app/globals.css
Before inventing styles, read or apply the checklist in docs/DESIGN_SYSTEM.md. Files under reference/ are quick extracts for agents; on conflict, the canonical doc (and the code) wins.
| Context | Use instead |
|---|---|
| Marketing / home / landing | Separate visual language — see docs/DESIGN_SYSTEM.md §14 |
| Creative one-off experiments | frontend-design only if user explicitly wants a new aesthetic outside product |
| Adding shadcn components via CLI | shadcn skill, then style with this skill |
| Skeletons / empty / tables policy | Also follow SKELETONS.mdc + DAPP.mdc |
Priority for product UI: trustless-work-ui > frontend-design.
docs/DESIGN_SYSTEM.md@/components/ui/* variant; do not restyle colors → primitives.md| Need | Class |
|---|---|
| Button / Badge / filter pills | rounded-4xl |
| Input / Select / Textarea / Toggle | rounded-lg |
| Card / Dialog / Sheet / NoData | rounded-xl |
| Container / nested tiles | rounded-2xl |
| Escrow panels / escrow cards | rounded-3xl |
| Avatar / Switch / dots | rounded-full |
| Need | Token |
|---|---|
| Page bg / text | bg-background / text-foreground |
| Surface | bg-card · border border-border |
| Muted copy | text-muted-foreground |
| Primary CTA | bg-primary text-primary-foreground (#006be4) |
| Soft destructive | bg-destructive/10 text-destructive |
| Elevated edge | ring-1 ring-foreground/10 |
Forbidden in features: bg-blue-*, text-green-600, emerald-*, purple-*, arbitrary hex (except ambient Lights chrome).
| Control | Height / size |
|---|---|
| Input / Select | h-8 |
| Button | default h-9 · sm = h-8 · header CTAs → size="sm" |
| Badge | h-5 text-xs |
| Icon default | size-4 |
| Icon compact | size-3 / size-3.5 |
| Page header icon | size-5 sm:size-6 |
| Status | Variant |
|---|---|
| disputed / error | destructive |
| released / resolved | secondary |
| flags (approved) | outline |
| flags (released) | default |
| active (product exception) | inverted bg-foreground text-background + live dot — do not invent more inverted badges |
Do not use Badge success for domain status (see canonical §9.4 / §12).
gap-1 / gap-1.5gap-4 / gap-6gap-5gap-*, not space-x/space-y (ok space-y for title→description only)// Page title
<h1 className="text-pretty text-2xl font-semibold tracking-tight md:text-3xl">…</h1>
// Settings / list shell
<Container>{/* rounded-2xl border bg-card/40 p-6 shadow-sm */}</Container>
// Escrow detail section
<section className="rounded-3xl border border-border bg-card p-6 sm:p-8">
<h2 className="text-lg font-semibold tracking-tight">…</h2>
</section>
// Dual table
<div className="flex flex-col gap-3 md:hidden">…cards…</div>
<div className="hidden md:block">…Table…</div>
// Empty
<NoData title="No items yet" description="…" />
// Dialog actions
<Button variant="outline">Cancel</Button>
<Button>Save</Button>
- [ ] Semantic tokens only (no raw palette in product UI)
- [ ] Radius matches map (pill buttons, lg fields, xl cards, 3xl escrow panels)
- [ ] Heights: inputs h-8, buttons h-9 or sm
- [ ] Icons size-4 (or documented exception)
- [ ] Empty → NoData; loading → Skeleton (SKELETONS.mdc)
- [ ] Data tables: dual md cards + desktop table
- [ ] Dialog footer: Cancel outline → primary right
- [ ] Light + dark OK without hard-coded greys
- [ ] No marketing/hero aesthetics in dashboard
- [ ] className used for layout, not recoloring primitives