How do I install the Wrld Design skill?

Run npx skillmds@latest add majiayu000/wrld-design in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Wrld Design safe to use?

This skill has not completed SkillMD's automated safety review yet. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. Capability flags: docs only. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Wrld Design?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Wrld Design free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Wrld Design?

majiayu000 (@majiayu000) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Wrld Design by majiayu000 — Agent Skill

Name: Wrld Design
Rating: 4.5 (4 reviews)
Author: majiayu000

Wrld Design

WRLD Inc design system for building UI components with Tailwind CSS and ShadCN. Use when creating React components, designing interfaces, generating CSS, or implementing the WRLD brand design system. Includes color tokens, typography, component patterns, and visual guidelines.

majiayu000 Updated Sep 9, 2026 567 repo stars

File contents

WRLD Design System

A comprehensive design system for WRLD Inc, built for Tailwind CSS and ShadCN component libraries. This skill helps you create consistent, branded UI components following WRLD's modern tech-forward aesthetic.

Quick Start

When building WRLD-branded components:

Use the CSS variables defined in this system
Follow the OKLCH color palette for perceptual uniformity
Apply sharp corners by default (radius: 0), pill-shaped for primary CTAs
Use JetBrains Mono for technical/code content
Implement both light and dark mode support

CSS Foundation

Include this CSS at the root of your project:

@layer base {
  :root {
    --font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, monospace;

    --background: oklch(1 0 0);
    --foreground: oklch(0.145 0 0);
    --card: oklch(1 0 0);
    --card-foreground: oklch(0.145 0 0);
    --popover: oklch(1 0 0);
    --popover-foreground: oklch(0.145 0 0);
    --primary: oklch(0.67 0.16 58);
    --primary-foreground: oklch(0.99 0.02 95);
    --secondary: oklch(0.967 0.001 286.375);
    --secondary-foreground: oklch(0.21 0.006 285.885);
    --muted: oklch(0.97 0 0);
    --muted-foreground: oklch(0.556 0 0);
    --accent: oklch(0.67 0.16 58);
    --accent-foreground: oklch(0.99 0.02 95);
    --destructive: oklch(0.58 0.22 27);
    --destructive-foreground: oklch(0.99 0.02 95);
    --border: oklch(0.922 0 0);
    --input: oklch(0.922 0 0);
    --ring: oklch(0.708 0 0);

    --chart-1: oklch(0.88 0.15 92);
    --chart-2: oklch(0.77 0.16 70);
    --chart-3: oklch(0.67 0.16 58);
    --chart-4: oklch(0.56 0.15 49);
    --chart-5: oklch(0.47 0.12 46);

    --radius: 0;

    --sidebar: oklch(0.985 0 0);
    --sidebar-foreground: oklch(0.145 0 0);
    --sidebar-primary: oklch(0.67 0.16 58);
    --sidebar-primary-foreground: oklch(0.99 0.02 95);
    --sidebar-accent: oklch(0.67 0.16 58);
    --sidebar-accent-foreground: oklch(0.99 0.02 95);
    --sidebar-border: oklch(0.922 0 0);
    --sidebar-ring: oklch(0.708 0 0);
  }

  .dark {
    --background: oklch(0.145 0 0);
    --foreground: oklch(0.985 0 0);
    --card: oklch(0.205 0 0);
    --card-foreground: oklch(0.985 0 0);
    --popover: oklch(0.205 0 0);
    --popover-foreground: oklch(0.985 0 0);
    --primary: oklch(0.77 0.16 70);
    --primary-foreground: oklch(0.28 0.07 46);
    --secondary: oklch(0.274 0.006 286.033);
    --secondary-foreground: oklch(0.985 0 0);
    --muted: oklch(0.269 0 0);
    --muted-foreground: oklch(0.708 0 0);
    --accent: oklch(0.77 0.16 70);
    --accent-foreground: oklch(0.28 0.07 46);
    --destructive: oklch(0.704 0.191 22.216);
    --destructive-foreground: oklch(0.99 0.02 95);
    --border: oklch(1 0 0 / 10%);
    --input: oklch(1 0 0 / 15%);
    --ring: oklch(0.556 0 0);

    --sidebar: oklch(0.205 0 0);
    --sidebar-foreground: oklch(0.985 0 0);
    --sidebar-primary: oklch(0.77 0.16 70);
    --sidebar-primary-foreground: oklch(0.28 0.07 46);
    --sidebar-accent: oklch(0.77 0.16 70);
    --sidebar-accent-foreground: oklch(0.28 0.07 46);
    --sidebar-border: oklch(1 0 0 / 10%);
    --sidebar-ring: oklch(0.556 0 0);
  }
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}

For detailed component patterns, see components.md. For the complete design reference, see reference.md.

---name: wrld-designdescription: WRLD Inc design system for building UI components with Tailwind CSS and ShadCN. Use when creating React components, designing interfaces, generating CSS, or implementing the WRLD brand design system. Includes color tokens, typography, component patterns, and visual guidelines.--- # WRLD Design System A comprehensive design system for WRLD Inc, built for Tailwind CSS and ShadCN component libraries. This skill helps you create consistent, branded UI components following WRLD's modern tech-forward aesthetic. ## Quick Start When building WRLD-branded components: 1. Use the CSS variables defined in this system 2. Follow the OKLCH color palette for perceptual uniformity 3. Apply sharp corners by default (radius: 0), pill-shaped for primary CTAs 4. Use JetBrains Mono for technical/code content 5. Implement both light and dark mode support ## CSS Foundation Include this CSS at the root of your project: ```css @layer base { :root { --font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace; --background: oklch(1 0 0); --foreground: oklch(0.145 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.145 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.145 0 0); --primary: oklch(0.67 0.16 58); --primary-foreground: oklch(0.99 0.02 95); --secondary: oklch(0.967 0.001 286.375); --secondary-foreground: oklch(0.21 0.006 285.885); --muted: oklch(0.97 0 0); --muted-foreground: oklch(0.556 0 0); --accent: oklch(0.67 0.16 58); --accent-foreground: oklch(0.99 0.02 95); --destructive: oklch(0.58 0.22 27); --destructive-foreground: oklch(0.99 0.02 95); --border: oklch(0.922 0 0); --input: oklch(0.922 0 0); --ring: oklch(0.708 0 0); --chart-1: oklch(0.88 0.15 92); --chart-2: oklch(0.77 0.16 70); --chart-3: oklch(0.67 0.16 58); --chart-4: oklch(0.56 0.15 49); --chart-5: oklch(0.47 0.12 46); --radius: 0; --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.67 0.16 58); --sidebar-primary-foreground: oklch(0.99 0.02 95); --sidebar-accent: oklch(0.67 0.16 58); --sidebar-accent-foreground: oklch(0.99 0.02 95); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.708 0 0); } .dark { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.205 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.205 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.77 0.16 70); --primary-foreground: oklch(0.28 0.07 46); --secondary: oklch(0.274 0.006 286.033); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.77 0.16 70); --accent-foreground: oklch(0.28 0.07 46); --destructive: oklch(0.704 0.191 22.216); --destructive-foreground: oklch(0.99 0.02 95); --border: oklch(1 0 0 / 10%); --input: oklch(1 0 0 / 15%); --ring: oklch(0.556 0 0); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.77 0.16 70); --sidebar-primary-foreground: oklch(0.28 0.07 46); --sidebar-accent: oklch(0.77 0.16 70); --sidebar-accent-foreground: oklch(0.28 0.07 46); --sidebar-border: oklch(1 0 0 / 10%); --sidebar-ring: oklch(0.556 0 0); } } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } ``` For detailed component patterns, see [components.md](components.md). For the complete design reference, see [reference.md](reference.md).

Frequently asked questions