ihlamuryCommunity·87 Agent Skills Included

design-skills

Pixel-accurate UI design constraints from 87 top products

Applies real design system rules from Linear, Stripe, Figma, Apple, and 80+ other products to generated interfaces. Provides exact color tokens, typography scales, spacing grids, and component specs so outputs match professional standards. Eliminates inconsistent styling and guesswork when building dashboards, landing pages, and app interfaces.

73|9

↗

npx skills add ihlamury/design-skills --all -g -y

All Skills in This Repository (87)

Pure Emerald Level Indicators

📦 In Repo

ihlamury

apple-ui-skills

Enforce Apple's UI design constraints for light-mode interfaces with Inter font and 4px grid.

readwise-ui-skills

Apply Readwise's UI design system constraints to light-mode web interfaces.

pitch-ui-skills

Enforce Pitch's light mode, Inter font, and 4px grid design constraints.

webflow-ui-skills

Enforce Webflow-style design constraints for dark mode, Inter font, and 4px grid.

shortcut-ui-skills

Enforce Shortcut UI design constraints for light mode, Inter font, and 4px grid.

mercury-ui-skills

Enforce Mercury's light-mode UI design system with Inter font and 4px grid.

discord-ui-skills

Enforce Discord's light-mode UI design system with Inter font and 4px grid.

craft-ui-skills

Enforce Craft's UI design constraints for light mode interfaces using Inter font and 4px grid.

vercel-ui-skills

Enforces Vercel's UI design system constraints for light-mode interfaces.

airbnb-ui-skills

Enforce Airbnb UI constraints for light-mode interfaces with Inter font and 4px grid.

pinterest-ui-skills

Enforce Pinterest UI design constraints for light-mode interfaces.

codeium-ui-skills

Enforce Codeium UI design constraints for dark mode, Inter font, and 4px spacing grid.

Community

Intermediate

Frequently Asked Questions

FAQPage Schema

How to install design-skills?▼

Run `npx skills add ihlamury/design-skills --all -g -y` in your terminal to install all 87 design skills globally.

What do these design skills include?▼

Each skill contains extracted colors, typography, spacing scales, border rules, layout patterns, and component specs from a real product's design system.

How do I use a skill like Linear or Stripe?▼

Reference the skill name in your prompt, for example: Build a dashboard using the Linear UI skills. Your agent then follows that product's exact design constraints.

Does design-skills work with Cursor and Claude Code?▼

Yes. All skills follow the universal SKILL.md standard and work in Claude Code, Cursor, Copilot, and other compatible coding environments.

Can non-designers use these UI skills?▼

Yes. Just name the product style you want in plain English, and the constraints are applied automatically to the generated interface.