# Floom Wireframes v2 — Refinement Notes

**Date:** 2026-05-07  
**vs:** content/ (v1)

---

## Changes Applied

### Library — All Variants

**Edit 1: Skills section moved to top.**  
v1 order: MCP command → agents → skills.  
v2 order: skills → agents (compact) → MCP (compact).  
Rationale: users come to Library for their skills, not to re-copy their MCP command or check agent status.

**Edit 2: "Sync now" button removed.**  
Replaced with passive text: "Last synced 2 min ago" in the header strip.  
Rationale: sync is automatic. A manual button implies it isn't, and teaches the wrong mental model.

**Library V2 (sidebar):** Sticky TOC sidebar retained and refined. Federico confirmed this is "nice." Sidebar now scrolls with content, active item highlights on scroll, sub-items show individual skill names for direct jumping. "Sync now" button in sidebar bottom also removed.

---

### Skill Page — All Variants

**Edit 3: Add modal simplified to default-to-all.**  
v1: multi-select agent checkboxes visible immediately.  
v2: visible default state = "Will sync to all 3 connected agents" + "[Choose specific agents]" expand link. Same for folder: "Adding to All skills" + "[Choose folder]" expand link.  
Rationale: 95% of add actions will want all agents. Showing checkboxes by default adds friction for zero value in the common case. The expand link gives full control to whoever needs it.

**Skill Page V2 sticky TOC left:** Retained as Federico-preferred layout. TOC highlights active section on scroll.

**Mobile skill pages:** Sticky TOC becomes horizontal jump bar (scrollable). Sticky bottom CTA for "+ Add to my floom" at all times.

---

### New: /explore Pages

**explore-v1 (simple grid):**  
- Search bar + filter chips at top
- Packs section (curated bundles) before individual skills
- Individual skills in 4-column grid (desktop), list on mobile
- Filter chips: All / by category / Packs only / Skills only

**explore-v2 (editorial):**  
- "This week's picks" editorial header — human-curated, changes weekly
- Featured pack hero (gstack) as large 2-column split card
- Secondary/tertiary packs in right column with editorial notes ("Editor's note: start here", "Community favorite", "New this week")
- Alphabetical A–Z skill index below, with letter-jump strip at top
- Structural distinction: packs for discovery, A–Z for reference lookup

---

### Mobile Versions — All Files

All desktop variants now have mobile counterparts at 375px. Mobile-specific patterns applied:

- **Navigation:** Hamburger / top-right menu or simplified nav strip
- **Library:** Bottom tab bar (Library / Explore / Agents / Settings)
- **Skill pages:** Horizontal scrollable jump bar replaces sidebar TOC; sticky bottom CTA
- **Explore:** Horizontal filter strip; featured pack hero full-width
- **Sign-in:** Split layout (desktop) becomes stacked (mobile) — brand pitch above, form below
- **Landing:** Single column; sync diagram simplified to compact 3-box layout

---

## What Did NOT Change

- Landing page structural variants (V1/V2/V3) — no structural edits requested
- Sign-in variants — no structural edits requested  
- Design: still pure B&W, no color
- Copy: real Floom copy throughout, no placeholder text
- Annotations: all [bracket] annotations preserved

---

## File Count

| Category | Desktop | Mobile | Total |
|----------|---------|--------|-------|
| Landing | 3 | 3 | 6 |
| Library | 2 | 2 | 4 |
| Skill page | 2 | 2 | 4 |
| Sign-in | 2 | 2 | 4 |
| Explore (new) | 2 | 2 | 4 |
| Index + notes | 1 | — | 1 |
| **Total** | **12** | **11** | **23** |