A debugging guide for finding bugs and rendering problems in a calendar interface. It provides a step-by-step process to reproduce, isolate, and diagnose issues across layout, dragging, resizing, state, and styling.

Use it when calendar events are positioned incorrectly, drag or resize behaviour is wrong, or the interface renders unexpectedly.

It replaces broad trial and error with targeted checks for the part of the calendar most likely to contain the problem. It also prompts checks across themes and screen sizes.

How vmnog/calendarcn configures Claude Code

Reuse

Borrowing it

Nothing to install: this file belongs to vmnog/calendarcn. Take a copy, put it at the same path in your own repository, and replace the rules that are about this project with yours.

Copy the file

curl -O https://raw.githubusercontent.com/vmnog/calendarcn/main/.claude/skills/debugging/SKILL.md

Clone the repo

git clone --depth 1 https://github.com/vmnog/calendarcn

Made for: Claude Code.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

README.md

[![agentmods](https://agentmods.dev/badge/skills/vmnog/calendarcn/debugging/github.svg)](https://agentmods.dev/skills/vmnog/calendarcn/debugging)

Your own site

<a href="https://agentmods.dev/skills/vmnog/calendarcn/debugging"><img src="https://agentmods.dev/badge/skills/vmnog/calendarcn/debugging/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

Your own site · 80×15

<a href="https://agentmods.dev/skills/vmnog/calendarcn/debugging"><img src="https://agentmods.dev/badge/skills/vmnog/calendarcn/debugging.svg" alt="Reviewed on agentmods" width="80" height="20"></a>

Per session 0 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.

When invoked 940 The whole file, excluding the scripts and references it only reads on demand.

Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe.

Origin original No closer match found in the catalogue.

Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

Model	Per session	Once invoked
Fable 5.1	$0.00000	$0.00940
Opus 5.5	$0.00000	$0.00376
Sonnet 5.5	$0.00000	$0.00188
Haiku 4.5	$0.00000	$0.00094

Measured 28d ago against content hash bcd12cb72ff6, method: parsed. Prices are Anthropic first-party input rates as of 2026-10-07, from the pricing page.

Security

Grade A, and why

debugging scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 28d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

.claude/skills/debugging/SKILL.md · 106 lines

How it starts

The opening of the file, as written. The whole thing — 106 lines — stays where its author put it; the contents beside it link to each section on GitHub.

Debugging Skill — CalendarCN

When to Use

Invoke when tracking down bugs, unexpected behavior, or rendering issues in CalendarCN.

Debugging Flow

Step 1: Reproduce

Get exact steps to reproduce
Identify: which component, which interaction, which data state?
Try in both light and dark mode
Try at different viewport sizes

Step 2: Isolate

Narrow down the bug to one of these areas:

Area	Key Files	Common Issues
Positioning	`event-utils.ts`	Wrong top/height/left/width calculations
Drag	`use-event-drag.ts`	Snap math, cross-day boundaries, auto-scroll
Resize	`use-event-resize.ts`	Anchor model, edge flipping, min duration
All-day	`use-all-day-resize.ts`	Column span calculation, row stacking
Rendering	`week-view-*.tsx`	Z-index, overflow, conditional classes
State	`page.tsx`	Event updates, selection, dirty tracking
Styling	`globals.css`	CSS variables, dark mode, color tokens

Step 3: Diagnose

For Positioning Bugs

Log the event data: start, end, allDay, multiDay
Check calculatePositionedEvents() output: top, height, left, width
Verify segmentPosition is correct: "full", "start", "middle", "end"
Check column assignment: assignColumns() output

For Drag/Resize Bugs

Add temporary logging to the handler ref functions
Check dragRef.current / resizeRef.current intermediate state
Verify snap math: snapToGrid(minutes) should round to SNAP_MINUTES (15)
Check boundary clamping: events shouldn't exceed 0:00–24:00
Verify cleanup: are event listeners properly removed?

For Rendering Bugs

Inspect with browser DevTools — check computed styles
Look for z-index conflicts (follow the z-index scale in CLAUDE.md)
Check cn() usage — are conditional classes applied correctly?
Verify CSS variable values in light vs dark mode

Read the full file on GitHub · 106 lines

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

28d ago First seen · 106 lines · 0 tokens per session scan A bcd12cb72ff6

Subscribe to this mod's changes

debugging is a skill published in the GitHub repository vmnog/calendarcn (139 stars, last pushed 27d ago), licensed MIT. It costs nothing until one of its globs matches a file; then it loads 940 tokens. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-10-02.

Debugging calendar nextjs shadcn-ui tailwindcss

react-doctor

Run after making React changes to catch issues early. Use when reviewing code, finishing a feature, or fixing bugs in a React project.

shipkit-io/bones · 31 tokens

tuturuuu-e2e-auth-debugging

Diagnose Tuturuuu local E2E authentication, dev-session, and onboarding failures.

tutur3u/platform · 28 tokens

ui-beats

Use this skill when users want to add, customize, or troubleshoot UI Beats components in React/Next.js projects. It covers component selection, shadcn registry installation from uibeats.com, the UI Beats MCP server, motion and reduced-motion handling, and integration patterns for animated sections.

nikhils4/ui-beats · 62 tokens

tuturuuu-browser-vercel-debugging

Reproduce deployed Tuturuuu bugs and correlate browser evidence with Vercel logs.

tutur3u/platform · 26 tokens

nextjs-seo-technical

Diagnose why a Next.js page is missing from Google or fails to be fetched, rendered, or indexed, such as 'Crawled - currently not indexed', a wrong canonical, a stray noindex, a soft 404, a bad redirect, or robots and sitemap faults. Also Core Web Vitals, site audits, launch checks, and URL migrations. For hreflang…

s0vers/next-app-i18n-starter · 115 tokens

migrate-radix-to-base

Migrates React projects and components from Radix UI to Base UI. Use when asked to migrate from radix, move to base-ui, convert radix primitives, or switch a shadcn project's base library. Handles single components ("migrate accordion") and whole projects.

shadcn-ui/ui · 61 tokens

calendarcn: Skill for Claude Code