# Nightshift — Design-Skill Showcase

A single fictional brand — **Nightshift Coffee Roasters** — rendered by every design skill,
so you can see at a glance what each skill produces. One shared content spec (brand, copy,
product line, admin data); only the *design* changes between pages.

## How to view

Anchor links work by opening `index.html` directly. For the **live iframe previews** on the
gallery to render, serve the folder over http:

```bash
cd showcase
python3 -m http.server 8000
# open http://localhost:8000
```

## Structure

```
showcase/
  index.html            ← the gallery (start here)
  assets/img/           ← shared photography (24 images)
  assets/thumbs/        ← preview posters (fallback for file://)
  <skill>/landing.html  ← marketing landing in that skill's aesthetic
  <skill>/admin.html    ← matching "Operations Console" admin panel
```

## Skill map — full landing + admin pairs

| # | folder | skill | aesthetic | mixing |
|---|---|---|---|---|
| 01 | `high-end/` | **high-end-visual-design** | luxe editorial / premium agency | pick one aesthetic |
| 02 | `minimalist/` | **minimalist-ui** | warm monochrome editorial, flat, no gradients | pick one aesthetic |
| 03 | `brutalist/` | **industrial-brutalist-ui** | Swiss print × military terminal, grain | pick one aesthetic |
| 04 | `impeccable/` | **impeccable** | cinematic, one extraordinary effect | broad design skill |
| 05 | `design-taste/` | **design-taste-frontend** | systemic dark product, 8pt grid, tabular data | stackable |
| 06 | `frontend-ui/` | **frontend-ui-engineering** | clean light production SaaS, real states | stackable |
| 07 | `frontend-design/` | **frontend-design** (plugin) | one bold aesthetic risk — riso print-shop | stackable |
| 08 | `soft/` | **soft-skill** (taste-skill repo) | Soft Structuralism — silver/white, huge grotesk, pillow shadows, spring | same source as high-end |
| 09 | `gpt-taste/` | **gpt-tasteskill** (taste-skill repo) | Awwwards editorial + scroll choreography (AIDA, gapless bento) | GSAP recreated in vanilla |
| 10 | `taste-v1/` | **design-taste-frontend v1** (taste-skill repo) | original dial-driven high-agency — asymmetric, liquid-glass, magnetic/spring | shown vs v2 |

**Rule:** the three aesthetic skills (high-end / minimalist / brutalist) each set a whole
look and are mutually exclusive — choose one per project. The others stack on top. Note:
`soft-skill` and `high-end-visual-design` are the SAME source skill — the soft page commits to
its Soft-Structuralism archetype so the two look distinct.

## Community candidates (researched 2026-07-20, recorded for the skill-resolver)

Vetted external design skills to expand the palette, recorded as needs in
`~/.orchestrator/skill-needs/` for quarantine + audit (never self-installed):

- **ConardLi/garden-skills** (9.6k★, MIT) — 25 recipes: Aesop, Muji, Monocle, Bloomberg terminal, mid-century, Y2K, Tufte.
- **bergside/awesome-design-skills** (1.85k★, MIT) — glass/clay/neu/skeuomorphism, Riso, dithered (registry).
- **Ilm-Alan/frontend-design** (MIT) — Aurora Maximalism, CRT retro-futurism, lo-fi Riso.
- Tier 2: VoltAgent (terminal/broadsheet), rohitg00 (glass/soft-futurism, A24-cult), Koomook (cyberpunk/vaporwave), curiositech (colorful neobrutalism).
- Rejected: a repo with manufactured 108k★ (watchers/age mismatch — popularity ≠ trust).

## Method & system skills (mapped on the gallery, no standalone page)

- **redesign-existing-projects** — upgrade an existing site to premium without breaking it.
- **dataviz** — charts, palettes, stat tiles; pair with any admin panel here.
- **humanizer** — remove AI tells from copy; run on all prose before shipping.
- **stitch-design-taste** — generate a DESIGN.md brief for agent handoff / Google Stitch.
- **artifact-design** — design fundamentals for Claude Artifacts.

## Photography

All photos are free-license from **Unsplash** and **Pexels**, fetched via the
`free-stock-images` MCP. Nightshift Coffee Roasters is fictional; all names, prices, reviews
and dashboard data are mock.

Unsplash contributors: Yanapi Senaud · Battlecreek Coffee Roasters · Scott Soltys-Curry ·
Ceyda Çiftci · Faris Ristiansyah · Kaylee Stoll · Fatih Mehmet YILDIZ · Anastasiia Chepinska ·
Mike Kenneally · Lex Sirikiat · mockupbee · Madalyn Cox · Lee Campbell · Brooke Cagle ·
daan evers · Clifford · atelierbyvineeth · Jurica Koletić · Joseph Gonzalez · Michael Dam ·
Ronny Sison · Jassir Jonis · Chloe Leis.