distill
starsforks
How to install distill?
heyhank-app/heyhank/distill
$npx -y skills add heyhank-app/heyhank --skill distillStrip designs to their essence by removing unnecessary complexity. Great design is simple, powerful, and clean.
SKILL.md
| 1 | Remove unnecessary complexity from designs, revealing the essential elements and creating clarity through ruthless simplification. |
| 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), and understanding what's truly essential vs nice-to-have for this product. |
| 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. Simplifying the wrong things destroys usability. |
| 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 complex or cluttered: |
| 25 | |
| 26 | 1. **Identify complexity sources**: |
| 27 | - **Too many elements**: Competing buttons, redundant information, visual clutter |
| 28 | - **Excessive variation**: Too many colors, fonts, sizes, styles without purpose |
| 29 | - **Information overload**: Everything visible at once, no progressive disclosure |
| 30 | - **Visual noise**: Unnecessary borders, shadows, backgrounds, decorations |
| 31 | - **Confusing hierarchy**: Unclear what matters most |
| 32 | - **Feature creep**: Too many options, actions, or paths forward |
| 33 | |
| 34 | 2. **Find the essence**: |
| 35 | - What's the primary user goal? (There should be ONE) |
| 36 | - What's actually necessary vs nice-to-have? |
| 37 | - What can be removed, hidden, or combined? |
| 38 | - What's the 20% that delivers 80% of value? |
| 39 | |
| 40 | If any of these are unclear from the codebase, STOP and call the AskUserQuestionTool to clarify. |
| 41 | |
| 42 | **CRITICAL**: Simplicity is not about removing features - it's about removing obstacles between users and their goals. Every element should justify its existence. |
| 43 | |
| 44 | ## Plan Simplification |
| 45 | |
| 46 | Create a ruthless editing strategy: |
| 47 | |
| 48 | - **Core purpose**: What's the ONE thing this should accomplish? |
| 49 | - **Essential elements**: What's truly necessary to achieve that purpose? |
| 50 | - **Progressive disclosure**: What can be hidden until needed? |
| 51 | - **Consolidation opportunities**: What can be combined or integrated? |
| 52 | |
| 53 | **IMPORTANT**: Simplification is hard. It requires saying no to good ideas to make room for great execution. Be ruthless. |
| 54 | |
| 55 | ## Simplify the Design |
| 56 | |
| 57 | Systematically remove complexity across these dimensions: |
| 58 | |
| 59 | ### Information Architecture |
| 60 | - **Reduce scope**: Remove secondary actions, optional features, redundant information |
| 61 | - **Progressive disclosure**: Hide complexity behind clear entry points (accordions, modals, step-through flows) |
| 62 | - **Combine related actions**: Merge similar buttons, consolidate forms, group related content |
| 63 | - **Clear hierarchy**: ONE primary action, few secondary actions, everything else tertiary or hidden |
| 64 | - **Remove redundancy**: If it's said elsewhere, don't repeat it here |
| 65 | |
| 66 | ### Visual Simplification |
| 67 | - **Reduce color palette**: Use 1-2 colors plus neutrals, not 5-7 colors |
| 68 | - **Limit typography**: One font family, 3-4 sizes maximum, 2-3 weights |
| 69 | - **Remove decorations**: Eliminate borders, shadows, backgrounds that don't serve hierarchy or function |
| 70 | - **Flatten structure**: Reduce nesting, remove unnecessary containers—never nest cards inside cards |
| 71 | - **Remove unnecessary cards**: Cards aren't needed for basic layout; use spacing and alignment instead |
| 72 | - **Consistent spacing**: Use one spacing scale, remove arbitrary gaps |
| 73 | |
| 74 | ### Layout Simplification |
| 75 | - **Linear flow**: Replace complex grids with simple vertical flow where possible |
| 76 | - **Remove sidebars**: Move secondary content inline or hide it |
| 77 | - **Full-width**: Use available space generously instead of complex multi-column layouts |
| 78 | - **Consistent alignment**: Pick left or center, stick with it |
| 79 | - **Generous white space**: Let content breathe, don't pack everything tight |
| 80 | |
| 81 | ### Interaction Simplification |
| 82 | - **Reduce choices**: Fewer buttons, fewer options, clearer path forward (paradox of choice is real) |
| 83 | - **Smart defaults**: Make common choices automatic, only ask when necessary |
| 84 | - **Inline actions**: Replace modal flows with inline editing where possible |
| 85 | - **Remove steps**: Can signup be one step instead of three? Can checkout be simplified? |
| 86 | - **Clear CTAs**: ONE obvious next step, not five competing actions |
| 87 | |
| 88 | ### Content Simplification |
| 89 | - **Shorter copy**: Cut every sentence in half, then do it again |
| 90 | - **Active |
People who liked this also viewed
6 picksType
- lark-openapi-explorer飞书/Lark 原生 OpenAPI 探索：从官方文档库中挖掘未经 CLI 封装的原生 OpenAPI 接口。当用户的需求无法被现有 lark-* skill 或 lark-cli 已注册命令满足，需要查找并调用原生飞书 OpenAPI 时使用。SkillsJul 2026
- lark-skill-maker创建 lark-cli 的自定义 Skill。当用户需要把飞书 API 操作封装成可复用的 Skill（包装原子 API 或编排多步流程）时使用。SkillsJul 2026
- azure-cost-optimizationOfficial agent plugin providing skills and MCP server configurations for Azure scenarios.SkillsJul 2026
- vercel-react-native-skillsVercel's official collection of agent skillsSkillsJul 2026
- 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 2026
- gws-sharedgws CLI: Shared patterns for authentication, global flags, and output formatting.SkillsJul 2026
