@deck-ui/skills 0.2.0 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/package.json +1 -1
  2. package/src/community-skill-row.tsx +6 -6
  3. package/src/community-skills-browser.tsx +8 -8
  4. package/src/learning-row.tsx +5 -5
  5. package/src/skill-detail-page.tsx +12 -12
  6. package/src/skill-row.tsx +4 -4
  7. package/src/skills-grid.tsx +2 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@deck-ui/skills",
3
- "version": "0.2.0",
3
+ "version": "0.3.0",
4
4
  "type": "module",
5
5
  "main": "src/index.ts",
6
6
  "types": "src/index.ts",
package/src/community-skill-row.tsx CHANGED
@@ -32,14 +32,14 @@ export function CommunitySkillRow({
32
32
  }: CommunitySkillRowProps) {
33
33
  return (
34
34
  <div
35
- className="flex items-center gap-3 px-4 py-3 rounded-xl border border-black/[0.08]
36
- bg-white hover:border-black/[0.15] transition-all"
35
+ className="flex items-center gap-3 px-4 py-3 rounded-xl border border-border
36
+ bg-white hover:border-border/80 transition-all"
37
37
  >
38
38
  <div className="flex-1 min-w-0">
39
- <p className="text-sm font-medium text-[#0d0d0d] truncate">
39
+ <p className="text-sm font-medium text-foreground truncate">
40
40
  {kebabToTitle(skill.name)}
41
41
  </p>
42
- <p className="text-xs text-[#9b9b9b] truncate mt-0.5">
42
+ <p className="text-xs text-muted-foreground truncate mt-0.5">
43
43
  {skill.source} · {formatInstalls(skill.installs)} installs
44
44
  </p>
45
45
  </div>
@@ -49,8 +49,8 @@ export function CommunitySkillRow({
49
49
  className={cn(
50
50
  "shrink-0 size-7 flex items-center justify-center rounded-lg transition-colors",
51
51
  installed
52
- ? "text-[#9b9b9b] cursor-default"
53
- : "text-[#9b9b9b] hover:bg-black/[0.06] hover:text-[#0d0d0d]",
52
+ ? "text-muted-foreground cursor-default"
53
+ : "text-muted-foreground hover:bg-accent hover:text-foreground",
54
54
  installing && "opacity-50 cursor-wait",
55
55
  )}
56
56
  >
package/src/community-skills-browser.tsx CHANGED
@@ -75,34 +75,34 @@ export function CommunitySkillsSection({
75
75
  return (
76
76
  <section className="space-y-3">
77
77
  <div>
78
- <h2 className="text-sm font-medium text-[#0d0d0d]">
78
+ <h2 className="text-sm font-medium text-foreground">
79
79
  Discover skills from the community
80
80
  </h2>
81
- <p className="text-xs text-[#9b9b9b] mt-0.5">
81
+ <p className="text-xs text-muted-foreground mt-0.5">
82
82
  Browse thousands of ready-made procedures on skills.sh
83
83
  </p>
84
84
  </div>
85
85
 
86
86
  {/* Search bar */}
87
87
  <div className="relative">
88
- <Search className="absolute left-3 top-1/2 -translate-y-1/2 size-4 text-[#9b9b9b]" />
88
+ <Search className="absolute left-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" />
89
89
  <input
90
90
  type="text"
91
91
  value={query}
92
92
  onChange={(e) => setQuery(e.target.value)}
93
93
  placeholder={'Search by what you want to achieve, like "sdr" or "writing"'}
94
- className="w-full h-9 pl-9 pr-3 rounded-full border border-black/[0.10] bg-white text-sm
95
- placeholder:text-black/40 focus:outline-none focus:border-black/[0.25] transition-colors"
94
+ className="w-full h-9 pl-9 pr-3 rounded-full border border-border bg-white text-sm
95
+ placeholder:text-muted-foreground/60 focus:outline-none focus:border-border/80 transition-colors"
96
96
  />
97
97
  </div>
98
98
 
99
99
  {/* Results grid */}
100
100
  {loading && results.length === 0 && (
101
- <p className="text-sm text-[#9b9b9b] animate-pulse">Loading...</p>
101
+ <p className="text-sm text-muted-foreground animate-pulse">Loading...</p>
102
102
  )}
103
103
 
104
104
  {!loading && results.length === 0 && query.trim() && (
105
- <p className="text-sm text-[#9b9b9b]">
105
+ <p className="text-sm text-muted-foreground">
106
106
  No skills found for "{query.trim()}"
107
107
  </p>
108
108
  )}
@@ -124,7 +124,7 @@ export function CommunitySkillsSection({
124
124
  {hasMore && (
125
125
  <button
126
126
  onClick={() => setShowAll(true)}
127
- className="text-sm text-[#5d5d5d] hover:text-[#0d0d0d] transition-colors"
127
+ className="text-sm text-muted-foreground hover:text-foreground transition-colors"
128
128
  >
129
129
  Show {results.length - PAGE_SIZE} more
130
130
  </button>
package/src/learning-row.tsx CHANGED
@@ -24,21 +24,21 @@ export function LearningRow({
24
24
  })
25
25
 
26
26
  return (
27
- <div className="rounded-xl border border-black/[0.06] p-4 group">
27
+ <div className="rounded-xl border border-border p-4 group">
28
28
  <div className="flex items-start gap-3">
29
- <p className="text-sm text-[#0d0d0d] flex-1 leading-relaxed">
29
+ <p className="text-sm text-foreground flex-1 leading-relaxed">
30
30
  {content}
31
31
  </p>
32
32
  <button
33
33
  onClick={onDelete}
34
- className="shrink-0 size-7 flex items-center justify-center rounded-lg text-[#9b9b9b] hover:text-red-500 hover:bg-red-50 transition-colors"
34
+ className="shrink-0 size-7 flex items-center justify-center rounded-lg text-muted-foreground hover:text-red-500 hover:bg-red-50 transition-colors"
35
35
  aria-label="Delete learning"
36
36
  >
37
37
  <Trash2 className="size-3.5" />
38
38
  </button>
39
39
  </div>
40
- <div className="flex items-center gap-2 mt-2 text-xs text-[#9b9b9b]">
41
- <span className="px-1.5 py-0.5 rounded-md bg-black/[0.04] text-[#5d5d5d]">
40
+ <div className="flex items-center gap-2 mt-2 text-xs text-muted-foreground">
41
+ <span className="px-1.5 py-0.5 rounded-md bg-accent/50 text-muted-foreground">
42
42
  {label}
43
43
  </span>
44
44
  {sourceTitle && (
package/src/skill-detail-page.tsx CHANGED
@@ -37,7 +37,7 @@ export function SkillDetailPage({
37
37
  if (!skill) {
38
38
  return (
39
39
  <div className="flex-1 flex items-center justify-center">
40
- <p className="text-sm text-[#9b9b9b]">Skill not found</p>
40
+ <p className="text-sm text-muted-foreground">Skill not found</p>
41
41
  </div>
42
42
  )
43
43
  }
@@ -47,19 +47,19 @@ export function SkillDetailPage({
47
47
  return (
48
48
  <div className="flex-1 flex flex-col min-h-0 overflow-hidden">
49
49
  {/* Header */}
50
- <div className="shrink-0 px-6 py-3 border-b border-black/[0.06]">
50
+ <div className="shrink-0 px-6 py-3 border-b border-border">
51
51
  <div className="max-w-2xl mx-auto flex items-center gap-3">
52
52
  <button
53
53
  onClick={onBack}
54
- className="size-8 flex items-center justify-center rounded-lg text-[#9b9b9b] hover:text-[#0d0d0d] hover:bg-black/[0.05] transition-colors"
54
+ className="size-8 flex items-center justify-center rounded-lg text-muted-foreground hover:text-foreground hover:bg-accent transition-colors"
55
55
  >
56
56
  <ArrowLeft className="size-4" />
57
57
  </button>
58
58
  <div className="flex-1 min-w-0">
59
- <h1 className="text-sm font-medium text-[#0d0d0d] truncate">
59
+ <h1 className="text-sm font-medium text-foreground truncate">
60
60
  {skill.name}
61
61
  </h1>
62
- <p className="text-xs text-[#9b9b9b] flex items-center gap-1 truncate">
62
+ <p className="text-xs text-muted-foreground flex items-center gap-1 truncate">
63
63
  <FileText className="size-3" />
64
64
  {skill.file_path}
65
65
  </p>
@@ -72,26 +72,26 @@ export function SkillDetailPage({
72
72
  <div className="max-w-2xl mx-auto space-y-8">
73
73
  {/* Instructions */}
74
74
  <section>
75
- <label className="block text-xs font-medium text-[#9b9b9b] tracking-wider mb-2">
75
+ <label className="block text-xs font-medium text-muted-foreground tracking-wider mb-2">
76
76
  Instructions
77
77
  </label>
78
78
  <textarea
79
79
  value={instructions}
80
80
  onChange={(e) => setInstructions(e.target.value)}
81
81
  rows={12}
82
- className="w-full rounded-xl border border-black/[0.08] bg-white px-4 py-3 text-sm text-[#0d0d0d] placeholder:text-[#9b9b9b] focus:outline-none focus:border-black/[0.2] resize-y font-mono"
82
+ className="w-full rounded-xl border border-border bg-white px-4 py-3 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:border-border/80 resize-y font-mono"
83
83
  placeholder="Instructions for this skill..."
84
84
  />
85
85
  <div className="flex items-center gap-3 mt-3">
86
86
  <button
87
87
  onClick={handleSave}
88
88
  disabled={!isDirty || saving}
89
- className="px-4 py-2 rounded-full text-sm font-medium bg-[#0d0d0d] text-white hover:bg-[#2d2d2d] disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
89
+ className="px-4 py-2 rounded-full text-sm font-medium bg-primary text-primary-foreground hover:bg-primary/90 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
90
90
  >
91
91
  {saving ? "Saving..." : "Save"}
92
92
  </button>
93
93
  {isDirty && (
94
- <span className="text-xs text-[#9b9b9b]">Unsaved changes</span>
94
+ <span className="text-xs text-muted-foreground">Unsaved changes</span>
95
95
  )}
96
96
  </div>
97
97
  </section>
@@ -99,13 +99,13 @@ export function SkillDetailPage({
99
99
  {/* Learnings */}
100
100
  {skill.learnings.trim() && (
101
101
  <section>
102
- <label className="block text-xs font-medium text-[#9b9b9b] tracking-wider mb-2">
102
+ <label className="block text-xs font-medium text-muted-foreground tracking-wider mb-2">
103
103
  Learnings
104
104
  </label>
105
- <div className="rounded-xl border border-black/[0.08] bg-[#fafafa] px-4 py-3 text-sm text-[#5d5d5d] whitespace-pre-wrap font-mono">
105
+ <div className="rounded-xl border border-border bg-secondary px-4 py-3 text-sm text-muted-foreground whitespace-pre-wrap font-mono">
106
106
  {skill.learnings}
107
107
  </div>
108
- <p className="text-xs text-[#9b9b9b] mt-2">
108
+ <p className="text-xs text-muted-foreground mt-2">
109
109
  Learnings are added automatically when you give feedback on completed tasks.
110
110
  </p>
111
111
  </section>
package/src/skill-row.tsx CHANGED
@@ -9,15 +9,15 @@ export function SkillRow({ skill, onClick }: SkillRowProps) {
9
9
  return (
10
10
  <button
11
11
  onClick={onClick}
12
- className="w-full flex items-center gap-3 px-4 py-3 rounded-xl border border-black/[0.08]
13
- bg-white hover:border-black/[0.15] transition-all text-left"
12
+ className="w-full flex items-center gap-3 px-4 py-3 rounded-xl border border-border
13
+ bg-white hover:border-border/80 transition-all text-left"
14
14
  >
15
15
  <div className="flex-1 min-w-0">
16
- <p className="text-sm font-medium text-[#0d0d0d] truncate">
16
+ <p className="text-sm font-medium text-foreground truncate">
17
17
  {skill.name}
18
18
  </p>
19
19
  {skill.description && (
20
- <p className="text-xs text-[#9b9b9b] truncate mt-0.5">
20
+ <p className="text-xs text-muted-foreground truncate mt-0.5">
21
21
  {skill.description}
22
22
  </p>
23
23
  )}
package/src/skills-grid.tsx CHANGED
@@ -31,7 +31,7 @@ export function SkillsGrid({
31
31
  if (loading && skills.length === 0) {
32
32
  return (
33
33
  <div className="flex-1 flex items-center justify-center">
34
- <p className="text-sm text-[#9b9b9b] animate-pulse">
34
+ <p className="text-sm text-muted-foreground animate-pulse">
35
35
  Loading skills...
36
36
  </p>
37
37
  </div>
@@ -44,7 +44,7 @@ export function SkillsGrid({
44
44
  {/* Installed section */}
45
45
  {sorted.length > 0 && (
46
46
  <section className="space-y-3">
47
- <h2 className="text-sm font-medium text-[#0d0d0d] normal-case">Installed</h2>
47
+ <h2 className="text-sm font-medium text-foreground normal-case">Installed</h2>
48
48
  <div className="grid grid-cols-1 lg:grid-cols-2 gap-2">
49
49
  {sorted.map((skill) => (
50
50
  <SkillRow