chore: add Emil Kowalski skills - #1
Conversation
Amp-Thread-ID: https://ampcode.com/threads/T-019f92c4-1acc-70bc-9c8f-e97dee16fbcc Co-authored-by: Xuan Zhang <xuan@arcbox.dev>
📝 WalkthroughWalkthroughAdds documentation-driven agent skills for animation vocabulary, design guidance, auditing, planning, review, and UI library selection, plus a locked manifest containing skill metadata and hashes. ChangesAgent skill catalog
Estimated code review effort: 3 (Moderate) | ~20 minutes 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Comment |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 37b7528edd
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| @@ -0,0 +1,173 @@ | |||
| --- | |||
There was a problem hiding this comment.
For consumers who use the documented ./install.sh workflow, none of these seven skills is installed: install.sh:204-222 exports and enumerates only the repository's skills/ directory, while every new manifest is under .agents/skills/. They are therefore visible only while an agent is working inside this repository, and they also bypass the repository validator and README inventory described in README.md:48-61; move them into the repository's supported skills/ layout or extend the installer and validator to include this new source.
Useful? React with 👍 / 👎.
| | `quick` / `deep` | Adjust audit effort (see table); composes with a focus | | ||
| | a category focus (`performance`, `accessibility`, `easing`…) | Recon + audit that category only | | ||
| | `plan <description>` | Skip the audit; recon just enough to specify, then write a single plan for the described improvement | | ||
| | `execute <plan>` | Dispatch an executor subagent to implement the plan in an isolated worktree, then review its diff with the `review-animations` bar and render a verdict | |
There was a problem hiding this comment.
When invoked as improve-animations execute <plan>, this mode orders a subagent to modify source even though the skill's description and unconditional hard rules at lines 22-23 say it never applies fixes and must perform no mutating operations. The conflicting instructions can make an agent either refuse the advertised mode or silently violate the skill's safety contract; remove this mode or explicitly scope the read-only rules and frontmatter description so execution is a defined exception.
Useful? React with 👍 / 👎.
|
|
||
| 6. **Interruptibility.** Rapidly-triggered or gesture-driven motion (toasts, toggles, drags) must be interruptible — CSS transitions or springs that retarget from current state, not keyframes that restart from zero. | ||
|
|
||
| 7. **GPU-only properties.** Animate `transform` and `opacity` only. Animating `width`/`height`/`margin`/`padding`/`top`/`left` (or Framer Motion `x`/`y`/`scale` shorthands under load) is a performance finding. |
There was a problem hiding this comment.
When reviewing a hold-to-confirm overlay or image reveal implemented with clip-path, this non-negotiable “transform and opacity only” rule requires a performance finding, even though the same skill's STANDARDS.md:105-107 supplies a clip-path transition as the recommended asymmetric-timing implementation and STANDARDS.md:130-135 endorses clip-path for these exact effects. This makes compliant implementations fail the review, so the rule needs an explicit exception or the conflicting recipes should be removed.
Useful? React with 👍 / 👎.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Nitpick comments (2)
.agents/skills/apple-design/SKILL.md (1)
59-63: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winClarify the transition-versus-spring rule for gestures.
This says to avoid CSS transitions for anything gesture-driven, while
.agents/skills/review-animations/SKILL.mdallows transitions or springs for gesture-driven motion. Specify that springs are required for direct manipulation and velocity handoff, while transitions remain valid for rapidly retriggered state changes after the gesture.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In @.agents/skills/apple-design/SKILL.md around lines 59 - 63, Update the gesture animation guidance near “Avoid CSS transitions and `@keyframes`” to distinguish direct manipulation from post-gesture state changes: require springs for direct manipulation and velocity handoff, while allowing CSS transitions for rapidly retriggered state changes after the gesture. Keep the existing interruption and reversal requirements intact..agents/skills/find-animation-opportunities/SKILL.md (1)
104-115: 🚀 Performance & Scalability | 🔵 Trivial | ⚡ Quick winQualify the motion guidance instead of making it absolute.
These rules should read as defaults, not hard bans: the same docs also allow
clip-path,filter, and WAAPI-based motion, andCSS beats JSonly applies to predetermined animations under load. Reword the shared guidance in.agents/skills/find-animation-opportunities/SKILL.md,.agents/skills/emil-design-eng/SKILL.md,.agents/skills/improve-animations/AUDIT.md,.agents/skills/review-animations/SKILL.md, and.agents/skills/review-animations/STANDARDS.mdto say “prefer compositor-friendly motion” and call out the exceptions explicitly.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In @.agents/skills/find-animation-opportunities/SKILL.md around lines 104 - 115, Qualify the shared animation guidance so it states a preference for compositor-friendly motion rather than an absolute transform/opacity-only rule, while explicitly allowing clip-path, filter, and WAAPI when appropriate. Update the guidance at .agents/skills/find-animation-opportunities/SKILL.md:104-115, .agents/skills/emil-design-eng/SKILL.md:477-512, .agents/skills/improve-animations/AUDIT.md:71-80, .agents/skills/review-animations/SKILL.md:33-37, and .agents/skills/review-animations/STANDARDS.md:110-128; also clarify that “CSS beats JS” applies only to predetermined animations under load, preserving the existing reduced-motion and hover-gating requirements.Source: MCP tools
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In @.agents/skills/improve-animations/AUDIT.md:
- Around line 36-46: Define one explicit animation-duration policy and apply it
consistently across all six documents:
.agents/skills/improve-animations/AUDIT.md lines 36-46,
.agents/skills/find-animation-opportunities/SKILL.md lines 51-63,
.agents/skills/emil-design-eng/SKILL.md lines 125-135,
.agents/skills/review-animations/SKILL.md lines 27-29,
.agents/skills/review-animations/STANDARDS.md lines 39-49, and
.agents/skills/apple-design/SKILL.md lines 80-88. Make the standards table
authoritative, reconcile the under-300ms guidance with any approved modal/drawer
exceptions, and update all review gates, framework guidance, and Apple examples
to use the same ranges and blocking criteria.
In @.agents/skills/improve-animations/SKILL.md:
- Around line 20-24: Define one PLAN_DIR selection rule in
.agents/skills/improve-animations/SKILL.md, choosing animation-plans/ when
plans/ is already used, and reuse it for every plan-directory reference. Update
the README instruction in .agents/skills/improve-animations/SKILL.md lines 80-86
to target ${PLAN_DIR}/README.md, and replace the hard-coded plans/ path in
.agents/skills/improve-animations/PLAN-TEMPLATE.md lines 68-73 with the selected
directory variable. Ensure all three sites consistently propagate the same
PLAN_DIR.
In @.agents/skills/pick-ui-library/SKILL.md:
- Line 28: Update the customizable GUIs / control panels row in the library
recommendation table to name only one library, removing the dialkit alternative
so the skill consistently produces a single recommendation.
- Line 4: Make the pick-ui-library skill’s disable-model-invocation metadata
compatible with validation by updating PORTABLE_FIELDS and the unknown-field
validation in validate_skills.py to recognize it, while preserving
explicit-invocation behavior; alternatively remove the unsupported key and
express that contract using supported metadata.
---
Nitpick comments:
In @.agents/skills/apple-design/SKILL.md:
- Around line 59-63: Update the gesture animation guidance near “Avoid CSS
transitions and `@keyframes`” to distinguish direct manipulation from post-gesture
state changes: require springs for direct manipulation and velocity handoff,
while allowing CSS transitions for rapidly retriggered state changes after the
gesture. Keep the existing interruption and reversal requirements intact.
In @.agents/skills/find-animation-opportunities/SKILL.md:
- Around line 104-115: Qualify the shared animation guidance so it states a
preference for compositor-friendly motion rather than an absolute
transform/opacity-only rule, while explicitly allowing clip-path, filter, and
WAAPI when appropriate. Update the guidance at
.agents/skills/find-animation-opportunities/SKILL.md:104-115,
.agents/skills/emil-design-eng/SKILL.md:477-512,
.agents/skills/improve-animations/AUDIT.md:71-80,
.agents/skills/review-animations/SKILL.md:33-37, and
.agents/skills/review-animations/STANDARDS.md:110-128; also clarify that “CSS
beats JS” applies only to predetermined animations under load, preserving the
existing reduced-motion and hover-gating requirements.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: e893120d-d3a3-4f85-a6b4-0a2df9205227
📒 Files selected for processing (11)
.agents/skills/animation-vocabulary/SKILL.md.agents/skills/apple-design/SKILL.md.agents/skills/emil-design-eng/SKILL.md.agents/skills/find-animation-opportunities/SKILL.md.agents/skills/improve-animations/AUDIT.md.agents/skills/improve-animations/PLAN-TEMPLATE.md.agents/skills/improve-animations/SKILL.md.agents/skills/pick-ui-library/SKILL.md.agents/skills/review-animations/SKILL.md.agents/skills/review-animations/STANDARDS.mdskills-lock.json
| Duration budgets — **UI animations stay under 300ms**: | ||
|
|
||
| | Element | Duration | | ||
| | --- | --- | | ||
| | Button press feedback | 100–160ms | | ||
| | Tooltips, small popovers | 125–200ms | | ||
| | Dropdowns, selects | 150–250ms | | ||
| | Modals, drawers | 200–500ms | | ||
| | Marketing / explanatory | Can be longer | | ||
|
|
||
| Hunt for: `ease-in` anywhere, bare `ease`/`linear` on entrances, durations > 300ms on UI elements, tooltip delay + animation on every tooltip in a toolbar (after the first, they should be instant). |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | ⚡ Quick win
Align the animation duration contract across the skills.
The documents simultaneously state that UI animations must stay under 300ms and permit modal/drawer values up to 500ms, including Apple-design examples using 0.3–0.4 seconds. Define whether 300ms is a default, a per-element exception, or a hard limit, then make the tables and review criteria consistent.
.agents/skills/improve-animations/AUDIT.md#L36-L46: reconcile the global rule with the duration table..agents/skills/find-animation-opportunities/SKILL.md#L51-L63: use the same exception policy in the opportunity gate..agents/skills/emil-design-eng/SKILL.md#L125-L135: align the framework and examples..agents/skills/review-animations/SKILL.md#L27-L29: align blocking criteria with the approved duration ranges..agents/skills/review-animations/STANDARDS.md#L39-L49: make the standards table authoritative..agents/skills/apple-design/SKILL.md#L80-L88: ensure concrete values follow the same policy.
📍 Affects 6 files
.agents/skills/improve-animations/AUDIT.md#L36-L46(this comment).agents/skills/find-animation-opportunities/SKILL.md#L51-L63.agents/skills/emil-design-eng/SKILL.md#L125-L135.agents/skills/review-animations/SKILL.md#L27-L29.agents/skills/review-animations/STANDARDS.md#L39-L49.agents/skills/apple-design/SKILL.md#L80-L88
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In @.agents/skills/improve-animations/AUDIT.md around lines 36 - 46, Define one
explicit animation-duration policy and apply it consistently across all six
documents: .agents/skills/improve-animations/AUDIT.md lines 36-46,
.agents/skills/find-animation-opportunities/SKILL.md lines 51-63,
.agents/skills/emil-design-eng/SKILL.md lines 125-135,
.agents/skills/review-animations/SKILL.md lines 27-29,
.agents/skills/review-animations/STANDARDS.md lines 39-49, and
.agents/skills/apple-design/SKILL.md lines 80-88. Make the standards table
authoritative, reconcile the under-300ms guidance with any approved modal/drawer
exceptions, and update all review gates, framework guidance, and Apple examples
to use the same ranges and blocking criteria.
| ## Hard Rules | ||
|
|
||
| 1. **Never modify source code.** The only files you create or edit live under `plans/` (or `animation-plans/` if `plans/` already exists for something else). If asked to "just fix it", decline and point to `improve-animations execute <plan>` or to running the plan with any agent. | ||
| 2. **No mutating operations.** No installs, no builds with side effects, no commits, no formatters. Read-only analysis only. | ||
| 3. **Plans must be fully self-contained.** The executor has zero context from this conversation and zero taste. Never write "use the easing discussed above" — inline the exact cubic-bezier, the exact duration, the exact file path and code excerpt. |
There was a problem hiding this comment.
🗄️ Data Integrity & Integration | 🟠 Major | ⚡ Quick win
Propagate the selected plan directory consistently.
When plans/ already serves another purpose, the skill selects animation-plans/, but both the workflow and template still require updating plans/README.md. Define a single PLAN_DIR and update ${PLAN_DIR}/README.md everywhere.
.agents/skills/improve-animations/SKILL.md#L20-L24: define the directory-selection rule..agents/skills/improve-animations/SKILL.md#L80-L86: update the selected directory’s README..agents/skills/improve-animations/PLAN-TEMPLATE.md#L68-L73: remove the hard-codedplans/path.
🧰 Tools
🪛 SkillSpector (2.3.11)
[error] 25: [P1] Instruction Override: This pattern attempts to override system instructions or ignore safety constraints. Without LLM analysis, manual review is recommended.
Remediation: Remove or rewrite any text that instructs the agent to ignore prompts, override safety rules, or trust unverified content. Ensure skill content cannot be injected to alter agent behavior.
(Prompt Injection (P1))
[error] 3: [YR4] YARA rule 'agent_skill_prompt_injection_hidden_instructions': Prompt injection or hidden instructions embedded in AI agent skill text [agent_skills]: YARA rule matched a hack tool or exploit indicator (offensive tools, reconnaissance, privilege escalation, or exploit frameworks).
Remediation: Remove offensive tool references and exploit code. Legitimate agent skills should not contain penetration testing tools, exploit frameworks, or reconnaissance utilities.
(YARA Match (YR4))
📍 Affects 2 files
.agents/skills/improve-animations/SKILL.md#L20-L24(this comment).agents/skills/improve-animations/SKILL.md#L80-L86.agents/skills/improve-animations/PLAN-TEMPLATE.md#L68-L73
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In @.agents/skills/improve-animations/SKILL.md around lines 20 - 24, Define one
PLAN_DIR selection rule in .agents/skills/improve-animations/SKILL.md, choosing
animation-plans/ when plans/ is already used, and reuse it for every
plan-directory reference. Update the README instruction in
.agents/skills/improve-animations/SKILL.md lines 80-86 to target
${PLAN_DIR}/README.md, and replace the hard-coded plans/ path in
.agents/skills/improve-animations/PLAN-TEMPLATE.md lines 68-73 with the selected
directory variable. Ensure all three sites consistently propagate the same
PLAN_DIR.
| --- | ||
| name: pick-ui-library | ||
| description: Pick the right library for a given frontend task from a curated, opinionated list — numbers, OTP inputs, charts, command menus, virtualization, drag and drop, toasts, state, styling, and more. Only runs when explicitly invoked; it does not trigger on its own. | ||
| disable-model-invocation: true |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | 🏗️ Heavy lift
Make disable-model-invocation compatible with the repository validator.
This key is not included in PORTABLE_FIELDS in scripts/validate_skills.py:14-23, and scripts/validate_skills.py:264-283 rejects unknown top-level fields. As written, this skill can fail the repository’s validation despite the intended explicit-invocation behavior. Either add the field to the validator’s supported schema or remove it and implement the invocation contract through the supported metadata.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In @.agents/skills/pick-ui-library/SKILL.md at line 4, Make the pick-ui-library
skill’s disable-model-invocation metadata compatible with validation by updating
PORTABLE_FIELDS and the unknown-field validation in validate_skills.py to
recognize it, while preserving explicit-invocation behavior; alternatively
remove the unsupported key and express that contract using supported metadata.
| | Command menus (⌘K palettes) | [cmdk](https://cmdk.paco.me) | | ||
| | Toasts / notifications | [Sonner](https://sonner.emilkowal.ski) | | ||
| | One-time password / verification code inputs | [input-otp](https://input-otp.rodz.dev) | | ||
| | Customizable GUIs / control panels | [Leva](https://github.com/pmndrs/leva) — [dialkit](https://joshpuckett.me/dialkit) is an alternative | |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Keep the recommendation single-choice.
Line 15 says to recommend one library, but this row recommends both Leva and dialkit. Remove the alternative or define a deterministic selection rule so the skill does not return a menu of options.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In @.agents/skills/pick-ui-library/SKILL.md at line 28, Update the customizable
GUIs / control panels row in the library recommendation table to name only one
library, removing the dialkit alternative so the skill consistently produces a
single recommendation.
Greptile SummaryAdds seven project-level UI and animation guidance skills, supporting audit and planning documents, and source-lock metadata under Confidence Score: 5/5The PR appears safe to merge, with no concrete changed-code failures identified. The change adds static skill guidance, bundled supporting documents, and lock metadata without introducing an established runtime, security, or data-integrity failure.
 T-Rex LogsWhat T-Rex did
|
| Filename | Overview |
|---|---|
| .agents/skills/improve-animations/SKILL.md | Adds a read-only animation audit and planning workflow with supporting templates and standards. |
| .agents/skills/review-animations/SKILL.md | Adds focused animation-review instructions backed by the bundled standards document. |
| .agents/skills/apple-design/SKILL.md | Adds comprehensive Apple-inspired interaction, motion, accessibility, material, and typography guidance. |
| skills-lock.json | Records source paths and content hashes for all seven imported skills. |
Reviews (1): Last reviewed commit: "chore: add Emil Kowalski skills" | Re-trigger Greptile
1 participant
Summary
Add the complete
emilkowalski/skillscollection as project-level Agent Skills under.agents/skills.Included skills
animation-vocabulary— maps descriptions of motion effects to established animation termsapple-design— guidance for Apple-inspired interaction, motion, and visual designemil-design-eng— Emil Kowalski's UI polish and design-engineering principlesfind-animation-opportunities— identifies appropriate opportunities for motion in a UIimprove-animations— audits animation code and produces prioritized implementation planspick-ui-library— recommends focused frontend libraries by use casereview-animations— reviews animation implementations against motion-design standardsThe installation also includes the supporting audit, planning, and standards documents shipped upstream.
skills-lock.jsonrecords each skill's GitHub source, path, and content hash for reproducibility.Installation
Validation
python3 scripts/validate_skills.py— passed with 0 warningspython3 -m unittest discover -s tests— all 7 tests passedSummary by CodeRabbit