codegen
Code generation utilities for json-render. Use when generating code from UI specs, building custom code exporters, traversing…
Guide for creating effective skills. This skill should be used when users want to create a new skill (or update an existing skill) that extends Claude's capabilities with specialized knowledge, workflows, or tool integrations.
Claude Code
$ npx -y skills add vercel-labs/json-render --skill skill-creator --agent claude-code
Codex
$ npx skills add vercel-labs/json-render --skill skill-creator -a codex -y
Cursor
$ npx skills add vercel-labs/json-render --skill skill-creator -a cursor -y
Gemini CLI
$ npx skills add vercel-labs/json-render --skill skill-creator -a gemini-cli -y
GitHub Copilot
$ npx skills add vercel-labs/json-render --skill skill-creator -a github-copilot -y
OpenCode
$ npx skills add vercel-labs/json-render --skill skill-creator -a opencode -y
Windsurf
$ npx skills add vercel-labs/json-render --skill skill-creator -a windsurf -y
name: skill-creator description: Guide for creating effective skills. This skill should be used when users want to create a new skill (or update an existing skill) that extends Claude's capabilities with specialized knowledge, workflows, or tool integrations. license: Complete terms in LICENSE.txt
This skill provides guidance for creating effective skills.
Skills are modular, self-contained packages that extend Claude's capabilities by providing specialized knowledge, workflows, and tools. Think of them as "onboarding guides" for specific domains or tasks—they transform Claude from a general-purpose agent into a specialized agent equipped with procedural knowledge that no model can fully possess.
1. Specialized workflows - Multi-step procedures for specific domains 2. Tool integrations - Instructions for working with specific file formats or APIs 3. Domain expertise - Company-specific knowledge, schemas, business logic 4. Bundled resources - Scripts, references, and assets for complex and repetitive tasks
The context window is a public good. Skills share the context window with everything else Claude needs: system prompt, conversation history, other Skills' metadata, and the actual user request.
**Default assumption: Claude is already very smart.** Only add context Claude doesn't already have. Challenge each piece of information: "Does Claude really need this explanation?" and "Does this paragraph justify its token cost?"
Prefer concise examples over verbose explanations.
Match the level of specificity to the task's fragility and variability:
**High freedom (text-based instructions)**: Use when multiple approaches are valid, decisions depend on context, or heuristics guide the approach.
**Medium freedom (pseudocode or scripts with parameters)**: Use when a preferred pattern exists, some variation is acceptable, or configuration affects behavior.
**Low freedom (specific scripts, few parameters)**: Use when operations are fragile and error-prone, consistency is critical, or a specific sequence must be followed.
Think of Claude as exploring a path: a narrow bridge with cliffs needs specific guardrails (low freedom), while an open field allows many routes (high freedom).
Every skill consists of a required SKILL.md file and optional bundled resources:
skill-name/
├── SKILL.md (required)
│ ├── YAML frontmatter metadata (required)
│ │ ├── name: (required)
│ │ └── description: (required)
│ └── Markdown instructions (required)
└── Bundled Resources (optional)
├── scripts/ - Executable code (Python/Bash/etc.)
├── references/ - Documentation intended to be loaded into context as needed
└── assets/ - Files used in output (templates, icons, fonts, etc.)Every SKILL.md consists of:
Executable code (Python/Bash/etc.) for tasks that require deterministic reliability or are repeatedly rewritten.
Documentation and reference material intended to be loaded as needed into context to inform Claude's process and thinking.
Files not intended to be loaded into context, but rather used within the output Claude produces.
A skill should only contain essential files that directly support its functionality. Do NOT create extraneous documentation or auxiliary files, including:
The Generative UI framework. Generate dynamic, personalized UIs from prompts without sacrificing reliability. Predefined components and actions for safe, predictable output.
Code generation utilities for json-render. Use when generating code from UI specs, building custom code exporters, traversing…
Core package for defining schemas, catalogs, and AI prompt generation for json-render. Use when working with @json-render/core,…
React adapter for the json-render devtools inspector. Use whenever the user wants to add, configure, or troubleshoot…
SolidJS adapter for the json-render devtools inspector. Use whenever the user wants to add, configure, or troubleshoot…
Svelte 5 adapter for the json-render devtools inspector. Use whenever the user wants to add, configure, or troubleshoot…
Vue adapter for the json-render devtools inspector. Use whenever the user wants to add, configure, or troubleshoot…
Migrates React projects and components from Radix UI to Base UI. Use when asked to migrate from radix, move to base-ui, convert…
tasteskill v2, the anti-slop frontend skill. Art direction for websites, distilled from a study of 247 curated gallery sites (One…