Wrkly design system

Skill BAKUGOS1/SkilledAgents-Toolkit/plugins/skilled-agents/skills/wrkly-design-system

Portable open-source Codex toolkit with reusable skills, custom agents, plugins, project profiles, validation tools, and SDK examples.

Install

npx -y skills add BAKUGOS1/SkilledAgents-Toolkit --skill wrkly-design-system

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

0 stars0 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Apply Wrkly's exact design standards to any UI component or page

SKILL.md

3.9 KB, ~1.0k tokens by cl100k_base, as published. Nobody here has run it

Wrkly Design System

When building or modifying any UI in the Wrkly project, follow these exact standards.

Color System (HSL Custom Properties)

Light Mode

Token	HSL Value	Usage
`--primary`	234 89% 64%	Buttons, links, active
`--primary-hover`	234 89% 57%	Button hover states
`--accent`	262 83% 68%	Secondary actions, badges
`--background`	0 0% 100%	Page background
`--background-secondary`	220 20% 97%	Card backgrounds
`--foreground`	222 47% 11%	Primary text
`--foreground-secondary`	215 16% 47%	Secondary text
`--border`	220 13% 91%	Borders, dividers
`--destructive`	0 84% 60%	Delete, error states
`--success`	160 84% 39%	Success states
`--warning`	38 92% 50%	Warning states

Dark Mode (`.dark` class)

Token	HSL Value
`--primary`	234 89% 68%
`--background`	222 47% 6%
`--background-secondary`	220 33% 10%
`--foreground`	210 40% 96%
`--border`	217 19% 17%

Never use raw hex/rgb values. Always hsl(var(--token)).

Typography

Font: Inter (loaded via next/font/google)
CSS variable: --font-inter
Sizes: Use Tailwind's scale (text-sm, text-base, text-lg, text-xl)
Headings: font-semibold or font-bold
Body: font-normal, text-foreground
Secondary: text-foreground-secondary

Spacing & Layout

Page padding: p-6 or px-6 py-4
Card padding: p-4 or p-5
Gap between items: gap-3 or gap-4
Border radius: rounded-lg (0.5rem = var(--radius))
Max content width: max-w-7xl mx-auto

Component Patterns

Cards

<div className="bg-card rounded-lg border border-border p-4 hover:bg-card-hover transition-colors">
  ...
</div>

Buttons

// Primary
<button className="bg-primary text-primary-foreground rounded-lg px-4 py-2 hover:bg-primary-hover transition-colors">

// Ghost
<button className="text-foreground-secondary hover:bg-muted rounded-lg px-3 py-1.5 transition-colors">

// Destructive
<button className="bg-destructive text-destructive-foreground rounded-lg px-4 py-2 hover:opacity-90 transition-opacity">

Inputs

<input className="w-full bg-input border border-border rounded-lg px-3 py-2 text-foreground placeholder:text-muted-foreground focus:ring-2 focus:ring-ring focus:border-transparent outline-none transition-shadow" />

Sidebar

Background: bg-sidebar
Active item: bg-sidebar-active text-sidebar-active-foreground
Border: border-r border-sidebar-border

Animations

Transitions: transition-colors, transition-opacity, transition-shadow (0.2s ease default)
Hover effects: subtle background change, never jarring
Loading: pulse or skeleton with animate-pulse
Modals: fade-in + scale (animate-in fade-in zoom-in-95)

Icons

Library: Lucide React
Default size: size={16} for inline, size={20} for standalone
Color: className="text-foreground-secondary" by default

Auth Pages

Use auth-bg class for gradient background with grid overlay
Center content vertically and horizontally
Card with glassmorphism: bg-card/80 backdrop-blur-sm border border-border shadow-xl

Brand Mark

Logo component: <Logo variant="lockup" /> or <Logo variant="icon" />
Auto-switches between dark/light based on theme
Assets in public/brand/ — pixel-grid style (3+2 grid, glass highlights)