critique

Featured

Design lens critique covering visual hierarchy, clarity, and anti-slop patterns — produces a findings table, no code edits unless asked. Use when the user wants a design review, says "what's wrong with this UI", or needs a second opinion before a handoff or presentation. Invoke when the user asks for critique on their UI, or mentions 'critique' alongside design / UI / frontend work.

Web & Frontend 324 stars 18 forks Updated 1 weeks ago MIT

Install

View on GitHub

Quality Score: 87/100

Stars 20%
84
Recency 20%
90
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
80
License 10%
100
Description 5%
100

Skill Content

<!-- HARNESS MIRROR — do not edit here. Canonical source: skills/ or commands/. After editing source, copy into cli/assets/<harness>/ and repo-root harness mirrors. --> **Context:** this sub-skill is one lens of the broader `ui-craft` skill. If the `ui-craft` skill is also installed, read its SKILL.md first for Discovery + Anti-Slop + Craft Test, then apply the specific lens below. Critique the UI at `$ARGUMENTS` through a design lens. Load the `ui-craft` skill. ## Step 0: Visual capture (mandatory) Code-only review is insufficient. Every audit/critique starts with the surface as the user sees it. Try the following in order; use the first one available: 1. **Playwright MCP** — if `playwright` MCP server is available, use it. Capture full-page screenshots at three viewports: desktop (1280×800), tablet (768×1024), mobile (375×812). Capture dark mode if the app supports it. 2. **Browser DevTools / Chrome MCP** — second choice; same viewport set. 3. **Other browser automation** (`agent-browser`, `cursor-ide-browser`) — third choice. 4. **Ask the user** — last resort. If no automation is available, request screenshots from the user before proceeding. Be specific: - "Visual review needs screenshots. Please provide: - Full-page at 1280px (desktop) - Full-page at 768px (tablet) - Full-page at 375px (mobile) - Dark mode of each, if supported." Do not begin the review until visuals are captured or provided. State this explicitly to the user when no automati...

Details

Author
educlopez
Repository
educlopez/ui-craft
Created
5 months ago
Last Updated
1 weeks ago
Language
JavaScript
License
MIT

Integrates with

Bundled in these plugins

Similar Skills

Semantically similar based on skill content — not just same category

Web & Frontend Featured

audit

Technical UI audit — a11y, performance, responsive. Produces a prioritized findings table. Invoke when the user asks for audit on their UI, or mentions 'audit' alongside design / UI / frontend work.

324 Updated 1 weeks ago
educlopez
Web & Frontend Listed

design-critique

Pre-emit self-critique for UI/visual/design output (components, CSS, copy, layouts) — anti-slop gates, taste dials, and a design-token contract check, run BEFORE the work is shown, not after. Use whenever producing or editing anything with a visual/UX surface.

5 Updated yesterday
bharat3645
Web & Frontend Listed

design-critic

Review a design and come back with the issues worth fixing, ranked, each with a fix. Use it when a screen, a flow, or a set of screens is ready for a hard look. It runs the right critique method from the UX + AI connector for what you have in front of you: a 30-second first-impression read, the full usability critique, a friction audit on a flow, a consistency check across screens, a structured accessibility pass, or the three objections most likely to block a design review. Outcome: issues ranked by what they cost users, each with a fix. Trigger on 'review this screen', 'critique this design', 'what is wrong with this', 'is this clear', 'why does this feel heavy', 'nobody clicks the button', 'these screens do not match', 'check accessibility', 'is this ready for design review', 'be honest about my design', or any request to review, audit, or pressure-test an interface.

1 Updated 4 days ago
IleanaMarcut