From 1704936d99d7d906d9f9edce4ed6dcc3f6b65157 Mon Sep 17 00:00:00 2001 From: aryansharma28 Date: Thu, 19 Mar 2026 16:50:46 +0100 Subject: [PATCH 1/2] feat: redesign skills cards to match new card-based layout Redesign the SkillInstall component from the two-row Install/Run format to a card layout with bold title, terminal-style install command, and slash command reference. Update skills across code-prompts, directory, and recipes pages with correct titles and add the highlighted level-up card. Remove analytics from skills tab in favor of the level-up card. Co-Authored-By: Claude Opus 4.6 (1M context) --- skills/code-prompts.mdx | 10 ++-- skills/directory.mdx | 15 +++-- skills/recipes.mdx | 12 ++-- snippets/skill-install.jsx | 117 ++++++++++++++++++++++--------------- 4 files changed, 88 insertions(+), 66 deletions(-) diff --git a/skills/code-prompts.mdx b/skills/code-prompts.mdx index da306c5..2a0ba0a 100644 --- a/skills/code-prompts.mdx +++ b/skills/code-prompts.mdx @@ -20,11 +20,11 @@ import { PROMPTS } from "/snippets/prompts-data.jsx" - - - - - + + + + + diff --git a/skills/directory.mdx b/skills/directory.mdx index 8cdcdf8..af6a4db 100644 --- a/skills/directory.mdx +++ b/skills/directory.mdx @@ -4,20 +4,19 @@ description: "Get started with LangWatch in seconds. Copy a prompt, install a sk sidebarTitle: "Skills Directory" --- +import { SkillInstall } from "/snippets/skill-install.jsx" + Don't want to install skills? Copy a ready-to-paste prompt instead: [Code Prompts](/skills/code-prompts) | [Platform Prompts](/skills/platform-prompts) ## Available Skills Install any skill with a single command: -| Skill | Install | What it does | -|-------|---------|-------------| -| `langwatch/tracing` | `npx skills add langwatch/skills/tracing` | Add LangWatch tracing to your code | -| `langwatch/evaluations` | `npx skills add langwatch/skills/evaluations` | Set up experiments, evaluators, and monitoring | -| `langwatch/scenarios` | `npx skills add langwatch/skills/scenarios` | Add agent simulation tests | -| `langwatch/prompts` | `npx skills add langwatch/skills/prompts` | Version and manage your prompts | -| `langwatch/analytics` | `npx skills add langwatch/skills/analytics` | Query your agent's performance | -| `langwatch/level-up` | `npx skills add langwatch/skills/level-up` | All of the above in one go | + + + + + **Starting an agent from scratch?** Use [Better Agents](/better-agents/overview) to scaffold a production-ready project with all LangWatch features built in. diff --git a/skills/recipes.mdx b/skills/recipes.mdx index 0ae2f94..2a78e8b 100644 --- a/skills/recipes.mdx +++ b/skills/recipes.mdx @@ -19,11 +19,11 @@ import { PROMPTS } from "/snippets/prompts-data.jsx" - - - - - - + + + + + + diff --git a/snippets/skill-install.jsx b/snippets/skill-install.jsx index 0062418..862c278 100644 --- a/snippets/skill-install.jsx +++ b/snippets/skill-install.jsx @@ -1,66 +1,89 @@ import React, { useState } from "react"; -export const SkillInstall = ({ skill, run }) => { - const [copiedInstall, setCopiedInstall] = useState(false); - const [copiedRun, setCopiedRun] = useState(false); +export const SkillInstall = ({ title, skill, slashCommand, highlighted }) => { + const [copied, setCopied] = useState(false); const installCmd = `npx skills add ${skill}`; - const handleCopyInstall = () => { + const handleCopy = () => { navigator.clipboard.writeText(installCmd); - setCopiedInstall(true); - setTimeout(() => setCopiedInstall(false), 2000); - }; - - const handleCopyRun = () => { - navigator.clipboard.writeText(run); - setCopiedRun(true); - setTimeout(() => setCopiedRun(false), 2000); + setCopied(true); + setTimeout(() => setCopied(false), 2000); }; const CopyIcon = ({ copied }) => copied ? ( - + ) : ( - + ); - const rowStyle = { - display: "flex", alignItems: "center", justifyContent: "space-between", - gap: "8px", padding: "6px 0", - }; - - const labelStyle = { - fontSize: "12px", fontWeight: 600, color: "var(--text-muted, #6b7280)", - minWidth: "48px", textTransform: "uppercase", - }; - - const codeStyle = { - fontSize: "13px", fontFamily: "var(--font-mono, monospace)", - color: "var(--text-primary, inherit)", - }; - - const btnStyle = (copied) => ({ - display: "flex", alignItems: "center", padding: "4px", - border: "none", background: "transparent", - color: copied ? "var(--success-text, #059669)" : "var(--text-muted, #9ca3af)", - cursor: "pointer", transition: "all 0.15s", - }); - return (
-
- Install - {installCmd} - +
+ {title} +
-
- Run - "{run}" - + +
+ >_ + {installCmd} +
+ +
+ Then use {slashCommand} in your coding agent
); From 3c7c21bd97d15f01a1dde474933051713e5285b6 Mon Sep 17 00:00:00 2001 From: aryansharma28 Date: Thu, 19 Mar 2026 17:05:25 +0100 Subject: [PATCH 2/2] fix: dark mode support for skills cards Replace hardcoded light-mode colors with rgba-based values that work on both light and dark backgrounds. Use the theme's primary orange (#e17100) at low opacity for the highlighted card background/border, and use CSS variables for text colors to inherit dark mode properly. Co-Authored-By: Claude Opus 4.6 (1M context) --- snippets/skill-install.jsx | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/snippets/skill-install.jsx b/snippets/skill-install.jsx index 862c278..c0f9599 100644 --- a/snippets/skill-install.jsx +++ b/snippets/skill-install.jsx @@ -19,11 +19,11 @@ export const SkillInstall = ({ title, skill, slashCommand, highlighted }) => { return (
{ {title}
Then use {slashCommand} in your coding agent