frontend

Scaffold cohesive React and Tailwind design systems with bold typography and color accents.

1|Updated Nov 21, 2025

Search Tags:#design #frontend #react #components #UI #Tailwind

Ready to run

npx skills add https://github.com/sudo-vaibhav/ondc-vaatun --skill frontend-sudo-vaibhav

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend
Source: https://github.com/sudo-vaibhav/ondc-vaatun/tree/main/.claude/skills/frontend
Command: npx skills add https://github.com/sudo-vaibhav/ondc-vaatun --skill frontend-sudo-vaibhav

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps UI teams avoid generic AI-generated designs and achieve a distinctive, cohesive frontend aesthetic quickly, reducing design debt and iteration time.

Core Features & Use Cases

Weight-Contrast Guidance: enforce bold typographic hierarchy with extreme weights (e.g., 100 vs 900) to improve readability.
Color Strategy: emphasize a dominant color with sharp accents; avoid overused palettes.
Tailwind Utilization: provide practical utility-class examples for typography, layout, and components in React + Tailwind projects.
Use Case: When building a new product page in React + Tailwind, use this Skill to scaffold a cohesive design system with reusable components like Card, Button, and Layout patterns.

Quick Start

Create a reusable ProductCard component using Tailwind CSS with bold typography and strong color accents.