skills.rest
viclafouch
viclafouchCOMMUNITY
Explore all skills by this author →
Website𝕏@TrustedSheriffGitHub

web-design-guidelines

Review UI code against web interface guidelines and output file:line findings.

5|1|Updated Mar 27, 2024
Search Tags:#accessibility#ui review#design audit#code compliance#web guidelines
One-click install
npx skills add https://github.com/viclafouch/petit-meme --skill web-design-guidelines-viclafouch
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/viclafouch/petit-meme/tree/main/.claude/skills/web-design-guidelines
Command: npx skills add https://github.com/viclafouch/petit-meme --skill web-design-guidelines-viclafouch

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps ensure that user interface code adheres to established web interface guidelines, improving consistency, accessibility, and overall design quality.

Core Features & Use Cases

  • Automated Code Review: Scans UI code files against a predefined set of web interface best practices.
  • Compliance Checking: Verifies adherence to accessibility standards and design principles.
  • Use Case: When you need to audit a new component's code for accessibility issues or ensure it aligns with your company's design system before merging.

Quick Start

Use the web-design-guidelines skill to review the file 'src/components/Button.jsx'.

Frequently Asked Questions about web-design-guidelines

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I audit UI code for web interface guidelines compliance?▼

To audit UI code for web interface guidelines compliance, the skill fetches the latest rules from a specified URL and analyzes your files against them. It outputs findings in a terse file:line format to pinpoint exact violations.

What is a web design audit for code compliance?▼

A web design audit for code compliance is an automated review that scans UI code files against predefined web interface best practices. It verifies adherence to accessibility standards and design principles to maintain consistency across web projects.

Can I check accessibility standards in a specific component file?▼

Yes, you can check accessibility standards in a specific component file by providing the file path. The skill reviews the provided file against fetched web guidelines to identify compliance issues before merging.

How do I ensure UI code meets company design system rules?▼

To ensure UI code meets company design system rules, specify the URL hosting your web interface guidelines. The skill fetches these rules and analyzes your code patterns to output exact file:line findings for any violations.

What format does the code compliance review output use?▼

The code compliance review output uses a terse file:line format. This concise reporting style pinpoints exact locations of accessibility and design guideline violations within the provided UI code files.

Do I need a specific URL to perform a UI review?▼

Yes, you need a specific URL to perform a UI review because the skill fetches the latest web interface guidelines from that location. This ensures the compliance check runs against your current established rules.

Related Skills

Explore More Design & Creative Skills→
mengxi-reammengxi-ream
9.0k

web-design-guidelines

Fetch Web Interface Guidelines and review UI code for compliance.

Community
Intermediate
kqcoxnkqcoxn
369

web-design-guidelines

Identify UI design and accessibility issues across project assets.

Community
Intermediate
davidrrowleydavidrrowley

frontend-design-review

Review frontend interfaces for design quality and WCAG accessibility compliance.

Community
Intermediate
AdamBienAdamBien
46

web-static

Build static websites with semantic HTML and CSS without dependencies.

Community
Intermediate