Make Interfaces Feel Better Skill Security Audit
What the author says it does (original text)
>-
No obvious risks found in this check
- Files checked
- 7
- Risks found
- 0
Inside this skill
This Skill is a frontend UI-polish and review guide covering typography, surfaces, animation, icons, and performance. It directs the agent to preserve the project's existing styling system rather than introduce another one solely for a polish fix.
View source
Great interfaces rarely come from a single thing. It's usually a collection of small details that compound into a great experience. Apply these principles when building or reviewing UI code. Before suggesting or writing a fix, identify the project's existing styling system and express the change in that system: Tailwind in a Tailwind project, plain CSS in a CSS project, or the established CSS-in-JS approach. Never introduce a second styling system just to apply a polish fix.| --- | --- || [Typography](typography.md) | Text wrapping, font smoothing, tabular numbers || [Surfaces](surfaces.md) | Border radius, optical alignment, shadows, image outlines, hit areas || [Animations](animations.md) | Interruptible animations, enter/exit transitions, icon animations, scale on press, motion restraint || [Icons](icons.md) | Icon stroke weight, states via `currentColor`, outline vs fill, sizing, RTL flipping || [Performance](performance.md) | Transition specificity, `will-change` usage |Its animation guidance favors interruptible CSS transitions and restrains custom motion in high-frequency interactions. It also instructs the agent to honor reduced-motion preferences and retain static feedback such as color, an icon, or a label.
View source
### 4. Interruptible AnimationsUse CSS transitions for interactive state changes — they can be interrupted mid-animation. Reserve keyframes for staged sequences that run once.- **No custom animation on high-frequency interactions.** Repeated interactions get instant feedback or a minimal `opacity` or `background-color` transition at ≤150ms.- **Motion is never the only feedback channel.** Every animated state change also needs a static cue such as color, icon, or label.- **Brief and precise beats prominent.** If a shorter, smaller animation communicates the same thing, use it.- **Honor reduced-motion preferences.** Preserve the static cue and remove unnecessary movement.The review workflow requires disclosure of the exact inspected scope and any boundaries. Reports must list the commands or interactions actually verified, while checks that were not run must be explicitly marked as unverified.
View source
State the mode, exact scope, framework, styling conventions, and any review boundary. Show what was actually inspected:| Category | Evidence inspected | Result || --- | --- | --- || Typography | Files, components, states, or checks | Findings count, `Clear`, or `Not reviewed` with a reason |Include all five Quick Reference categories. Never imply an uninspected surface was reviewed.1. **Verification**: list the exact commands or interactions run and their observed results. Walk every relevant state and inspect motion at 10% speed when animation is involved. If a check was not run, label it **Not verified** and state what remains.2. **Verdict**: `Block` if any `HIGH` finding remains, `Needs changes` if only `MEDIUM` or `LOW` findings remain, and `Approve` only when no actionable findings remain. List every unverified check beside the verdict.File reference map
References: 6Files and check records7 files
Coverage and gaps
Content covered in each file
These are the source ranges included in this check, not a guarantee that every issue has been resolved.
SKILL.mdFull text includedanimations.mdFull text includedicons.mdFull text includedperformance.mdFull text includedsurfaces.mdFull text includedtypography.mdFull text includedagents/openai.yamlFull text included
This report is for the version above. We read the available code and instructions without running the skill or checking extra packages it installs. This is not a promise of safety: a different version or setup may behave differently.
SKILL.mdInstructionsagents/openai.yamlSupporting fileanimations.mdSupporting fileicons.mdSupporting fileperformance.mdSupporting filesurfaces.mdSupporting filetypography.mdSupporting file
- Lines read
- 1,164
- File checksum (to compare versions)
- 3da575d9e594020b77bc304f87d9289e79cfa3da3f3c5560207e8882442bad01