skills.rest
roblucci9302
roblucci9302COMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Create frontend designs with components, pages, and design systems for web applications.

Updated Dec 29, 2025
Search Tags:#typography#design#accessibility#frontend#UI#design-system
One-click install
npx skills add https://github.com/roblucci9302/ILM-BAVINI --skill frontend-design-roblucci9302
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/roblucci9302/ILM-BAVINI/tree/main/.claude/skills/frontend-design
Command: npx skills add https://github.com/roblucci9302/ILM-BAVINI --skill frontend-design-roblucci9302

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Designers and developers often struggle to craft distinctive, production-grade frontend interfaces that balance aesthetics, accessibility, and performance.

Core Features & Use Cases

  • Bold, distinctive UI: Guiding principles to avoid generic AI aesthetics while delivering polished components and pages.
  • Accessibility and performance: Built-in guidelines to ensure usable interfaces across devices and assistive tech.
  • Use Case: When tasked with building a web UI for a SaaS dashboard, apply these practices to produce a unique, accessible design that ships quickly.

Quick Start

Provide a high-level design brief and ask the AI to generate a set of reusable UI components and style guidelines for a project.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I build a production-grade frontend UI for a SaaS dashboard?▼

To build a production-grade frontend UI for a SaaS dashboard, provide a high-level design brief to generate reusable components, semantic HTML, and design-token based style guidelines.

What's the best way to create a responsive mobile-first design system with accessible typography?▼

Creating a responsive mobile-first design system with accessible typography involves enforcing design-token based theming for color schemes and spacing guidelines to ensure interfaces are usable across devices.

How do I avoid generic AI aesthetics when generating web application components?▼

To avoid generic AI aesthetics when generating web application components, apply bold and distinctive design principles that balance aesthetics, accessibility, and performance for polished frontend pages.

Does this frontend design approach support creating landing pages and admin panels?▼

Yes, this frontend design approach supports creating landing pages and admin panels by covering components, pages, and complete design systems tailored for various web application interfaces.

What guidelines should I follow to ensure accessibility in frontend design?▼

To ensure accessibility in frontend design, follow built-in guidelines that enforce semantic HTML, responsive mobile-first layouts, and design-token based theming for assistive technology compatibility.

Related Skills

Explore More Design & Creative Skills→
deomiarndeomiarn

frontend-design

Generate production-grade frontend interfaces from high-level briefs.

Community
Intermediate
hospitaljobsinhospitaljobsin
7

frontend-design

Create production-grade frontend interfaces with React, Vue, Svelte, or vanilla HTML/CSS/JS.

Official
Advanced
EdwinFerminEdwinFermin

frontend-tailwind-best-practices

Standardize Tailwind CSS patterns for layouts, colors, and typography.

Community
Intermediate
Likas07Likas07

ui-designer

Generate UI design systems with design tokens and WCAG AA accessibility.

Community
Advanced