Can this skill generate new UI code?

Yes, it features a Creative Mode that avoids 'AI slop' aesthetics, focusing on unique typography, intentional motion, and distinctive spatial compositions.

How does it improve design system compliance?

The skill checks implementations against Figma specs, ensures design tokens are used instead of hardcoded values, and verifies that components are used correctly according to your library.

What is the Frontend Design Review skill?

It is a specialized capability for Claude Code that helps developers review UI implementations against design standards and create high-quality, creative frontend interfaces.

What are the three quality pillars it evaluates?

It evaluates interfaces based on: 1. Frictionless Insight-to-Action (efficiency), 2. Quality Craft (aesthetics and compliance), and 3. Trustworthy Building (transparency and error handling).

Frontend Design Review

Name: Frontend Design Review
Author: JantonioFC

byJantonioFC

•

디자인 도구

Reviews UI implementations for design system compliance and creates distinctive, production-grade frontend interfaces from scratch.

This skill elevates frontend development by bridging the gap between design vision and code implementation. It operates in two specialized modes: performing rigorous design reviews based on the 'Quality Craft' and 'Frictionless' pillars, and generating creative interfaces that avoid generic aesthetics. It ensures accessibility compliance, design token usage, and sophisticated spatial composition, making it an essential tool for developers who need to maintain high design standards during PR reviews or when bootstrapping new, visually unique features.

주요 기능

01Identifies UX red flags such as action hierarchy issues and dead ends.

022 GitHub stars

03Generates distinctive UI designs with sophisticated typography and motion.

04Evaluates UI using the Three Pillars: Frictionless, Quality Craft, and Trustworthy.

05Audits frontend implementations for design system and token compliance.

06Performs accessibility audits against WCAG standards.

사용 사례

01Generating non-generic, high-fidelity UI components for new web projects.

02Automating Pull Request reviews to ensure code matches Figma specifications.

03Conducting systematic UX and accessibility audits on existing interfaces.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add jantoniofc/skillsbank frontend-design-review

For use in Claude.ai and ChatGPT

주요 기능

01Identifies UX red flags such as action hierarchy issues and dead ends.

022 GitHub stars

03Generates distinctive UI designs with sophisticated typography and motion.

04Evaluates UI using the Three Pillars: Frictionless, Quality Craft, and Trustworthy.

05Audits frontend implementations for design system and token compliance.

06Performs accessibility audits against WCAG standards.

사용 사례

01Generating non-generic, high-fidelity UI components for new web projects.

02Automating Pull Request reviews to ensure code matches Figma specifications.

03Conducting systematic UX and accessibility audits on existing interfaces.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add jantoniofc/skillsbank frontend-design-review

For use in Claude.ai and ChatGPT