frontend-design

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.

Jump to install

Repository: Szantoi/JoineryTech.McpServer
Last source activity: March 5, 2026 at 11:06
Detected SKILL.md language: English
Stars: 0
Forks: 0

Install options

The review-first prompt is selected by default. You can switch to a direct command or download a local copy.

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

A direct command skips the review prompt. Inspect the source before running it.

npx skills add https://github.com/Szantoi/JoineryTech.McpServer --skill frontend-design

The command stays on one line. Scroll horizontally to inspect it before copying.

Prefer a local copy? Download the files currently available to SkillsMP.

Review the source files

Read SKILL.md and any companion files shown by SkillsMP before deciding whether to install.

SKILL.md

Source instructions · Read-only preview

Back to search Back to installation

mcp-builder

Guide for creating high-quality MCP (Model Context Protocol) servers that enable LLMs to interact with external services through well-designed tools. Use when building MCP servers to integrate external APIs or services, whether in Python (FastMCP) or Node/TypeScript (MCP SDK).

2026-03-05

nuget-manager

Manage NuGet packages in .NET projects/solutions. Use this skill when adding, removing, or updating NuGet package versions. It enforces using `dotnet` CLI for package management and provides strict procedures for direct file edits only when updating versions.

2026-03-05

skill-creator

Guide for creating effective skills. This skill should be used when users want to create a new skill (or update an existing skill) that extends Claude's capabilities with specialized knowledge, workflows, or tool integrations.

2026-03-05

View all from this repository

name	frontend-design
description	Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.

Frontend Design

Create production-grade interfaces that avoid "AI slop" aesthetics.

Design Thinking

Purpose: Identify the core problem.
Tone: Pick a bold direction (Minimalist, Maximalist, Retro-futuristic, etc.).
Differentiation: What makes it unforgettable?

Guidelines

Typography: Characterful font choices. Pair display fonts with refined body fonts. Avoid system defaults.
Color: Cohesive, variable-based themes. Dominant colors over timid palettes.
Motion: CSS-only or Motion library for high-impact revelations.
Spatial Composition: Unexpected layouts, asymmetry, grid-breaking elements.
Visual Details: Texture, noise, gradients, and atmospheric depth.

CRITICAL

NEVER converge on common AI defaults (Inter/system fonts, purple gradients on white).
Match implementation complexity to the aesthetic vision.

frontend-design

Source facts

Install options

Review the source files

More from this repository

More from this repository

Frontend Design

Design Thinking

Guidelines

CRITICAL

Frontend Design

Design Thinking

Guidelines

CRITICAL