Opinionated, evolving constraints to guide agents when building frontend interfaces.
Install This Skill
npx skills add ibelick/ui-skills# Download SKILL.md and place in your agent's skills folder
curl -o SKILL.md https://github.com/ibelick/ui-skills/raw/main/SKILL.md/skill add ibelick/ui-skillsSkill bundle — 4 sub-skills
upstream is a skill bundleThis catalog entry is a skill bundle that ships 4 individual SKILL.md files. Each one is listed below — click through to read the full markdown on GitHub.
baseline-ui
Validates animation durations, enforces typography scale, checks component accessibility, and prevents layout anti-patterns in Tailwind CSS projects. Use when building UI components, reviewing CSS utilities, styling React views, or enforcing design consistency.
skills/baseline-uifixing-accessibility
Audit and fix HTML accessibility issues including ARIA labels, keyboard navigation, focus management, color contrast, and form errors. Use when adding interactive controls, forms, dialogs, or reviewing WCAG compliance.
skills/fixing-accessibilityfixing-metadata
> Audit and fix HTML metadata including page titles, meta descriptions, canonical URLs, Open Graph tags, Twitter cards, favicons, JSON-LD structured data, and robots directives. Use when adding SEO metadata, fixing social share previews, reviewing Open Graph tags, setting up canonical URLs, or shipping new pages that need correct meta tags.
skills/fixing-metadatafixing-motion-performance
Audit and fix animation performance issues including layout thrashing, compositor properties, scroll-linked motion, and blur effects. Use when animations stutter, transitions jank, or reviewing CSS/JS animation performance.
skills/fixing-motion-performanceRelated Skills
Quick Stats
Source repo · this pathAuthor
ibelick
@ibelick