OpikatOpikatCommunity·1 Agent Skills Included

design-expert-skill

Unified UI/UX design, typography calculation, and live-site review

Builds distinctive interfaces, generates design systems, and reviews live websites with source-level fixes. Eliminates generic-looking layouts, guessed typography values, and manual visual inspections across viewports. Searches databases of 161 palettes, 57 font pairings, and 8000+ font metrics to pick colors and type precisely. Applies 99 UX rules, accessibility checks, and framework-specific fixes for Tailwind, React, Vue, and Next.js.
npx skills add Opikat/design-expert-skill --all -g -y

All Skills in This Repository (1)

Pure Emerald Level Indicators

Frequently Asked Questions

FAQPage Schema
How to install design-expert-skill?

Run `npx skills add Opikat/design-expert-skill --all -g -y` in your terminal to install the skill globally. It requires only Python 3 on your PATH, with no extra packages to install.

What does the design-expert skill do?

It handles any UI/UX task: building interfaces, generating design systems, calculating precise typography from real font metrics, auditing accessibility, and reviewing live websites with source-code fixes.

How does it avoid generic-looking designs?

It derives visual direction from your product's real-world context, forces three genuinely different design directions before committing, and bans common default layouts, fonts, and color clichés.

Can I apply my own brand guidelines?

Yes. You create a small profile file with your brand's palette, fonts, and style rules, which loads on top of the base skill without changing its core design process or accessibility standards.

Which frameworks does it support for fixes?

It includes source-level fix patterns for pure CSS, SCSS, Tailwind, CSS Modules, styled-components, Vue scoped styles, and Next.js App Router, plus stack guides for React, Angular, Flutter, and Svelte.

Related Repositories in Design & Creative

View All in Design & Creative