@shepai/cli 1.59.0 → 1.60.0

package/web/.next/standalone/src/presentation/web/components/features/skills/skill-detail-drawer.tsx

@@ -0,0 +1,100 @@
+'use client';
+
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetDescription,
+} from '@/components/ui/sheet';
+import { Badge } from '@/components/ui/badge';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { Separator } from '@/components/ui/separator';
+import { FolderOpen } from 'lucide-react';
+import type { SkillData } from '@/lib/skills';
+
+export interface SkillDetailDrawerProps {
+  skill: SkillData | null;
+  onClose: () => void;
+}
+
+export function SkillDetailDrawer({ skill, onClose }: SkillDetailDrawerProps) {
+  return (
+    <Sheet
+      open={skill !== null}
+      onOpenChange={(open) => {
+        if (!open) onClose();
+      }}
+    >
+      <SheetContent side="right" className="w-full sm:max-w-lg">
+        {skill ? (
+          <>
+            <SheetHeader>
+              <SheetTitle>{skill.displayName}</SheetTitle>
+              <SheetDescription>{skill.name}</SheetDescription>
+            </SheetHeader>
+
+            <ScrollArea className="flex-1 px-4 pb-4">
+              {/* Description */}
+              <p className="text-muted-foreground text-sm">{skill.description}</p>
+
+              {/* Badges */}
+              <div className="mt-4 flex flex-wrap items-center gap-1.5">
+                <Badge variant={skill.source === 'project' ? 'secondary' : 'outline'}>
+                  {skill.source === 'project' ? 'Project' : 'Global'}
+                </Badge>
+                <Badge variant="outline">{skill.category}</Badge>
+                {skill.context ? <Badge variant="outline">{skill.context}</Badge> : null}
+              </div>
+
+              {/* Allowed Tools */}
+              {skill.allowedTools ? (
+                <>
+                  <Separator className="my-4" />
+                  <div>
+                    <h3 className="text-sm font-semibold">Allowed Tools</h3>
+                    <p className="text-muted-foreground mt-1 text-sm">{skill.allowedTools}</p>
+                  </div>
+                </>
+              ) : null}
+
+              {/* Resources */}
+              {skill.resources.length > 0 ? (
+                <>
+                  <Separator className="my-4" />
+                  <div>
+                    <h3 className="text-sm font-semibold">Resources</h3>
+                    <ul className="mt-2 space-y-1.5">
+                      {skill.resources.map((resource) => (
+                        <li
+                          key={resource.name}
+                          className="text-muted-foreground flex items-center gap-2 text-sm"
+                        >
+                          <FolderOpen className="size-3.5 shrink-0" />
+                          <span>
+                            {resource.name}/ — {resource.fileCount}{' '}
+                            {resource.fileCount === 1 ? 'file' : 'files'}
+                          </span>
+                        </li>
+                      ))}
+                    </ul>
+                  </div>
+                </>
+              ) : null}
+
+              {/* Body */}
+              {skill.body ? (
+                <>
+                  <Separator className="my-4" />
+                  <pre className="text-muted-foreground text-sm leading-relaxed whitespace-pre-wrap">
+                    {skill.body}
+                  </pre>
+                </>
+              ) : null}
+            </ScrollArea>
+          </>
+        ) : null}
+      </SheetContent>
+    </Sheet>
+  );
+}

package/web/.next/standalone/src/presentation/web/components/features/skills/skill-list.stories.tsx

@@ -0,0 +1,139 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+import { SkillList } from './skill-list';
+import type { SkillData } from '@/lib/skills';
+
+const meta: Meta<typeof SkillList> = {
+  title: 'Features/SkillList',
+  component: SkillList,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'padded',
+  },
+  args: {
+    onSkillSelect: fn(),
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/* ---------------------------------------------------------------------------
+ * Data fixtures
+ * ------------------------------------------------------------------------- */
+
+const workflowSkills: SkillData[] = [
+  {
+    name: 'shep-kit:implement',
+    displayName: 'implement',
+    description: 'Validate specs and autonomously execute implementation tasks.',
+    category: 'Workflow',
+    source: 'project',
+    body: '',
+    resources: [],
+  },
+  {
+    name: 'shep-kit:plan',
+    displayName: 'plan',
+    description: 'Create implementation plan and task breakdown.',
+    category: 'Workflow',
+    source: 'project',
+    body: '',
+    resources: [],
+  },
+  {
+    name: 'shep-kit:research',
+    displayName: 'research',
+    description: 'Analyze technical approach, evaluate libraries, document decisions.',
+    category: 'Workflow',
+    source: 'project',
+    body: '',
+    resources: [],
+  },
+];
+
+const codeGenSkills: SkillData[] = [
+  {
+    name: 'shep:ui-component',
+    displayName: 'ui-component',
+    description: 'Use when creating, modifying, or reviewing web UI components.',
+    context: 'fork',
+    allowedTools: 'Read, Write, Bash, Edit, Glob',
+    category: 'Code Generation',
+    source: 'project',
+    body: '',
+    resources: [{ name: 'references', fileCount: 7 }],
+  },
+];
+
+const analysisSkills: SkillData[] = [
+  {
+    name: 'architecture-reviewer',
+    displayName: 'architecture-reviewer',
+    description: 'Use when making architectural decisions or reviewing PRs.',
+    context: 'fork',
+    category: 'Analysis',
+    source: 'project',
+    body: '',
+    resources: [],
+  },
+  {
+    name: 'cross-validate-artifacts',
+    displayName: 'cross-validate-artifacts',
+    description: 'Cross-validate documentation and artifacts for consistency.',
+    category: 'Analysis',
+    source: 'project',
+    body: '',
+    resources: [],
+  },
+];
+
+const referenceSkills: SkillData[] = [
+  {
+    name: 'shadcn-ui',
+    displayName: 'shadcn-ui',
+    description: 'Complete shadcn/ui component library patterns.',
+    category: 'Reference',
+    source: 'project',
+    body: '',
+    resources: [{ name: 'references', fileCount: 3 }],
+  },
+  {
+    name: 'vercel-react-best-practices',
+    displayName: 'vercel-react-best-practices',
+    description: 'React and Next.js performance optimization guidelines.',
+    category: 'Reference',
+    source: 'global',
+    body: '',
+    resources: [{ name: 'references', fileCount: 4 }],
+  },
+];
+
+const allSkills: SkillData[] = [
+  ...workflowSkills,
+  ...codeGenSkills,
+  ...analysisSkills,
+  ...referenceSkills,
+];
+
+/* ---------------------------------------------------------------------------
+ * Stories
+ * ------------------------------------------------------------------------- */
+
+export const Default: Story = {
+  args: {
+    skills: allSkills,
+  },
+};
+
+export const SingleCategory: Story = {
+  args: {
+    skills: workflowSkills,
+  },
+};
+
+export const Empty: Story = {
+  args: {
+    skills: [],
+  },
+};

package/web/.next/standalone/src/presentation/web/components/features/skills/skill-list.tsx

@@ -0,0 +1,48 @@
+import { SkillCard } from './skill-card';
+import type { SkillCategory, SkillData } from '@/lib/skills';
+
+const CATEGORY_ORDER: SkillCategory[] = ['Workflow', 'Code Generation', 'Analysis', 'Reference'];
+
+export interface SkillListProps {
+  skills: SkillData[];
+  onSkillSelect: (skill: SkillData) => void;
+}
+
+function groupByCategory(skills: SkillData[]): Map<SkillCategory, SkillData[]> {
+  const groups = new Map<SkillCategory, SkillData[]>();
+  for (const skill of skills) {
+    const group = groups.get(skill.category) ?? [];
+    group.push(skill);
+    groups.set(skill.category, group);
+  }
+  return groups;
+}
+
+export function SkillList({ skills, onSkillSelect }: SkillListProps) {
+  const groups = groupByCategory(skills);
+
+  return (
+    <div className="space-y-8">
+      {CATEGORY_ORDER.map((category) => {
+        const categorySkills = groups.get(category);
+        if (!categorySkills || categorySkills.length === 0) return null;
+
+        return (
+          <section key={category}>
+            <h2 className="mb-4 text-lg font-semibold">
+              {category}{' '}
+              <span className="text-muted-foreground text-sm font-normal">
+                ({categorySkills.length})
+              </span>
+            </h2>
+            <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
+              {categorySkills.map((skill) => (
+                <SkillCard key={skill.name} skill={skill} onSelect={onSkillSelect} />
+              ))}
+            </div>
+          </section>
+        );
+      })}
+    </div>
+  );
+}

package/web/.next/standalone/src/presentation/web/components/features/skills/skills-page-client.stories.tsx

@@ -0,0 +1,199 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { SkillsPageClient } from './skills-page-client';
+import type { SkillData } from '@/lib/skills';
+
+const meta = {
+  title: 'Features/SkillsPageClient',
+  component: SkillsPageClient,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'fullscreen',
+  },
+} satisfies Meta<typeof SkillsPageClient>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/* ---------------------------------------------------------------------------
+ * Data fixtures
+ * ------------------------------------------------------------------------- */
+
+const sampleSkills: SkillData[] = [
+  {
+    name: 'shep-kit:implement',
+    displayName: 'implement',
+    description:
+      'Validate specs and autonomously execute implementation tasks with status tracking.',
+    category: 'Workflow',
+    source: 'project',
+    body: '## Usage\n\nRun /shep-kit:implement after planning is complete.',
+    resources: [],
+  },
+  {
+    name: 'shep-kit:plan',
+    displayName: 'plan',
+    description: 'Create implementation plan and task breakdown.',
+    category: 'Workflow',
+    source: 'project',
+    body: '',
+    resources: [],
+  },
+  {
+    name: 'shep-kit:research',
+    displayName: 'research',
+    description: 'Analyze technical approach, evaluate libraries, document decisions.',
+    category: 'Workflow',
+    source: 'project',
+    body: '',
+    resources: [],
+  },
+  {
+    name: 'shep:ui-component',
+    displayName: 'ui-component',
+    description: 'Use when creating, modifying, or reviewing web UI components.',
+    context: 'fork',
+    allowedTools: 'Read, Write, Bash, Edit, Glob',
+    category: 'Code Generation',
+    source: 'project',
+    body: '',
+    resources: [
+      { name: 'references', fileCount: 7 },
+      { name: 'templates', fileCount: 3 },
+    ],
+  },
+  {
+    name: 'architecture-reviewer',
+    displayName: 'architecture-reviewer',
+    description: 'Use when making architectural decisions, planning features, or reviewing PRs.',
+    context: 'fork',
+    category: 'Analysis',
+    source: 'project',
+    body: '',
+    resources: [],
+  },
+  {
+    name: 'cross-validate-artifacts',
+    displayName: 'cross-validate-artifacts',
+    description: 'Cross-validate documentation and artifacts for consistency.',
+    category: 'Analysis',
+    source: 'project',
+    body: '',
+    resources: [],
+  },
+  {
+    name: 'shadcn-ui',
+    displayName: 'shadcn-ui',
+    description: 'Complete shadcn/ui component library patterns and implementation.',
+    category: 'Reference',
+    source: 'project',
+    body: '',
+    resources: [{ name: 'references', fileCount: 3 }],
+  },
+  {
+    name: 'vercel-react-best-practices',
+    displayName: 'vercel-react-best-practices',
+    description: 'React and Next.js performance optimization guidelines from Vercel Engineering.',
+    category: 'Reference',
+    source: 'global',
+    body: '',
+    resources: [{ name: 'references', fileCount: 4 }],
+  },
+];
+
+const manySkills: SkillData[] = [
+  ...sampleSkills,
+  {
+    name: 'shep-kit:commit-pr',
+    displayName: 'commit-pr',
+    description: 'Use when ready to commit, push, and create a PR with CI verification.',
+    category: 'Workflow',
+    source: 'project',
+    body: '',
+    resources: [],
+  },
+  {
+    name: 'shep-kit:new-feature',
+    displayName: 'new-feature',
+    description: 'Use when starting any new feature, functionality, or enhancement.',
+    category: 'Workflow',
+    source: 'project',
+    body: '',
+    resources: [],
+  },
+  {
+    name: 'shep-kit:new-feature-fast',
+    displayName: 'new-feature-fast',
+    description: 'Fast-track feature creation that collapses new-feature, research, and planning.',
+    category: 'Workflow',
+    source: 'project',
+    body: '',
+    resources: [],
+  },
+  {
+    name: 'shep-kit:merged',
+    displayName: 'merged',
+    description: 'Use after a PR has been merged to clean up branches.',
+    category: 'Workflow',
+    source: 'project',
+    body: '',
+    resources: [],
+  },
+  {
+    name: 'mermaid-diagrams',
+    displayName: 'mermaid-diagrams',
+    description: 'Comprehensive guide for creating software diagrams using Mermaid syntax.',
+    category: 'Reference',
+    source: 'project',
+    body: '',
+    resources: [{ name: 'references', fileCount: 2 }],
+  },
+  {
+    name: 'react-flow',
+    displayName: 'react-flow',
+    description: 'React Flow for workflow visualization with custom nodes and edges.',
+    category: 'Reference',
+    source: 'project',
+    body: '',
+    resources: [],
+  },
+  {
+    name: 'tsp-model',
+    displayName: 'tsp-model',
+    description: 'Use when creating, modifying, or documenting TypeSpec domain models.',
+    category: 'Reference',
+    source: 'project',
+    body: '',
+    resources: [{ name: 'references', fileCount: 5 }],
+  },
+  {
+    name: 'find-skills',
+    displayName: 'find-skills',
+    description: 'Helps users discover and install agent skills.',
+    category: 'Reference',
+    source: 'global',
+    body: '',
+    resources: [],
+  },
+];
+
+/* ---------------------------------------------------------------------------
+ * Stories
+ * ------------------------------------------------------------------------- */
+
+export const Default: Story = {
+  args: {
+    skills: sampleSkills,
+  },
+};
+
+export const Empty: Story = {
+  args: {
+    skills: [],
+  },
+};
+
+export const ManySkills: Story = {
+  args: {
+    skills: manySkills,
+  },
+};

package/web/.next/standalone/src/presentation/web/components/features/skills/skills-page-client.tsx

@@ -0,0 +1,112 @@
+'use client';
+
+import { useState, useMemo } from 'react';
+import { Search, Puzzle } from 'lucide-react';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import { PageHeader } from '@/components/common/page-header';
+import { EmptyState } from '@/components/common/empty-state';
+import { SkillList } from './skill-list';
+import { CategoryFilter } from './category-filter';
+import { SkillDetailDrawer } from './skill-detail-drawer';
+import type { SkillCategory, SkillData } from '@/lib/skills';
+
+export interface SkillsPageClientProps {
+  skills: SkillData[];
+}
+
+function computeCategoryCounts(skills: SkillData[]): Record<SkillCategory, number> {
+  const counts: Record<SkillCategory, number> = {
+    Workflow: 0,
+    'Code Generation': 0,
+    Analysis: 0,
+    Reference: 0,
+  };
+  for (const skill of skills) {
+    counts[skill.category]++;
+  }
+  return counts;
+}
+
+export function SkillsPageClient({ skills }: SkillsPageClientProps) {
+  const [searchQuery, setSearchQuery] = useState('');
+  const [activeCategory, setActiveCategory] = useState<SkillCategory | null>(null);
+  const [selectedSkill, setSelectedSkill] = useState<SkillData | null>(null);
+
+  const categoryCounts = useMemo(() => computeCategoryCounts(skills), [skills]);
+
+  const filteredSkills = useMemo(() => {
+    const query = searchQuery.toLowerCase();
+    return skills.filter((skill) => {
+      if (activeCategory && skill.category !== activeCategory) return false;
+      if (query) {
+        const matchesName = skill.name.toLowerCase().includes(query);
+        const matchesDescription = skill.description.toLowerCase().includes(query);
+        if (!matchesName && !matchesDescription) return false;
+      }
+      return true;
+    });
+  }, [skills, searchQuery, activeCategory]);
+
+  const clearFilters = () => {
+    setSearchQuery('');
+    setActiveCategory(null);
+  };
+
+  // No skills installed at all
+  if (skills.length === 0) {
+    return (
+      <div className="flex flex-col gap-6 p-6">
+        <PageHeader title="Skills" description="Claude Code skills installed in this project" />
+        <EmptyState
+          icon={<Puzzle className="size-10" />}
+          title="No skills found"
+          description="No Claude Code skills are installed. Add skills to .claude/skills/ to get started."
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-6 p-6">
+      <PageHeader title="Skills" description="Claude Code skills installed in this project" />
+
+      {/* Search */}
+      <div className="relative">
+        <Search className="text-muted-foreground absolute top-1/2 left-3 size-4 -translate-y-1/2" />
+        <Input
+          placeholder="Search skills..."
+          value={searchQuery}
+          onChange={(e) => setSearchQuery(e.target.value)}
+          className="pl-9"
+        />
+      </div>
+
+      {/* Category Filter */}
+      <CategoryFilter
+        activeCategory={activeCategory}
+        onCategoryChange={setActiveCategory}
+        counts={categoryCounts}
+      />
+
+      {/* Skill List or Empty Filter State */}
+      {filteredSkills.length > 0 ? (
+        <SkillList skills={filteredSkills} onSkillSelect={setSelectedSkill} />
+      ) : (
+        <EmptyState
+          icon={<Search className="size-10" />}
+          title="No matching skills"
+          description="No skills match your current search and filter criteria."
+          action={
+            <Button variant="outline" onClick={clearFilters}>
+              Clear filters
+            </Button>
+          }
+        />
+      )}
+
+      {/* Skill Detail Drawer */}
+      <SkillDetailDrawer skill={selectedSkill} onClose={() => setSelectedSkill(null)} />
+    </div>
+  );
+}

package/web/.next/standalone/src/presentation/web/components/layouts/app-sidebar/app-sidebar.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { usePathname } from 'next/navigation';
-import { Home, Wrench, Plus } from 'lucide-react';
+import { Home, Wrench, Puzzle, Plus } from 'lucide-react';
 import {
   Sidebar,
   SidebarHeader,
@@ -23,6 +23,7 @@ import { SidebarSectionHeader } from '@/components/common/sidebar-section-header
 import { featureStatusConfig, featureStatusOrder } from '@/components/common/feature-status-config';
 import type { FeatureStatus } from '@/components/common/feature-status-config';
 import { useDeferredMount } from '@/hooks/use-deferred-mount';
+import { featureFlags } from '@/lib/feature-flags';
 
 interface FeatureItem {
   name: string;
@@ -87,6 +88,14 @@ export function AppSidebar({
             href="/tools"
             active={pathname === '/tools'}
           />
+          {featureFlags.skills ? (
+            <SidebarNavItem
+              icon={Puzzle}
+              label="Skills"
+              href="/skills"
+              active={pathname === '/skills'}
+            />
+          ) : null}
         </SidebarMenu>
       </SidebarHeader>
 

package/web/.next/standalone/src/presentation/web/lib/feature-flags.ts

@@ -0,0 +1,14 @@
+/**
+ * Feature flags for the web UI.
+ *
+ * Toggle via environment variables (NEXT_PUBLIC_ prefix for client access).
+ * All flags default to **off** unless explicitly set to "true" or "1".
+ */
+
+function isEnabled(envVar: string | undefined): boolean {
+  return envVar === 'true' || envVar === '1';
+}
+
+export const featureFlags = {
+  skills: isEnabled(process.env.NEXT_PUBLIC_FLAG_SKILLS),
+} as const;