shadcn/ui Guidelines

What problem does it solve?

This Skill eliminates inconsistencies and manual effort in UI development by enforcing strict guidelines for shadcn/ui components. It ensures all frontend elements are consistent, accessible, and responsive, allowing AI agents to build high-quality interfaces without custom component creation.

Core Features & Use Cases

• Standardized UI Development: Mandates the exclusive use of shadcn/ui components, ensuring visual and functional consistency across the application.
• Accessibility & Responsiveness: Guides agents to build interfaces that are WCAG 2.1 AA compliant and fully responsive by default, reducing rework.
• Use Case: An AI agent tasked with creating a new user settings panel can leverage this Skill to quickly assemble the UI using pre-built shadcn/ui components like Input, Switch, and Button, guaranteeing a consistent look and feel without needing to write custom CSS or components.

Quick Start

Example: Creating a simple Memory Card component

import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card' import { Button } from '@/components/ui/button'

export function MemoryCard({ title, content }: { title: string; content: string }) { return ( <Card> <CardHeader> <CardTitle>{title}</CardTitle> </CardHeader> <CardContent> <p className="text-sm text-muted-foreground">{content}</p> <Button className="mt-4">Voir plus</Button> </CardContent> </Card> ) }