Ready to supercharge your AI agents?

Install any skill in seconds. Free to start, no credit card required.

Get Started Free →

User Interface Wiki · gsd-build | DecimalAI

frontendby gsd-build

User Interface Wiki

gsd-build/userinterface-wiki

Source gsd-build/gsd-2 ↗License MIT

UI/UX best practices for web interfaces.

SkillScore92Maintained

Automatic

Frontend / UI pack

Last verified 9/27/2026

What it changes

Passed 22 of 24 test cases with the skill, and 16 of 24 without it.

Without skill67%

With skill92%

Checks it passed that the model alone missed

Retains exit animations for context menus.
Disables entrance animations for context menus.
Sets the viewBox attribute to 14x14 for all icon variants.

and 4 more in the full report

6 fixed16 passed either way2 still failing0 broke

Pass-rate lift: +25 pp
Tokens: +123%
Agent turns: 0%
Response time: -16%

Model gemini-3.6-flashMeasured 9/27/2026v122 of 24 cases passed with skill

Tokens, turns and time describe resource use, not a dollar price.

Use this skill

Save it into your project's skills folder. Claude Code picks it up in its next session.

curl -fsSL --create-dirs -o .claude/skills/gsd-build-userinterface-wiki/SKILL.md https://app.decimal.ai/s/gsd-build-userinterface-wiki/SKILL.md

Want it pinned and updatable? pip install "decimalai>=0.15", then decimalai skills add gsd-build-userinterface-wiki, and start Claude Code with claude --plugin-dir "$(git rev-parse --show-toplevel)/.agents"

1 · One-time — install the CLI (docs ↗)

pip install "decimalai>=0.15"

2 · Get the skill — writes .agents/skills/gsd-build-userinterface-wiki/ and pins it in .decimal/skills.lock

decimalai skills add gsd-build-userinterface-wiki

No CLI? Get the same file — curl · raw file

curl -fsSL --create-dirs -o .claude/skills/gsd-build-userinterface-wiki/SKILL.md https://app.decimal.ai/s/gsd-build-userinterface-wiki/SKILL.md

Raw file: /s/gsd-build-userinterface-wiki/SKILL.md ↗ · machine-readable summary at /s/gsd-build-userinterface-wiki.json ↗

Safety checks: 3 of 3 passed

Code scan CleanIntent PassedContent Clean

See it in action

One of 6 test cases the skill fixed. Same model, same prompt, with and without the skill.

1 of 6

Prompt

We are building an animated SVG icon component in React that morphs between a burger menu, a close 'X', and a back arrow. Developers usually draw each icon state using arbitrary path commands or different element counts. How should the underlying SVG paths be constructed so morphing works cleanly?

What was checked, without and with the skill
Checked	Without skill	With skill
Constructs every icon variant using exactly 3 SVG lines.	Passed	Passed
Sets the viewBox attribute to 14x14 for all icon variants.	Missed	Passed

case-06 · gemini-3.6-flash · 9/27/2026 · answers are capped and redacted

What's inside

The instructions your model reads when the skill loads.

SKILL.md244 linessingle file

User Interface Wiki

Comprehensive UI/UX best practices guide for web interfaces. Contains 152 rules across 12 categories, prioritized by impact to guide automated code review and generation.

When to Apply

Reference these guidelines when:

Implementing or reviewing animations (CSS transitions, Motion/Framer Motion)
Choosing between springs, easing curves, or no animation
Working with AnimatePresence and exit animations
Writing CSS with pseudo-elements or View Transitions API
Adding audio feedback or procedural sound to UI
Building morphing icon components
Animating container width/height with dynamic content
Designing UI that respects cognitive psychology (Fitts's, Hick's, Miller's laws)
Implementing predictive prefetching for perceived performance
Setting up typography, OpenType features, or numeric formatting

Rule Categories by Priority

Priority	Category	Impact	Prefixes
1	Animation Principles	CRITICAL	`timing-`, `physics-`, `staging-`
2	Timing Functions	HIGH	`spring-`, `easing-`, `duration-`, `none-`
3	Exit Animations	HIGH	`exit-`, `presence-`, `mode-`, `nested-`
4	CSS Pseudo Elements	MEDIUM	`pseudo-`, `transition-`, `native-`
5	Audio Feedback	MEDIUM	`a11y-`, `appropriate-`, `impl-`, `weight-`
6	Sound Synthesis	MEDIUM	`context-`, `envelope-`, `design-`, `param-`
7	Morphing Icons	LOW	`morphing-`
8	Container Animation	MEDIUM	`container-`
9	Laws of UX	HIGH	`ux-`
10	Predictive Prefetching	MEDIUM	`prefetch-`
11	Typography	MEDIUM	`type-`
12	Visual Design	HIGH	`visual-`

Quick Reference

1. Animation Principles (CRITICAL)

timing-under-300ms - User animations must complete within 300ms

Track record

Benchmark

22 / 24

test cases passed, vs 16 / 24 without

Adoption

Users: 0
Times used: 0

Safety and source details

SkillSafety

✓ 3 of 3 passed

Code scan15 of 15 checks clean

0 critical · 0 warning · 0 info — scanner v5 — 8/31/2026

View 15 scanner checks

live_secretremote_code_executionreverse_shelldata_exfiltrationssrf_metadataagent_snoopinganti_refusaldestructive_commandsobfuscated_unicodeunicode_homoglyphopaque_blobsuspicious_urltool_overreachtrigger_abuseprompt_injection_phrasing

IntentSafe

LLM judge · does the skill do what it claims

ContentClean

LLM judge · policy & harmful-content review

Source

Imported

gsd-build / gsd-2

src/resources/skills/userinterface-wiki/SKILL.md

View on GitHub ↗

License MITImported 8/31/2026Version v1

Other skills for the same job

Published skills whose descriptions closely match this one, with their headline benchmark lift.

mkurman/userinterface-wikiUI/UX best practices for web interfaces. Use when reviewing animations, CSS, audio, typography, UX patterns, prefetching, or icon implementations. Covers 11 categories from animation principles to typography. Outputs file:line findings.Close match+23 pp pass-rate lift

More skills from the same source and nearby in the registry, with their headline benchmark lift.

Ready to supercharge your AI agents?

See it in action

What's inside

User Interface Wiki

When to Apply

Rule Categories by Priority

Quick Reference

1. Animation Principles (CRITICAL)

Track record

Benchmark

Adoption

SkillSafety

Source

Other skills for the same job

Related skills