Skip to content

Design: skill page upgrade explorations #16

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
whw wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

Design: skill page upgrade explorations #16

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
145 changes: 145 additions & 0 deletions .superdesign/design-system.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,145 @@
# <span data-proof="authored" data-by="ai:claude">EverySkill Design System</span>

## <span data-proof="authored" data-by="ai:claude">Product Context</span>

<span data-proof="authored" data-by="ai:claude">EverySkill is a registry of vetted AI agent skills, maintained by Every.io. It's a developer/AI-practitioner-facing tool where users browse, view, and submit skills for AI agents.</span>

## <span data-proof="authored" data-by="ai:claude">Brand Identity</span>

* **<span data-proof="authored" data-by="ai:claude">Name</span>**<span data-proof="authored" data-by="ai:claude">: EverySkill (logo text: "Every" in white + "Skill" in orange)</span>

* **<span data-proof="authored" data-by="ai:claude">Tone</span>**<span data-proof="authored" data-by="ai:claude">: Professional, minimal, developer-focused</span>

* **<span data-proof="authored" data-by="ai:claude">Theme</span>**<span data-proof="authored" data-by="ai:claude">: Dark mode only</span>

## <span data-proof="authored" data-by="ai:claude">Color System</span>

### <span data-proof="authored" data-by="ai:claude">Primary Colors</span>

| <span data-proof="authored" data-by="ai:claude">Name</span> | <span data-proof="authored" data-by="ai:claude">Hex</span> | <span data-proof="authored" data-by="ai:claude">CSS Variable</span> | <span data-proof="authored" data-by="ai:claude">Usage</span> |
| ------------------------------------------------------------------------- | ---------------------------------------------------------------- | --------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------- |
| <span data-proof="authored" data-by="ai:claude">Every Orange</span> | <span data-proof="authored" data-by="ai:claude">`#FF5A36`</span> | <span data-proof="authored" data-by="ai:claude">`every-orange`</span> | <span data-proof="authored" data-by="ai:claude">Primary accent, links, CTAs, logo highlight</span> |
| <span data-proof="authored" data-by="ai:claude">Every Orange Hover</span> | <span data-proof="authored" data-by="ai:claude">`#FF7A5C`</span> | <span data-proof="authored" data-by="ai:claude">`every-orange-hover`</span> | <span data-proof="authored" data-by="ai:claude">Hover state for orange elements</span> |

### <span data-proof="authored" data-by="ai:claude">Background & Surface</span>

| <span data-proof="authored" data-by="ai:claude">Name</span> | <span data-proof="authored" data-by="ai:claude">Hex</span> | <span data-proof="authored" data-by="ai:claude">CSS Variable</span> | <span data-proof="authored" data-by="ai:claude">Usage</span> |
| -------------------------------------------------------------------- | ---------------------------------------------------------------- | ---------------------------------------------------------------------------- | ----------------------------------------------------------------------------- |
| <span data-proof="authored" data-by="ai:claude">Background</span> | <span data-proof="authored" data-by="ai:claude">`#0a0a0a`</span> | <span data-proof="authored" data-by="ai:claude">`every-bg`</span> | <span data-proof="authored" data-by="ai:claude">Page background</span> |
| <span data-proof="authored" data-by="ai:claude">Surface</span> | <span data-proof="authored" data-by="ai:claude">`#141414`</span> | <span data-proof="authored" data-by="ai:claude">`every-surface`</span> | <span data-proof="authored" data-by="ai:claude">Card/panel backgrounds</span> |
| <span data-proof="authored" data-by="ai:claude">Surface Hover</span> | <span data-proof="authored" data-by="ai:claude">`#1a1a1a`</span> | <span data-proof="authored" data-by="ai:claude">`every-surface-hover`</span> | <span data-proof="authored" data-by="ai:claude">Hovered card state</span> |
| <span data-proof="authored" data-by="ai:claude">Border</span> | <span data-proof="authored" data-by="ai:claude">`#2a2a2a`</span> | <span data-proof="authored" data-by="ai:claude">`every-border`</span> | <span data-proof="authored" data-by="ai:claude">Borders, dividers</span> |

### <span data-proof="authored" data-by="ai:claude">Text</span>

| <span data-proof="authored" data-by="ai:claude">Name</span> | <span data-proof="authored" data-by="ai:claude">Hex</span> | <span data-proof="authored" data-by="ai:claude">CSS Variable</span> | <span data-proof="authored" data-by="ai:claude">Usage</span> |
| ----------------------------------------------------------------- | ---------------------------------------------------------------- | ------------------------------------------------------------------------- | --------------------------------------------------------------------------------- |
| <span data-proof="authored" data-by="ai:claude">Text</span> | <span data-proof="authored" data-by="ai:claude">`#fafafa`</span> | <span data-proof="authored" data-by="ai:claude">`every-text`</span> | <span data-proof="authored" data-by="ai:claude">Primary text</span> |
| <span data-proof="authored" data-by="ai:claude">Text Muted</span> | <span data-proof="authored" data-by="ai:claude">`#888888`</span> | <span data-proof="authored" data-by="ai:claude">`every-text-muted`</span> | <span data-proof="authored" data-by="ai:claude">Secondary/descriptive text</span> |

### <span data-proof="authored" data-by="ai:claude">Semantic Colors (used inline, not in config)</span>

* **<span data-proof="authored" data-by="ai:claude">Success</span>**<span data-proof="authored" data-by="ai:claude">:</span> <span data-proof="authored" data-by="ai:claude">`green-900/20`</span> <span data-proof="authored" data-by="ai:claude">bg,</span> <span data-proof="authored" data-by="ai:claude">`green-800/30`</span> <span data-proof="authored" data-by="ai:claude">border,</span> <span data-proof="authored" data-by="ai:claude">`green-500`</span> <span data-proof="authored" data-by="ai:claude">icon,</span> <span data-proof="authored" data-by="ai:claude">`green-400`</span> <span data-proof="authored" data-by="ai:claude">text</span>

* **<span data-proof="authored" data-by="ai:claude">Error</span>**<span data-proof="authored" data-by="ai:claude">:</span> <span data-proof="authored" data-by="ai:claude">`red-900/20`</span> <span data-proof="authored" data-by="ai:claude">bg,</span> <span data-proof="authored" data-by="ai:claude">`red-800/50`</span> <span data-proof="authored" data-by="ai:claude">border,</span> <span data-proof="authored" data-by="ai:claude">`red-400`</span> <span data-proof="authored" data-by="ai:claude">text</span>

* **<span data-proof="authored" data-by="ai:claude">Orange variants</span>**<span data-proof="authored" data-by="ai:claude">:</span> <span data-proof="authored" data-by="ai:claude">`every-orange/10`</span> <span data-proof="authored" data-by="ai:claude">(tag bg),</span> <span data-proof="authored" data-by="ai:claude">`every-orange/20`</span> <span data-proof="authored" data-by="ai:claude">(tag border),</span> <span data-proof="authored" data-by="ai:claude">`every-orange/50`</span> <span data-proof="authored" data-by="ai:claude">(hover border)</span>

## <span data-proof="authored" data-by="ai:claude">Typography</span>

* **<span data-proof="authored" data-by="ai:claude">Font Family</span>**<span data-proof="authored" data-by="ai:claude">: Inter (Google Fonts) — weights 400, 500, 600, 700</span>

* **<span data-proof="authored" data-by="ai:claude">Fallback</span>**<span data-proof="authored" data-by="ai:claude">: system-ui, -apple-system, BlinkMacSystemFont, sans-serif</span>

* **<span data-proof="authored" data-by="ai:claude">Rendering</span>**<span data-proof="authored" data-by="ai:claude">:</span> <span data-proof="authored" data-by="ai:claude">`antialiased`</span>

* **<span data-proof="authored" data-by="ai:claude">Selection</span>**<span data-proof="authored" data-by="ai:claude">: Orange highlight (`rgba(255, 90, 54, 0.3)`)</span>

### <span data-proof="authored" data-by="ai:claude">Type Scale (Tailwind defaults)</span>

* <span data-proof="authored" data-by="ai:claude">Page titles:</span> <span data-proof="authored" data-by="ai:claude">`text-4xl font-bold tracking-tight`</span> <span data-proof="authored" data-by="ai:claude">(homepage),</span> <span data-proof="authored" data-by="ai:claude">`text-2xl font-bold`</span> <span data-proof="authored" data-by="ai:claude">(skill page)</span>

* <span data-proof="authored" data-by="ai:claude">Section headings:</span> <span data-proof="authored" data-by="ai:claude">`font-semibold text-lg`</span>

* <span data-proof="authored" data-by="ai:claude">Body: default (1rem/16px)</span>

* <span data-proof="authored" data-by="ai:claude">Small text:</span> <span data-proof="authored" data-by="ai:claude">`text-sm`</span> <span data-proof="authored" data-by="ai:claude">(0.875rem)</span>

* <span data-proof="authored" data-by="ai:claude">Extra small:</span> <span data-proof="authored" data-by="ai:claude">`text-xs`</span> <span data-proof="authored" data-by="ai:claude">(0.75rem)</span>

## <span data-proof="authored" data-by="ai:claude">Spacing & Layout</span>

* **<span data-proof="authored" data-by="ai:claude">Max width</span>**<span data-proof="authored" data-by="ai:claude">:</span> <span data-proof="authored" data-by="ai:claude">`max-w-5xl`</span> <span data-proof="authored" data-by="ai:claude">(64rem / 1024px)</span>

* **<span data-proof="authored" data-by="ai:claude">Page padding</span>**<span data-proof="authored" data-by="ai:claude">:</span> <span data-proof="authored" data-by="ai:claude">`px-4 py-10`</span>

* **<span data-proof="authored" data-by="ai:claude">Card padding</span>**<span data-proof="authored" data-by="ai:claude">:</span> <span data-proof="authored" data-by="ai:claude">`p-6`</span> <span data-proof="authored" data-by="ai:claude">(1.5rem) standard,</span> <span data-proof="authored" data-by="ai:claude">`p-4`/`p-5`</span> <span data-proof="authored" data-by="ai:claude">for smaller panels</span>

* **<span data-proof="authored" data-by="ai:claude">Section spacing</span>**<span data-proof="authored" data-by="ai:claude">:</span> <span data-proof="authored" data-by="ai:claude">`space-y-6`</span> <span data-proof="authored" data-by="ai:claude">to</span> <span data-proof="authored" data-by="ai:claude">`space-y-10`</span>

* **<span data-proof="authored" data-by="ai:claude">Grid</span>**<span data-proof="authored" data-by="ai:claude">:</span> <span data-proof="authored" data-by="ai:claude">`md:grid-cols-2`</span> <span data-proof="authored" data-by="ai:claude">for skill cards on homepage</span>

## <span data-proof="authored" data-by="ai:claude">Component Patterns</span>

### <span data-proof="authored" data-by="ai:claude">Cards</span>

* <span data-proof="authored" data-by="ai:claude">Background:</span> <span data-proof="authored" data-by="ai:claude">`bg-every-surface`</span>

* <span data-proof="authored" data-by="ai:claude">Border:</span> <span data-proof="authored" data-by="ai:claude">`border border-every-border`</span>

* <span data-proof="authored" data-by="ai:claude">Radius:</span> <span data-proof="authored" data-by="ai:claude">`rounded-lg`</span>

* <span data-proof="authored" data-by="ai:claude">Hover (interactive):</span> <span data-proof="authored" data-by="ai:claude">`hover:border-every-orange/50 hover:bg-every-surface-hover`</span>

### <span data-proof="authored" data-by="ai:claude">Buttons</span>

* <span data-proof="authored" data-by="ai:claude">Primary:</span> <span data-proof="authored" data-by="ai:claude">`bg-every-orange text-white rounded-lg font-medium hover:bg-every-orange-hover`</span>

* <span data-proof="authored" data-by="ai:claude">Secondary/ghost:</span> <span data-proof="authored" data-by="ai:claude">`border border-every-border text-every-text-muted hover:text-every-text hover:border-every-orange/50`</span>

### <span data-proof="authored" data-by="ai:claude">Badges/Pills</span>

* <span data-proof="authored" data-by="ai:claude">Version:</span> <span data-proof="authored" data-by="ai:claude">`text-sm bg-every-bg px-3 py-1 rounded-full border border-every-border`</span>

* <span data-proof="authored" data-by="ai:claude">Tags:</span> <span data-proof="authored" data-by="ai:claude">`text-sm bg-every-orange/10 text-every-orange px-3 py-1 rounded-full border border-every-orange/20`</span>

### <span data-proof="authored" data-by="ai:claude">Links</span>

* <span data-proof="authored" data-by="ai:claude">Standard:</span> <span data-proof="authored" data-by="ai:claude">`text-every-orange hover:text-every-orange-hover transition-colors`</span>

* <span data-proof="authored" data-by="ai:claude">Nav:</span> <span data-proof="authored" data-by="ai:claude">`text-every-text-muted hover:text-every-text transition-colors`</span>

### <span data-proof="authored" data-by="ai:claude">Inputs</span>

* <span data-proof="authored" data-by="ai:claude">`bg-every-bg border border-every-border rounded-lg text-every-text`</span>

* <span data-proof="authored" data-by="ai:claude">Focus:</span> <span data-proof="authored" data-by="ai:claude">`focus:ring-2 focus:ring-every-orange focus:border-every-orange`</span>

## <span data-proof="authored" data-by="ai:claude">Layout Structure</span>

```
┌─────────────────────────────────────────┐
│ Header: logo (left) + nav links (right) │
│ border-b border-every-border │
├─────────────────────────────────────────┤
│ │
│ Main content (max-w-5xl, centered) │
│ px-4 py-10 │
│ │
├─────────────────────────────────────────┤
│ Footer: "Vetted skills..." + Every link │
│ border-t border-every-border │
└─────────────────────────────────────────┘
```

## <span data-proof="authored" data-by="ai:claude">Design Constraints</span>

* <span data-proof="authored" data-by="ai:claude">ONLY use Inter font — no serif, no decorative fonts</span>

* <span data-proof="authored" data-by="ai:claude">ONLY use the color palette above — no new colors</span>

* <span data-proof="authored" data-by="ai:claude">Dark mode only — no light mode variant</span>

* <span data-proof="authored" data-by="ai:claude">Rounded corners:</span> <span data-proof="authored" data-by="ai:claude">`rounded-lg`</span> <span data-proof="authored" data-by="ai:claude">for cards/inputs,</span> <span data-proof="authored" data-by="ai:claude">`rounded-full`</span> <span data-proof="authored" data-by="ai:claude">for pills/badges</span>

* <span data-proof="authored" data-by="ai:claude">All transitions use</span> <span data-proof="authored" data-by="ai:claude">`transition-colors`</span> <span data-proof="authored" data-by="ai:claude">(no animations or motion)</span>
47 changes: 47 additions & 0 deletions .superdesign/init/components.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
# <span data-proof="authored" data-by="ai:claude">Shared UI Components</span>

<span data-proof="authored" data-by="ai:claude">This project has no shared component library in</span> <span data-proof="authored" data-by="ai:claude">`src/components/`</span> <span data-proof="authored" data-by="ai:claude">— the directory is empty.</span>

<span data-proof="authored" data-by="ai:claude">All UI is inline in Astro page templates using Tailwind utility classes directly.</span>

## <span data-proof="authored" data-by="ai:claude">Common UI Patterns (inline, not extracted)</span>

### <span data-proof="authored" data-by="ai:claude">Version Badge</span>

```html proof:W3sidHlwZSI6InByb29mQXV0aG9yZWQiLCJmcm9tIjowLCJ0byI6MTIzLCJhdHRycyI6eyJieSI6ImFpOmNsYXVkZSJ9fV0=
<span class="text-sm text-every-text-muted bg-every-bg px-3 py-1 rounded-full border border-every-border">v{version}</span>
```

### <span data-proof="authored" data-by="ai:claude">Tag Pill</span>

```html proof:W3sidHlwZSI6InByb29mQXV0aG9yZWQiLCJmcm9tIjowLCJ0byI6MTI0LCJhdHRycyI6eyJieSI6ImFpOmNsYXVkZSJ9fV0=
<span class="text-sm bg-every-orange/10 text-every-orange px-3 py-1 rounded-full border border-every-orange/20">{tag}</span>
```

### <span data-proof="authored" data-by="ai:claude">Card/Surface Block</span>

```html proof:W3sidHlwZSI6InByb29mQXV0aG9yZWQiLCJmcm9tIjowLCJ0byI6OTgsImF0dHJzIjp7ImJ5IjoiYWk6Y2xhdWRlIn19XQ==
<div class="bg-every-surface rounded-lg border border-every-border p-6">
<!-- content -->
</div>
```

### <span data-proof="authored" data-by="ai:claude">Orange CTA Button</span>

```html proof:W3sidHlwZSI6InByb29mQXV0aG9yZWQiLCJmcm9tIjowLCJ0byI6MTQ3LCJhdHRycyI6eyJieSI6ImFpOmNsYXVkZSJ9fV0=
<button class="w-full bg-every-orange text-white py-3 px-4 rounded-lg font-medium hover:bg-every-orange-hover transition-colors">
Label
</button>
```

### <span data-proof="authored" data-by="ai:claude">Text Input</span>

```html proof:W3sidHlwZSI6InByb29mQXV0aG9yZWQiLCJmcm9tIjowLCJ0byI6MjEzLCJhdHRycyI6eyJieSI6ImFpOmNsYXVkZSJ9fV0=
<input class="w-full px-4 py-3 bg-every-bg border border-every-border rounded-lg text-every-text placeholder-every-text-muted/50 focus:ring-2 focus:ring-every-orange focus:border-every-orange transition-colors" />
```

### <span data-proof="authored" data-by="ai:claude">Back Link</span>

```html proof:W3sidHlwZSI6InByb29mQXV0aG9yZWQiLCJmcm9tIjowLCJ0byI6MTIzLCJhdHRycyI6eyJieSI6ImFpOmNsYXVkZSJ9fV0=
<a href="/" class="text-sm text-every-orange hover:text-every-orange-hover transition-colors">&larr; Back to all skills</a>
```
Loading