skills.rest
mahidalhan
mahidalhanCOMMUNITY
Explore all skills by this author →
Website𝕏@noborderhumanGitHub

frontend-design

Implement production-grade frontend interfaces with intentional visual design across HTML/CSS/JS, React, or Vue.

34|6|Updated Oct 25, 2025
Search Tags:#typography#design#accessibility#frontend#aesthetics#motion#color-theory
One-click install
npx skills add https://github.com/mahidalhan/claude-hacks --skill frontend-design-mahidalhan
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/mahidalhan/claude-hacks/tree/main/skills/frontend-design/skills/frontend-design
Command: npx skills add https://github.com/mahidalhan/claude-hacks --skill frontend-design-mahidalhan

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Distinguishes and elevates frontend interfaces from generic AI-generated patterns by guiding production-grade visual design with an intentional aesthetic direction.

Core Features & Use Cases

  • Define a bold aesthetic direction and implement cohesive UI systems across components and pages.
  • Produce production-ready HTML/CSS/JS or framework-based implementations (React, Vue) that emphasize typography, color theory, motion, and spatial composition while maintaining accessibility.
  • Use cases include building marketing sites, admin dashboards, or product UIs with a unique identity that scales consistently.

Quick Start

Specify the target component or page and implement a production-grade frontend that embodies the chosen visual direction.

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 frontend interfaces that avoid generic AI aesthetics?▼

To build production-grade frontend interfaces, define a bold aesthetic direction and implement cohesive UI systems across components and pages. This elevates generic patterns by guiding visual design with intentional typography, color theory, and motion.

Can I use this to generate UI components for React or Vue?▼

Yes, you can generate production-ready UI components for React or Vue. It emphasizes typography, color theory, motion, and spatial composition while maintaining accessibility and scalable code-quality constraints.

What is the best way to establish a cohesive visual identity for a web app?▼

The best way to establish a cohesive visual identity is to define a clear aesthetic direction and apply it consistently across HTML/CSS/JS or framework-based implementations, ensuring scalable and unique UI patterns.

How do I ensure accessibility when designing frontend motion and spatial composition?▼

You ensure accessibility by integrating it as a core constraint alongside frontend motion and spatial composition. The implementation process satisfies accessibility requirements while maintaining a distinctive aesthetic direction.

Does this approach work for building admin dashboards and marketing sites?▼

Yes, this approach works for building admin dashboards and marketing sites. It enables crafting product UIs with a unique identity that scales consistently across various web app components and pages.

Related Skills

Explore More Design & Creative Skills→
DieStokDieStok

frontend-design

Designs and implements frontend interfaces with HTML/CSS/JS or React/Vue from user requirements.

Community
Advanced
AbrahamX3AbrahamX3
1

frontend-design

Design production-grade frontend interfaces with accessible, responsive layouts.

Community
Advanced
twofoldtech-dakotatwofoldtech-dakota
2

fullstack-modern

Coordinate React or Vue frontends with GraphQL and REST APIs in Next.js-style apps.

Community
Advanced
TW-NLPTW-NLP
91

frontend-design

Generate production-grade frontend interfaces using HTML, CSS, JS, React, and Vue.

Community
Intermediate