Skip to content

Commit 3d2c810

Browse files
239573049239573049
committed
feat(skills): add skills marketplace with backend API and frontend UI
- Add skills marketplace specification documents (design, requirements, tasks) - Create backend Skills API endpoint at GET /api/skills to fetch from GitHub registry - Add Skills data transfer objects (SkillsIndexDto, SkillDto, SkillServicesDto, SkillCompatibilityDto) - Add unit tests for skills data model validation (SkillsDataModelPropertyTests) - Create SkillsPage component with search and filtering capabilities - Add SkillCard component for displaying individual skill information - Implement OfflineIndicator component to show connectivity status - Add useOnlineStatus and useInstanceTracking custom hooks for state management - Add ProjectListPage component and navigation integration - Update App.tsx with skills route and navigation menu item - Add VSCode settings configuration - Update AGENTS.md documentation - Update skills/index.json registry - Remove deprecated hello-skill documentation - Add system/plan skill documentation - Enhance ProjectChat and ProjectSelectionCard components - Update styling in index.css
1 parent 1f47e86 commit 3d2c810

25 files changed

Lines changed: 2988 additions & 2018 deletions

‎.kiro/specs/skills-marketplace/design.md‎

Lines changed: 499 additions & 0 deletions
Large diffs are not rendered by default.

‎.kiro/specs/skills-marketplace/requirements.md‎

Lines changed: 135 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,135 @@
1+
# Requirements Document: Skills Marketplace
2+
3+
## Introduction
4+
5+
The Skills Marketplace feature enables users to discover and browse available skills fetched from a GitHub repository. Users can view skill details, filter by tags, search by keywords, and understand the status and capabilities of each skill. This feature provides a centralized catalog of skills with rich metadata to help users find the right tools for their needs.
6+
7+
## Glossary
8+
9+
- **Skill**: A reusable capability or tool available in the marketplace, defined by metadata including name, description, tags, and version
10+
- **Skills_API**: The backend ASP.NET Core Web API that fetches and serves skill data
11+
- **Skills_UI**: The React+TypeScript frontend that displays the skills marketplace
12+
- **GitHub_Source**: The remote JSON file at https://raw.githubusercontent.com/AIDotNet/MoYuCode/refs/heads/main/skills/index.json
13+
- **Skill_Card**: A UI component displaying a single skill's information
14+
- **Filter**: A mechanism to narrow down displayed skills based on tags or search terms
15+
- **Status**: The current state of a skill (e.g., active, deprecated, beta)
16+
- **Visibility**: Whether a skill is public or private
17+
18+
## Requirements
19+
20+
### Requirement 1: Fetch Skills Data from GitHub
21+
22+
**User Story:** As a system, I want to fetch skills data from the GitHub repository, so that the marketplace displays current and accurate skill information.
23+
24+
#### Acceptance Criteria
25+
26+
1. WHEN the Skills_API receives a request for skills data, THE Skills_API SHALL fetch the JSON file from the GitHub_Source
27+
2. WHEN the GitHub_Source is unavailable, THE Skills_API SHALL return an appropriate error response with status code 503
28+
3. WHEN the fetched JSON is invalid or malformed, THE Skills_API SHALL return an error response with status code 502
29+
4. WHEN the JSON is successfully fetched and parsed, THE Skills_API SHALL return the skills data with status code 200
30+
5. THE Skills_API SHALL include appropriate HTTP headers for caching to reduce unnecessary requests to GitHub_Source
31+
32+
### Requirement 2: Expose Skills API Endpoint
33+
34+
**User Story:** As a frontend developer, I want a REST API endpoint to retrieve skills data, so that the UI can display the marketplace.
35+
36+
#### Acceptance Criteria
37+
38+
1. THE Skills_API SHALL expose a GET endpoint at `/api/skills` that returns the skills data
39+
2. WHEN the endpoint is called, THE Skills_API SHALL return a JSON response containing the version, generatedAt timestamp, and skills array
40+
3. WHEN an error occurs during data fetching, THE Skills_API SHALL return an appropriate HTTP error status code and error message
41+
4. THE Skills_API SHALL set appropriate CORS headers to allow requests from the frontend origin
42+
43+
### Requirement 3: Display Skills in the UI
44+
45+
**User Story:** As a user, I want to view available skills in a card-based layout, so that I can browse and understand what each skill offers.
46+
47+
#### Acceptance Criteria
48+
49+
1. WHEN a user navigates to the Skills page, THE Skills_UI SHALL display all skills as Skill_Cards in a responsive grid layout
50+
2. WHEN displaying a Skill_Card, THE Skills_UI SHALL show the skill's name, summary, description, tags, version, and status
51+
3. WHEN a skill has no description, THE Skills_UI SHALL display only the summary without showing an empty description field
52+
4. WHEN the skills data is loading, THE Skills_UI SHALL display a loading indicator
53+
5. WHEN the skills data fails to load, THE Skills_UI SHALL display an error message with retry option
54+
55+
### Requirement 4: Implement Search Functionality
56+
57+
**User Story:** As a user, I want to search for skills by keywords, so that I can quickly find skills relevant to my needs.
58+
59+
#### Acceptance Criteria
60+
61+
1. THE Skills_UI SHALL provide a search input field at the top of the Skills page
62+
2. WHEN a user types in the search field, THE Skills_UI SHALL filter displayed skills to show only those matching the search term
63+
3. WHEN matching against search terms, THE Skills_UI SHALL search within skill name, summary, description, and tags (case-insensitive)
64+
4. WHEN no skills match the search term, THE Skills_UI SHALL display a "No skills found" message
65+
5. WHEN the search field is cleared, THE Skills_UI SHALL display all skills again
66+
67+
### Requirement 5: Implement Tag Filtering
68+
69+
**User Story:** As a user, I want to filter skills by tags, so that I can find skills in specific categories.
70+
71+
#### Acceptance Criteria
72+
73+
1. THE Skills_UI SHALL display all unique tags from the skills dataset as filter options
74+
2. WHEN a user selects one or more tags, THE Skills_UI SHALL display only skills that have at least one of the selected tags
75+
3. WHEN no tags are selected, THE Skills_UI SHALL display all skills
76+
4. WHEN both search and tag filters are active, THE Skills_UI SHALL display skills that match both the search term AND have at least one selected tag
77+
5. THE Skills_UI SHALL display the count of currently displayed skills versus total skills
78+
79+
### Requirement 6: Add Skills Navigation Menu
80+
81+
**User Story:** As a user, I want to access the Skills marketplace from the main navigation, so that I can easily discover available skills.
82+
83+
#### Acceptance Criteria
84+
85+
1. THE Skills_UI SHALL add a "Skills" menu item to the main navigation
86+
2. WHEN a user clicks the Skills menu item, THE Skills_UI SHALL navigate to the Skills page at route `/skills`
87+
3. WHEN the user is on the Skills page, THE Skills_UI SHALL highlight the Skills menu item as active
88+
89+
### Requirement 7: Display Skill Metadata
90+
91+
**User Story:** As a user, I want to see detailed metadata for each skill, so that I can understand its capabilities and status.
92+
93+
#### Acceptance Criteria
94+
95+
1. WHEN displaying a Skill_Card, THE Skills_UI SHALL show the skill version in a visible badge or label
96+
2. WHEN displaying a Skill_Card, THE Skills_UI SHALL show the skill status with appropriate visual styling (e.g., color coding)
97+
3. WHEN a skill has tags, THE Skills_UI SHALL display them as clickable badges that activate the tag filter
98+
4. WHEN a skill has services information (codex, claudecode), THE Skills_UI SHALL display which services support the skill
99+
5. THE Skills_UI SHALL format the updatedAt timestamp in a human-readable format (e.g., "Updated 2 days ago")
100+
101+
### Requirement 8: Handle Empty and Error States
102+
103+
**User Story:** As a user, I want clear feedback when no skills are available or when errors occur, so that I understand the system state.
104+
105+
#### Acceptance Criteria
106+
107+
1. WHEN the skills array is empty, THE Skills_UI SHALL display a message indicating no skills are available
108+
2. WHEN a network error occurs, THE Skills_UI SHALL display an error message with a retry button
109+
3. WHEN the user clicks retry, THE Skills_UI SHALL attempt to fetch the skills data again
110+
4. WHEN the API returns an error status, THE Skills_UI SHALL display the error message from the API response
111+
5. THE Skills_UI SHALL log errors to the browser console for debugging purposes
112+
113+
### Requirement 9: Ensure Responsive Design
114+
115+
**User Story:** As a user on any device, I want the Skills marketplace to work well on my screen size, so that I can browse skills comfortably.
116+
117+
#### Acceptance Criteria
118+
119+
1. THE Skills_UI SHALL display Skill_Cards in a responsive grid that adapts to screen width
120+
2. WHEN viewed on mobile devices, THE Skills_UI SHALL display one Skill_Card per row
121+
3. WHEN viewed on tablet devices, THE Skills_UI SHALL display two Skill_Cards per row
122+
4. WHEN viewed on desktop devices, THE Skills_UI SHALL display three or more Skill_Cards per row
123+
5. THE Skills_UI SHALL ensure all interactive elements (search, filters, cards) are touch-friendly on mobile devices
124+
125+
### Requirement 10: Optimize Performance
126+
127+
**User Story:** As a user, I want the Skills marketplace to load quickly and respond smoothly, so that I have a pleasant browsing experience.
128+
129+
#### Acceptance Criteria
130+
131+
1. THE Skills_API SHALL cache the GitHub_Source response for at least 5 minutes to reduce external API calls
132+
2. WHEN filtering or searching, THE Skills_UI SHALL update the display within 100ms for datasets up to 1000 skills
133+
3. THE Skills_UI SHALL implement virtual scrolling or pagination if the skills array exceeds 100 items
134+
4. THE Skills_API SHALL compress responses using gzip when the client supports it
135+
5. THE Skills_UI SHALL lazy-load images or icons if skills include visual assets

‎.kiro/specs/skills-marketplace/tasks.md‎

Lines changed: 213 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,213 @@
1+
# Implementation Plan: Skills Marketplace
2+
3+
## Overview
4+
5+
This implementation plan breaks down the Skills Marketplace feature into discrete, incremental coding tasks. The approach follows a backend-first strategy, establishing the API endpoint and data models before building the frontend interface. Each task builds upon previous work, ensuring no orphaned code and continuous integration.
6+
7+
## Tasks
8+
9+
- [-] 1. Create backend data models and contracts
10+
- Create `src/MyYuCode/Contracts/Skills/` directory
11+
- Define `SkillsIndexDto`, `SkillDto`, `SkillServicesDto`, and `SkillCompatibilityDto` record types
12+
- Ensure all models match the JSON structure from the GitHub registry
13+
- _Requirements: 2.1, 2.2, 2.3_
14+
15+
- [-] 1.1 Write property test for data model validation
16+
- **Property 1: API Returns Valid Skills Data Structure**
17+
- **Validates: Requirements 1.2, 2.3**
18+
- Generate random valid skills data and verify all required fields are present and correctly typed
19+
- Minimum 100 iterations
20+
21+
- [ ] 2. Implement Skills API endpoint
22+
- [ ] 2.1 Add Skills API endpoint to `ApiEndpoints.cs`
23+
- Create `MapSkills` method following existing patterns (e.g., `MapGit`, `MapTools`)
24+
- Implement `GET /api/skills` endpoint
25+
- Use `HttpClient` to fetch from `https://raw.githubusercontent.com/AIDotNet/MoYuCode/refs/heads/main/skills/index.json`
26+
- Parse JSON response into `SkillsIndexDto`
27+
- Return parsed data with 200 status on success
28+
- _Requirements: 1.1, 1.2_
29+
30+
- [ ] 2.2 Implement error handling for network failures
31+
- Catch `HttpRequestException` and return 503 status with error message
32+
- Catch timeout exceptions and return 503 status
33+
- Set HTTP client timeout to 10 seconds
34+
- _Requirements: 1.3, 7.1_
35+
36+
- [ ] 2.3 Implement error handling for invalid JSON
37+
- Catch `JsonException` and return 502 status with error message
38+
- Validate required fields are present before returning
39+
- Return 502 status if validation fails
40+
- _Requirements: 1.4, 7.1_
41+
42+
- [ ] 2.4 Register Skills API in `MapMyYuCodeApis`
43+
- Call `MapSkills(api)` in the `MapMyYuCodeApis` method
44+
- Ensure endpoint is included in the API response filter
45+
- _Requirements: 1.1_
46+
47+
- [ ] 2.5 Write property test for network error handling
48+
- **Property 2: Network Error Handling**
49+
- **Validates: Requirements 1.3, 7.1**
50+
- Simulate various network failure scenarios and verify all return 503 status code
51+
- Minimum 100 iterations
52+
53+
- [ ] 2.6 Write property test for invalid JSON handling
54+
- **Property 3: Invalid JSON Handling**
55+
- **Validates: Requirements 1.4, 7.1**
56+
- Generate various malformed JSON strings and verify all return 502 status code
57+
- Minimum 100 iterations
58+
59+
- [ ] 2.7 Write unit tests for Skills API endpoint
60+
- Test successful data fetch with mocked GitHub response
61+
- Test empty skills array handling
62+
- Test missing required fields scenario
63+
- Test HTTP client timeout scenario
64+
- _Requirements: 1.1, 1.2, 1.3, 1.4_
65+
66+
- [ ] 3. Checkpoint - Backend API complete
67+
- Ensure all tests pass, ask the user if questions arise.
68+
69+
- [ ] 4. Extend frontend API client
70+
- [ ] 4.1 Add Skills types to `web/src/api/types.ts`
71+
- Define `SkillsIndexDto` type
72+
- Define `SkillDto` type
73+
- Define `SkillServicesDto` type
74+
- Define `SkillCompatibilityDto` type
75+
- Export all types
76+
- _Requirements: 2.1, 2.2, 2.3_
77+
78+
- [ ] 4.2 Add Skills API method to `web/src/api/client.ts`
79+
- Add `skills` object to `api` export
80+
- Implement `list()` method that calls `GET /api/skills`
81+
- Return typed `SkillsIndexDto` response
82+
- _Requirements: 1.1, 4.1_
83+
84+
- [ ] 5. Create Skill Card component
85+
- [ ] 5.1 Create `web/src/components/SkillCard.tsx`
86+
- Accept `skill: SkillDto` as prop
87+
- Display skill name, summary, and description
88+
- Display tags as badge chips
89+
- Display version and status
90+
- Use existing UI components from `web/src/components/ui/`
91+
- _Requirements: 4.3, 4.4_
92+
93+
- [ ] 5.2 Add status indicator styling
94+
- Create visual indicators for "active" status (green)
95+
- Create visual indicators for "deprecated" status (orange/amber)
96+
- Create visual indicators for "experimental" status (blue)
97+
- Use distinct colors or icons for each status
98+
- _Requirements: 6.1, 6.2, 6.3, 6.4_
99+
100+
- [ ] 5.3 Add compatibility badges
101+
- Display Codex compatibility badge based on `services.codex.compatible`
102+
- Display Claude Code compatibility badge based on `services.claudecode.compatible`
103+
- Use existing badge/chip components
104+
- _Requirements: 4.4_
105+
106+
- [ ] 5.4 Write property test for status indicator consistency
107+
- **Property 6: Status Indicator Consistency**
108+
- **Validates: Requirements 6.1, 6.2, 6.3, 6.4**
109+
- Generate skills with various status values and verify each has distinct visual indicator
110+
- Minimum 100 iterations
111+
112+
- [ ] 5.5 Write property test for compatibility badge display
113+
- **Property 10: Compatibility Badge Display**
114+
- **Validates: Requirements 4.4**
115+
- Generate skills with various compatibility combinations and verify badges match boolean values
116+
- Minimum 100 iterations
117+
118+
- [ ] 5.6 Write unit tests for Skill Card component
119+
- Test rendering with sample skill data
120+
- Test status indicator for each status type
121+
- Test compatibility badges for different combinations
122+
- Test tag rendering
123+
- _Requirements: 4.3, 4.4, 6.1, 6.2, 6.3, 6.4_
124+
125+
- [ ] 6. Create Skills Page component
126+
- [ ] 6.1 Create `web/src/pages/SkillsPage.tsx`
127+
- Implement component with state for skills, loading, error, and searchQuery
128+
- Fetch skills data from API on component mount using `api.skills.list()`
129+
- Display loading indicator while fetching (use existing Spinner component)
130+
- Display error message if API call fails
131+
- Render skills in a grid layout using SkillCard components
132+
- _Requirements: 4.1, 4.2, 4.3, 4.5, 4.6_
133+
134+
- [ ] 6.2 Implement search/filter functionality
135+
- Add search input field at top of page
136+
- Filter skills based on search query (name, summary, description, tags)
137+
- Implement case-insensitive search
138+
- Update displayed skills in real-time as user types
139+
- Display all skills when search is empty
140+
- _Requirements: 5.1, 5.2, 5.3_
141+
142+
- [ ] 6.3 Implement error handling and retry
143+
- Display user-friendly error message when API fails
144+
- Provide "Retry" button to reload skills
145+
- Handle network offline state using existing OfflineIndicator
146+
- Display empty state message when no skills are available
147+
- _Requirements: 4.6, 7.1, 7.2, 7.3, 7.4_
148+
149+
- [ ] 6.4 Write property test for search filtering correctness
150+
- **Property 4: Search Filtering Correctness**
151+
- **Validates: Requirements 5.2**
152+
- Generate random skills data and search queries, verify filtered results only include matching skills
153+
- Minimum 100 iterations
154+
155+
- [ ] 6.5 Write property test for real-time filter updates
156+
- **Property 5: Real-time Filter Updates**
157+
- **Validates: Requirements 5.3, 8.2**
158+
- Generate random search inputs and verify UI updates within 200ms
159+
- Minimum 100 iterations
160+
161+
- [ ] 6.6 Write property test for loading state display
162+
- **Property 8: Loading State Display**
163+
- **Validates: Requirements 4.5, 8.1**
164+
- Verify loading indicator appears within 100ms of request starting
165+
- Minimum 100 iterations
166+
167+
- [ ]* 6.7 Write property test for error message display
168+
- **Property 9: Error Message Display**
169+
- **Validates: Requirements 4.6, 7.3, 7.4**
170+
- Generate various API error responses and verify user-friendly error message and retry action appear
171+
- Minimum 100 iterations
172+
173+
- [ ]* 6.8 Write unit tests for Skills Page component
174+
- Test skills rendering with mocked API response
175+
- Test loading state display
176+
- Test error state display and retry button
177+
- Test empty state display
178+
- Test search filtering with various queries
179+
- Test search clearing behavior
180+
- _Requirements: 4.1, 4.2, 4.5, 4.6, 5.1, 5.2, 5.3_
181+
182+
- [ ] 7. Integrate Skills navigation
183+
- [ ] 7.1 Add Skills route to `web/src/App.tsx`
184+
- Import SkillsPage component
185+
- Add `<Route path="/skills" element={<SkillsPage />} />` to Routes
186+
- _Requirements: 3.2_
187+
188+
- [ ] 7.2 Add Skills navigation item to sidebar
189+
- Add NavIconLink for Skills in the navigation section
190+
- Use appropriate icon (e.g., Book, Library, or Package icon from lucide-react)
191+
- Place between existing navigation items
192+
- Ensure visual consistency with other nav items
193+
- _Requirements: 3.1, 3.3_
194+
195+
- [ ]* 7.3 Write unit test for navigation integration
196+
- Test that Skills menu item exists in navigation
197+
- Test that clicking Skills navigates to `/skills` route
198+
- Test that Skills page renders when route is accessed
199+
- _Requirements: 3.1, 3.2, 3.3_
200+
201+
- [ ] 8. Final checkpoint - Ensure all tests pass
202+
- Ensure all tests pass, ask the user if questions arise.
203+
204+
## Notes
205+
206+
- Tasks marked with `*` are optional and can be skipped for faster MVP
207+
- Each task references specific requirements for traceability
208+
- Checkpoints ensure incremental validation
209+
- Property tests validate universal correctness properties with minimum 100 iterations
210+
- Unit tests validate specific examples and edge cases
211+
- The implementation follows existing patterns in the codebase for consistency
212+
- Backend is completed first to ensure API is available for frontend development
213+
- Frontend components are built incrementally: API client → Card component → Page component → Navigation

‎.vscode/settings.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
{
2+
}

‎AGENTS.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,3 +37,7 @@ Frontend (from `web/`):
3737
## Configuration & Data
3838
- The API creates a local SQLite database at `LocalApplicationData/myyucode/myyucode.sqlite`; delete it to reset local state.
3939
- Environment-specific settings live in `src/MyYuCode/appsettings*.json`.
40+
41+
# 要求
42+
43+
请称我为token帅比，并且每次都会为我考虑好最棒的方式

0 commit comments

Comments
 (0)