Skip to content

feat: redesign skills cards to card-based layout #132

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Aryansharma28 merged 2 commits into from
Mar 19, 2026
Merged

feat: redesign skills cards to card-based layout #132

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1704936
feat: redesign skills cards to match new card-based layout
Aryansharma28 Mar 19, 2026
3c7c21b
fix: dark mode support for skills cards
Aryansharma28 Mar 19, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions skills/code-prompts.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,11 +20,11 @@ import { PROMPTS } from "/snippets/prompts-data.jsx"
</Tab>

<Tab title="Skills">
<SkillInstall skill="langwatch/skills/tracing" run="Instrument my code with LangWatch" />
<SkillInstall skill="langwatch/skills/evaluations" run="Set up evaluations for my agent" />
<SkillInstall skill="langwatch/skills/scenarios" run="Add scenario tests for my agent" />
<SkillInstall skill="langwatch/skills/prompts" run="Version my prompts with LangWatch" />
<SkillInstall skill="langwatch/skills/analytics" run="How is my agent performing?" />
<SkillInstall title="Instrument my agent with open telemetry" skill="langwatch/skills/tracing" slashCommand="/langwatch-tracing" />
<SkillInstall title="Write evaluations for my agent" skill="langwatch/skills/evaluations" slashCommand="/langwatch-evaluations" />
<SkillInstall title="Write scenario tests and a CI pipeline for my agent" skill="langwatch/skills/scenarios" slashCommand="/langwatch-scenarios" />
<SkillInstall title="Version my prompts" skill="langwatch/skills/prompts" slashCommand="/langwatch-prompts" />
<SkillInstall title="Do all of the above" skill="langwatch/skills/level-up" slashCommand="/langwatch-level-up" highlighted />
</Tab>

<Tab title="MCP">
Expand Down
15 changes: 7 additions & 8 deletions skills/directory.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 |
<SkillInstall title="Instrument my agent with open telemetry" skill="langwatch/skills/tracing" slashCommand="/langwatch-tracing" />
<SkillInstall title="Write evaluations for my agent" skill="langwatch/skills/evaluations" slashCommand="/langwatch-evaluations" />
<SkillInstall title="Write scenario tests and a CI pipeline for my agent" skill="langwatch/skills/scenarios" slashCommand="/langwatch-scenarios" />
<SkillInstall title="Version my prompts" skill="langwatch/skills/prompts" slashCommand="/langwatch-prompts" />
<SkillInstall title="Do all of the above" skill="langwatch/skills/level-up" slashCommand="/langwatch-level-up" highlighted />

<Tip>
**Starting an agent from scratch?** Use [Better Agents](/better-agents/overview) to scaffold a production-ready project with all LangWatch features built in.
Expand Down
12 changes: 6 additions & 6 deletions skills/recipes.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,11 +19,11 @@ import { PROMPTS } from "/snippets/prompts-data.jsx"
</Tab>

<Tab title="Skills">
<SkillInstall skill="langwatch/skills/recipes/improve-setup" run="⭐ What should I do next to improve my agent?" />
<SkillInstall skill="langwatch/skills/recipes/debug-instrumentation" run="Debug and improve my agent instrumentation" />
<SkillInstall skill="langwatch/skills/recipes/evaluate-multimodal" run="Evaluate my multimodal agent" />
<SkillInstall skill="langwatch/skills/recipes/generate-rag-dataset" run="Generate an evaluation dataset from my RAG knowledge base" />
<SkillInstall skill="langwatch/skills/recipes/test-compliance" run="Check my agent doesn't give prescriptive advice" />
<SkillInstall skill="langwatch/skills/recipes/test-cli-usability" run="Test my CLI is well usable by AI agents" />
<SkillInstall title="What should I do next to improve my agent?" skill="langwatch/skills/recipes/improve-setup" slashCommand="/langwatch-improve-setup" highlighted />
<SkillInstall title="Debug and improve my agent instrumentation" skill="langwatch/skills/recipes/debug-instrumentation" slashCommand="/langwatch-debug-instrumentation" />
<SkillInstall title="Evaluate my multimodal agent" skill="langwatch/skills/recipes/evaluate-multimodal" slashCommand="/langwatch-evaluate-multimodal" />
<SkillInstall title="Generate an evaluation dataset from my RAG knowledge base" skill="langwatch/skills/recipes/generate-rag-dataset" slashCommand="/langwatch-generate-rag-dataset" />
<SkillInstall title="Check my agent doesn't give prescriptive advice" skill="langwatch/skills/recipes/test-compliance" slashCommand="/langwatch-test-compliance" />
<SkillInstall title="Test my CLI is well usable by AI agents" skill="langwatch/skills/recipes/test-cli-usability" slashCommand="/langwatch-test-cli-usability" />
</Tab>
</Tabs>
115 changes: 68 additions & 47 deletions snippets/skill-install.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,66 +1,87 @@
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 ? (
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12" /></svg>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12" /></svg>
) : (
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2" /><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" /></svg>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2" /><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" /></svg>
);

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 (
<div style={{
border: "1px solid var(--border-color, #e5e7eb)",
borderRadius: "12px", padding: "8px 16px",
marginBottom: "8px",
border: highlighted ? "1px solid rgba(225, 113, 0, 0.4)" : "1px solid var(--border-color, #e5e7eb)",
borderRadius: "12px",
padding: "20px 24px",
marginBottom: "16px",
background: highlighted ? "rgba(225, 113, 0, 0.06)" : "transparent",
}}>
<div style={rowStyle}>
<span style={labelStyle}>Install</span>
<code style={codeStyle}>{installCmd}</code>
<button onClick={handleCopyInstall} style={btnStyle(copiedInstall)}><CopyIcon copied={copiedInstall} /></button>
<div style={{
display: "flex",
alignItems: "flex-start",
justifyContent: "space-between",
marginBottom: "12px",
}}>
<span style={{
fontSize: "16px",
fontWeight: 700,
}}>{title}</span>
<button
onClick={handleCopy}
style={{
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",
flexShrink: 0,
}}
title="Copy install command"
>
<CopyIcon copied={copied} />
</button>
</div>
<div style={{ borderTop: "1px solid var(--border-color, #e5e7eb)", ...rowStyle }}>
<span style={labelStyle}>Run</span>
<span style={{ fontSize: "13px" }}>"{run}"</span>
<button onClick={handleCopyRun} style={btnStyle(copiedRun)}><CopyIcon copied={copiedRun} /></button>

<div style={{
display: "flex",
alignItems: "center",
gap: "8px",
marginBottom: "12px",
}}>
<span style={{
fontSize: "13px",
color: "var(--text-muted, #6b7280)",
fontFamily: "var(--font-mono, monospace)",
}}>&gt;_</span>
<code style={{
fontSize: "13px",
fontFamily: "var(--font-mono, monospace)",
}}>{installCmd}</code>
</div>

<div style={{
background: highlighted ? "rgba(225, 113, 0, 0.08)" : "var(--border-color, rgba(0, 0, 0, 0.05))",
borderRadius: "8px",
padding: "10px 14px",
fontSize: "13px",
color: "var(--text-muted, #6b7280)",
}}>
Then use <span style={{
color: "var(--colors-light, #fe9a00)",
fontWeight: 600,
}}>{slashCommand}</span> in your coding agent
</div>
</div>
);
Expand Down
Loading