frontend-design SKILL.md skillA

frontend-design from ethanyoq/skill-hub is an agent skill: a SKILL.md folder an AI agent loads when a task calls for it.

mdr add ethanyoq/skill-hub/frontend-design@git:20260430.12804b3

Pins git:20260430.12804b3 in mdr.lock. Pin the fingerprint instead.

Audit grade

A, 17 of 17 checks passed

Kind

SKILL.md skill

Repository

ethanyoq/skill-hub

Path

skills/03-frameworks/frontend-design/SKILL.md

Versions recorded

1

Latest version

git:20260430.12804b3, committed Apr 30, 2026

Size

3,823 bytes

Repository stars

11

License

MIT

Create distinctive, production-grade frontend interfaces with high design quality. Use when the user asks to build web components, pages, or applications and the visual direction matters as much as the code quality.

Collected from public GitHub. Every version is saved exactly as it was and never changes. Install it at an exact version with the mdr tool, and every file is checked before it reaches your agent. The main file is checked against the SHA-256 fingerprint recorded here, and the others against the fingerprints GitHub keeps for its source commit. The automatic checks below grade the latest version, and the same checks always give the same file the same grade.

What the file says

# Frontend Design

Use this when the task is not just "make it work" but "make it look designed."

This skill is for product pages, dashboards, app shells, components, or visual systems that need a clear point of view instead of generic AI-looking UI.

## When To Use

- building a landing page, dashboard, or app surface from scratch
- upgrading a bland interface into something intentional and memorable
- translating a product concept into a concrete visual direction
- implementing a frontend where typography, composition, and motion matter

## Core Principle

Pick a direction and commit to it.

Safe-average UI is usually worse than a strong, coherent aesthetic with a few bold choices.

## Design Workflow

### 1. Frame the interface first

Before coding, settle:

- purpose
- audience
- emotional tone
- visual direction
- one thing the user should remember

Possible directions:

- brutally minimal
- editorial
- industrial
- luxury
- playful
- geometric
- retro-futurist
- soft and organic
- maximalist

Do not mix directions casually. Choose one and execute it cleanly.

### 2. Build the visual system

Define:

- type hierarchy
- color variables
- spacing rhythm
- layout logic
…

Read the whole file at its exact version.

How to install

mdr add ethanyoq/skill-hub/frontend-design@sha256:6b4d60566dd123d5

[![mdr](https://markdownregistry.com/badge/art_ststwb2crrldzj6b.svg)](https://markdownregistry.com/a/art_ststwb2crrldzj6b)

Versions

The registry has recorded 1 version of this file, committed on Apr 30, 2026.

Audit of the latest version

Source

API

GET https://markdownregistry.com/api/v1/artifacts/art_ststwb2crrldzj6b
GET https://markdownregistry.com/api/v1/resolve?ref=ethanyoq/skill-hub/frontend-design
GET https://markdownregistry.com/api/v1/blob/6b4d60566dd123d5598b7a16af5675b3a6a40f46b7c0fd805218d14758b03393

Your AI assistant does the legwork. You hear about the deals worth your word. Hand yours the standing instructions at modelranch.com and it joins the network that reads files like this one.

Guides: the SKILL.md format and its required fields · what to check before you install a skill · how to pin a skill to an exact version · where to find agent skills · keeping a team on the same skills · which agent file does what.

More from ethanyoq/skill-hub

Every file in ethanyoq/skill-hub

Other files named frontend-design

Browse by kind, by grade A, or by owner.