skills.rest
rselbach
rselbachCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-design

Generate production-ready HTML/CSS/JS interfaces with bold design direction.

1|Updated Nov 1, 2025
Search Tags:#typography#design#frontend#react#css#aesthetics#motion
One-click install
npx skills add https://github.com/rselbach/dotfiles --skill frontend-design-rselbach
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/rselbach/dotfiles/tree/main/claude/plugins/cache/claude-plugins-official/frontend-design/f70b65538da0/skills/frontend-design
Command: npx skills add https://github.com/rselbach/dotfiles --skill frontend-design-rselbach

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend teams often struggle to move beyond generic AI-generated visuals and deliver distinctive, production-grade interfaces that align with brand and user needs.

Core Features & Use Cases

  • Design thinking guidance to select a bold aesthetic direction and translate it into code-ready components.
  • Implementation-ready guidance for HTML/CSS/JS, React, Vue, or vanilla stacks with attention to typography, color, motion, and accessibility.
  • Use Case: Build a component, page, or application with a cohesive visual language that is reusable across projects.

Quick Start

Create a production-grade frontend component set for a dashboard with a bold, distinctive aesthetic.

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 components with a distinctive aesthetic?▼

Production-grade React components require a bold aesthetic direction translated into cohesive, accessible code. This approach provides design thinking guidance to move beyond generic AI visuals, ensuring reusable visual language across your project.

What is the best way to establish a cohesive design system for a frontend application?▼

A cohesive frontend design system requires selecting a bold aesthetic direction applied consistently across typography, color, and motion. This creates a reusable visual language for components, pages, and full applications across modern frameworks.

How do I ensure accessible typography and motion in CSS?▼

Accessible typography and motion in CSS require implementation-ready guidance that balances bold aesthetics with usability standards. This approach ensures your frontend components maintain distinctive design while meeting accessibility requirements.

Can I use this frontend design approach with Vue or vanilla HTML/CSS/JS stacks?▼

Yes, this bold frontend design approach works with Vue, React, and vanilla HTML/CSS/JS stacks. It provides implementation-ready guidance for typography, color, motion, and accessibility across modern frameworks and diverse design contexts.

Why do my AI-generated frontend interfaces look generic and lack brand identity?▼

AI-generated frontend interfaces look generic because they lack a bold, distinctive aesthetic direction aligned with brand needs. Overcoming this requires design thinking guidance to translate a cohesive visual language into production-ready code.

Related Skills

Explore More Design & Creative Skills→
arvindbattulaarvindbattula

design-setup

Define target audience, brand personality, typography, color, spacing, and layout for frontend design.

Community
Advanced
sumik5sumik5
2

designing-frontend

Design distinctive frontend interfaces with CSS variable theming and cross-framework compatibility.

Community
Intermediate
ovachieverovachiever
52

tailwind-v4-shadcn

Set up Tailwind v4 with shadcn/ui in Vite React projects.

Community
Advanced
raksokraksok

frontend-design

Defines and applies a frontend design philosophy for accessible, performant HTML/CSS/JS interfaces.

Community
Advanced