Skills for Design Engineers
Install
npx skills add ibelick/ui-skillsgh skill install ibelick/ui-skillsgit clone --depth 1 https://github.com/ibelick/ui-skillsSkills in this collection
- Baseline UIibelickValidates 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.
- Component CanvasJulien ThibeautBuild a full-screen, interactive canvas to explore existing UI components and their variants with pan and zoom.
- Create CanvasJulien ThibeautBuild a freeform canvas to explore, compare, and iterate on anything.
- Create Design MdJulien ThibeautCreate or update a DESIGN.md from an existing product repository or public website. Use when asked to document an interface's design language, reconstruct its visual system, extract design tokens and guidance from current evidence, or give coding agents persistent UI context. Do not modify product source or promote accidental implementation patterns into design decisions.
- Fixing AccessibilityibelickAudit 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.
- Fixing MetadataibelickAudit 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.
- Fixing Motion PerformanceibelickAudit 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.
- Improve UIJulien ThibeautAudit an existing product surface against its own design evidence, identify verified UI problems, and write self-contained implementation plans for another agent. Strictly read-only on product source. Use when asked to review, refine, improve, or clean up an interface without replacing its identity; investigate design-system drift; or prepare a design handoff.
- UI Skills RootJulien ThibeautUse before UI-related work to select the smallest useful UI Skills context through the ui-skills CLI.