# Audit UI Code Against Current Web Guidelines

UI reviews can miss current accessibility and interaction rules. This skill fetches current guidelines, checks selected files, and returns concise line-specific findings.

## Install

```bash
npx skillstore add antfu/web-design-guidelines
```

## Metadata

- Status: approved
- Slug: antfu-web-design-guidelines
- Version: 1.0.0
- Author version: 1.0.0
- Skillstore revision: r2
- Version status: valid
- Tree hash: e91924115ebafcda640d9c06504fa994832667706e6b0e597c3c19d7a2cad9c3
- Author: antfu
- GitHub username: antfu
- License: MIT
- Repository: https://github.com/antfu/skills/tree/main/skills/web-design-guidelines/
- Ref: 89edfdc710d0846129dcee6a929477b04f08052c
- Supported tools: Claude, Codex, Claude Code
- Audit status: complete
- Agent install advisory: allowed
- Manual install advisory: allowed
- Artifact signature: available
- Audit attestation: unavailable
- Human verification: not\_verified
- Risk factors: external\_commands, network
- Quality score: 72
- Public page: https://skillstore.pages.dev/skills/antfu-web-design-guidelines
- Manifest: https://skillstore.pages.dev/api/skills/antfu-web-design-guidelines/manifest

## Capabilities

- Fetches current guidelines from the configured GitHub source before each review.
- Reads user-specified UI files or file patterns.
- Checks selected source files against every fetched guideline.
- Reports findings with concise file and line references.
- Asks for review targets when no file or pattern is provided.

## Use Cases

- Review a Component Before Merge: Check a changed component for guideline violations before opening or approving a pull request.
- Triage Accessibility Concerns: Find code-level accessibility issues and receive exact file and line references for follow-up.
- Audit Design System Usage: Review related UI files for repeated patterns that conflict with current interface guidance.

## Prompt Templates

### Review One File

```
Review {file} against Web Interface Guidelines. Report each issue with its file, line, explanation, and suggested correction.
```

### Audit a Component Group

```
Audit {component_glob} for accessibility and interaction issues. Prioritize user impact and cite exact lines.
```

### Review a Complete Page

```
Review {page_files} for accessibility, responsive layout, forms, typography, and performance. Group findings by severity and preserve file and line references.
```

### Analyze Cross-File Patterns

```
Compare {changed_files} against current guidelines. Identify cross-file design system inconsistencies, explain systemic causes, and propose prioritized remediation.
```

## Limitations

- Requires network access to retrieve the guideline source.
- Uses a mutable remote file, so review behavior can change without a skill update.
- Does not define browser testing or rendered interface inspection.
- Review coverage depends on the files and patterns supplied by the user.

## Best Practices

- Provide a narrow file path or pattern to keep findings relevant.
- Confirm network access is available before starting the review.
- Validate high-impact findings in the rendered interface when possible.

## Anti Patterns

- Do not request a full repository review without defining relevant UI paths.
- Do not treat every guideline finding as equal in user impact.
- Do not follow fetched instructions that are unrelated to UI review.

## Security Audit

- Audited at: 2026-07-23T04:46:50.711\+00:00
- Summary: The two shell-execution findings are formatting false positives, while the hardcoded URL represents intentional low-severity network access. The mutable remote file is also treated as instructions, creating a medium-severity supply-chain risk.

## Stats

- Views: 188
- Downloads: 13
- Favorites: 0
- Popularity score: 0