skills.rest
khapn-2933
khapn-2933COMMUNITY
Explore all skills by this author →
GitHub

tkm:design-ui

Recommend design patterns, color palettes, and typography for web and mobile interfaces.

Updated May 13, 2026
Search Tags:#design system#color palette#ux design#ui design#font pairing#ux guidelines
One-click install
npx skills add https://github.com/khapn-2933/agentic-coding-hands-on --skill tkm-design-ui
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tkm:design-ui
Source: https://github.com/khapn-2933/agentic-coding-hands-on/tree/main/.claude/skills/design-ui
Command: npx skills add https://github.com/khapn-2933/agentic-coding-hands-on --skill tkm-design-ui

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires python, pandas, numpy, sklearn, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill provides expert-level UI/UX design intelligence, offering a comprehensive set of styles, color palettes, font pairings, UX guidelines, and chart types to streamline the design process and ensure high-quality, accessible interfaces.

Core Features & Use Cases

  • Comprehensive Design Resources: Access 50+ styles, 161 color palettes, 57 font pairings, 99 UX guidelines, and 25 chart types across various technology stacks.
  • Design Decision Support: Make informed design choices with guidance on accessibility, performance, style, layout, typography, color, animation, forms, navigation, charts, and more.
  • Use Case: Before starting a new web or mobile app project, use this Skill to generate a comprehensive design system with color palettes, typography, and UI patterns that align with your product type and target audience.

Quick Start

Use the tkm:design-ui skill to generate a design system for a "SaaS dashboard" project.

Frequently Asked Questions about tkm:design-ui

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate a comprehensive design system for a web or mobile app project?▼

To generate a design system, define your product type and target audience so the reasoning algorithms can recommend matching UI patterns, color palettes, and typography. This provides a structured foundation for your interface design.

How do I choose accessible color palettes and font pairings for a SaaS dashboard?▼

Choosing accessible color palettes and font pairings involves applying UX guidelines that ensure readability and compliance. The system evaluates 161 color palettes and 57 font pairings to recommend combinations suitable for your SaaS dashboard interface.

Does this UI design decision support tool require Python and specific data libraries?▼

Yes, this UI design decision support tool requires Python 3.x along with pandas, numpy, and sklearn to run its reasoning algorithms. These dependencies power the design pattern and typography recommendation scripts.

What UX guidelines are available for designing forms, navigation, and charts?▼

There are 99 UX guidelines available for forms, navigation, charts, and layouts. These guidelines help you make informed decisions regarding accessibility, performance, and animation for your web and mobile interfaces.

Can I use this for UX research and product design across different technology stacks?▼

Yes, you can use this for UX research and product design across various technology stacks. It offers 50+ styles and 25 chart types to support interface development and research activities comprehensively.

What is the best way to select chart types and UI patterns for mobile interfaces?▼

The best way to select chart types and UI patterns for mobile interfaces is to use decision support algorithms that evaluate your design context. The system matches your requirements against 25 chart types and multiple UI styles.

Related Skills

Explore More Design & Creative Skills→
venom9833venom9833

ui-ux-pro-max

Generate UI/UX design recommendations from user queries using design guidelines.

Community
Advanced
johnlindquistjohnlindquist
24

design

Manage design tokens and export them to CSS, JSON, and Tailwind config.

Community
Advanced
IcekoleIcekole

ui-ux-pro-max

Generate design systems and UI component guidelines for web and mobile applications.

Community
Advanced
felipesantiago-coderfelipesantiago-coder

ui-ux-pro-max

Generate UI/UX design systems with style, color, typography, and component specs.

Community
Advanced