What tech stack is required?

This skill is optimized for modern React environments using Tailwind CSS, shadcn/ui, TypeScript, and Lucide icons.

How does this skill avoid the 'generic AI look'?

It uses a mandatory set of Anti-AI-Slop rules that govern typography weight variation, sophisticated color palettes, consistent border-radius scales, and purposeful motion, ensuring the output feels like it was created by a senior designer.

Does it support form validation?

Yes, the form subcommand generates complete forms using React Hook Form and Zod for robust schema-based validation, state management, and clear error messaging.

Is the generated code accessible?

Yes, every component follows an accessibility checklist covering ARIA labels, keyboard navigation, focus states, and WCAG AA color contrast requirements.

Can I use it for large projects?

Absolutely. It includes a specific parallel build strategy that allows multiple AI agents to work on different UI parts simultaneously while maintaining a shared design contract and aesthetic consistency.

Frontend Design

Name: Frontend Design
Author: Ankurjain1121

byAnkurjain1121

0•

设计工具

Generates production-grade, highly polished React components and layouts using shadcn/ui while enforcing strict design standards to avoid generic AI aesthetics.

The Frontend Design skill transforms UX specifications into distinctive, high-quality React interfaces by bridging the gap between raw AI code and professional design systems. Built specifically for Claude Code, it leverages shadcn/ui primitives and enforces strict 'Anti-AI-Slop' rules—rigorous guidelines for typography, color theory, and micro-interactions—to ensure generated code looks handcrafted rather than generic. It supports full-page layouts, complex forms with validation, and parallelized component building for larger features, all while maintaining high accessibility and TypeScript standards.

主要功能

01Subcommand-driven generation for components, full pages, and complex forms

020 GitHub stars

03Parallel build strategy for high-velocity multi-component development

04Strict Anti-AI-Slop rules for typography, color palettes, and motion design

05Automated accessibility (ARIA) and responsive design compliance

06Seamless integration with shadcn/ui primitives and Tailwind CSS

使用场景

01Rapidly prototyping a SaaS dashboard from a Markdown UX specification

02Modernizing legacy UI by refactoring existing components into polished shadcn/ui patterns

03Generating complex, accessible forms with Zod validation and React Hook Form

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add ankurjain1121/dev-workflow-skills frontend-design

For use in Claude.ai and ChatGPT

Download Skill