How this list differs from a frontend ranking
This shortlist follows a design decision from an uncertain brief to a reviewable handoff. It is not another ranking of five implementation prompts. Selection favors distinct artifacts, visible source evidence, proportionate permissions, and a clear point where a human can accept or reject the output.
The order is editorial and source-reviewed rather than a universal runtime benchmark. Agent, model, repository context, design-system maturity, and source revision can all change the result.
1. grill-me — clarify the decision before drawing
grill-me runs a focused interview that keeps pressing on assumptions, tradeoffs, and missing constraints. It earns the first role because a weak brief creates expensive visual churn later.
Its output is sharper reasoning, not user research. The interviewer can still reinforce a mistaken premise when the team supplies incomplete evidence.
2. frontend-design — establish a visual direction
frontend-design is the strongest creative-direction layer in the indexed set. It pushes typography, composition, color, motion, and implementation toward one deliberate concept instead of a generic component collage.
It should receive the clarified product decision, existing brand constraints, and target interface—not permission to redesign everything by default.
3. anti-ui-slop — bind the interface to the product
anti-ui-slop turns repository context and interface references into a product-specific design contract. It is useful when the biggest failure is not visual polish but generic nouns, actions, states, and patterns that do not belong to the product.
The indexed source is native to GitHub Copilot and may use network access for references. Treat other Agent pairings as portable until discovery is tested.
4. web-design-reviewer — inspect responsive execution
web-design-reviewer checks a running interface across multiple viewports, traces visible defects back to source, and verifies bounded fixes. That makes it the most direct role for clipping, hierarchy, spacing, and breakpoint failures.
Browser screenshots do not prove comprehension, assistive-technology support, or real-user success. Keep the review tied to explicit viewports and acceptance checks.
5. pr-screenshots — preserve handoff evidence
pr-screenshots creates matched before-and-after visual evidence for a pull request. It closes the loop by making the changed states easier for a designer, engineer, or reviewer to compare.
Evidence is not approval. Capture the same viewport, data state, and interaction state, and keep sensitive information out of uploaded images.
Install the missing role, not the whole list
For an unclear concept, begin with grill-me and stop. For a clear brief with generic output, add frontend-design. For an existing product with a running interface, the review-and-evidence pair may be more valuable than another generation Skill.
A five-role workflow is a map, not a five-package requirement. Every added Skill should own a distinct artifact, permission boundary, reviewer, and removal condition.
- The brief records the decision and rejected alternatives.
- The direction uses the product's content and constraints.
- Target viewports show no clipping or missing states.
- The handoff compares equivalent before-and-after states.
- A named reviewer can reject the result.