Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
8 changes: 5 additions & 3 deletions COPY.md
Original file line number Diff line number Diff line change
Expand Up @@ -23,9 +23,11 @@ These exact strings. Do not paraphrase them per page.
| Site description | Curated agent skills by humans, written by real maintainers in their own GitHub repos | `nuxt.config.ts` site description (feeds every page's meta description) |
| Elevator pitch | Skilld is a curated registry of agent skills written by real people in the GitHub repos you already depend on. One install command, every agent; watch your stack and get a digest when it changes. | guidance only: no page ships it yet (use it where two sentences fit) |
| Home H1 | Hyped agent skills, no bloat | guidance only: the homepage H1. The page draws the rose brand dot as its full stop, so never type a period |
| Home intro | Run a skill once and nothing lands on disk. Fork or install the ones you keep. Every skill comes from its maintainer's repo, and a person reads it before it's listed. | guidance only: the homepage intro under the H1 |
| Home claims line | Open-source CLI Β· Analytics without cookies or IPs Β· A skills.sh alternative | guidance only: the homepage claims line. The last item links to `/vs/skills-sh` |
| Promo label | Teach your agent skilld | guidance only: the homepage promo chip beside `npx skilld install skilld --global` |
| Home verb line | search Β· run Β· install Β· keep current | guidance only: the homepage line under the H1. Each verb links to its `/cli` section: `#search`, `#run`, `#install`, `#update` |
| Home CLI link | The skilld CLI β†’ | guidance only: the homepage link to `/cli` at the end of the verb line. The arrow is an icon |
| Home caption | skilld.dev finds and tracks skills. The CLI runs or installs them in 19 agents. | guidance only: the homepage caption under the verb line. 19 is `AGENT_TARGETS` in the CLI's `crates/skilld-core/src/target.rs`. If that count changes, change this string |
| Home claims line | Open-source CLI Β· Analytics without cookies or IPs Β· A skills.sh alternative | guidance only: the homepage claims line under the search. The third item links to `/vs/skills-sh`, and the promo label closes the line |
| Promo label | Teach your agent skilld | guidance only: the last item of the homepage claims line. It opens a popover with `npx skilld install skilld --global` |
| Tile: run | No more skill bloat: Run skills once off, fork, or install. | guidance only: a homepage tile, with the title before the colon. The run chip motif pairs with it |
| Tile: trending | Stay hyped: What devs talk about on X and Bluesky, weekly and monthly. | guidance only: a homepage tile. The braille spark motif pairs with it |
| Tile: changes | Keep updated: Watch repos and get a digest when their skills change. | guidance only: a homepage tile. The change grid motif pairs with it |
Expand Down
5 changes: 2 additions & 3 deletions DESIGN.md
Original file line number Diff line number Diff line change
Expand Up @@ -434,12 +434,11 @@ These are editorial sets, not necessarily database collections yet. If a set has
- **Unknown install counts stay hidden**: an install value of zero can represent missing ingestion data, so cards omit the metric visually and semantically until a positive count is known.
- **Task-first homepage**: orientation and outcome discovery precede editorial inventory. Confirmed in the 2026-07 homepage rethink.
- **Frontend is a rotatable editorial focus**: it may dominate the current feature band but must not redefine skilld as a frontend-only registry.
- **One composition per homepage band**: split hero opening, work-track index, lead-and-supporting editorial pick, activity ledger, and contribution ledger. Repeating equal card grids weakens the page narrative.
- **One composition per homepage band**: centered hero opening, work-track index, lead-and-supporting editorial pick, activity ledger, and contribution ledger. Repeating equal card grids weakens the page narrative.
- **Evidence before freshness**: show provenance, editorial rationale, and a real install command before recent activity.
- **Section atmosphere**: low-chroma warm-stone and rose gradients may distinguish homepage bands. They stay masked to edges, use mode-specific opacity, and never sit behind data as a full-strength fill.
- **Collections remain primary curation**: directory links may be quiet, but Collections retain stronger hierarchy than publisher taxonomy.
- **Split hero with proof rail**: the hero pairs an H1, one explanatory paragraph, and two directional CTAs with a live rail of person-authored skills. The rail is the provenance claim in evidence; inline install and search stay out of the hero.
- **The hero runs wider than the bands below it**: hero content sits in `max-w-7xl` while editorial bands stay at `max-w-5xl`, so the headline and rail get room without widening the reading measure of the page.
- **Centered quiet hero**: the hero stacks a centered H1, the CLI verb line, one caption, one calm search field, and one mono claims line. The H1 full stop is the band's only rose dot. The Braille names texture sits at the sides in stone at low strength, with a clear column behind the copy. Chosen 2026-10-06 as take C of the hero lab.
- **Self-selecting work tracks**: the discovery grid asks what the visitor works on, not what the agent should do. Each track carries author avatars and a skill/author count, and empty tracks never render.
- **Homepage patterns are journey primitives**: atmosphere, outcome indexes, evidence ledgers, provenance lines, and lead/supporting picks now form the reusable editorial layer. Reuse their rules on discovery routes while preserving a distinct composition for each page.
- **Compact registry openings**: `/community`, `/skills`, and `/skills/trending` use `CompactPageHeader` with nothing but a page name and orientation copy; controls belong with the results they filter. Outcome pages retain plain-language mastheads. Skill detail remains dense and unchanged.
Expand Down
160 changes: 2 additions & 158 deletions app/assets/css/main.css
Original file line number Diff line number Diff line change
Expand Up @@ -330,41 +330,6 @@
padding: 1.5rem;
}

.home-display {
font-size: clamp(3rem, 1.6rem + 6.2vw, 6.75rem);
line-height: 1.04;
}

/*
* Split hero: the headline shares the band with the proof rail, so it trades
* peak size for line spacing that lets three lines of display type breathe.
*/
.home-display--split {
font-size: clamp(2.75rem, 1.5rem + 4.4vw, 5.25rem);
line-height: 1.08;
}

.home-hero-grid {
display: grid;
align-items: start;
min-width: 0;
gap: 3rem;
align-items: center;
}

@media (min-width: 64rem) {
.home-hero-grid {
grid-template-columns: minmax(0, 1.15fr) minmax(22rem, 0.85fr);
gap: 4rem;
}
}

@media (min-width: 80rem) {
.home-hero-grid {
gap: 5rem;
}
}

.home-section-title {
font-size: clamp(2.25rem, 1.65rem + 2.6vw, 4.25rem);
font-weight: 600;
Expand Down Expand Up @@ -1029,22 +994,12 @@
background: transparent !important;
}

/* Hero: compact category line, search and install slots above the fold. */
/* Hero: the centered H1. */
.home-hero-title {
font-size: clamp(2.25rem, 1.3rem + 3.4vw, 4.25rem);
line-height: 1.06;
}

.home-hero-slots {
display: grid;
gap: 0.75rem;
max-width: 36rem;
}

.home-hero-slot {
min-width: 0;
}

.home-make-grid {
display: grid;
gap: 1rem;
Expand Down Expand Up @@ -1205,28 +1160,6 @@
}
}

/* The braille names texture: behind the hero, masked clear of the headline.
Below 64rem the copy stacks above the rail, so the names sit behind the rail. */
.home-hero-texture {
position: absolute;
inset-inline: 0;
bottom: 0;
z-index: 0;
height: 22rem;
pointer-events: none;
mask-image: linear-gradient(to bottom, transparent, #000 40%);
-webkit-mask-image: linear-gradient(to bottom, transparent, #000 40%);
}

@media (min-width: 64rem) {
.home-hero-texture {
top: 0;
height: auto;
mask-image: linear-gradient(to right, transparent 57%, #000 80%);
-webkit-mask-image: linear-gradient(to right, transparent 57%, #000 80%);
}
}

/* The H1 full stop is the brand dot, the hero's rose element. */
.home-hero-dot {
display: inline-block;
Expand All @@ -1249,14 +1182,6 @@
text-decoration-color: currentColor;
}

.home-hero-promo {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem 0.75rem;
max-width: 36rem;
}

/* Trending cards: the repository link covers the card, and the run chip and
the source link sit above it. */
.home-trending-card {
Expand Down Expand Up @@ -1298,43 +1223,6 @@
outline: none;
}

/* the homepage hero: named agent row under the search. Proof of "every agent". */
.home-hero-agents {
display: flex;
flex-wrap: wrap;
column-gap: 1rem;
row-gap: 0.5rem;
font-family: var(--font-mono);
font-size: 0.75rem;
letter-spacing: 0.01em;
color: var(--ui-text-muted);
}

.home-hero-agent {
position: relative;
display: inline-flex;
align-items: center;
gap: 0.375rem;
padding: 0.3rem 0.55rem;
border: 1px solid var(--ui-border);
border-radius: calc(var(--ui-radius) * 0.75);
background: color-mix(in oklab, var(--ui-bg) 70%, transparent);
opacity: 0.75;
transition: opacity 200ms ease-out, border-color 200ms ease-out, transform 200ms ease-out, box-shadow 200ms ease-out;
}

/* Bloom on hover: the tile lifts and the rose glows under it. */
.home-hero-agent:hover {
opacity: 1;
border-color: color-mix(in oklab, var(--ui-primary) 50%, transparent);
transform: translateY(-1px);
box-shadow: 0 8px 22px -12px var(--ui-primary);
}

.home-hero-agents {
column-gap: 0.5rem;
}

/* The homepage authoring link opens the setup wizard. */
.home-make-strip {
display: grid;
Expand All @@ -1356,27 +1244,12 @@
}
}

.home-hero-rail [class*="stream"] {
scrollbar-width: none;
}

.home-hero-rail [class*="stream"]::-webkit-scrollbar {
display: none;
}

@media (max-width: 40rem) {
.home-hero-title {
font-size: 2.75rem;
}
}

/* Emphasis surface, one per page: the search carries a rose-tinted bevel. */
.home-hero-search :is(input, [role="combobox"]) {
box-shadow:
inset 0 1px 0 0 color-mix(in oklab, var(--ui-primary) 22%, rgb(255 255 255 / 0.06)),
0 1px 0 0 rgb(0 0 0 / 0.25);
}

/* Section watermarks: a big word printed in our dot grid, fading to the edges. */
.home-wm {
position: relative;
Expand Down Expand Up @@ -1474,7 +1347,7 @@
z-index: 1;
}

/* Ecosystem tiles under the authoring strip. Same chip as the agent row. */
/* Ecosystem tiles under the authoring strip. */
.home-eco-logos {
display: flex;
flex-wrap: wrap;
Expand Down Expand Up @@ -1521,35 +1394,12 @@
display: none;
}

/* The rail owns its scrollbar. The component's scoped rule loads last, so the
override has to name the same element. */
.home-page .home-hero-rail .skill-source-stream {
scrollbar-width: none;
scrollbar-gutter: auto;
}

.home-page .home-hero-rail .skill-source-stream::-webkit-scrollbar {
display: none;
}

/* Keep the provenance preview short on phones so discovery follows sooner. */
@media (max-width: 39.999rem) {
.home-page .home-hero-rail .skill-source-stream {
block-size: 18rem;
}
}

/* Tiles recede on their border, not on opacity. Dimmed text read as disabled. */
.home-hero-agent,
.home-eco-logo,
.home-eco-logo[data-state="live"] {
opacity: 1;
}

.home-hero-agent {
font-size: 0.8125rem;
}

/* Two h3 steps under the heading scale, not four. */
.home-page .home-freshness-primary-title,
.home-page .home-freshness-secondary-title {
Expand All @@ -1558,12 +1408,6 @@
line-height: 1.2;
}

/* A whole row fits inside the fade, so no row is ever half legible. */
.home-page .home-hero-rail .skill-source-stream {
mask-image: linear-gradient(to bottom, transparent 0%, black 13%, black 90%, transparent 100%);
-webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 13%, black 90%, transparent 100%);
}

/* Short data labels were breaking across lines at 390px. */
.home-page .data-label {
hyphens: none;
Expand Down
Loading