skills.rest
avibebuilder
avibebuilderOFFICIAL
Explore all skills by this author →
GitHub

frontend-design

Build distinctive frontend interfaces with framework-specific code and accessibility guidance.

113|15|Updated Mar 3, 2026
Search Tags:#accessibility#react#ui-design#aesthetics#design-system#frontend-design#bm25-search
One-click install
npx skills add https://github.com/avibebuilder/claude-prime --skill frontend-design-avibebuilder
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/avibebuilder/claude-prime/tree/main/.claude/skills/frontend-design
Command: npx skills add https://github.com/avibebuilder/claude-prime --skill frontend-design-avibebuilder

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This skill eliminates generic, forgettable AI-generated UIs by guiding designers and engineers to create distinctive, production-ready frontends with intentional aesthetics and delivery-ready code.

Core Features & Use Cases

  • Aesthetic Direction: choose a clear, bold visual voice (brutalist, glassmorphism, maximalist, refined minimalism, retro-futuristic, etc.) and apply it consistently across screens and components.
  • Production Implementations: deliver working HTML/CSS/JS or framework-specific code for React, Next.js, Vue, Tailwind, React Native, Flutter, and SwiftUI tuned to the chosen aesthetic.
  • Design Intelligence: use the bundled BM25-backed dataset and search tooling to recommend color systems, typography pairings, landing patterns, chart guidance, and UX rules.
  • Quality & Accessibility: enforce contrast, interaction polish, responsive layout, and pre-delivery checks from the included quality checklist.

Quick Start

Ask the frontend-design skill to restyle or build the requested interface and include the target framework and any constraints.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I build production-grade React UI that avoids generic AI aesthetics?▼

Production-grade React UI requires choosing a bold visual voice like brutalism or refined minimalism and applying it consistently. This skill provides framework-specific code, aesthetic direction, and a BM25-backed dataset to generate distinctive interfaces.

Can I generate design system components for Tailwind and Next.js?▼

Yes, you can generate design system components for Tailwind and Next.js. The skill provides production-ready framework code and aesthetic direction, applying consistent visual choices like maximalist or retro-futuristic styles across your components.

How do I ensure accessibility and contrast in frontend design?▼

Ensure accessibility and contrast in frontend design by enforcing interaction polish, responsive layout, and pre-delivery checks. This skill includes a quality checklist and contrast guidance to validate that your interfaces meet accessibility standards before delivery.

What is the best way to get color system and typography recommendations for a landing page?▼

The best way to get color system and typography recommendations is using a BM25-backed design database. This skill includes search tooling that recommends color systems, typography pairings, and UX rules tailored to your specific stack and aesthetic.

Does this frontend design approach work with React Native and Flutter for mobile interfaces?▼

Yes, this frontend design approach works with React Native and Flutter for mobile interfaces. It applies aesthetic direction and delivers production-ready framework code for mobile pages, onboarding flows, and components across these frameworks.

Why do my AI-generated interfaces look generic and how can I fix them?▼

AI-generated interfaces look generic when they lack intentional aesthetic direction. Fix them by choosing a bold visual voice like brutalist or glassmorphism and applying it consistently across screens using the provided design intelligence and quality checks.

Related Skills

Explore More Design & Creative Skills→
wildbitcawildbitca
1

common-ui-design

Define UI aesthetic and design system tokens before frontend implementation.

Official
Advanced
ovachieverovachiever
52

Playwright Browser Automation

Automate browser testing with Playwright across multiple viewports and UX validations.

Community
Intermediate
ProfPowellProfPowell
4

sanity-cms

Integrate Sanity CMS with GROQ queries for Astro and 11ty.

Community
Intermediate
Codcyber101Codcyber101

frontend-design

Design distinctive frontend interfaces with scalable typography and accessible color systems.

Community
Intermediate