ReddRadar
Agent skill
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.
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/data/wrld-design
SKILL.md
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.
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?