Name: design-guidelines
Author: majiayu000

Imported from majiayu000/claude-skill-registry (skills/data/design-guidelines/SKILL.md). Install upstream with npx skills add majiayu000/claude-skill-registry --skill design-guidelines. Copyright stays with the author (Complete terms in LICENSE.txt).

This skill provides comprehensive design guidance for creating exceptional frontend interfaces that are both visually distinctive and cognitively intuitive.

When to Use

Apply these guidelines when:

Building web components, pages, or applications
Making UI/UX design decisions
Designing interaction patterns and information architecture
Evaluating existing interfaces for improvements
Ensuring production-grade design quality

Structure

This skill consists of two complementary perspectives:

ui-design.md

Visual design principles focused on aesthetics and brand:

Typography and color systems
Motion and micro-interactions
Spatial composition and layouts
Anti-patterns to avoid (generic AI aesthetics)
Creating memorable, distinctive interfaces

ux-design.md

User experience principles based on cognitive psychology and HCI:

Mental models and task flows
Interaction patterns and usability
Cognitive biases and perception
Accessibility and inclusive design
Making interfaces feel natural and effortless

IMPORTANT: Great design requires both perspectives. Visual beauty without usability is frustrating. Usability without aesthetics is forgettable. Use both documents together for complete design guidance.

Design Philosophy

Intentionality over intensity: Bold maximalism and refined minimalism both work - the key is executing with precision
Invisible interface: The best UX feels like no UX at all - users accomplish goals without thinking about the tool
Context-specific creativity: Avoid generic solutions - design for the specific problem, audience, and constraints
Cognitive respect: Every element costs mental effort - be ruthless about reducing unnecessary complexity

Reference the specific documents (ui-design.md or ux-design.md) as needed for detailed guidance.

{ "ocm": "1", "id": "majiayu000-claude-skill-registry-design-guidelines", "kind": "skill", "name": "design-guidelines", "description": "Comprehensive UI/UX design guidelines covering visual design (typography, color, motion) and user experience (cognitive psychology, interaction patterns, mental models). Use when building frontend interfaces or evaluating design decisions.", "publisher": "majiayu000", "version": "1.0.0", "capabilities": { "domains": [ "general" ], "tags": [ "skill-md", "github" ], "languages": [ "en" ] }, "quality_prior": 0.6, "examples": [ "Comprehensive UI/UX design guidelines covering visual design (typography, color, motion) and user experience (cognitive psychology, interaction patterns, mental models). Use when building frontend interfaces or evaluating design decisions." ], "primary": false, "metadata": { "source": { "provider": "github", "repository": "https://github.com/majiayu000/claude-skill-registry", "path": "skills/data/design-guidelines/SKILL.md", "ref": "a16e8e7bdddc9a7406a56f51e520cef7a8646208", "url": "https://github.com/majiayu000/claude-skill-registry/blob/a16e8e7bdddc9a7406a56f51e520cef7a8646208/skills/data/design-guidelines/SKILL.md", "key": "majiayu000/claude-skill-registry/skills/data/design-guidelines/SKILL.md" }, "license": "Complete terms in LICENSE.txt" }, "instructions": "This skill provides comprehensive design guidance for creating exceptional frontend interfaces that are both visually distinctive and cognitively intuitive.\n\n## When to Use\n\nApply these guidelines when:\n- Building web components, pages, or applications\n- Making UI/UX design decisions\n- Designing interaction patterns and information architecture\n- Evaluating existing interfaces for improvements\n- Ensuring production-grade design quality\n\n## Structure\n\nThis skill consists of two complementary perspectives:\n\n### ui-design.md\nVisual design principles focused on aesthetics and brand:\n- Typography a", "cost": { "context_tokens": 462 } }

design-guidelines

About

When to Use

Structure

ui-design.md

ux-design.md

Design Philosophy

Use it

Manifest

Reviews