normalize

Name: normalize
Author: heyhank-app

30stars13forks

How to install normalize?

heyhank-app/heyhank/normalize

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

Installs into the current project.

Summary

Normalize design to match your design system and ensure consistency

Files · 1

View on GitHub

SKILL.md

1	Analyze and redesign the feature to perfectly match our design system standards, aesthetics, and established patterns.
2
3	## Plan
4
5	Before making changes, deeply understand the context:
6
7	1. Discover the design system: Search for design system documentation, UI guidelines, component libraries, or style guides (grep for "design system", "ui guide", "style guide", etc.). Study it thoroughly until you understand:
8	- Core design principles and aesthetic direction
9	- Target audience and personas
10	- Component patterns and conventions
11	- Design tokens (colors, typography, spacing)
12
13	CRITICAL: If something isn't clear, ask. Don't guess at design system principles.
14
15	2. Analyze the current feature: Assess what works and what doesn't:
16	- Where does it deviate from design system patterns?
17	- Which inconsistencies are cosmetic vs. functional?
18	- What's the root cause—missing tokens, one-off implementations, or conceptual misalignment?
19
20	3. Create a normalization plan: Define specific changes that will align the feature with the design system:
21	- Which components can be replaced with design system equivalents?
22	- Which styles need to use design tokens instead of hard-coded values?
23	- How can UX patterns match established user flows?
24
25	IMPORTANT: Great design is effective design. Prioritize UX consistency and usability over visual polish alone. Think through the best possible experience for your use case and personas first.
26
27	## Execute
28
29	Systematically address all inconsistencies across these dimensions:
30
31	- Typography: Use design system fonts, sizes, weights, and line heights. Replace hard-coded values with typographic tokens or classes.
32	- Color & Theme: Apply design system color tokens. Remove one-off color choices that break the palette.
33	- Spacing & Layout: Use spacing tokens (margins, padding, gaps). Align with grid systems and layout patterns used elsewhere.
34	- Components: Replace custom implementations with design system components. Ensure props and variants match established patterns.
35	- Motion & Interaction: Match animation timing, easing, and interaction patterns to other features.
36	- Responsive Behavior: Ensure breakpoints and responsive patterns align with design system standards.
37	- Accessibility: Verify contrast ratios, focus states, ARIA labels match design system requirements.
38	- Progressive Disclosure: Match information hierarchy and complexity management to established patterns.
39
40	NEVER:
41	- Create new one-off components when design system equivalents exist
42	- Hard-code values that should use design tokens
43	- Introduce new patterns that diverge from the design system
44	- Compromise accessibility for visual consistency
45
46	This is not an exhaustive list—apply judgment to identify all areas needing normalization.
47
48	## Clean Up
49
50	After normalization, ensure code quality:
51
52	- Consolidate reusable components: If you created new components that should be shared, move them to the design system or shared UI component path.
53	- Remove orphaned code: Delete unused implementations, styles, or files made obsolete by normalization.
54	- Verify quality: Lint, type-check, and test according to repository guidelines. Ensure normalization didn't introduce regressions.
55	- Ensure DRYness: Look for duplication introduced during refactoring and consolidate.
56
57	Remember: You are a brilliant frontend designer with impeccable taste, equally strong in UX and UI. Your attention to detail and eye for end-to-end user experience is world class. Execute with precision and thoroughness.

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

normalize

30stars13forks

View on GitHub

How to install normalize?

heyhank-app/heyhank/normalize

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

Installs into the current project.

Summary

Normalize design to match your design system and ensure consistency

Files · 1

View on GitHub

SKILL.md

1	Analyze and redesign the feature to perfectly match our design system standards, aesthetics, and established patterns.
2
3	## Plan
4
5	Before making changes, deeply understand the context:
6
7	1. Discover the design system: Search for design system documentation, UI guidelines, component libraries, or style guides (grep for "design system", "ui guide", "style guide", etc.). Study it thoroughly until you understand:
8	- Core design principles and aesthetic direction
9	- Target audience and personas
10	- Component patterns and conventions
11	- Design tokens (colors, typography, spacing)
12
13	CRITICAL: If something isn't clear, ask. Don't guess at design system principles.
14
15	2. Analyze the current feature: Assess what works and what doesn't:
16	- Where does it deviate from design system patterns?
17	- Which inconsistencies are cosmetic vs. functional?
18	- What's the root cause—missing tokens, one-off implementations, or conceptual misalignment?
19
20	3. Create a normalization plan: Define specific changes that will align the feature with the design system:
21	- Which components can be replaced with design system equivalents?
22	- Which styles need to use design tokens instead of hard-coded values?
23	- How can UX patterns match established user flows?
24
25	IMPORTANT: Great design is effective design. Prioritize UX consistency and usability over visual polish alone. Think through the best possible experience for your use case and personas first.
26
27	## Execute
28
29	Systematically address all inconsistencies across these dimensions:
30
31	- Typography: Use design system fonts, sizes, weights, and line heights. Replace hard-coded values with typographic tokens or classes.
32	- Color & Theme: Apply design system color tokens. Remove one-off color choices that break the palette.
33	- Spacing & Layout: Use spacing tokens (margins, padding, gaps). Align with grid systems and layout patterns used elsewhere.
34	- Components: Replace custom implementations with design system components. Ensure props and variants match established patterns.
35	- Motion & Interaction: Match animation timing, easing, and interaction patterns to other features.
36	- Responsive Behavior: Ensure breakpoints and responsive patterns align with design system standards.
37	- Accessibility: Verify contrast ratios, focus states, ARIA labels match design system requirements.
38	- Progressive Disclosure: Match information hierarchy and complexity management to established patterns.
39
40	NEVER:
41	- Create new one-off components when design system equivalents exist
42	- Hard-code values that should use design tokens
43	- Introduce new patterns that diverge from the design system
44	- Compromise accessibility for visual consistency
45
46	This is not an exhaustive list—apply judgment to identify all areas needing normalization.
47
48	## Clean Up
49
50	After normalization, ensure code quality:
51
52	- Consolidate reusable components: If you created new components that should be shared, move them to the design system or shared UI component path.
53	- Remove orphaned code: Delete unused implementations, styles, or files made obsolete by normalization.
54	- Verify quality: Lint, type-check, and test according to repository guidelines. Ensure normalization didn't introduce regressions.
55	- Ensure DRYness: Look for duplication introduced during refactoring and consolidate.
56
57	Remember: You are a brilliant frontend designer with impeccable taste, equally strong in UX and UI. Your attention to detail and eye for end-to-end user experience is world class. Execute with precision and thoroughness.

People who liked this also viewed

6 picks

Type