Web Interface Guidelines Review
Paste the following prompt into your AI chat to install this skill:
Please follow https://skillhub.cn/install/skillhub.md to install @org-02qudk26/cn-web-design-guidelines-zh.
About this skill
Problem
In web front-end work, interface implementation often lacks executable rule checks: component structure, style conventions, interaction details, and accessibility requirements may be scattered across templates, scripts, and style files. Manual review can miss issues, and generic lint tools may not cover project-specific conventions. This skill focuses a review on whether specified files follow the Web interface guidelines, giving developers a locatable issue list.
How It Works
- Before each review, it fetches the latest rules from the guidelines source URL instead of relying on stale local notes.
- It reads the user-provided file or file pattern; if none is specified, it asks what to review.
- It checks the file contents against all fetched guideline rules.
- It reports findings in concise
file:lineform, making it easy to jump to the relevant code.
Boundaries
- It is for reviewing existing web UI code or front-end assets, not for generating design mocks or replacing full usability testing.
- Results depend on the guideline content fetched at review time; if the source is unavailable or rules change, the findings can change.
- Output is primarily issue location, not automatic code rewriting.
Use Cases
- Before merging a PR, review component templates and style files against UI guidelines and get locatable issues.
- When taking over an unfamiliar front-end repo, batch-check interface code with a file pattern against known Web guidelines.
- After fixing visual review feedback, re-check the related HTML/CSS/JS files for guideline compliance.
- Before adding design-system rules to the review flow, verify whether specified page files contain violations.
Best For
- Front-end engineers enforcing component-library conventions need file and line locations before merge.
- Front-end leads doing visual QA need interface-guideline checks as a reusable review step.
- Developers maintaining enterprise UI pages need to confirm new pages follow internal Web conventions.
- Code reviewers need a quick rule-issue list in `file:line` format.
Related Skills
A one-shot coding agent built on Claude Code CLI that runs non-interactively, supports a specified workdir, and can be monitored in the foreground or background.
Preview and confirm file sorting by extension, with recursive cleanup, ignore rules, and transactional rollback.
An engineering assistant for static HTML/CSS/JS pages, design-token extraction, IE8-compatible review, and structured delivery.
An engineering workflow for requirement analysis, scenario modeling, risk planning, quality gates, testing, and knowledge capture, with lightweight, standard, and full modes.