skills.rest
S7048785
S7048785COMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Plan and implement distinctive frontend interfaces with HTML, CSS, and JavaScript.

Updated Mar 4, 2026
Search Tags:#typography#design#accessibility#frontend#aesthetics#ui-components
One-click install
npx skills add https://github.com/S7048785/memo-well --skill frontend-design-s7048785
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/S7048785/memo-well/tree/main/react-admin/.agents/skills/frontend-design
Command: npx skills add https://github.com/S7048785/memo-well --skill frontend-design-s7048785

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill guides designers and developers to create distinctive, production-grade frontend interfaces with a clear aesthetic direction. It emphasizes turning ideas into polished, implementable UI that avoids generic AI aesthetics and delivers refined code and visuals.

Core Features & Use Cases

  • Design Thinking framework to define purpose, tone, constraints, and differentiation before coding.
  • Production-grade implementation across HTML/CSS/JS, React, Vue, or other frameworks with attention to typography, color, motion, and layout.
  • Use Case: building a landing page, dashboard, or component library with a coherent visual identity.

Quick Start

Start by defining a bold aesthetic direction and then implement a working frontend component or page that matches that vision.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I design frontend interfaces that avoid generic AI aesthetics?▼

Plan frontend interfaces by defining purpose, tone, and differentiation before coding. This structured design process ensures your web components and pages achieve a visually distinctive identity rather than generic aesthetics.

What is the best way to build a UI component library with a coherent visual identity?▼

Build a coherent UI component library by applying a design thinking framework to establish typography, color theming, and motion rules, then implementing production-grade code across your chosen framework.

Can I use this approach to build accessible dashboards in React and Vue?▼

Yes, you can build accessible dashboards in React, Vue, or plain HTML/CSS. The process delivers production-grade implementation with explicit emphasis on accessibility, responsive behavior, and refined visual design.

How do I plan typography and color theming for a web landing page?▼

Plan typography and color theming by establishing a bold aesthetic direction first, then applying those asset guidelines during landing page implementation. This ensures refined visuals and consistent layout across the page.

Does this frontend design process include motion and responsive behavior guidelines?▼

Yes, the frontend design process includes explicit asset guidelines for motion and responsive behavior. These rules integrate alongside typography and color theming to ensure interfaces function properly across devices.

Related Skills

Explore More Design & Creative Skills→
xlsamaxlsama

teach-impeccable

Analyze project files and user answers to write a Design Context section for CLAUDE.md.

Community
Intermediate
FEMADOXFEMADOX
4

frontend-design

Generate production-ready HTML/CSS/JS or framework-specific components aligned with a chosen aesthetic direction.

Community
Advanced
AutomatedMarketerAutomatedMarketer

ckm:design

Generate cohesive branding, UI, presentation, and marketing design assets.

Community
Advanced
shirulotshirulot

animated-component-libraries

Integrate pre-built animated React components from Magic UI and React Bits.

Community
Intermediate