skills.rest
skillvee
skillveeCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Design front-end components and pages with shadcn/ui and a blue-gray palette.

Updated Aug 23, 2026
Search Tags:#accessibility#a11y#frontend#react#design-system#shadcn-ui#ui-components
One-click install
npx skills add https://github.com/skillvee/simulator --skill frontend-design-skillvee
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/skillvee/simulator/tree/main/.claude/skills/frontend-design
Command: npx skills add https://github.com/skillvee/simulator --skill frontend-design-skillvee

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Designers and developers often struggle to translate requirements into consistent, production-ready frontend code that respects a design system.

Core Features & Use Cases

  • Enforces a cohesive design system using shadcn/ui components and blue palette.
  • Generates reusable, accessible components, pages, or full interfaces with clean architecture.
  • Use Case: Rapidly prototype a dashboard page that adheres to typography, spacing, and motion guidelines.

Quick Start

Provide a frontend requirement (component, page, or application) and I will deliver production-grade React code following the design system.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I build accessible React components that adhere to a strict design system?▼

To build accessible React components with a strict design system, you provide frontend requirements and receive production-grade code using shadcn/ui. This enforces cohesive typography, spacing, rounded corners, and blue-gray palette guidelines for responsive interfaces.

What's the best way to prototype a dashboard page using shadcn/ui?▼

The best way to prototype a dashboard page using shadcn/ui is to define your layout and interactive flow requirements. The system generates clean, reusable React code adhering to design system guidelines, including smooth transitions and accessibility standards.

Does this frontend design approach enforce specific color palettes and component styles?▼

Yes, this frontend design approach enforces a strict blue-gray palette and shadcn/ui component library. It ensures generated pages and applications maintain consistent rounded corners, motion guidelines, and responsive layouts across the entire interface.

Can I generate full application interfaces or just individual UI components?▼

You can generate full application interfaces, complete pages, and individual UI components. The system scales from single reusable elements to full interactive frontend architectures while maintaining production-grade quality and design system adherence.

Why does my frontend UI lack consistency across different pages and components?▼

Frontend UI lacks consistency when not adhering to a strict design system. By enforcing shadcn/ui components, a blue-gray palette, and standardized spacing or motion guidelines, the generated React code ensures cohesive, production-ready interfaces.

Do I need to manually configure accessibility features for generated React pages?▼

No, manual accessibility configuration is unnecessary. The system automatically defines interactive UI flows for accessibility and responsiveness, ensuring generated React components meet production-grade standards without manual a11y intervention.

Related Skills

Explore More Design & Creative Skills→
eniosales08-AIeniosales08-AI

frontend-design

Generate production-grade frontend UI code with cohesive aesthetic guidelines.

Community
Advanced
whawkinsivwhawkinsiv
232

design-review

Audit existing user interfaces for visual design problems and prioritize fixes.

Community
Intermediate
trungdo9trungdo9
3

ui-styling

Create React-based user interfaces with shadcn/ui components and Tailwind CSS.

Community
Advanced
danzam98danzam98
1

stripe-level-ui

Create polished UI components in Next.js, React, and Tailwind projects.

Community
Advanced