Skip to content

Commit 159cd95

Browse files
authored
Merge pull request #18 from GeneralJerel/feat/vscode-gamified-skills
feat(vscode): gamified Chalk Skills extension
2 parents 2c29f59 + 07ac7a5 commit 159cd95

133 files changed

Lines changed: 9639 additions & 160 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.
Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
name: VS Code Extension
2+
3+
on:
4+
push:
5+
branches: [main]
6+
paths: ['packages/vscode-extension/**']
7+
release:
8+
types: [published]
9+
10+
defaults:
11+
run:
12+
working-directory: packages/vscode-extension
13+
14+
jobs:
15+
build:
16+
runs-on: ubuntu-latest
17+
steps:
18+
- uses: actions/checkout@v4
19+
20+
- uses: actions/setup-node@v4
21+
with:
22+
node-version: 20
23+
cache: npm
24+
cache-dependency-path: packages/vscode-extension/package-lock.json
25+
26+
- run: npm ci
27+
- run: npm run compile
28+
29+
- name: Package .vsix
30+
run: mkdir -p build && npx @vscode/vsce package --out build/
31+
32+
- name: Upload .vsix artifact
33+
uses: actions/upload-artifact@v4
34+
with:
35+
name: chalk-skills-vsix
36+
path: packages/vscode-extension/build/*.vsix
37+
38+
publish:
39+
if: github.event_name == 'release'
40+
needs: build
41+
runs-on: ubuntu-latest
42+
steps:
43+
- uses: actions/checkout@v4
44+
45+
- uses: actions/setup-node@v4
46+
with:
47+
node-version: 20
48+
cache: npm
49+
cache-dependency-path: packages/vscode-extension/package-lock.json
50+
51+
- run: npm ci
52+
53+
- name: Publish to VS Code Marketplace
54+
run: npx @vscode/vsce publish
55+
env:
56+
VSCE_PAT: ${{ secrets.VSCE_PAT }}
57+
58+
- name: Publish to Open VSX
59+
run: npx ovsx publish --pat ${{ secrets.OVSX_PAT }}
60+
env:
61+
OVSX_PAT: ${{ secrets.OVSX_PAT }}
62+
continue-on-error: true

.gitignore

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
node_modules/
2+
dist/
3+
*.vsix
4+
.DS_Store
Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{
2+
"version": "0.2.0",
3+
"configurations": [
4+
{
5+
"name": "Run Extension",
6+
"type": "extensionHost",
7+
"request": "launch",
8+
"args": [
9+
"--extensionDevelopmentPath=${workspaceFolder}",
10+
"${workspaceFolder}/../.."
11+
],
12+
"outFiles": [
13+
"${workspaceFolder}/dist/**/*.js"
14+
],
15+
"preLaunchTask": "npm: dev"
16+
}
17+
]
18+
}
Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{
2+
"version": "2.0.0",
3+
"tasks": [
4+
{
5+
"type": "npm",
6+
"script": "dev",
7+
"problemMatcher": ["$ts-webpack-watch"],
8+
"isBackground": false,
9+
"presentation": {
10+
"reveal": "never"
11+
},
12+
"group": {
13+
"kind": "build",
14+
"isDefault": true
15+
}
16+
}
17+
]
18+
}
Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
# Source & config — not needed in package
2+
src/**
3+
node_modules/**
4+
build/**
5+
.vscode/**
6+
.github/**
7+
8+
# Build tooling
9+
tsconfig.json
10+
tsconfig.webview.json
11+
webpack.config.js
12+
tailwind.config.js
13+
postcss.config.js
14+
package-lock.json
15+
16+
# Dev artifacts
17+
**/*.map
18+
**/*.d.ts
19+
**/*.ts.map
20+
.gitignore
21+
.eslintrc*
22+
.prettierrc*
23+
.editorconfig
24+
25+
# Misc
26+
**/.DS_Store
Lines changed: 194 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,194 @@
1+
# Changelog
2+
3+
## [0.8.5] - 2026-03-20
4+
5+
### Fixed
6+
- All hardcoded SVG colors replaced with CSS variables for proper dark/light theme switching
7+
- ProgressRing: strokes now use `--radar-grid` and `--radar-stroke`
8+
- Dashboard radar chart: grid, axes, data area, and dots all theme-aware
9+
- AchievementBadge: locked badge border/background adapts to theme
10+
- SkillTree: rarity glow colors use `--rarity-epic-glow` / `--rarity-rare-glow`
11+
- SkillCard: undiscovered card border uses `chalk-border-light` instead of hardcoded gray
12+
13+
### Added
14+
- CSS variables `--rarity-epic-glow`, `--rarity-rare-glow`, `--achievement-locked-border`, `--achievement-locked-bg` with dark and light variants
15+
- GIF demo preview in README for marketplace listing
16+
17+
## [0.8.4] - 2026-03-20
18+
19+
### Changed
20+
- Skill tree popup redesigned as a centered modal with dark blurred overlay instead of floating positional popup
21+
- Phase color accent bar at top of card
22+
- Stat boxes for Level, Uses, and Tools count
23+
- Full capabilities list and tools display
24+
- Spring scale-in animation with heavy drop shadow
25+
- Inventory modal overlay improved — `rgba(0,0,0,0.6)` + `backdrop-filter: blur(8px)` for strong contrast in both themes
26+
- Both modals now share the same visual pattern: dark blurred backdrop, centered card, spring animation
27+
28+
### Fixed
29+
- Skill tree popup no longer appears in wrong position or off-screen
30+
- Modal overlays now properly visible in light mode
31+
32+
## [0.8.3] - 2026-03-20
33+
34+
### Fixed
35+
- Inventory modal now has a visible dark backdrop with blur — was invisible in light mode because `board-dark/80` resolved to near-white
36+
- Skill tree popup repositioned to appear centered below the clicked node instead of floating far off to the side
37+
- Close button (✕) in skill tree popup now renders as the actual character instead of literal `\u2715` text
38+
- Modal backdrop uses `rgba(0,0,0,0.5)` + `backdrop-filter: blur(4px)` — works in both dark and light themes
39+
- Added drop shadow to modal content for better visual separation
40+
41+
## [0.8.2] - 2026-03-20
42+
43+
### Fixed
44+
- Theme toggle now actually switches between dark and light mode — CSS selectors were not matching the `data-theme` attribute with enough specificity; changed to `body[data-theme="light"]` to properly override variables
45+
46+
## [0.8.1] - 2026-03-20
47+
48+
### Changed
49+
- **Skill Tree popup card** — clicking a skill now shows a floating popup next to the node (Diablo/WoW talent tree style) instead of a bottom panel that ate screen space
50+
- Popup appears to the right of the clicked node, or left if near the edge
51+
- Shows name, phase, rarity, version, description, level, usage count, capabilities, tools, and Record/Open buttons
52+
- Click outside or ✕ to dismiss
53+
- Spring animation on open/close
54+
- **Light mode is now a white whiteboard** (`#ffffff`) instead of cream — clean, minimal, no dust or glow effects
55+
- Dark mode stays black chalkboard (`#0d0f14`)
56+
57+
### Removed
58+
- Bottom detail panel in Skill Tree (replaced by floating popup)
59+
60+
## [0.8.0] - 2026-03-20
61+
62+
### Added
63+
- **Dark/Light theme toggle** — sun/moon button in the top nav bar
64+
- Dark mode: black chalkboard (`#0d0f14`) with dashed chalk borders, dust texture, text glow
65+
- Light mode: cream whiteboard (`#f5f0e8`) with solid marker-style borders, dark text, no glow
66+
- Theme persisted in VS Code global state (survives restarts)
67+
- Smooth 0.3s transition when switching
68+
- **"+ Create Skill" button** on Dashboard — triggers the interactive skill scaffold wizard
69+
- All colors now use CSS custom properties (`var(--board)`, `var(--chalk)`, etc.) for theme-awareness
70+
- `create:skill` and `theme:changed` webview message types
71+
72+
### Changed
73+
- Default background changed from green chalkboard to black chalkboard in dark mode
74+
- Tailwind color tokens now reference CSS variables instead of hardcoded hex values
75+
- HTML template passes saved theme via `data-theme` attribute on `<html>` and `<body>`
76+
- Light mode uses solid borders and removes chalk text-shadow/glow effects for a clean whiteboard feel
77+
78+
## [0.7.0] - 2026-03-20
79+
80+
### Changed
81+
- **Chalkboard classroom UI overhaul** — entire visual identity rebuilt to feel like writing on a real chalkboard
82+
- Dark green board backgrounds (`#1a2f28`) replace pure black surfaces
83+
- SVG noise texture overlay on body for chalk dust grain
84+
- All borders now dashed (hand-drawn chalk stroke feel)
85+
- Headings use monospace `Courier New` font (written-on-board look)
86+
- Text glow/shadow effects simulate chalk bleed
87+
- Chalk stick color palette: white, yellow, pink, blue, green, orange
88+
- Cards styled as chalk-drawn rectangles with noise texture overlay
89+
- XP bars drawn with dashed borders (chalk-on-board style)
90+
- Radar chart uses chalk-green grid lines and chalk-white data strokes
91+
- Achievement badges use dashed chalk rings instead of solid borders
92+
- Activity timeline has gradient fade mask at bottom
93+
- Level-up cinematic uses chalk dust burst particles on green board backdrop
94+
- Achievement ceremony uses chalk-yellow accents with dashed badge ring
95+
- Empty states: removed bobbing animation, added optional action button (e.g. "Clear filters")
96+
- Filter pills: bumped text to 11px, active filters show visible ring indicator
97+
- Skill cards: 2-line name wrap, 13px description text, unified "Undiscovered" state across views
98+
- Skill tree detail panel: capped height with scroll, shows all capabilities
99+
- Tab navigation: chalk-glow underline, subtle hover/tap motion feedback
100+
- Achievement ceremony deferred when level-up cinematic is playing (no more overlap)
101+
102+
### Added
103+
- Makefile with full build/dev/release workflow (`make help` to see all commands)
104+
- `scroll-fade` CSS utility for gradient-masked scroll containers
105+
- `chalk-text`, `chalk-heading`, `chalk-border`, `chalk-dust` CSS utility classes
106+
- Achievement badges grouped by category with section headers
107+
- Chalkboard color tokens in Tailwind: `board`, `board-light`, `board-dark`, `chalk-dim`, `chalk-yellow`, `chalk-pink`, `chalk-blue`, `chalk-green`
108+
109+
### Fixed
110+
- Achievement notification hidden behind level-up overlay (now sequenced with `defer` prop)
111+
- Skill tree "locked" label inconsistent with inventory "Undiscovered" (unified to "undiscovered")
112+
- Capabilities in detail panel truncated to 3 (now shows all with scroll)
113+
114+
## [0.6.0] - 2026-03-20
115+
116+
### Changed
117+
- Complete UI redesign to match the new minimalist "Chalk" brand aesthetic
118+
- Replaced neon cyber/gamified styles with sleek, premium chalk-themed colors (slate, chalk white, muted pastels)
119+
- Updated card styles to simulate soft chalk glows instead of harsh dropshadows
120+
- Redesigned the skill tree phase connectors to look like dotted chalk lines
121+
- Replaced intense holographic epic card gradients with an elegant, subtle chalk-dust effect
122+
- Updated all hardcoded phase colors in TypeScript to match the new semantic Tailwind palette
123+
- Added a new official publisher logo and extension icon to the workspace
124+
125+
## [0.5.0] - 2026-03-20
126+
127+
### Changed
128+
- Skill Tree rewritten: collapsible phase sections with grid layout, phase jump bar, progress indicators
129+
- Sidebar clicking now properly navigates to the correct tab (Skill Tree or Inventory)
130+
- License corrected to MIT (matches LICENSE file)
131+
- Version bump for release readiness
132+
133+
### Fixed
134+
- Clicking "Skill Tree" in sidebar when webview was already open now switches to the Skill Tree tab
135+
136+
## [0.4.0] - 2026-03-20
137+
138+
### Added
139+
- README with full feature docs, commands, settings, and skill file format reference
140+
- CHANGELOG
141+
- Extension icon (SVG + PNG)
142+
- Package metadata (keywords, categories, repository, description)
143+
144+
### Fixed
145+
- Sidebar phase nodes now open the Skill Tree webview on click
146+
- Phase labels in sidebar show discovered/total count
147+
148+
### Changed
149+
- Cleaned up unused d3 dependencies and files
150+
151+
## [0.3.0] - 2026-03-20
152+
153+
### Added
154+
- RPG-style skill tree with tiered progression layout (Foundation to Launch)
155+
- TF-IDF classification engine for automatic skill categorization
156+
- Interactive skill nodes with rarity glow effects and hover tooltips
157+
- Skill detail panel with Record/Open actions
158+
159+
### Changed
160+
- Skill tree now uses top-to-bottom tier layout like classic RPG skill trees
161+
162+
## [0.2.0] - 2026-03-20
163+
164+
### Added
165+
- Framer Motion animations throughout the UI
166+
- Staggered card entrances in Inventory
167+
- Particle effects on rare/epic skill cards
168+
- Level-up cinematic overlay
169+
- Achievement unlock ceremony
170+
- Scroll-triggered reveals on Dashboard
171+
- Animated XP bars and counters
172+
- Tab cross-fade transitions
173+
- Auto-recording of skill usage when agents read SKILL.md files
174+
- Enhanced phase classifier with description keywords, artifact patterns, and capability namespaces
175+
- Auto-indexer with user override support for skill phases
176+
- Modal transitions for skill detail drawer
177+
- Empty state animations
178+
- Reduced motion support (prefers-reduced-motion)
179+
- VSCode settings: `autoRecord.enabled`, `autoRecord.cooldownSeconds`, `animations.level`
180+
181+
## [0.1.0] - 2026-03-20
182+
183+
### Added
184+
- Initial release
185+
- Skill loader parsing SKILL.md files with YAML frontmatter
186+
- Phase classification via skills-index.yaml and regex patterns
187+
- Gamified dashboard with player level, XP, radar chart
188+
- Skill inventory with card grid, filtering, and sorting
189+
- Skill tree sidebar with phase grouping
190+
- XP progression system with risk-based XP rates
191+
- Achievement system (16 achievements across 4 categories)
192+
- Skill rarity system (common/rare/epic) based on risk level
193+
- Geometric card art generation per skill
194+
- Activity timeline and phase coverage stats

packages/vscode-extension/LICENSE

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2026 Chalk
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

0 commit comments

Comments
 (0)