skills.rest
yeohj0710
yeohj0710COMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Translate user requirements into HTML/CSS/JS frontend interfaces with cohesive aesthetics.

Updated Dec 5, 2024
Search Tags:#typography#design#ui#frontend#components#aesthetics#motion
One-click install
npx skills add https://github.com/yeohj0710/wellnessbox --skill frontend-design-yeohj0710
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/yeohj0710/wellnessbox/tree/main/.agents/skills/frontend-design
Command: npx skills add https://github.com/yeohj0710/wellnessbox --skill frontend-design-yeohj0710

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Creates distinctive, production-grade frontend interfaces by guiding the user to articulate a bold aesthetic direction and implement polished, real code rather than generic AI mockups.

Core Features & Use Cases

  • Before coding, establish a bold design direction across purpose, tone, constraints, and differentiation.
  • Implement production-grade UI using HTML/CSS/JS or modern frameworks with a cohesive aesthetic and meticulous details.
  • Guidelines cover typography, color systems, motion, spatial composition, backgrounds, accessibility, and responsive behavior.
  • Use Case: design landing pages, dashboards, or UI components that feel intentionally crafted and unique.

Quick Start

Provide frontend requirements for a component, page, or application you want built, including the context, purpose, audience, and constraints.

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 UI that avoids generic AI mockup aesthetics?▼

To build production-grade frontend UI, first establish a bold aesthetic direction covering purpose, tone, and differentiation before coding. Then implement polished interfaces using HTML/CSS/JS or modern frameworks with meticulous attention to typography, color, and motion.

What guidelines are needed for frontend design to ensure a cohesive UI component aesthetic?▼

Frontend design guidelines for a cohesive UI component aesthetic must cover typography, color systems, motion, spatial composition, backgrounds, accessibility, and responsive behavior to ensure the final interface feels intentionally crafted and unique.

Can I use modern frontend frameworks to implement landing pages and dashboards with custom motion and typography?▼

You can use modern frontend frameworks alongside HTML/CSS/JS to implement landing pages and dashboards. The implementation provides actionable code guided by rigorous standards for custom typography, color systems, and motion.

What is the best way to translate frontend website requirements into robust code?▼

The best way to translate frontend website requirements into robust code is to provide the context, purpose, audience, and constraints upfront. This shapes a clear design brief that yields actionable implementation guidelines and cohesive spatial composition.

Do I need to define a design brief before generating UI components for a website?▼

You need to define a design brief before generating UI components for a website to avoid generic outputs. Articulating a bold aesthetic direction first ensures the resulting frontend code is distinctive, production-grade, and meets specific user constraints.

Related Skills

Explore More Design & Creative Skills→
soeiroosoeiroo

design-brief

Create structured design briefs with problem statements, audience, constraints, and success criteria.

Community
Intermediate
SChannarongSChannarong

frontend-design

Generate frontend code with accessibility, theming, and responsive behavior.

Community
Advanced
samjhechtsamjhecht
4

frontend-design

Generates responsive, accessible HTML/CSS/JS frontend interfaces with bold aesthetic direction.

Community
Advanced
ClutchEngineeringClutchEngineering
14

slipstream

Compose static HTML sites with Slipstream and Tailwind CSS.

Official
Advanced