quieter

Name: quieter
Author: heyhank-app

30stars13forks

How to install quieter?

heyhank-app/heyhank/quieter

$npx -y skills add heyhank-app/heyhank --skill quieter

Installs into the current project.

Summary

Tone down overly bold or visually aggressive designs. Reduces intensity while maintaining design quality and impact.

Files · 1

View on GitHub

SKILL.md

1	Reduce visual intensity in designs that are too bold, aggressive, or overstimulating, creating a more refined and approachable aesthetic without losing effectiveness.
2
3	## MANDATORY PREPARATION
4
5	### Context Gathering (Do This First)
6
7	You cannot do a great job without having necessary context, such as target audience (critical), desired use-cases (critical), brand personality/tone, and everything else that a great human designer would need as well.
8
9	Attempt to gather these from the current thread or codebase.
10
11	1. If you don't find exact information and have to infer from existing design and functionality, you MUST STOP and STOP and call the AskUserQuestionTool to clarify. whether you got it right.
12	2. Otherwise, if you can't fully infer or your level of confidence is medium or lower, you MUST STOP and call the AskUserQuestionTool to clarify. clarifying questions first to complete your context.
13
14	Do NOT proceed until you have answers. Guessing leads to generic design.
15
16	### Use frontend-design skill
17
18	Use the frontend-design skill for design principles and anti-patterns. Do NOT proceed until it has executed and you know all DO's and DON'Ts.
19
20	---
21
22	## Assess Current State
23
24	Analyze what makes the design feel too intense:
25
26	1. Identify intensity sources:
27	- Color saturation: Overly bright or saturated colors
28	- Contrast extremes: Too much high-contrast juxtaposition
29	- Visual weight: Too many bold, heavy elements competing
30	- Animation excess: Too much motion or overly dramatic effects
31	- Complexity: Too many visual elements, patterns, or decorations
32	- Scale: Everything is large and loud with no hierarchy
33
34	2. Understand the context:
35	- What's the purpose? (Marketing vs tool vs reading experience)
36	- Who's the audience? (Some contexts need energy)
37	- What's working? (Don't throw away good ideas)
38	- What's the core message? (Preserve what matters)
39
40	If any of these are unclear from the codebase, STOP and call the AskUserQuestionTool to clarify.
41
42	CRITICAL: "Quieter" doesn't mean boring or generic. It means refined, sophisticated, and easier on the eyes. Think luxury, not laziness.
43
44	## Plan Refinement
45
46	Create a strategy to reduce intensity while maintaining impact:
47
48	- Color approach: Desaturate or shift to more sophisticated tones?
49	- Hierarchy approach: Which elements should stay bold (very few), which should recede?
50	- Simplification approach: What can be removed entirely?
51	- Sophistication approach: How can we signal quality through restraint?
52
53	IMPORTANT: Great quiet design is harder than great bold design. Subtlety requires precision.
54
55	## Refine the Design
56
57	Systematically reduce intensity across these dimensions:
58
59	### Color Refinement
60	- Reduce saturation: Shift from fully saturated to 70-85% saturation
61	- Soften palette: Replace bright colors with muted, sophisticated tones
62	- Reduce color variety: Use fewer colors more thoughtfully
63	- Neutral dominance: Let neutrals do more work, use color as accent (10% rule)
64	- Gentler contrasts: High contrast only where it matters most
65	- Tinted grays: Use warm or cool tinted grays instead of pure gray—adds sophistication without loudness
66	- Never gray on color: If you have gray text on a colored background, use a darker shade of that color or transparency instead
67
68	### Visual Weight Reduction
69	- Typography: Reduce font weights (900 → 600, 700 → 500), decrease sizes where appropriate
70	- Hierarchy through subtlety: Use weight, size, and space instead of color and boldness
71	- White space: Increase breathing room, reduce density
72	- Borders & lines: Reduce thickness, decrease opacity, or remove entirely
73
74	### Simplification
75	- Remove decorative elements: Gradients, shadows, patterns, textures that don't serve purpose
76	- Simplify shapes: Reduce border radius extremes, simplify custom shapes
77	- Reduce layering: Flatten visual hierarchy where possible
78	- Clean up effects: Reduce or remove blur effects, glows, multiple shadows
79
80	### Motion Reduction
81	- Reduce animation intensity: Shorter distances (10-20px instead of 40px), gentler easing
82	- Remove decorative animations: Keep functional motion, remove flourishes
83	- Subtle micro-interactions: Replace dramatic effects with gentle feedback
84	- Refined easing: Use ease-out-quart for smooth, understated motion—never bounce or elastic
85	- Remove animations entirely if they're not serving a clear purpose
86
87	### Composition Refinement
88	- Reduce scale jumps: Smaller contrast between sizes creates calmer feeling
89	- Align to grid: Bring rogue elements back into systematic alignment
90	- Even out spacing: Replace extreme spacing variatio

People who liked this also viewed

6 picks

Type

lark-openapi-explorer飞书/Lark 原生 OpenAPI 探索：从官方文档库中挖掘未经 CLI 封装的原生 OpenAPI 接口。当用户的需求无法被现有 lark-* skill 或 lark-cli 已注册命令满足，需要查找并调用原生飞书 OpenAPI 时使用。SkillsJul 2026378k16k
lark-skill-maker创建 lark-cli 的自定义 Skill。当用户需要把飞书 API 操作封装成可复用的 Skill（包装原子 API 或编排多步流程）时使用。SkillsJul 2026377k16k
azure-cost-optimizationOfficial agent plugin providing skills and MCP server configurations for Azure scenarios.SkillsJul 2026209k1.3k
vercel-react-native-skillsVercel's official collection of agent skillsSkillsJul 2026172k29k
mcp-builderGuide for creating high-quality MCP (Model Context Protocol) servers that enable LLMs to interact with external services through well-designed tools. Use when building MCP servers to integrate externaSkillsJul 202693k163k
gws-sharedgws CLI: Shared patterns for authentication, global flags, and output formatting.SkillsJul 202653k30k

quieter

30stars13forks

View on GitHub

How to install quieter?

heyhank-app/heyhank/quieter

$npx -y skills add heyhank-app/heyhank --skill quieter

Installs into the current project.

Summary

Tone down overly bold or visually aggressive designs. Reduces intensity while maintaining design quality and impact.

Files · 1

View on GitHub

SKILL.md

1	Reduce visual intensity in designs that are too bold, aggressive, or overstimulating, creating a more refined and approachable aesthetic without losing effectiveness.
2
3	## MANDATORY PREPARATION
4
5	### Context Gathering (Do This First)
6
7	You cannot do a great job without having necessary context, such as target audience (critical), desired use-cases (critical), brand personality/tone, and everything else that a great human designer would need as well.
8
9	Attempt to gather these from the current thread or codebase.
10
11	1. If you don't find exact information and have to infer from existing design and functionality, you MUST STOP and STOP and call the AskUserQuestionTool to clarify. whether you got it right.
12	2. Otherwise, if you can't fully infer or your level of confidence is medium or lower, you MUST STOP and call the AskUserQuestionTool to clarify. clarifying questions first to complete your context.
13
14	Do NOT proceed until you have answers. Guessing leads to generic design.
15
16	### Use frontend-design skill
17
18	Use the frontend-design skill for design principles and anti-patterns. Do NOT proceed until it has executed and you know all DO's and DON'Ts.
19
20	---
21
22	## Assess Current State
23
24	Analyze what makes the design feel too intense:
25
26	1. Identify intensity sources:
27	- Color saturation: Overly bright or saturated colors
28	- Contrast extremes: Too much high-contrast juxtaposition
29	- Visual weight: Too many bold, heavy elements competing
30	- Animation excess: Too much motion or overly dramatic effects
31	- Complexity: Too many visual elements, patterns, or decorations
32	- Scale: Everything is large and loud with no hierarchy
33
34	2. Understand the context:
35	- What's the purpose? (Marketing vs tool vs reading experience)
36	- Who's the audience? (Some contexts need energy)
37	- What's working? (Don't throw away good ideas)
38	- What's the core message? (Preserve what matters)
39
40	If any of these are unclear from the codebase, STOP and call the AskUserQuestionTool to clarify.
41
42	CRITICAL: "Quieter" doesn't mean boring or generic. It means refined, sophisticated, and easier on the eyes. Think luxury, not laziness.
43
44	## Plan Refinement
45
46	Create a strategy to reduce intensity while maintaining impact:
47
48	- Color approach: Desaturate or shift to more sophisticated tones?
49	- Hierarchy approach: Which elements should stay bold (very few), which should recede?
50	- Simplification approach: What can be removed entirely?
51	- Sophistication approach: How can we signal quality through restraint?
52
53	IMPORTANT: Great quiet design is harder than great bold design. Subtlety requires precision.
54
55	## Refine the Design
56
57	Systematically reduce intensity across these dimensions:
58
59	### Color Refinement
60	- Reduce saturation: Shift from fully saturated to 70-85% saturation
61	- Soften palette: Replace bright colors with muted, sophisticated tones
62	- Reduce color variety: Use fewer colors more thoughtfully
63	- Neutral dominance: Let neutrals do more work, use color as accent (10% rule)
64	- Gentler contrasts: High contrast only where it matters most
65	- Tinted grays: Use warm or cool tinted grays instead of pure gray—adds sophistication without loudness
66	- Never gray on color: If you have gray text on a colored background, use a darker shade of that color or transparency instead
67
68	### Visual Weight Reduction
69	- Typography: Reduce font weights (900 → 600, 700 → 500), decrease sizes where appropriate
70	- Hierarchy through subtlety: Use weight, size, and space instead of color and boldness
71	- White space: Increase breathing room, reduce density
72	- Borders & lines: Reduce thickness, decrease opacity, or remove entirely
73
74	### Simplification
75	- Remove decorative elements: Gradients, shadows, patterns, textures that don't serve purpose
76	- Simplify shapes: Reduce border radius extremes, simplify custom shapes
77	- Reduce layering: Flatten visual hierarchy where possible
78	- Clean up effects: Reduce or remove blur effects, glows, multiple shadows
79
80	### Motion Reduction
81	- Reduce animation intensity: Shorter distances (10-20px instead of 40px), gentler easing
82	- Remove decorative animations: Keep functional motion, remove flourishes
83	- Subtle micro-interactions: Replace dramatic effects with gentle feedback
84	- Refined easing: Use ease-out-quart for smooth, understated motion—never bounce or elastic
85	- Remove animations entirely if they're not serving a clear purpose
86
87	### Composition Refinement
88	- Reduce scale jumps: Smaller contrast between sizes creates calmer feeling
89	- Align to grid: Bring rogue elements back into systematic alignment
90	- Even out spacing: Replace extreme spacing variatio

People who liked this also viewed

6 picks

Type