skills.rest
finleysg
finleysgCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Design and implement production-grade frontend interfaces with HTML, CSS, and JavaScript.

Updated Oct 30, 2025
Search Tags:#typography#design#accessibility#frontend#components#UI#aesthetics
One-click install
npx skills add https://github.com/finleysg/bhmc-admin --skill frontend-design-finleysg
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/finleysg/bhmc-admin/tree/main/.claude/skills/frontend-design
Command: npx skills add https://github.com/finleysg/bhmc-admin --skill frontend-design-finleysg

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams craft distinctive, production-grade frontend interfaces with a bold visual language and accessible, performant code.

Core Features & Use Cases

  • Distinctive aesthetics: Establish a unique typography, color system, motion, and layout approach that differentiates products.
  • Production-grade components: Build reusable, accessible, responsive UI components with clean architecture and token-driven styles.
  • Use Case: Design and implement a polished landing page or admin dashboard that maintains visual consistency across pages.

Quick Start

Create a polished React Button component with bold aesthetics, accessible contrast, and responsive behavior.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I create production-grade frontend UI with distinctive aesthetics?▼

Build distinctive frontend components using token-driven styles, accessible HTML/CSS/JS, and a systematic design vision. This approach ensures responsive, production-grade interfaces like React buttons maintain visual consistency across pages.

How do I ensure accessibility when building frontend UI components?▼

Maintain visual consistency across pages by applying a systematic design approach with token-driven styles. This skill enforces a clear design vision and clean architecture to keep polished landing pages and dashboards visually aligned.

Can I use this approach to design both web pages and admin dashboards?▼

Yes, this approach applies to building web components, pages, dashboards, posters, or applications. It enforces production-ready HTML/CSS/JS implementation and accessibility requirements across all frontend interfaces.

What is the best way to establish a bold typography and color system for web applications?▼

Establish a bold typography and color system by applying a systematic approach to frontend design. This skill enforces color theory, motion, and typography requirements to differentiate products with a unique visual language.

Related Skills

Explore More Design & Creative Skills→
duggal1duggal1
2

normalize

Normalize frontend feature designs to align with design system tokens and guidelines.

Community
Advanced
aaddrickaaddrick
125

bulletproof-frontend

Evaluates and improves CSS, HTML, and Blade templates using semantic design patterns.

Community
Intermediate
abeldotamabeldotam
13

frontend-design

Create production-grade frontend interfaces from design concepts.

Community
Advanced
AngelDannAngelDann
1

frontend-design

Generate cohesive frontend interfaces with typography, color, motion, and layout guidelines.

Community
Advanced