skills.rest
nathankoerschner
nathankoerschnerCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

my-frontend-design

Automates UI review and building with WCAP 2.1 and Vercel guidelines.

Updated Jan 22, 2024
Search Tags:#code review#accessibility#frontend#tailwind css#wcag#vercel#ui design
One-click install
npx skills add https://github.com/nathankoerschner/dotfiles --skill my-frontend-design
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: my-frontend-design
Source: https://github.com/nathankoerschner/dotfiles/tree/main/agent-skills/_shared-skills/my-frontend-design
Command: npx skills add https://github.com/nathankoerschner/dotfiles --skill my-frontend-design

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill streamlines frontend development by enforcing accessibility standards, design constraints, and Vercel guidelines, ensuring high-quality, user-friendly interfaces.

Core Features & Use Cases

  • Accessibility Review: Audits code against WCAG 2.1 standards, identifying critical, serious, and moderate issues.
  • UI Constraint Enforcement: Applies opinionated rules for styling (Tailwind CSS), animation, typography, and layout.
  • Vercel Guidelines Compliance: Ensures adherence to best practices for web interfaces, including focus states, forms, and performance.
  • Use Case: A developer can use this skill to review a new component for accessibility issues before merging, or to ensure a new feature adheres to the project's established design system and performance benchmarks.

Quick Start

Use the my-frontend-design skill to review the file 'src/components/Button.tsx' for accessibility and design guideline violations.

Frequently Asked Questions about my-frontend-design

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

FAQPage Schema
How do I check my frontend code for WCAG 2.1 accessibility violations?▼

To check frontend code for WCAG 2.1 accessibility violations, use the review mode to audit existing files. It identifies critical, serious, and moderate issues against accessibility standards and Vercel Web Interface Guidelines.

Can I enforce Tailwind CSS UI constraints and typography rules during component development?▼

Yes, you can enforce Tailwind CSS UI constraints during component development. The build mode applies opinionated rulesets for styling, animation, typography, and layout to ensure compliant UIs.

What is the best way to automate frontend design reviews for Vercel guidelines?▼

The best way to automate frontend design reviews for Vercel guidelines is using a rules-based review mode. It analyzes files to enforce best practices for focus states, forms, performance, and web interface compliance.

Does this frontend review tool work on existing React component files?▼

Yes, this frontend review tool works on existing React component files. You can point it at files like 'src/components/Button.tsx' to analyze them for accessibility and design guideline violations before merging.

When do I need to use build mode versus review mode for UI development?▼

Use build mode for new UI development to apply styling and layout rules proactively. Use review mode when analyzing existing files to audit for WCAG 2.1 accessibility issues and design violations.

Related Skills

Explore More Design & Creative Skills→
AbdullahMalik17AbdullahMalik17
9

styling-with-shadcn

Set up shadcn/ui components, forms, and dark mode in Next.js projects.

Community
Intermediate
chiruu12chiruu12
1

canary

Monitor production apps for errors and regressions after deployment.

Community
Advanced
solrac97grsolrac97gr
2

new-component

Generate React components with TypeScript, Tailwind CSS, unit tests, and Storybook stories.

Community
Intermediate
dylantarredylantarre
38

color-contrast

Validate color combinations against WCAG 2.1 contrast requirements and generate accessible pairings.

Community
Basic