Refactoring Prompt

python.md

LLM Skills Site – Design & Implementation Specification

1. Objective

Reimplement a local, static version of a skills directory (similar to skills.sh) using:

• React
• Vite
• Static JSON + Markdown data
• No backend
• No external dependencies beyond minimal libraries

The system must support:

• Skill discovery (leaderboard)
• Search/filter
• Skill detail rendering (Markdown)
• Copy-to-install command UX

---

2. Project Structure

/project-root
  /public
    /skills/
      skill-a.md
      skill-b.md
    skills.json

  /src
    /components
    /pages
    /hooks
    /utils
    /styles

    App.jsx
    main.jsx

  index.html
  vite.config.js

---

3. Data Model

skills.json

{
  "skills": [
    {
      "id": "python-logging",
      "name": "Python Logging",
      "description": "Standard logging patterns",
      "tags": ["python", "logging"],
      "path": "/skills/python-logging.md",
      "repo": "org/python-logging",
      "installs": 1200,
      "trendScore": 80,
      "hotScore": 200
    }
  ]
}

---

Markdown Format

# Skill Title

## Summary
Description

## Usage
Steps

## Examples
Code

## Notes
Extra info

---

4. Routing

/               → leaderboard
/skill/:id      → skill detail

---

5. Core Features

5.1 Load Skills

• Fetch /skills.json
• Store in state

---

5.2 Search

• Instant filtering

• Match against:

  • name
  • description
  • tags

---

5.3 Sorting Modes

• Trending → trendScore
• Hot → hotScore
• All Time → installs

---

5.4 Install Button

Copies:

npx skills add <repo>

---

5.5 Markdown Rendering

• Fetch .md
• Render using react-markdown

---

6. UI Layout

Header (title + search)
Filter Tabs
Skill List (vertical rows)

---

7. Design System

7.1 Fonts

--font-sans: system-ui, -apple-system, Segoe UI, Roboto
--font-mono: monospace

---

7.2 Font Sizes

--text-xs: 12px
--text-sm: 13px
--text-md: 14px
--text-base: 16px
--text-lg: 18px
--text-xl: 22px

---

7.3 Spacing

--space-1: 4px
--space-2: 8px
--space-3: 12px
--space-4: 16px
--space-5: 24px
--space-6: 32px

---

7.4 Colors

--bg: #ffffff
--panel: #fafafa
--text: #111111
--muted: #6b7280
--faint: #9ca3af

--border: #e5e7eb
--border-strong: #d1d5db

--hover-bg: #f5f5f5
--active-bg: #eeeeee

---

8. Component Specs

---

8.1 Header

• Left: title
• Right: search input

---

8.2 Filter Tabs

• Trending
• Hot
• All Time

---

8.3 Skill Row

Structure:

[Rank] [Title + Desc + Tags] [Installs + Button]

---

8.4 Install Button

• Monospace font
• Copy-to-clipboard
• Hover + active states

---

8.5 Tags

• Small pill
• Rounded
• Border only

---

9. CSS (Core Required)

Base

body {
  margin: 0;
  font-family: var(--font-sans);
}

---

Header

.header {
  display: flex;
  justify-content: space-between;
  padding: 16px;
  border-bottom: 1px solid var(--border);
}

---

Tabs

.tab {
  padding: 6px 10px;
  border-radius: 6px;
}

.tab.active {
  border: 1px solid var(--border-strong);
}

---

Skill Row

.skill-row {
  display: flex;
  padding: 16px;
  border-bottom: 1px solid var(--border);
}

.skill-row:hover {
  background: var(--hover-bg);
}

---

Install Button

.install-btn {
  font-family: var(--font-mono);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  padding: 6px 10px;
}

---

Markdown

.content pre {
  border: 1px solid var(--border);
  padding: 16px;
  border-radius: 8px;
}

---

10. State Model

{
  skills: [],
  query: "",
  mode: "trending"
}

---

11. Implementation Steps

1. Create Vite React app
2. Add routing
3. Load skills.json
4. Render list
5. Implement search
6. Implement sorting
7. Load markdown
8. Add styling

---

12. UX Constraints

• No cards
• No shadows
• Minimal animation (<200ms)
• High density layout
• Text-first UI

---

13. Performance

• Lazy load markdown
• Cache loaded skills
• Avoid re-render on search (memoize)

---

14. Output

Build:

npm run build

Output:

/dist

Deployable as static site.

---

15. Summary

This system is:

• Fully static
• Developer-focused
• Fast to scan
• Minimal UI
• Data-driven

Primary goal:

Discover → Evaluate → Copy Install

---