Skip to the rows

agentsclimarketplace

Design taste frontend

Skill JasonxzWen/harness-hub/skills/design-taste-frontend

Repository-first deterministic migration and atomic Skill source for Claude Code and Codex.

Install

npx -y skills add JasonxzWen/harness-hub --skill design-taste-frontend

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.

What its author says it does

Copied from the file, not written here

Load when a task needs anti-template frontend visual direction, design-read calibration, or pre-flight critique for landing pages, portfolios, marketing pages, or redesigns; do not load for dashboards, data tables, multi-step product UI, routine frontend logic, HTML reports, slide decks, or generic code explanation.

The file declares its own license as MIT. That is the author’s claim about this one file, and it is not the same thing as the license GitHub reports for the repository, which is listed with the other numbers below.

SKILL.md

3.0 KB, 524 tokens by cl100k_base, as published. Nobody here has run it

Design Taste Frontend

Use this skill as a frontend taste layer, not as the whole frontend implementation lane. It helps set a deliberate visual direction for landing pages, portfolios, marketing pages, and redesigns so the result does not look templated.

Do not use it for dashboards, dense data tables, multi-step product UI, routine React/Next logic, HTML reports, decks, or code explanation. Existing product experience review routes to product-ui-review; authorized implementation routes to frontend-design. Other work routes to frontend-patterns, web-artifacts-builder, effective-interact, or frontend-slides.

Core Workflow

Read the brief before choosing aesthetics. Identify page kind, audience, brand assets, references, constraints, and explicit vibe words.
State one design read before code: Reading this as: <page kind> for <audience>, with a <vibe> language, leaning toward <system or aesthetic family>.
If two plausible directions conflict, ask exactly one clarifying question. If the brief is clear enough, proceed.
Set three working dials: DESIGN_VARIANCE, MOTION_INTENSITY, and VISUAL_DENSITY. Let the brief override the default.
Choose a real foundation. If the brief maps to an official design system, use the official package and tokens. If it is an aesthetic rather than a system, say so and build honestly.
Design against AI tells: no AI-purple default, dark mesh hero, three equal feature cards, generic glassmorphism, or Inter/slate sameness unless the source material demands it.
Verify spacing, typography, responsiveness, media strategy, hover/focus states, reduced motion, and layout stability before handoff.

References

Use references/design-read-and-systems.md when selecting the design read, dials, or design-system foundation.
Use references/visual-discipline.md while building or reviewing typography, color, layout, cards, motion, images, and common AI tells.
Use references/redesign-and-preflight.md for existing-site redesigns and the final pre-flight checklist.

Handoff Boundary

When handing off a design or implementation, state:

the design read;
the chosen dials;
the foundation or system used;
what was intentionally preserved or avoided;
any unresolved visual, accessibility, or performance risks.

What ships with it: 3 files

10.4 KB alongside SKILL.md

references/

Keep looking

Skills are one crate of 326,984. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.