Creating Changesets (LLM Guide)

This guide is specifically for LLMs (like Claude Code) to help generate changesets for the Denji project.

7 stars

Best use case

Creating Changesets (LLM Guide) is best used when you need a repeatable AI agent workflow instead of a one-off prompt.

This guide is specifically for LLMs (like Claude Code) to help generate changesets for the Denji project.

Teams using Creating Changesets (LLM Guide) should expect a more consistent output, faster repeated execution, less prompt rewriting.

When to use this skill

  • You want a reusable workflow that can be run more than once with consistent structure.

When not to use this skill

  • You only need a quick one-off answer and do not need a reusable workflow.
  • You cannot install or maintain the underlying files, dependencies, or repository context.

Installation

Claude Code / Cursor / Codex

$curl -o ~/.claude/skills/creating-a-changeset/SKILL.md --create-dirs "https://raw.githubusercontent.com/fellipeutaka/denji/main/.agents/skills/creating-a-changeset/SKILL.md"

Manual Installation

  1. Download SKILL.md from GitHub
  2. Place it in .claude/skills/creating-a-changeset/SKILL.md inside your project
  3. Restart your AI agent — it will auto-discover the skill

How Creating Changesets (LLM Guide) Compares

Feature / AgentCreating Changesets (LLM Guide)Standard Approach
Platform SupportNot specifiedLimited / Varies
Context Awareness High Baseline
Installation ComplexityUnknownN/A

Frequently Asked Questions

What does this skill do?

This guide is specifically for LLMs (like Claude Code) to help generate changesets for the Denji project.

Where can I find the source code?

You can find the source code on GitHub using the link provided at the top of the page.

SKILL.md Source

# Creating Changesets (LLM Guide)

This guide is specifically for LLMs (like Claude Code) to help generate changesets for the Denji project.

## When to Create a Changeset

Create a changeset for user-facing changes:
- ✅ New features
- ✅ Bug fixes  
- ✅ Breaking changes
- ✅ Performance improvements
- ✅ User-facing documentation changes
- ❌ Internal refactoring (no user impact)
- ❌ Test-only changes
- ❌ CI/CD configuration

## How to Create a Changeset (Manual Method)

Since `bun changeset` is an interactive CLI tool (not suitable for LLMs), create changeset files manually:

### File Location
Create a new file in `.changeset/` directory with a descriptive kebab-case name:
```
.changeset/add-forward-ref-option.md
.changeset/fix-icon-name-collision.md
.changeset/breaking-change-config-schema.md
```

### File Format

```markdown
---
"denji": <change-type>
---

<Short summary (one line)>

<Detailed description with examples and migration guides if needed>
```

### Change Types (Semantic Versioning)

- **`patch`** - Bug fixes, minor improvements, no API changes
  - Version bump: `0.2.0` → `0.2.1`
  - Example: "Fix icon name sanitization for special characters"

- **`minor`** - New features, backward-compatible additions
  - Version bump: `0.2.0` → `0.3.0`
  - Example: "Add forwardRef option for React components"

- **`major`** - Breaking changes, API removals/changes
  - Version bump: `0.2.0` → `1.0.0`
  - Example: "Remove support for Node.js 14"

## Changeset Template

### For Minor Changes (New Features)

```markdown
---
"denji": minor
---

Add `featureName` option

This release introduces a new `featureName` configuration option that allows users to [describe benefit].

**New Configuration:**

- `config.featureName` - [description] (defaults to `[value]`)
- CLI flags: `--feature-name` / `--no-feature-name` for `init` command

**Example:**

\`\`\`json
{
  "framework": "react",
  "featureName": true
}
\`\`\`

**Usage:**

\`\`\`tsx
// Example code showing the feature in action
\`\`\`
```

### For Patch Changes (Bug Fixes)

```markdown
---
"denji": patch
---

Fix [specific issue description]

Resolves an issue where [describe the bug]. The [component/feature] now correctly [describe fix].

**Before:**
\`\`\`tsx
// Code showing the bug
\`\`\`

**After:**
\`\`\`tsx
// Code showing the fix
\`\`\`

Fixes #[issue-number] (if applicable)
```

### For Major Changes (Breaking Changes)

```markdown
---
"denji": major
---

BREAKING: [Change description]

This is a breaking change that [explain what changed and why].

**Migration Guide:**

**Before:**
\`\`\`tsx
// Old API usage
\`\`\`

**After:**
\`\`\`tsx
// New API usage
\`\`\`

**Breaking Changes:**
- [List each breaking change]
- [Explain how to migrate]

**Rationale:**
[Explain why this breaking change was necessary]
```

## Real-World Examples

### Example 1: New Feature (forwardRef)

```markdown
---
"denji": minor
---

Add `forwardRef` option for React icon components

This release adds a new `forwardRef` configuration option for React projects that wraps icon components with `React.forwardRef`, enabling ref forwarding to the underlying SVG element.

**New Configuration Options:**

- `react.forwardRef` - Boolean option to enable forwardRef wrapping (defaults to `false`)
- CLI flags: `--forward-ref` / `--no-forward-ref` for the `init` command

**Changes:**

- Enhanced config schema with framework-specific options using discriminated unions
- Added interactive prompt during `denji init` for React projects
- Updated TypeScript types to reflect `ForwardRefExoticComponent` when enabled
- Framework-agnostic architecture that supports future framework-specific options

**Example Configuration:**

\`\`\`json
{
  "framework": "react",
  "output": "./src/icons.tsx",
  "react": {
    "forwardRef": true
  }
}
\`\`\`

**Usage:**

\`\`\`tsx
import { useRef } from "react";
import { Icons } from "./icons";

function App() {
  const iconRef = useRef<SVGSVGElement>(null);
  return <Icons.Check ref={iconRef} className="size-4" />;
}
\`\`\`
```

### Example 2: Bug Fix

```markdown
---
"denji": patch
---

Fix icon name collision when adding icons with same base name

Resolves an issue where adding icons like `lucide:check` and `mdi:check` would overwrite each other. Icon names now include the collection prefix to prevent collisions.

**Before:**
Both icons would be named `Check`, causing the second to override the first.

**After:**
Icons are named `LucideCheck` and `MdiCheck` respectively.

Fixes #42
```

### Example 3: Performance Improvement

```markdown
---
"denji": patch
---

Improve icon generation performance by 40%

Optimized SVG parsing and template generation to significantly reduce build times for projects with many icons. Large icon sets (100+ icons) now generate ~40% faster.

**Technical Details:**
- Parallelized icon fetching from Iconify API
- Cached parsed SVG structures
- Reduced redundant file system operations
```

## Best Practices for LLMs

1. **Always analyze git diff** to understand the full scope of changes
2. **Choose the correct semver type**:
   - Breaking change? → `major`
   - New feature? → `minor`
   - Bug fix or small improvement? → `patch`
3. **Write user-focused descriptions** (avoid implementation details unless relevant)
4. **Include code examples** when changes affect API usage
5. **Use descriptive filenames** that match the change (e.g., `add-forward-ref-option.md`)
6. **Format code blocks properly** using triple backticks with language hints
7. **Reference issues/PRs** when applicable using `Fixes #123` or `Closes #456`

## What NOT to Include

- Internal refactoring details (unless user-facing)
- Test implementation specifics
- Build system changes
- Development tooling updates
- Overly technical jargon

## Publishing

**DO NOT** include `bun changeset publish` commands or instructions. Publishing is automated via GitHub Actions when changes are pushed to main.

The workflow:
1. LLM creates changeset file → `.changeset/feature-name.md`
2. User commits and pushes to main
3. GitHub Actions automatically versions and publishes

## Validation Checklist

Before creating a changeset, verify:
- [ ] File is in `.changeset/` directory
- [ ] Filename is descriptive and kebab-case
- [ ] YAML frontmatter is correct: `"denji": minor`
- [ ] Summary is clear and user-focused
- [ ] Code examples are properly formatted
- [ ] Semver type matches the change scope
- [ ] No implementation details that don't affect users

Related Skills

web-design-guidelines

7
from fellipeutaka/denji

Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".

solid

7
from fellipeutaka/denji

Apply SOLID principles to write flexible, maintainable, and testable code. Use when designing classes, interfaces, and module boundaries. Covers Single Responsibility, Open/Closed, Liskov Substitution, Interface Segregation, and Dependency Inversion with practical TypeScript examples and detection heuristics.

denji

7
from fellipeutaka/denji

Manage SVG icons as framework components using Denji CLI. Use when the user needs to add, remove, list, export, import, or manage SVG icons in React, Preact, Solid, Qwik, Vue, or Svelte projects. Triggers include requests to "add an icon", "set up icons", "manage SVG icons", "remove an icon", "list icons", "export icons", "import icons", "dry-run icon add", or any task involving Iconify icons as framework components.

zod

7
from fellipeutaka/denji

Zod 4 — TypeScript-first schema validation with static type inference. Use when writing Zod schemas, validating data, defining types with Zod, parsing input, creating form validation schemas, defining API request/response schemas, working with z.object, z.string, z.number, z.enum, z.array, z.union, z.discriminatedUnion, z.file, z.jwt, z.email, z.uuid, z.url, z.codec, z.toJSONSchema, z.fromJSONSchema, z.int, z.stringbool, z.templateLiteral, z.record, z.partialRecord, or any other Zod API. Also use when migrating from Zod 3 to Zod 4, or when the user's package.json shows zod@^4. CRITICAL: Always use Zod 4 APIs. Never use deprecated Zod 3 patterns unless user explicitly requests Zod 3 compatibility.

vercel-react-best-practices

7
from fellipeutaka/denji

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.

vercel-composition-patterns

7
from fellipeutaka/denji

React composition patterns that scale. Use when refactoring components with boolean prop proliferation, building flexible component libraries, or designing reusable APIs. Triggers on tasks involving compound components, render props, context providers, or component architecture. Includes React 19 API changes.

turborepo

7
from fellipeutaka/denji

Turborepo monorepo build system guidance. Triggers on: turbo.json, task pipelines, dependsOn, caching, remote cache, the "turbo" CLI, --filter, --affected, CI optimization, environment variables, internal packages, monorepo structure/best practices, and boundaries. Use when user: configures tasks/workflows/pipelines, creates packages, sets up monorepo, shares code between apps, runs changed/affected packages, debugs cache, or has apps/packages directories.

tanstack-virtual

7
from fellipeutaka/denji

TanStack Virtual headless virtualization for React. Use when rendering large lists (100+ items), implementing virtual scroll, building infinite scroll feeds, virtualizing grids or tables, using window-level scrolling, or implementing masonry/lane layouts with @tanstack/react-virtual. Triggers on: useVirtualizer, useWindowVirtualizer, virtual list, virtual scroll, list virtualization.

tanstack-query

7
from fellipeutaka/denji

TanStack Query (React Query) v5 best practices for data fetching, caching, mutations, and server state management. Use when building data-driven React applications, setting up query configurations, implementing mutations/optimistic updates, configuring caching strategies, integrating with SSR, or fixing v4→v5 migration errors.

tanstack-pacer

7
from fellipeutaka/denji

TanStack Pacer best practices for execution control in React — debouncing, throttling, rate limiting, queuing, and batching. Use when implementing search inputs, scroll handlers, API rate limits, task queues, bulk operations, or any scenario requiring controlled execution timing with reactive state.

tanstack-hotkeys

7
from fellipeutaka/denji

Guide for implementing keyboard shortcuts in React using @tanstack/react-hotkeys. Use when building hotkey/shortcut features, registering keyboard shortcuts, handling key sequences, recording custom shortcuts, tracking held keys, or formatting hotkeys for display in React applications.

skill-creator

7
from fellipeutaka/denji

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.