Update stale AI skills and add Emil Kowalski animation skill#2824
Update stale AI skills and add Emil Kowalski animation skill#2824nick-inkeep merged 1 commit intomainfrom
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
- Update vercel-react-best-practices: add 9 new rule files (flatmap-filter, resource-hints, script-defer-async, no-inline-components, split-combined-hooks, use-deferred-value, hoist-static-io, sections, template) + updated SKILL.md and AGENTS.md - Update shadcn: sync SKILL.md and cli.md from latest upstream (shadcn-ui repo) - Update web-design-guidelines: sync SKILL.md from agent-skills repo - Update next-cache-components: sync SKILL.md from vercel-labs/next-skills - Remove react/ orphan skill directory (superseded by vercel-react-best-practices) - Install emil-design-eng: new skill for Emil Kowalski's design engineering patterns Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]>
bf4ab6a to
91bd1dd
Compare
|
TL;DR — Adds a new Emil Kowalski design-engineering skill for animation and UI polish guidance, expands the Key changes
Summary ｜ 17 files ｜ 1 commit ｜ base: Emil Kowalski design-engineering skill
The skill is structured around a frequency-based animation decision tree (never animate keyboard-initiated actions, standard animation for occasional elements, delight for rare/first-time flows) and encodes specific Framer Motion patterns like
Seven new
|
There was a problem hiding this comment.
Solid skill maintenance PR. One substantive issue: section 3.4 in AGENTS.md is missing all four code blocks that exist in the standalone rules/server-hoist-static-io.md file. The bold headers are present but without the code examples between them, the rule is not actionable when loaded via the main AGENTS.md document. Minor note: PR description says "57 → 66 rules" but the actual count is 64 (which the SKILL.md correctly states).
| **Incorrect: reads font file on every request** | ||
|
|
||
| **Correct: loads once at module initialization** |
There was a problem hiding this comment.
Code blocks are missing between these bold headers. The standalone rules/server-hoist-static-io.md has four code blocks (incorrect OG route example, correct module-level example, synchronous fs alternative, general Node.js config example) but they were not carried over into AGENTS.md. This makes the rule unusable when read from AGENTS.md — bold headers like "Incorrect: reads font file on every request" are immediately followed by the next bold header with no code in between.
| Tying visual changes directly to mouse position feels artificial because it lacks motion. Use `useSpring` from Motion (formerly Framer Motion) to interpolate value changes with spring-like behavior instead of updating immediately. | ||
|
|
||
| ```jsx | ||
| import { useSpring } from 'framer-motion'; |
There was a problem hiding this comment.
Minor: the framer-motion package was renamed to motion (re-exported as motion/react). The text on line 152 correctly says "Motion (formerly Framer Motion)" but the import still uses the old package name. Not blocking since framer-motion still works as a compatibility re-export, but worth aligning if you're touching this file.
There was a problem hiding this comment.
PR Review Summary
(0) Total Issues | Risk: Low
🔴❗ Critical (0) ❗🔴
No critical issues found.
🟠⚠️ Major (0) 🟠⚠️
No major issues found.
🟡 Minor (0) 🟡
No minor issues found.
💭 Consider (1) 💭
Inline Comments:
- 💭 Consider:
emil-design-eng/SKILL.md:4Missinguser-invocablefrontmatter field
✅ APPROVE
Summary: Clean skill ecosystem update. All 17 changed files are markdown skill files in .agents/skills/ — no application code, no runtime behavior changes. The new emil-design-eng skill (671 lines) is well-structured with comprehensive animation/motion design guidance. The Vercel React best practices updates (7 new rules) maintain consistency with existing patterns. The allowed-tools addition to shadcn properly restricts Bash commands for security. The orphaned react/rules/ directory removal and web-design-guidelines simplification are both sensible cleanups. 🎉
Reviewers (2)
| Reviewer | Returned | Main Findings | Consider | While You're Here | Inline Comments | Pending Recs | Discarded |
|---|---|---|---|---|---|---|---|
orchestrator (direct review) |
1 | 0 | 0 | 0 | 1 | 0 | 0 |
| Total | 1 | 0 | 0 | 0 | 1 | 0 | 0 |
Note: Sub-agent dispatch encountered permission issues; conducted direct review instead.
| --- | ||
| name: emil-design-eng | ||
| description: This skill encodes Emil Kowalski's philosophy on UI polish, component design, animation decisions, and the invisible details that make software feel great. | ||
| --- |
There was a problem hiding this comment.
💭 Consider: Missing user-invocable frontmatter
Issue: Other skills in this repo use user-invocable: false to indicate they're system-triggered rather than user-invoked via slash commands.
Why: This maintains consistency with the skill frontmatter convention used in shadcn and other skills in the ecosystem.
Fix: Consider adding user-invocable: false or user-invocable: true (if intended to be slash-command invocable) to the frontmatter.
Refs:
- shadcn/SKILL.md:4 — existing pattern
Ito Test Report ✅18 test cases ran. 18 passed. The unified local docs verification passed 18/18 test cases with no failures, showing the Visual Builder and TypeScript SDK skills routes consistently rendered expected content and images, remained reachable through cross-page/deep-link/hash navigation, and recovered cleanly through back/forward, reload, and mid-load refresh flows without runtime errors or blank states. Key resilience and security findings were also positive: all seven new skills-step images were reliably served (including 350 parallel burst requests), missing assets failed safely with not-found behavior, layouts stayed stable under Slow 3G and rapid anchor/history interactions, mobile/tablet readability held without overlap or overflow, parallel tab behavior remained stable, and traversal/XSS/malformed-URL probes were safely handled with no code execution or data leakage. ✅ Passed (18)
Commit: Tell us how we did: Give Ito Feedback |
Summary
Updates 4 stale third-party AI skills to their latest upstream versions and installs 1 new first-party skill. Removes an orphaned skill directory.
This is the result of a comprehensive skills ecosystem audit that evaluated 200+ skills across 20+ sources, security-audited 11 repos, and cross-referenced every rule against the codebase. Only changes that are (1) first-party/authoritative, (2) add knowledge not inferrable from docs/search, and (3) have no codebase conflicts were included. Full research and deferred items are documented in the spec.
What changed:
vercel-react-best-practices (57 → 66 rules) — Added 7 new rules from upstream:
rendering-resource-hints,rerender-no-inline-components,rerender-use-deferred-value,rerender-split-combined-hooks,server-hoist-static-io,rendering-script-defer-async,js-flatmap-filter. Updated SKILL.md and AGENTS.md index files.shadcn — Updated SKILL.md to add
allowed-toolsfrontmatter (restricts Bash to shadcn CLI commands for security). Updated cli.md with preset/base flag handling.web-design-guidelines — Replaced SKILL.md with simplified upstream version (direct WebFetch workflow, removes stale CI-vs-local split path).
next-cache-components — Updated from vercel-labs/next-skills to add
unstable_cache→use cachemigration section with before/after code examples.Removed
react/orphan — Directory had no SKILL.md, contained onlyrules/no-dot-provider.mdwhich is already covered byvercel-composition-patterns/rules/react19-no-forwardref.md.Installed
emil-design-eng— Animation/motion design skill by Emil Kowalski (creator of Sonner, design engineer at Linear). 672 lines of craft knowledge covering animation decision frameworks, easing curves, duration tables, spring animations, CSS clip-path techniques, gesture interactions, accessibility (prefers-reduced-motion), and a review checklist. This fills the biggest design engineering gap — the app uses animations across 80+ files but had no animation guidance skill.Key decisions
specs/2026-03-24-skills-installation-and-optimization/SPEC.md— Section 8 (Future Work) documents all research findings, deferred skills, AGENTS.md optimization strategy, codebase issues surfaced, and llms.txt ecosystem analysis.Manual QA
No manual QA performed — changes are limited to
.agents/skills/markdown files (no application code, no runtime behavior).pnpm checkpasses. All three skill symlinks (.claude/skills,.cursor/skills,.codex/skills) verified pointing to.agents/skills/.🤖 Generated with Claude Code