distill

Overview

What is distill?

The distill skill is designed to help UI designers and product teams strip away unnecessary complexity from user interfaces. By focusing on the essential elements, distill enables you to create clean, powerful, and user-focused designs. This skill is ideal for anyone looking to simplify, declutter, or reduce noise in their digital products.

Who should use distill?

Distill is a great fit for designers, product managers, and developers who want to:

• Simplify cluttered interfaces
• Remove redundant or distracting elements
• Clarify visual hierarchy and user focus
• Improve usability by reducing cognitive load

If your users or stakeholders are asking for a cleaner, more focused UI, distill provides a practical workflow to achieve those goals.

Problems solved by distill

• Overly complex layouts with too many elements
• Visual noise from excessive styles or decorations
• Information overload and unclear priorities
• Feature creep and confusing navigation

How to Use

Installation Steps

1. Install the distill skill using the following command:

   npx skills add https://github.com/pbakaus/impeccable --skill distill
   

2. Start by reviewing the SKILL.md file in the skill directory. This file contains the core workflow and guidance for using distill effectively.

3. For additional context, check for related files such as README.md, AGENTS.md, metadata.json, or any folders like rules/, resources/, or references/ if available in your setup.

Applying the distill workflow

• Mandatory Preparation: Before simplifying, invoke the $frontend-design skill to gather design context and principles. If no design context exists, run $teach-impeccable first.
• Assess Current State: Identify sources of complexity, such as too many elements, excessive variation, or unclear hierarchy. Clarify the primary user goal and determine what is essential.
• Plan Simplification: Decide what can be removed, hidden, or combined. Focus on the 20% of elements that deliver 80% of the value.
• Simplify the Design: Remove unnecessary components, reduce visual noise, and ensure the interface communicates its purpose clearly.

Recommended files to review

• SKILL.md (start here for the workflow and best practices)

FAQ

When should I use the distill skill?

Use distill whenever you need to simplify a UI, declutter a design, or focus on core user goals. It's especially useful during design reviews or when users report confusion or overwhelm.

What types of projects benefit most from distill?

Distill is most effective for web and app interfaces that have grown complex over time, or when launching new features that risk adding unnecessary clutter.

Does distill generate code or just provide design guidance?

Distill focuses on design principles and actionable steps for simplification. It does not generate frontend code, but helps you make informed decisions about what to keep or remove.

Where can I find more details or support?

Open the Files tab in your skills directory to explore the full file tree, including any nested references or helper scripts that support the distill workflow.