Frontend DesignSkill

Added to Onei Jul 22, 2026

2 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: PlanetScale Safe Orchestrator

by PlanetScale

New

The master skill in PlanetScale's official pack: runs a full read-only best-practices assessment of a database or org, then produces one evidence-backed report.

Development

Skill: Inngest Agents

by Inngest

New

Build crash-safe AI agents on AgentKit and step.ai — durable tool calls, human-in-the-loop approval, realtime progress, and when not to reach for an agent loop at all.

Development

Skill: Inngest Durable Functions

by Inngest

New

Inngest's durable-execution playbook as an agent skill — steps and memoisation, event and cron triggers, idempotency, cancellation, retries and non-retriable errors.

Development

Skill: Temporal Developer

by Temporal

New

Temporal's official skill for building durable workflows — SDK patterns across seven languages, plus the determinism rules that decide whether a workflow survives a replay.

Development

Browse all skills →