findings: web-design-guidelines — original + improved skill - #54
Open
Zhaiyuqing2003 wants to merge 1 commit into
Open
findings: web-design-guidelines — original + improved skill#54Zhaiyuqing2003 wants to merge 1 commit into
Zhaiyuqing2003 wants to merge 1 commit into
Conversation
![github-code-quality[bot]](https://avatars.githubusercontent.com/u/9919?s=60&v=4){kind=small}
Zhaiyuqing2003
force-pushed
the
findings/web-design-guidelines-run
branch
from
May 26, 2026 14:16
13d016d to
9bde4fd
Compare
Zhaiyuqing2003
changed the title
Contributor
There was a problem hiding this comment.
Pull request overview
Adds the artifacts from an end-to-end “skill-optimizer” chain run for the web-design-guidelines skill, including a runnable eval suite (fixtures + graders + smoke checks) and the proposed “improved skill” command.md that moves the Output Format contract to the top.
Changes:
- Introduces a
skill-evals/web-design-guidelines/suite with 8 probes (workspaces, graders, and smoke fixtures) to measure rule-detection and output-format discipline. - Adds a full docs trail for the run (functionality brief, submissions analysis, test proposals/verdict, bench summary, analysis, improvement proposal, validator verdict).
- Adds
docs/.../improved-skill/command.mdrepresenting the proposed upstreamcommand.mdreordering + rationale paragraph.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| skill-evals/web-design-guidelines/suite.yml | Workbench suite definition for the 8-probe run |
| skill-evals/web-design-guidelines/accessibility-violations/spec.yaml | Functionality spec for accessibility probes |
| skill-evals/web-design-guidelines/accessibility-violations/icon-button-missing-aria-label/spec.yaml | Probe spec for unlabeled icon buttons |
| skill-evals/web-design-guidelines/accessibility-violations/icon-button-missing-aria-label/workspace/IconBar.tsx | Fixture workspace for aria-label violations |
| skill-evals/web-design-guidelines/accessibility-violations/icon-button-missing-aria-label/grader.mjs | Grader for aria-label findings |
| skill-evals/web-design-guidelines/accessibility-violations/icon-button-missing-aria-label/checks/smoke.mjs | Smoke test runner for the aria-label grader |
| skill-evals/web-design-guidelines/accessibility-violations/icon-button-missing-aria-label/smoke/good/findings.txt | Positive smoke fixture (should pass) |
| skill-evals/web-design-guidelines/accessibility-violations/icon-button-missing-aria-label/smoke/bad/findings.txt | Negative smoke fixture (should fail) |
| skill-evals/web-design-guidelines/accessibility-violations/icon-button-missing-aria-label/smoke/empty/findings.txt | Empty smoke fixture (should fail) |
| skill-evals/web-design-guidelines/forms-violations/spec.yaml | Functionality spec for forms probes |
| skill-evals/web-design-guidelines/forms-violations/input-missing-autocomplete-and-wrong-type/spec.yaml | Probe spec for missing autocomplete / wrong type |
| skill-evals/web-design-guidelines/forms-violations/input-missing-autocomplete-and-wrong-type/workspace/CheckoutForm.tsx | Fixture workspace for form attribute violations |
| skill-evals/web-design-guidelines/forms-violations/input-missing-autocomplete-and-wrong-type/grader.mjs | Grader for autocomplete/type findings |
| skill-evals/web-design-guidelines/forms-violations/input-missing-autocomplete-and-wrong-type/checks/smoke.mjs | Smoke test runner for the forms grader |
| skill-evals/web-design-guidelines/forms-violations/input-missing-autocomplete-and-wrong-type/smoke/good/findings.txt | Positive smoke fixture (should pass) |
| skill-evals/web-design-guidelines/forms-violations/input-missing-autocomplete-and-wrong-type/smoke/bad/findings.txt | Negative smoke fixture (should fail) |
| skill-evals/web-design-guidelines/forms-violations/input-missing-autocomplete-and-wrong-type/smoke/empty/findings.txt | Empty smoke fixture (should fail) |
| skill-evals/web-design-guidelines/anti-patterns-deny-list/spec.yaml | Functionality spec for deny-list anti-patterns |
| skill-evals/web-design-guidelines/anti-patterns-deny-list/transition-all-in-css/spec.yaml | Probe spec for transition-all anti-pattern |
| skill-evals/web-design-guidelines/anti-patterns-deny-list/transition-all-in-css/workspace/Button.tsx | Fixture workspace containing transition-all |
| skill-evals/web-design-guidelines/anti-patterns-deny-list/transition-all-in-css/grader.mjs | Grader for transition-all findings |
| skill-evals/web-design-guidelines/anti-patterns-deny-list/transition-all-in-css/checks/smoke.mjs | Smoke test runner for transition-all grader |
| skill-evals/web-design-guidelines/anti-patterns-deny-list/transition-all-in-css/smoke/good/findings.txt | Positive smoke fixture (should pass) |
| skill-evals/web-design-guidelines/anti-patterns-deny-list/transition-all-in-css/smoke/bad/findings.txt | Negative smoke fixture (should fail) |
| skill-evals/web-design-guidelines/anti-patterns-deny-list/transition-all-in-css/smoke/empty/findings.txt | Empty smoke fixture (should fail) |
| skill-evals/web-design-guidelines/output-format-discipline/spec.yaml | Functionality spec for output-format discipline |
| skill-evals/web-design-guidelines/output-format-discipline/multi-file-grouped-output/spec.yaml | Probe spec for “group findings by file” |
| skill-evals/web-design-guidelines/output-format-discipline/multi-file-grouped-output/workspace/Button.tsx | Multi-file grouping fixture: Button |
| skill-evals/web-design-guidelines/output-format-discipline/multi-file-grouped-output/workspace/Modal.tsx | Multi-file grouping fixture: Modal |
| skill-evals/web-design-guidelines/output-format-discipline/multi-file-grouped-output/workspace/UserCard.tsx | Multi-file grouping fixture: clean file |
| skill-evals/web-design-guidelines/output-format-discipline/multi-file-grouped-output/grader.mjs | Structural contiguity grader for grouped output |
| skill-evals/web-design-guidelines/output-format-discipline/multi-file-grouped-output/checks/smoke.mjs | Smoke test runner for grouped-output grader |
| skill-evals/web-design-guidelines/output-format-discipline/multi-file-grouped-output/smoke/good/findings.txt | Positive smoke fixture (should pass) |
| skill-evals/web-design-guidelines/output-format-discipline/multi-file-grouped-output/smoke/bad/findings.txt | Negative smoke fixture (should fail) |
| skill-evals/web-design-guidelines/output-format-discipline/multi-file-grouped-output/smoke/empty/findings.txt | Empty smoke fixture (should fail) |
| skill-evals/web-design-guidelines/clean-file-pass/spec.yaml | Functionality spec for clean-file behavior |
| skill-evals/web-design-guidelines/clean-file-pass/clean-component-passes/spec.yaml | Probe spec for “no fabrication / ✓ pass” |
| skill-evals/web-design-guidelines/clean-file-pass/clean-component-passes/workspace/UserCard.tsx | Clean fixture workspace |
| skill-evals/web-design-guidelines/clean-file-pass/clean-component-passes/grader.mjs | Inverse-logic grader to detect fabricated findings |
| skill-evals/web-design-guidelines/clean-file-pass/clean-component-passes/checks/smoke.mjs | Smoke test runner for clean-file grader |
| skill-evals/web-design-guidelines/clean-file-pass/clean-component-passes/smoke/good/findings.txt | Positive smoke fixture (should pass) |
| skill-evals/web-design-guidelines/clean-file-pass/clean-component-passes/smoke/bad/findings.txt | Negative smoke fixture (should fail) |
| skill-evals/web-design-guidelines/clean-file-pass/clean-component-passes/smoke/empty/findings.txt | Empty smoke fixture (should pass) |
| skill-evals/web-design-guidelines/performance-and-images/spec.yaml | Functionality spec for performance/images |
| skill-evals/web-design-guidelines/performance-and-images/img-missing-dimensions/spec.yaml | Probe spec for <img> missing width/height |
| skill-evals/web-design-guidelines/performance-and-images/img-missing-dimensions/workspace/HeroBanner.tsx | Fixture workspace for missing image dimensions |
| skill-evals/web-design-guidelines/performance-and-images/img-missing-dimensions/grader.mjs | Grader for missing-dimensions findings |
| skill-evals/web-design-guidelines/performance-and-images/img-missing-dimensions/checks/smoke.mjs | Smoke test runner for image-dimensions grader |
| skill-evals/web-design-guidelines/performance-and-images/img-missing-dimensions/smoke/good/findings.txt | Positive smoke fixture (should pass) |
| skill-evals/web-design-guidelines/performance-and-images/img-missing-dimensions/smoke/bad/findings.txt | Negative smoke fixture (should fail) |
| skill-evals/web-design-guidelines/performance-and-images/img-missing-dimensions/smoke/empty/findings.txt | Empty smoke fixture (should fail) |
| skill-evals/web-design-guidelines/typography-and-copy/spec.yaml | Functionality spec for typography/copy |
| skill-evals/web-design-guidelines/typography-and-copy/straight-quotes-and-ellipsis/spec.yaml | Probe spec for straight quotes + ... vs … |
| skill-evals/web-design-guidelines/typography-and-copy/straight-quotes-and-ellipsis/workspace/Hero.tsx | Fixture workspace for typography violations |
| skill-evals/web-design-guidelines/typography-and-copy/straight-quotes-and-ellipsis/grader.mjs | Grader for typography findings |
| skill-evals/web-design-guidelines/typography-and-copy/straight-quotes-and-ellipsis/checks/smoke.mjs | Smoke test runner for typography grader |
| skill-evals/web-design-guidelines/typography-and-copy/straight-quotes-and-ellipsis/smoke/good/findings.txt | Positive smoke fixture (should pass) |
| skill-evals/web-design-guidelines/typography-and-copy/straight-quotes-and-ellipsis/smoke/bad/findings.txt | Negative smoke fixture (should fail) |
| skill-evals/web-design-guidelines/typography-and-copy/straight-quotes-and-ellipsis/smoke/empty/findings.txt | Empty smoke fixture (should fail) |
| skill-evals/web-design-guidelines/react-specific-rules/spec.yaml | Functionality spec for React/Next-specific rules |
| skill-evals/web-design-guidelines/react-specific-rules/controlled-input-without-onchange/spec.yaml | Probe spec for value-without-onChange |
| skill-evals/web-design-guidelines/react-specific-rules/controlled-input-without-onchange/workspace/EditProfileForm.tsx | Fixture workspace for controlled-input violation |
| skill-evals/web-design-guidelines/react-specific-rules/controlled-input-without-onchange/grader.mjs | Grader for controlled-input findings |
| skill-evals/web-design-guidelines/react-specific-rules/controlled-input-without-onchange/checks/smoke.mjs | Smoke test runner for controlled-input grader |
| skill-evals/web-design-guidelines/react-specific-rules/controlled-input-without-onchange/smoke/good/findings.txt | Positive smoke fixture (should pass) |
| skill-evals/web-design-guidelines/react-specific-rules/controlled-input-without-onchange/smoke/bad/findings.txt | Negative smoke fixture (should fail) |
| skill-evals/web-design-guidelines/react-specific-rules/controlled-input-without-onchange/smoke/empty/findings.txt | Empty smoke fixture (should fail) |
| docs/skill-optimizer/web-design-guidelines/01-functionality.md | Functionality briefing for the upstream skill |
| docs/skill-optimizer/web-design-guidelines/02-submissions.md | Upstream repo/submission analysis |
| docs/skill-optimizer/web-design-guidelines/03-test-proposals.md | Proposed functionality/probe plan |
| docs/skill-optimizer/web-design-guidelines/05-tests-verdict.md | Validator verdict for the probe designs |
| docs/skill-optimizer/web-design-guidelines/06-bench-summary.md | Bench run summary + results |
| docs/skill-optimizer/web-design-guidelines/07-analysis.md | Root-cause analysis of failures |
| docs/skill-optimizer/web-design-guidelines/08-improvement-proposal.md | Proposed skill improvement plan |
| docs/skill-optimizer/web-design-guidelines/09-validator-verdict.md | Validator verdict on the proposed improvement |
| docs/skill-optimizer/web-design-guidelines/improved-skill/command.md | Materialized “improved skill” command.md |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| ### Typography | ||
|
|
||
| - `…` not `...` | ||
| - Curly quotes `"` `"` not straight `"` |
Comment on lines
+39
to
+45
| and before the `## Rules` heading — and add a single sentence | ||
| explaining WHY this shape (not the default UI-review prose shape) | ||
| is required. The rule content is unchanged. The output-format | ||
| example is unchanged (one canonical example, kept verbatim). No | ||
| frontmatter changes. No MUST/NEVER emphasis added. No new | ||
| sibling files. Net line delta: roughly 0 (one section relocated, | ||
| one sentence added, the trailing copy of the section removed). |
For teammate review before a potential upstream PR to vercel-labs/web-interface-guidelines. See PR comment for finding and rationale. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Zhaiyuqing2003
changed the title
Zhaiyuqing2003
force-pushed
the
findings/web-design-guidelines-run
branch
from
May 26, 2026 14:19
9bde4fd to
6c810f7
Compare
Author
FindingRunning …instead of the terse Root causeThe Rationale for the changeMove the Placement is the mechanism: when an instruction must override a strong default, it has to be the first thing the agent loads and reasons over, not the last. Net delta vs original: +7 lines (one new paragraph). Example block preserved verbatim. No frontmatter changes. No Diff: @@ -9,6 +9,37 @@
Read files, check against rules below. Output concise but comprehensive—sacrifice grammar for brevity. High signal-to-noise.
+## Output Format
+
+Findings must be emitted in this shape, not as a prose audit. The
+default "design review report" shape (Setext headings, numbered
+bullets, line-range parentheticals) is wrong here: `file:line`
+citations are editor-clickable in VS Code / Cursor / Zed, terse
+lines scale when reviewing many files, and one finding per line
+lets downstream tooling parse output without an LLM in the loop.
+
+Group by file. Use `file:line` format (VS Code clickable). Terse findings.
+
+```text
+## src/Button.tsx
+
+src/Button.tsx:42 - icon button missing aria-label
+src/Button.tsx:18 - input lacks label
+...
+```
+
+State issue + location. Skip explanation unless fix non-obvious. No preamble.
+
## Rules
@@ -154,27 +185,3 @@
- `autoFocus` without clear justification
-
-## Output Format
-... (existing section removed from tail) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Two files for teammate review: the original skill content from
vercel-labs/web-interface-guidelines/command.mdand the proposed-improved version. See comment below for the finding and rationale.