ibelick/ui-skills
4 skills51.4k installs8.2k starsGitHub
Install
npx skills add https://github.com/ibelick/ui-skillsSkills in this repo
1Fixing Motion PerformanceFixing Motion Performance is a checker-style UI skill for solo builders whose SaaS or extension feels sluggish during transitions, scroll reveals, or hover states. It encodes performance rules as prioritized categories—never patterns, mechanism choice, measurement, and related areas—with explicit guidance to stay on your current animation stack rather than rewriting to a new library unless you ask. You can invoke it globally for the session or point it at a file to get line-level violations, a one-sentence rationale, and a code-level fix. The skill connects animation choices to the rendering pipeline: favor compositor-friendly transform and opacity, avoid layout-thrashing measurement loops, and treat scroll-linked and filter-heavy effects as high-risk. On Prism’s journey it primarily lives in Ship performance work when users report jank, but it equally applies in Build frontend when you add motion, and in Ship review before release. Intermediate complexity assumes you can read CSS and component animation code. Deliverables are either constrained implementation behavior or an audit report, not a redesigned brand motion system.15.9kinstalls2Baseline UiBaseline UI is an opinionated agent skill that stops sloppy, inconsistent interfaces from shipping in Tailwind CSS projects. Solo builders invoke it while creating or reviewing React views so animation timing, type scale, spacing, and accessibility primitives stay aligned with a shared baseline instead of one-off AI guesses. The skill supports applying constraints across the whole conversation or auditing a single file with explicit violations, short explanations, and code-level fixes. It mandates Tailwind defaults unless custom tokens already exist, `motion/react` for JS motion, `tw-animate-css` for micro-animations, and `cn` for class merging. Keyboard and focus surfaces must use accessible primitives from the project’s chosen system, with a bias toward Base UI for new work. Use it when styling components, reviewing CSS utilities, or enforcing design consistency—not when you need Lighthouse security audits or backend API design.12.4kinstalls3Fixing Accessibilityfixing-accessibility is an ibelick/ui-skills agent skill for solo builders who need WCAG-minded guardrails while shipping interactive web UI. Invoke it conversationally to keep every UI change in the thread aligned with accessibility rules, or point it at a specific file to receive violations tied to exact snippets, a one-line rationale, and code-level fixes—without rewriting entire views. The SKILL.md organizes work into nine priority tiers: critical coverage for accessible names, keyboard access, and focus or dialog behavior; high impact for semantics and forms or errors; then announcements, contrast, motion, and agent tool boundaries. Use it when adding buttons, links, inputs, menus, dialogs, validation, icon-only controls, or custom keyboard interactions. It fits indie SaaS and marketing sites where one person both builds and audits. Pair it after frontend implementation and before launch so regressions do not reach users who rely on assistive tech or keyboard-only navigation.12.1kinstalls4Fixing Metadatafixing-metadata is an agent skill that walks solo builders through auditing and correcting HTML head metadata on real pages. It targets the gaps that break SEO and social sharing: duplicate or missing titles, descriptions that disagree with canonical URLs, broken Open Graph and Twitter card fields, and half-implemented JSON-LD or robots directives. The workflow starts by listing affected routes, applies fixes in priority order (critical duplication and indexing issues first), then verifies that social previews render on a deployed URL rather than localhost. It fits Next.js, Astro, or any stack with shared layout metadata components. Install it when you are shipping new landing pages, refactoring routing that changes canonicals, or cleaning up a site where every template sets meta tags differently.11.1kinstalls