diff --git a/.superdesign/design-system.md b/.superdesign/design-system.md new file mode 100644 index 0000000..ed15f1c --- /dev/null +++ b/.superdesign/design-system.md @@ -0,0 +1,145 @@ +# EverySkill Design System + +## Product Context + +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. + +## Brand Identity + +* **Name**: EverySkill (logo text: "Every" in white + "Skill" in orange) + +* **Tone**: Professional, minimal, developer-focused + +* **Theme**: Dark mode only + +## Color System + +### Primary Colors + +| Name | Hex | CSS Variable | Usage | +| ------------------------------------------------------------------------- | ---------------------------------------------------------------- | --------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------- | +| Every Orange | `#FF5A36` | `every-orange` | Primary accent, links, CTAs, logo highlight | +| Every Orange Hover | `#FF7A5C` | `every-orange-hover` | Hover state for orange elements | + +### Background & Surface + +| Name | Hex | CSS Variable | Usage | +| -------------------------------------------------------------------- | ---------------------------------------------------------------- | ---------------------------------------------------------------------------- | ----------------------------------------------------------------------------- | +| Background | `#0a0a0a` | `every-bg` | Page background | +| Surface | `#141414` | `every-surface` | Card/panel backgrounds | +| Surface Hover | `#1a1a1a` | `every-surface-hover` | Hovered card state | +| Border | `#2a2a2a` | `every-border` | Borders, dividers | + +### Text + +| Name | Hex | CSS Variable | Usage | +| ----------------------------------------------------------------- | ---------------------------------------------------------------- | ------------------------------------------------------------------------- | --------------------------------------------------------------------------------- | +| Text | `#fafafa` | `every-text` | Primary text | +| Text Muted | `#888888` | `every-text-muted` | Secondary/descriptive text | + +### Semantic Colors (used inline, not in config) + +* **Success**: `green-900/20` bg, `green-800/30` border, `green-500` icon, `green-400` text + +* **Error**: `red-900/20` bg, `red-800/50` border, `red-400` text + +* **Orange variants**: `every-orange/10` (tag bg), `every-orange/20` (tag border), `every-orange/50` (hover border) + +## Typography + +* **Font Family**: Inter (Google Fonts) — weights 400, 500, 600, 700 + +* **Fallback**: system-ui, -apple-system, BlinkMacSystemFont, sans-serif + +* **Rendering**: `antialiased` + +* **Selection**: Orange highlight (`rgba(255, 90, 54, 0.3)`) + +### Type Scale (Tailwind defaults) + +* Page titles: `text-4xl font-bold tracking-tight` (homepage), `text-2xl font-bold` (skill page) + +* Section headings: `font-semibold text-lg` + +* Body: default (1rem/16px) + +* Small text: `text-sm` (0.875rem) + +* Extra small: `text-xs` (0.75rem) + +## Spacing & Layout + +* **Max width**: `max-w-5xl` (64rem / 1024px) + +* **Page padding**: `px-4 py-10` + +* **Card padding**: `p-6` (1.5rem) standard, `p-4`/`p-5` for smaller panels + +* **Section spacing**: `space-y-6` to `space-y-10` + +* **Grid**: `md:grid-cols-2` for skill cards on homepage + +## Component Patterns + +### Cards + +* Background: `bg-every-surface` + +* Border: `border border-every-border` + +* Radius: `rounded-lg` + +* Hover (interactive): `hover:border-every-orange/50 hover:bg-every-surface-hover` + +### Buttons + +* Primary: `bg-every-orange text-white rounded-lg font-medium hover:bg-every-orange-hover` + +* Secondary/ghost: `border border-every-border text-every-text-muted hover:text-every-text hover:border-every-orange/50` + +### Badges/Pills + +* Version: `text-sm bg-every-bg px-3 py-1 rounded-full border border-every-border` + +* Tags: `text-sm bg-every-orange/10 text-every-orange px-3 py-1 rounded-full border border-every-orange/20` + +### Links + +* Standard: `text-every-orange hover:text-every-orange-hover transition-colors` + +* Nav: `text-every-text-muted hover:text-every-text transition-colors` + +### Inputs + +* `bg-every-bg border border-every-border rounded-lg text-every-text` + +* Focus: `focus:ring-2 focus:ring-every-orange focus:border-every-orange` + +## Layout Structure + +``` +┌─────────────────────────────────────────┐ +│ 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 │ +└─────────────────────────────────────────┘ +``` + +## Design Constraints + +* ONLY use Inter font — no serif, no decorative fonts + +* ONLY use the color palette above — no new colors + +* Dark mode only — no light mode variant + +* Rounded corners: `rounded-lg` for cards/inputs, `rounded-full` for pills/badges + +* All transitions use `transition-colors` (no animations or motion) \ No newline at end of file diff --git a/.superdesign/init/components.md b/.superdesign/init/components.md new file mode 100644 index 0000000..b695952 --- /dev/null +++ b/.superdesign/init/components.md @@ -0,0 +1,47 @@ +# Shared UI Components + +This project has no shared component library in `src/components/` — the directory is empty. + +All UI is inline in Astro page templates using Tailwind utility classes directly. + +## Common UI Patterns (inline, not extracted) + +### Version Badge + +```html proof:W3sidHlwZSI6InByb29mQXV0aG9yZWQiLCJmcm9tIjowLCJ0byI6MTIzLCJhdHRycyI6eyJieSI6ImFpOmNsYXVkZSJ9fV0= +v{version} +``` + +### Tag Pill + +```html proof:W3sidHlwZSI6InByb29mQXV0aG9yZWQiLCJmcm9tIjowLCJ0byI6MTI0LCJhdHRycyI6eyJieSI6ImFpOmNsYXVkZSJ9fV0= +{tag} +``` + +### Card/Surface Block + +```html proof:W3sidHlwZSI6InByb29mQXV0aG9yZWQiLCJmcm9tIjowLCJ0byI6OTgsImF0dHJzIjp7ImJ5IjoiYWk6Y2xhdWRlIn19XQ== +
+ +
+``` + +### Orange CTA Button + +```html proof:W3sidHlwZSI6InByb29mQXV0aG9yZWQiLCJmcm9tIjowLCJ0byI6MTQ3LCJhdHRycyI6eyJieSI6ImFpOmNsYXVkZSJ9fV0= + +``` + +### Text Input + +```html proof:W3sidHlwZSI6InByb29mQXV0aG9yZWQiLCJmcm9tIjowLCJ0byI6MjEzLCJhdHRycyI6eyJieSI6ImFpOmNsYXVkZSJ9fV0= + +``` + +### Back Link + +```html proof:W3sidHlwZSI6InByb29mQXV0aG9yZWQiLCJmcm9tIjowLCJ0byI6MTIzLCJhdHRycyI6eyJieSI6ImFpOmNsYXVkZSJ9fV0= +← Back to all skills +``` \ No newline at end of file diff --git a/.superdesign/init/layouts.md b/.superdesign/init/layouts.md new file mode 100644 index 0000000..5964203 --- /dev/null +++ b/.superdesign/init/layouts.md @@ -0,0 +1,81 @@ +# Layouts + +## Base.astro — Master Layout + +**File**: `src/layouts/Base.astro` + +```astro proof:W3sidHlwZSI6InByb29mQXV0aG9yZWQiLCJmcm9tIjowLCJ0byI6MjE0MywiYXR0cnMiOnsiYnkiOiJhaTpjbGF1ZGUifX1d +--- +interface Props { + title: string; + description?: string; +} + +const { title, description = 'Vetted skills for your AI, maintained by Every' } = Astro.props; +--- + + + + + + + + + + + + {title} | EverySkill + + + +
+ +
+
+ +
+ + + + + +``` + +### Layout Structure + +* **Header**: Fixed top bar with logo + nav links (Skills, Submit) + +* **Main**: `max-w-5xl` centered content area with `px-4 py-10` + +* **Footer**: Bottom bar with Every attribution + +* **Font**: Inter (400, 500, 600, 700) from Google Fonts + +* **Body**: Dark bg (`#0a0a0a`), light text (`#fafafa`), antialiased \ No newline at end of file diff --git a/.superdesign/init/pages.md b/.superdesign/init/pages.md new file mode 100644 index 0000000..223d75e --- /dev/null +++ b/.superdesign/init/pages.md @@ -0,0 +1,46 @@ +# Page Dependency Trees + +## / (Homepage) — `src/pages/index.astro` + +``` +src/pages/index.astro +├── src/layouts/Base.astro (master layout: header, nav, footer) +├── tailwind.config.mjs (color tokens, font config) +└── (no sub-components — all UI inline) +``` + +## /{skill} (Individual Skill Page) — `src/pages/[skill].astro` + +``` +src/pages/[skill].astro +├── src/layouts/Base.astro (master layout: header, nav, footer) +├── tailwind.config.mjs (color tokens, font config) +└── (no sub-components — all UI inline) +``` + +**Content sections on the skill page:** + +1. Back link ("Back to all skills") +2. Header card: skill name, description, version badge +3. Tags row (conditional) +4. Security Vetted badge (green) +5. Permissions Required section (conditional) +6. Skill Instructions (pre-formatted markdown body) +7. Raw SKILL.md link + +## /submit (Submission Page) — `src/pages/submit.astro` + +``` +src/pages/submit.astro +├── src/layouts/Base.astro (master layout: header, nav, footer) +├── tailwind.config.mjs (color tokens, font config) +└── (inline JS for tab switching, GitHub import, file upload) +``` + +## Notes + +* No shared React components exist yet — all UI is inline Astro templates + +* Every page uses `Base.astro` as wrapper layout + +* Styling is 100% Tailwind utility classes \ No newline at end of file diff --git a/.superdesign/init/routes.md b/.superdesign/init/routes.md new file mode 100644 index 0000000..125bf8a --- /dev/null +++ b/.superdesign/init/routes.md @@ -0,0 +1,21 @@ +# Routes + +Astro file-based routing. All routes are in `src/pages/`. + +| Route | File | Type | Purpose | +| ----------------------------------------------------------------------- | ----------------------------------------------------------------------------------- | -------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | +| `/` | `src/pages/index.astro` | Static (SSG) | Homepage — lists all skills in a grid | +| `/{skill-name}` | `src/pages/[skill].astro` | Dynamic (SSG) | Individual skill detail page | +| `/submit` | `src/pages/submit.astro` | SSR | Skill submission form (password-protected) | +| `/registry.json` | `src/pages/registry.json.ts` | API Route | Machine-readable skill index | +| `/api/auth` | `src/pages/api/auth.ts` | API Route | Password authentication | +| `/api/scan-repo` | `src/pages/api/scan-repo.ts` | API Route | GitHub repo scanning | +| `/api/submit` | `src/pages/api/submit.ts` | API Route | Skill submission handler | + +## Data Flow + +* Skills stored as `/skills/{name}/SKILL.md` with YAML frontmatter + +* Both `/` and `/{skill}` read from the same skill files at build time + +* `getStaticPaths()` generates a static page per skill directory \ No newline at end of file diff --git a/.superdesign/init/theme.md b/.superdesign/init/theme.md new file mode 100644 index 0000000..aec5679 --- /dev/null +++ b/.superdesign/init/theme.md @@ -0,0 +1,78 @@ +# Theme & Design Tokens + +## Tailwind Config + +**File**: `tailwind.config.mjs` + +```js proof:W3sidHlwZSI6InByb29mQXV0aG9yZWQiLCJmcm9tIjowLCJ0byI6NjIzLCJhdHRycyI6eyJieSI6ImFpOmNsYXVkZSJ9fV0= +/** @type {import('tailwindcss').Config} */ +export default { + content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'], + theme: { + extend: { + colors: { + 'every-orange': '#FF5A36', + 'every-orange-hover': '#FF7A5C', + 'every-bg': '#0a0a0a', + 'every-surface': '#141414', + 'every-surface-hover': '#1a1a1a', + 'every-border': '#2a2a2a', + 'every-text': '#fafafa', + 'every-text-muted': '#888888', + }, + fontFamily: { + sans: ['Inter', 'system-ui', '-apple-system', 'BlinkMacSystemFont', 'sans-serif'], + }, + }, + }, + plugins: [], +} +``` + +## Color Palette + +| Token | Hex | Usage | +| ---------------------------------------------------------------------------- | ---------------------------------------------------------------- | --------------------------------------------------------------------------------------------------- | +| `every-orange` | `#FF5A36` | Primary accent, links, CTAs, brand highlight | +| `every-orange-hover` | `#FF7A5C` | Hover state for orange elements | +| `every-bg` | `#0a0a0a` | Page background (near-black) | +| `every-surface` | `#141414` | Card/surface background | +| `every-surface-hover` | `#1a1a1a` | Hovered card background | +| `every-border` | `#2a2a2a` | Borders on cards, dividers | +| `every-text` | `#fafafa` | Primary text (near-white) | +| `every-text-muted` | `#888888` | Secondary/muted text | + +## Additional Colors Used Inline + +* Success green: `green-900/20` bg, `green-800/30` border, `green-500` icon, `green-400` text + +* Error red: `red-900/20` bg, `red-800/50` border, `red-400` text + +* Orange opacity variants: `every-orange/10`, `every-orange/20`, `every-orange/50` + +## Typography + +* **Font**: Inter (Google Fonts), weights: 400, 500, 600, 700 + +* **Fallback**: system-ui, -apple-system, BlinkMacSystemFont, sans-serif + +* **Antialiasing**: `antialiased` on body + +## Global Styles + +```css proof:W3sidHlwZSI6InByb29mQXV0aG9yZWQiLCJmcm9tIjowLCJ0byI6OTEsImF0dHJzIjp7ImJ5IjoiYWk6Y2xhdWRlIn19XQ== +html { scroll-behavior: smooth; } +::selection { background-color: rgba(255, 90, 54, 0.3); } +``` + +## Design Principles + +* Dark theme only (no light mode) + +* Minimal, developer-focused aesthetic + +* Cards with subtle borders on dark surfaces + +* Orange as sole accent color + +* Rounded corners: `rounded-lg` (0.5rem) standard, `rounded-full` for badges/pills \ No newline at end of file