Skip to content

Commit 50b2f45

Browse files
shivammittal274shivammittal274
authored
fix(skills): UI section separation and fix find-alternatives rendering (#492)
* fix(skills): UI section separation and fix find-alternatives rendering - Split skills page into "My Skills" (user) and "BrowserOS Skills" (built-in) sections - Fix find-alternatives SKILL.md — replace angle bracket placeholders with curly braces to prevent MDXEditor from parsing them as JSX and rendering empty content * fix(skills): bump find-alternatives to v1.1 for CDN sync
1 parent 1b88ade commit 50b2f45

2 files changed

Lines changed: 72 additions & 33 deletions

File tree

  • packages/browseros-agent/apps

‎packages/browseros-agent/apps/agent/entrypoints/app/skills/SkillsPage.tsx‎

Lines changed: 50 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -108,17 +108,12 @@ export const SkillsPage: FC = () => {
108108
) : null}
109109

110110
{!isLoading && !error && skills.length > 0 ? (
111-
<div className="grid grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-3">
112-
{skills.map((skill) => (
113-
<SkillCard
114-
key={skill.id}
115-
skill={skill}
116-
onEdit={() => handleEdit(skill)}
117-
onDelete={() => setSkillToDelete(skill)}
118-
onToggle={(enabled) => handleToggle(skill, enabled)}
119-
/>
120-
))}
121-
</div>
111+
<SkillSections
112+
skills={skills}
113+
onEdit={handleEdit}
114+
onDelete={(skill) => setSkillToDelete(skill)}
115+
onToggle={handleToggle}
116+
/>
122117
) : null}
123118

124119
<SkillDialog
@@ -251,6 +246,50 @@ const EmptyState: FC<{ onCreateClick: () => void }> = ({ onCreateClick }) => (
251246
</Card>
252247
)
253248

249+
const SkillGrid: FC<{ children: React.ReactNode }> = ({ children }) => (
250+
<div className="grid grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-3">
251+
{children}
252+
</div>
253+
)
254+
255+
const SkillSections: FC<{
256+
skills: SkillMeta[]
257+
onEdit: (skill: SkillMeta) => void
258+
onDelete: (skill: SkillMeta) => void
259+
onToggle: (skill: SkillMeta, enabled: boolean) => void
260+
}> = ({ skills, onEdit, onDelete, onToggle }) => {
261+
const userSkills = skills.filter((s) => !s.builtIn)
262+
const builtInSkills = skills.filter((s) => s.builtIn)
263+
264+
const renderCard = (skill: SkillMeta) => (
265+
<SkillCard
266+
key={skill.id}
267+
skill={skill}
268+
onEdit={() => onEdit(skill)}
269+
onDelete={() => onDelete(skill)}
270+
onToggle={(enabled) => onToggle(skill, enabled)}
271+
/>
272+
)
273+
274+
return (
275+
<div className="space-y-6">
276+
{userSkills.length > 0 ? (
277+
<div className="space-y-3">
278+
<h3 className="font-semibold text-sm">My Skills</h3>
279+
<SkillGrid>{userSkills.map(renderCard)}</SkillGrid>
280+
</div>
281+
) : null}
282+
283+
{builtInSkills.length > 0 ? (
284+
<div className="space-y-3">
285+
<h3 className="font-semibold text-sm">BrowserOS Skills</h3>
286+
<SkillGrid>{builtInSkills.map(renderCard)}</SkillGrid>
287+
</div>
288+
) : null}
289+
</div>
290+
)
291+
}
292+
254293
const SkillCard: FC<{
255294
skill: SkillMeta
256295
onEdit: () => void

‎packages/browseros-agent/apps/server/src/skills/defaults/find-alternatives/SKILL.md‎

Lines changed: 22 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ description: Find alternative products to something the user is looking at or co
44
metadata:
55
display-name: Find Alternatives
66
enabled: "true"
7-
version: "1.0"
7+
version: "1.1"
88
---
99

1010
# Find Alternatives
@@ -48,12 +48,12 @@ Activate when the user:
4848

4949
| Tab | Target | Query |
5050
|-----|--------|-------|
51-
| 1 | Google Shopping | `<product category> alternatives under $<budget>` |
52-
| 2 | Google Search | `best <product category> alternatives <year> reddit` |
53-
| 3 | Google Search | `<product category> vs comparison <year>` |
54-
| 4 | Amazon | `<product category>` filtered to price range |
55-
| 5 | Walmart | `<product category>` in price range |
56-
| 6 | Best Buy / category retailer | `<product category>` |
51+
| 1 | Google Shopping | `{product category} alternatives under ${budget}` |
52+
| 2 | Google Search | `best {product category} alternatives {year} reddit` |
53+
| 3 | Google Search | `{product category} vs comparison {year}` |
54+
| 4 | Amazon | `{product category}` filtered to price range |
55+
| 5 | Walmart | `{product category}` in price range |
56+
| 6 | Best Buy / category retailer | `{product category}` |
5757
| 7–10 | Review sites, Reddit threads, or niche retailers relevant to the category |
5858

5959
For **each tab**:
@@ -64,10 +64,10 @@ For **each tab**:
6464
| Read results | `get_page_content` | Extract search results as markdown |
6565
| Visit promising results | `navigate_page` | Click through to individual product pages and review articles |
6666
| Extract data | `get_page_content` | Pull product details — name, price, features, ratings, reviews |
67-
| **Save immediately** | `evaluate_script` | Write to `raw/<n>-<source-slug>.json` (see format below) |
67+
| **Save immediately** | `evaluate_script` | Write to `raw/{n}-{source-slug}.json` (see format below) |
6868
| Close tab | `close_page` | Free the tab after saving |
6969

70-
#### Raw Data Format (`raw/<n>-<source-slug>.json`)
70+
#### Raw Data Format (`raw/{n}-{source-slug}.json`)
7171

7272
```json
7373
{
@@ -115,21 +115,21 @@ After all sources are saved:
115115
5. **Write `findings.md`** with the full ranking, reasoning, and source references:
116116

117117
```markdown
118-
# Alternatives for: <Reference Product>
118+
# Alternatives for: {Reference Product}
119119

120120
**Reference price:** $X
121121
**Budget range:** $X – $Y
122-
**Date:** <current date>
122+
**Date:** {current date}
123123

124124
## Top 5 Alternatives
125125

126-
### 1. <Product Name> — ⭐⭐⭐⭐⭐ (5/5)
127-
- **Price:** $X at <Retailer>
128-
- **Why:** <1–2 sentence justification>
129-
- **Link:** <product URL>
130-
- _Source: raw/<n>-<slug>.json_
126+
### 1. {Product Name} — ⭐⭐⭐⭐⭐ (5/5)
127+
- **Price:** $X at {Retailer}
128+
- **Why:** {1–2 sentence justification}
129+
- **Link:** {product URL}
130+
- _Source: raw/{n}-{slug}.json_
131131

132-
### 2. <Product Name> — ⭐⭐⭐⭐ (4/5)
132+
### 2. {Product Name} — ⭐⭐⭐⭐ (4/5)
133133
...
134134

135135
## Comparison vs Reference
@@ -147,14 +147,14 @@ Generate a self-contained `report.html` in the output directory:
147147
| Requirement | Detail |
148148
|-------------|--------|
149149
| **Theme** | Light background (`#ffffff`), clean sans-serif typography, generous whitespace |
150-
| **Header** | "Alternatives for: <Product Name>", date, budget range |
150+
| **Header** | "Alternatives for: {Product Name}", date, budget range |
151151
| **Reference product card** | Show the original product with its price, rating, and link as the baseline |
152152
| **Top 5 cards** | Each alternative as a card showing: rank, name, rating (star visualization), price, key features, and a clickable "View Product" link to the actual product page |
153153
| **Comparison table** | Side-by-side table with the reference product and all 5 alternatives — price, rating, key features, pros/cons |
154154
| **Rating explanation** | Brief note on how the 1–5 rating was determined |
155-
| **Product links** | Every product name and "View Product" button must be a clickable `<a href>` to the actual product URL |
155+
| **Product links** | Every product name and "View Product" button must be a clickable link to the actual product URL |
156156
| **Source references** | Footer section listing all sources consulted with links |
157-
| **Self-contained** | All styles in a `<style>` block — no external CSS or JS |
157+
| **Self-contained** | All styles in a style block — no external CSS or JS |
158158
| **Responsive** | Readable on desktop and mobile |
159159
| **Footer** | "Generated by BrowserOS Find Alternatives" with date |
160160

@@ -165,7 +165,7 @@ Use `evaluate_script` to write the HTML file.
165165
| Step | Tool | Detail |
166166
|------|------|--------|
167167
| Close hidden window | `close_window` | Clean up the research workspace |
168-
| Open report | `new_page` | Open `file://<path>/report.html` in the user's active window |
168+
| Open report | `new_page` | Open `file://{path}/report.html` in the user's active window |
169169
| Notify user | — | Summarize the top pick, mention the report path, and highlight any standout findings |
170170

171171
## Tool Reference
@@ -186,4 +186,4 @@ Use `evaluate_script` to write the HTML file.
186186
- **Deduplicate across retailers** — the same product on Amazon and Walmart should appear once with the best price noted.
187187
- If the reference product is niche, broaden the search to the general category rather than exact alternatives.
188188
- Include at least one budget option and one premium option to give the user a range.
189-
- If a product has very few reviews (<50), note the low confidence in the rating.
189+
- If a product has very few reviews (under 50), note the low confidence in the rating.

0 commit comments

Comments
 (0)