skills.rest
PedrFelip
PedrFelipCOMMUNITY
Explore all skills by this author →
Website𝕏@pdrdotdevGitHub

frontend-design

Design frontend interfaces with Next.js, Tailwind CSS, and shadcn/ui.

Updated Jan 13, 2026
Search Tags:#typography#design#ui#frontend#dashboard#component
One-click install
npx skills add https://github.com/PedrFelip/portfolio --skill frontend-design-pedrfelip
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/PedrFelip/portfolio/tree/main/.opencode/skills/frontend-design
Command: npx skills add https://github.com/PedrFelip/portfolio --skill frontend-design-pedrfelip

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.

Core Features & Use Cases

  • Frontend design thinking and implementation guidelines to produce production-ready interfaces across React, HTML/CSS, and UI component libraries.
  • Generates cohesive visual systems including typography, color, spacing, motion, and layout according to a clear aesthetic direction.
  • Use Case: Build a branded dashboard page with a bold aesthetic direction and rigorously applied 4px grid and component hierarchy.

Quick Start

Create a bold, distinctive frontend UI for a dashboard named Nova.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I design a React dashboard that avoids generic AI aesthetics?▼

Build production-grade frontend interfaces by enforcing a bold aesthetic direction, 4px grid, typography scale, and color system. This approach generates cohesive React components and dashboards that avoid generic AI aesthetics through rigorous design constraints.

Can I use Tailwind CSS and shadcn/ui to build production-ready web components?▼

Yes, you can build production-ready web components using Tailwind CSS and shadcn/ui. The system integrates with these frameworks alongside Next.js and Biome standards to generate cohesive visual systems for your frontend layouts.

What design guidelines are enforced for frontend UI development?▼

Frontend UI development enforces project-level guidelines including the 4px grid, typography scale, color system, motion, and accessibility considerations. These constraints ensure your web components and dashboards maintain a consistent, production-grade visual hierarchy.

Does this approach work for building landing pages and HTML layouts?▼

Yes, this approach works for building landing pages and HTML layouts. It applies frontend design thinking and implementation guidelines across React, HTML/CSS, and UI component libraries to produce polished, production-ready interfaces.

What is the best way to ensure accessibility in frontend design?▼

The best way to ensure accessibility in frontend design is to integrate it as a core project guideline alongside typography, color, and motion systems. This ensures your web components and UI kits meet accessibility considerations while maintaining visual consistency.

Related Skills

Explore More Design & Creative Skills→
AbdullahMalik17AbdullahMalik17
9

styling-with-shadcn

Set up shadcn/ui components, forms, and dark mode in Next.js projects.

Community
Intermediate
skatedduskateddu
27

frontend-design

Generate frontend interfaces with HTML/CSS/JS for React, Vue, or plain websites.

Community
Advanced
ihlamuryihlamury
73

convertkit-ui-skills

Enforce Convertkit's UI design system for light-mode interfaces with Inter font and 4px grid.

Community
Intermediate
czambrczambr

frontend-design

Create production-grade frontend interfaces with distinctive typography, color, and motion.

Community
Advanced