skills.rest
sumik5
sumik5COMMUNITY
Explore all skills by this author →
𝕏@shivasek5GitHub

design-guidelines

Codify frontend UI/UX design principles into actionable guidelines for teams.

1|Updated Jan 7, 2026
Search Tags:#typography#accessibility#ui-design#ux-design#aesthetics#frontend-design#color-theory
One-click install
npx skills add https://github.com/sumik5/sumik-claude-plugin --skill design-guidelines-sumik5
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-guidelines
Source: https://github.com/sumik5/sumik-claude-plugin/tree/main/skills/design-guidelines
Command: npx skills add https://github.com/sumik5/sumik-claude-plugin --skill design-guidelines-sumik5

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Guides teams to create production-grade frontend interfaces by codifying visual and experiential design principles, reducing guesswork and ensuring consistency across products.

Core Features & Use Cases

  • Visual design principles: typography, color systems, motion, layout, and accessibility considerations.
  • UX principles: cognitive psychology, task flows, usability, responsive behavior, and error prevention.
  • Implementation guidance: design tokens, anti-patterns, and pragmatic templates for real-world interfaces.
  • Use cases: evaluate and shape new interfaces, refine existing ones, and align teams around a cohesive design philosophy.

Quick Start

Describe your UI/UX design challenge and ask for a tailored frontend design guidelines document that covers typography, color, motion, and accessibility.

Frequently Asked Questions about design-guidelines

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

FAQPage Schema
How do I create UI UX design guidelines for a web application?▼

To create UI UX design guidelines, codify typography, color systems, motion, layout, and accessibility principles into actionable rules. This approach structures visual and experiential standards into a dual-document format covering both interaction patterns and cognitive usability.

What design tokens should I use for frontend accessibility and color theory?▼

Design tokens for frontend accessibility should codify color theory and typography into reusable variables. This ensures clear structure and guardrails for web components, reducing guesswork while maintaining visual consistency and accessibility compliance across product interfaces.

How do I align my team around a cohesive frontend design philosophy?▼

Align teams around a cohesive frontend design philosophy by establishing shared UX and UI guidelines. Codifying visual design principles, task flows, and anti-patterns into pragmatic templates reduces guesswork and ensures production-grade consistency across all product interfaces.

Can I evaluate existing web interfaces using codified design principles?▼

Yes, you can evaluate existing web interfaces by checking them against codified design principles. Apply established UI and UX guidelines covering cognitive psychology, responsive behavior, and error prevention to refine and shape your current application layouts.

What is the best way to document interaction patterns and motion for web components?▼

The best way to document interaction patterns and motion is using a dual-document approach separating UI and UX principles. This method captures layout, motion, and interaction guidelines alongside usability and cognitive psychology rules for clear implementation.

How do I prevent usability anti-patterns in responsive web design?▼

Prevent usability anti-patterns in responsive web design by codifying UX principles like error prevention and task flows. Establishing clear design guardrails and pragmatic templates helps teams avoid common pitfalls and ensure consistent responsive behavior across applications.

Related Skills

Explore More Design & Creative Skills→
RishabhupadhyaRishabhupadhya

ui-ux-pro-max

Generate a UI/UX design system with MASTER.md and page overrides.

Community
Advanced
rjroyrjroy
6

design

Document design decisions, interfaces, constraints, and edge cases for software architecture.

Community
Basic
marcustamarcusta

frontend-design

Enforce TapScore design constraints on frontend UI components.

Community
Advanced
GeargrindadminGeargrindadmin

eval-ui-ux

Evaluate UI/UX for design system adherence, visual consistency, and accessibility.

Community
Advanced