lazyweb-apply-design-best-practices

Files (1)

• SKILL.md

SKILL.md (first lines)

# Lazyweb Apply Design Best Practices

There are hundreds of design skills in the world. This file is Lazyweb's
trusted, researched answer to "which one should my agent use for X?" — built
from a live review sweep of skills.sh, GitHub, design Twitter/X, Reddit, and
Hacker News.

**Researched: 2026-06-11.** Popular frontend, audit, motion, mobile, and
component-library routes plus all pointer URLs were refreshed on 2026-08-23.
Every skill below was verified against its actual repo and instruction file.

Rank from real usage reports first: what someone used the skill for, what it
improved, and where it fell short. Treat skills.sh installs and GitHub stars as
adoption signals, not proof that a skill produces better work. A source-author
description can explain intended use, but cannot substitute for an independent
usage report; label thin evidence honestly.

## How to use this file

1. **Match the user's design task** to one or more topic sections below.
2. **Fetch the #1 pick's instruction file.** Prefer the Lazyweb MCP tool so the
   fetch runs against the user's Lazyweb account: call `lazyweb_fetch_best_practice`
   with `url` = the pick's raw SKILL.md URL (the one in its `fetch` backticks),
   `topic` = the section's design aspect (e.g. `web-animation`), `slug` = the
   pick's name (e.g. `emil-design-eng`), and `skill` = `"apply-design-best-practices"`.
   It returns `{ ok, content }` — read `content` in full. **If the Lazyweb MCP
   isn't available** (the tool isn't in your tool list) or it returns a plain
   `ok:false` failure, fetch the raw `url` directly with WebFetch instead.
   **Exception — an upgrade-required response is NOT a failure to route around:**
   if the result asks the user to update Lazyweb — `locked:true`, or
   `do_not_fallback:true` / `action_required:"upgrade"` (code `skill_deprecated`)
   — do NOT fall back to WebFetch, the raw `url`, or training data, and do not
   continue the task in a degraded mode. Show the user the response's upgrade
   message (`lazyweb_action.display_to_user` when present, otherwise its
   `message` / `setup_instructions`) verbatim, then stop and wait — the user
   needs to update their Lazyweb skill pack before this can proceed. Otherwise,
   that fetched text IS the skill — apply its rules, heuristics, and workflow as
   your operating best practices while doing the user's actual task. **Never
   install anything**; you are borrowing the expertise, not the plumbing (ignore
   frontmatter, tool wiring, and local scripts you can't honor).
3. Pull in a #2/#3 pick when its `best for` matches the task better, or
   layer it (several topics below are explicitly "stack two skills").
4. **Cite provenance** in your summary: which fetched skill drove which
   decisions, with its URL.
5. **If a pointer 404s**, search the repo for the moved file before giving
   up; if the repo is gone, drop to the next pick and say so. Never
   paraphrase a skill you could not actually read.
6. **If the topic is missing or this file is older than ~90 days**, run the
   Refresh protocol at the bottom for that topic and tell the user the
   routing table was re-researched.

When the task is about *screen-level UI evidence* — what real apps' paywalls,
onboarding, sign-up, pricing, or checkout screens look like, or A/B test
data — route to the current Lazyweb surfaces instead (`/lazyweb-growth-report`,
`/lazyweb-search-screens`, or the `lazyweb_search_experiments` MCP tool): verify
connectivity with `lazyweb_health` first, and pass
`"skill": "apply-design-best-practices"` plus `"version"` (from
`cat "$HOME/.lazyweb/VERSION" 2>/dev/null || echo 0.0.0`) in every
`lazyweb_*` call — optional analytics metadata; never drop a real argument
for it. If Lazyweb MCP is missing or auth fails, tell the user: "Lazyweb MCP
is not installed. Run `curl -fsSL https://www.lazyweb.com/install.sh | bash`,
reload this client, then rerun this skill," and continue with the fetched
skills below.

---

## For web animation & motion use these

**tl;dr**
- Animate only `transform` and `opacity`, ease-out for every entrance (never ease-in), keep durations 100-300ms, and always honor `prefers-reduced-motion`.
- Decide IF something should animate by how often it's used — frequent interactions get instant feedback (e.g. `scale(0.97)` press), rare moments can afford choreography.
- Choreograph multi-element sequences (stagger, motion personality) before writing any code; don't tune elements one-by-one.

**Best specific skills**
1. **emilkowalski/skills — emil-design-eng** — fetch `https://raw.githubusercontent.com/emilkowalski/skills/main/skills/emil-design-eng/SKILL.md` — best default for taste-driven micro-interaction polish and animation decisions. Use the more specific siblings below when the task matches exactly. Evidence: 224.2K installs; Emil's 12-skill collection has 874.4K total installs and 31.9K stars. A public build report says it was used for a landing page's motion while Impeccable handled layout. Strength: strong. ← default pick
2. **emilkowalski/skills — animate** — fetch `https://raw.githubusercontent.com/emilkowalski/skills/main/skills/animate/SKILL.md` — best for building one animation from scratch: whether it should animate, purpose, tool, curve, duration, properties, accessibility, then implementation. Evidence: 34.6K installs and first-party task boundaries. Strength: directional.
3. **emilkowalski/skills — review-animations** — fetch `https://raw.githubusercontent.com/emilkowalski/skills/main/skills/review-animations/SKILL.md` — best for a strict review of an existing motion diff; it reports findings and does not edit. Evidence: 115.8K installs and multiple independent directory reviews describing its code-review use. Strength: strong.
4. **emilkowalski/skills — improve-animations** — fetch `https://raw.githubusercontent.com/emilkowalski/skills/main/skills/improve-animations/SKILL.md` — best for surveying a whole codebase and producing prioritized, self-contained motion plans rather than implementing. Evidence: 88.3K installs; explicit audit-versus-implementation boundary in the source. Strength: directional.
5. **emilkowalski/skills — find-animation-opportunities** — fetch `https://raw.githubusercontent.com/emilkowalski/skills/main/skills/find-animation-opportunities/SKILL.md` — best when the question is where motion would help; it proposes exact opportunities and rejects unjustified animation. Evidence: 76.4K installs. Strength: directional.
6. **emilkowalski/skills — animation-vocabulary** — fetch `https://raw.githubusercontent.com/emilkowalski/skills/main/skills/animation-vocabulary/SKILL.md` — best when the user can describe an effect but does not know its name; use the resulting term to brief another motion skill precisely. Evidence: 103.4K installs. Strength: directional.
7. **emilkowalski/skills — apple-design** — fetch `https://raw.githubusercontent.com/emilkowalski/skills/main/skills/apple-design/SKILL.md` — best for Apple-like fluidity, gesture behavior, and interface principles translated from WWDC to the web. Evidence: 96K installs and independent launch discussion; source scope is explicit. Strength: directional.
8. **LottieFiles/motion-design-skill** — fetch `https://raw.githubusercontent.com/LottieFiles/motion-design-skill/main/skills/motion-design/SKILL.md` — best for framework-agnostic choreography, motion personality, and multi-element sequencing before code. Evidence: vendor-maintained, works across CSS/Framer Motion/GSAP/Lottie. Strength: strong.

*Skip:* the circulated "emil-anim" gists (superseded by Emil's official skill); jezweb/claude-skills motion (registry listings look stale — no motion SKILL.md in the current tree).

*Corpus note:* install counts show unusually strong adoption, but detailed
before/after reviews remain scarcer than source summaries. Preserve the task
boundaries above instead of loading the whole collection for every animation.

---

## For general frontend / UI design quality (avoiding "AI slop") use these

**tl;dr**
- Commit to an explicit aesthetic direction (typography, color system, one signature element) BEFORE writing any code — never start from the AI defaults (Inter, purple gradients, card grids, cream+serif+terracotta).
- Work in two passes: generate with creative direction first, then run a rule-based compliance audit (accessibility, keyboard, forms, performance) as a separate quality gate before shipping.
- Match the design system to the product type — a fintech dashboard and a wellness app should not share a palette or type scale.

**Best specific skills**
1. **anthropics/skills — frontend-design** — fetch `https://raw.githubusercontent.com/anthropics/skills/main/skills/frontend-design/SKILL.md` — best creative-direction default for generating a new interface. It names common AI design clusters and forces a committed, brief-specific direction before code. Evidence: 810.3K installs (#3 overall on skills.sh), 171K stars, official source, and repeated independent recommendations. Strength: strong. ← default pick
2. **uizze/uizze — anti-ui-slop** — fetch `https://raw.githubusercontent.com/uizze/uizze/main/skills/anti-ui-slop/SKILL.md` — best when the work must start from product context and real UI evidence, cover required states, then pass a rendered finish gate. Evidence: 453.6K installs; independent catalogue reviewers specifically praised its finish gate, though detailed outcome reports are still thin. Strength: directional.
3. **leonxlnx/taste-skill — design-taste-frontend** — fetch `https://raw.githubusercontent.com/leonxlnx/taste-skill/main/skills/taste-skill/SKILL.md` — best for landing pages, portfolios, and redesigns that need a stronger visual direction selected from the brief. Do not use for dashboards, data tables, or multi-step product UI. Evidence: 393.1K installs and 79.7K stars; firsthand reports describe setting its variance/motion/density dials before generation and pairing it with Impeccable and Emil. Strength: strong.
4. **pbakaus/impeccable — impeccable** — fetch `https://raw.githubusercontent.com/pbakaus/impeccable/main/.agents/skills/impeccable/SKILL.md` — best broad lifecycle router when the task is already a verb such as critique, audit, polish, distill, adapt, harden, clarify, or onboard. Evidence: 245.1K installs and 61.9K stars; a detailed practitioner review reports using it across dashboards, marketing sites, internal tools, and client work. Strength: strong.
5. **nextlevelbuilder/ui-ux-pro-max** — fetch `https://raw.githubusercontent.com/nextlevelbuilder/ui-ux-pro-max-skill/main/.claude/skills/ui-ux-pro-max/SKILL.md` — best for auto-generating a product-type-matched design system (style + palette + type + UX rules) with pre-delivery anti-pattern checks. Evidence: 327.7K installs and 120K stars; organic outcome reports remain thinner than adoption. Strength: directional.
6. **vercel-labs/agent-skills — web-design-guidelines** — fetch `https://raw.githubusercontent.com/vercel-labs/agent-skills/main/skills/web-design-guidelines/SKILL.md` — best for a file-and-line audit of existing UI code, not generation. It fetches Vercel's live guidelines on every run. Evidence: 568.6K installs, Vercel-official, and repeatedly recommended as a post-build quality gate. Strength: strong.

*Skip:* anthropics canvas-design (poster/art canvases, not product UI); obra/superpowers (great engineering-workflow pack, zero design-quality content).

---

## For design audits, critique & final polish use these

**tl;dr**
- Choose the verb before the skill: critique judges UX and hierarchy, audit checks technical quality, polish fixes final details, and redesign is a larger authorization boundary.
- Inspect the rendered interface at desktop and mobile; source-only review cannot prove spacing, clipping, responsive behavior, or visual hierarchy.
- Fix shared causes before isolated symptoms, then stop after a bounded confirmation pass.

**Best specific skills**
1. **pbakaus/impeccable — impeccable** — fetch `https://raw.githubusercontent.com/pbakaus/impeccable/main/.agents/skills/impeccable/SKILL.md` — best default router for choosing between critique, audit, polish, distill, harden, adapt, clarify, and related passes. Its boundaries prevent an audit request from silently becoming a redesign. Evidence: 245.1K installs; the focused `polish`, `critique`, and `audit` entries each have 83K-87K installs, plus detailed real-world usage reports. Strength: strong. ← default pick

From LazywebHQ/lazyweb-skill, MIT.

More from LazywebHQ/lazyweb-skill