skillscowork-design

---
name: skillscowork-design
description: Apply the SkillsCowork design system when building pages or components for skillscowork.com. Activate when user asks to build UI, create pages, design components, or make any visual changes to the platform.
---

# SkillsCowork Design System Skill

## When to Use

Use this skill when:
- Building new pages for skillscowork.com
- Creating UI components (cards, buttons, forms, modals)
- Designing any visual element on the platform
- Asked to "build", "create page", "design", "make UI"
- Creating landing pages, dashboards, profile pages, etc.

## Core Principle

**Always read DESIGN.md first**, then build. The DESIGN.md is the source of truth.

## Quick Reference

### Design Tokens (CSS Variables)

```css
/* Brand Colors */
--primary: #6366f1;        /* Indigo - main CTAs */
--primary-light: #818cf8;
--primary-dark: #4f46e5;
--secondary: #10b981;       /* Emerald - success */
--accent: #f59e0b;          /* Amber - warnings */

/* Neutrals (Dark) */
--background: #0a0a0f;     /* Page background */
--surface: #12121a;        /* Card background */
--surface-light: #1a1a25;  /* Input backgrounds */
--border: #2a2a3a;         /* Borders */
--text-primary: #ffffff;
--text-secondary: #a1a1aa;
--text-muted: #71717a;

/* Effects */
--gradient-primary: linear-gradient(135deg, #6366f1 0%, #10b981 100%);
--shadow-glow: 0 0 40px rgba(99, 102, 241, 0.3);
--shadow-card: 0 4px 20px rgba(0, 0, 0, 0.3);
```

### Key Rules

1. **Dark only** — Never use light backgrounds
2. **Use gradients for CTAs** — `background: var(--gradient-primary)` with glow shadow
3. **Card style** — Dark surface, subtle border, 16px radius, soft shadow
4. **Inter font** — Import from next/font
5. **Max width 1280px** — Centered with 24px padding
6. **Layered bg** — Apply atmospheric radial gradients to body

### Button Variants

```tsx
// Primary CTA - gradient + glow
<button style={{ 
  background: 'var(--gradient-primary)', 
  boxShadow: 'var(--shadow-glow)',
  borderRadius: '12px',
  padding: '0.75rem 1.5rem',
  fontWeight: 600
}}>

// Secondary - surface + border
<button style={{ 
  background: 'var(--surface)', 
  border: '1px solid var(--border)',
  borderRadius: '12px'
}}>

// Ghost - transparent
<button style={{ background: 'transparent' }}>
```

### Card Component

```tsx
<div style={{
  background: 'var(--surface)',
  border: '1px solid var(--border)',
  borderRadius: '16px',
  padding: '24px',
  boxShadow: 'var(--shadow-card)'
}}>
```

### Input Component

```tsx
<input style={{
  background: 'var(--surface-light)',
  border: '1px solid var(--border)',
  borderRadius: '12px',
  padding: '0.75rem 1rem',
  color: 'var(--text-primary)',
  fontSize: '1rem'
}} placeholder="Enter text..." />
```

## File Locations

- Design tokens: `/root/.openclaw/workspace/DESIGN.md`
- Code repo: `/www/devproject/skillscowork-private/src/app/[locale]/`
- Components: `/www/devproject/skillscowork-private/src/components/`
- Styles: `/www/devproject/skillscowork-private/src/app/[locale]/globals.css`

## Workflow

1. Read DESIGN.md at `/root/.openclaw/workspace/DESIGN.md`
2. Understand the color palette, typography, component specs
3. Build using CSS variables (never hardcode hex values)
4. Test in dark mode appearance
5. Ensure responsive on mobile/tablet/desktop

## Common Mistakes to Avoid

- ❌ Using `#ffffff` or `#000000` directly (use CSS variables)
- ❌ Light backgrounds anywhere
- ❌ Non-12px border-radius on buttons
- ❌ Missing glow shadow on primary CTAs
- ❌ Wrong font (always Inter)

---

**Version**: 1.0 | **Updated**: 2026-04-13