Frontend Design

1 views

markdown

Summary

Guidance for distinctive, intentional UI design — aesthetic direction, typography, and choices that avoid looking like templated defaults.

Install This Skill

Add this skill to your favorite AI agent in a few steps.

Any AI agent

This skill is plain instructions — it works with any assistant that accepts custom instructions or system prompts.

Copy the skill content with the button below.
Paste it into your agent's instruction file or system prompt (for example AGENTS.md, .cursorrules, or a custom instructions field).
Ask the agent to apply the skill whenever the task matches.

Claude Code & Claude apps

Claude loads skills automatically from its skills directory.

Claude Code

Create a skill folder — personal: ~/.claude/skills/frontend-design/, or per-project: .claude/skills/frontend-design/
Save the skill content as SKILL.md inside that folder.
Claude Code picks it up automatically and invokes it when relevant.

mkdir -p ~/.claude/skills/frontend-design

Claude.ai / Claude Desktop

Enable Skills under Settings → Capabilities, then upload the skill (a folder or zip containing SKILL.md).

One-prompt install

Paste this prompt into any agent with web access and it will install the skill for you.

Install the "Frontend Design" skill from Onei AI. Fetch https://onei.ai/skills/frontend-design, extract the full skill content from the page, and save it where you load skills from (for Claude Code: .claude/skills/frontend-design/SKILL.md). From now on, apply this skill whenever it is relevant to my request.

Skill Content

Markdown Content

Copy this content and use it with your preferred AI agent

# Frontend Design

Use this skill when building new UI or reshaping existing UI and you want it to look intentional.

## What it helps with
- Choosing an aesthetic direction instead of defaulting to a framework's look
- Typography: hierarchy, pairing, rhythm
- Color, spacing, and detail decisions that read as considered
- Steering away from the "generic template" feel

## Principle
Distinctiveness comes from a small number of deliberate, consistent choices — not from decoration.

Description

A skill offering guidance for distinctive, intentional visual design when building a new interface or reshaping an existing one. It helps with aesthetic direction, typography, and the many small decisions that separate a considered UI from a templated default.

Related Skills

Skill: Auth0 Agent Skill

by Auth0

New

Auth0's official agent skill: a router that detects your framework and intent, then loads the right Auth0 guidance for login, MFA, Organizations, tenant audits, debugging or provider migration.

Development

Skill: Redis Search

by Redis, Inc.

New

Redis' own guidance for FT.CREATE schema design, FT.SEARCH / FT.AGGREGATE / FT.HYBRID, HNSW vector similarity and RAG retrieval pipelines.

Development

Skill: Supabase

by Supabase

New

Supabase's official skill covering Database, Auth, Edge Functions, Realtime, Storage, Vectors, Cron and Queues — with a hard rule to verify against the live changelog before writing code.

Development

Skill: GSAP ScrollTrigger

by GreenSock

New

GreenSock's official ScrollTrigger skill — scroll-linked animation, pinning, scrub and trigger positioning, with the exact start/end syntax agents get wrong.

DevelopmentDesign & Creative

Browse all skills →