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.

Jump to install

Repository: diegosouzapw/awesome-omni-skill
Last source activity: February 28, 2026 at 04:04
Detected SKILL.md language: English
Stars: 50
Forks: 19

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/diegosouzapw/awesome-omni-skill --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.

File Explorer

2 files

SKILL.md

Source instructions · Read-only preview

Back to search Back to installation

artifact-tracking

Token-efficient tracking for AI orchestration. CLI-first for status updates (~50 tokens), agent fallback for complex ops (~1KB). Use when: updating task status, querying blockers, creating progress files, validating phases.

2026-03-02

ash-ai

AshAi extension guidelines for integrating AI capabilities with Ash Framework. Use when implementing vectorization/embeddings, exposing Ash actions as LLM tools, creating prompt-backed actions, or setting up MCP servers. Covers semantic search, LangChain integration, and structured outputs.

2026-03-02

ask-oracle

This skill should be used when solving hard questions, complex architectural problems, or debugging issues that benefit from GPT-5 Pro or GPT-5.1 thinking models with large file context. Use when standard Claude analysis needs deeper reasoning or extended context windows.

2026-03-02

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.
license	Complete terms in LICENSE.txt
_from	["https://github.com/anthropics/skills/tree/main/skills/frontend-design"]

Frontend Design

Create memorable, distinctive interfaces. Avoid generic "AI slop" - every design should have a clear point of view.

Design Philosophy

Bold choices: Pick a strong color palette, unusual typography, or distinctive layout
Purposeful whitespace: Let content breathe, don't fill every pixel
Visual hierarchy: Make the important things impossible to miss
Micro-interactions: Add subtle animations that delight

Technical Stack

React 18+ with TypeScript
Tailwind CSS for styling
Framer Motion for animations
Use CSS Grid for complex layouts, Flexbox for simpler ones

Anti-patterns

Generic blue/white SaaS layouts
Overuse of rounded corners and soft shadows
Cards inside cards inside cards
Gratuitous gradient backgrounds

frontend-design

Source facts

Install options

Review the source files

More from this repository

More from this repository

Frontend Design

Design Philosophy

Technical Stack

Anti-patterns

Frontend Design

Design Philosophy

Technical Stack

Anti-patterns