Skip to skills
AI Craft Pad
Home/Skills/Design & UX/frontend-design
First-party source

Frontend Design

A design-direction skill for giving a new interface a deliberate visual identity and reviewing whether the result fits its audience and task.

Editorial review checked 2026-10-29 against this instruction snapshot. Supporting scripts and runtime behavior remain outside this review.

What it does

The source concentrates on visual decisions rather than a component framework. It asks the agent to connect typography, hierarchy, color, layout and content to the subject of the product. This makes it useful early in a design task, when the main risk is a polished-looking interface that communicates little about the specific audience or outcome.

Best for

New landing pages, application concepts and deliberate interface redesigns with room for a visual direction. For an established product, supply its accepted reference, design tokens and preservation constraints so the skill has a concrete boundary. It can also support a critique pass after the functional behavior has been implemented.

Tradeoffs and requirements

A strong aesthetic direction does not establish accessibility, task success or responsive quality. The agent can still choose a layout that looks compelling in one screenshot and fails with real content. The source includes its own license reference; inspect the linked terms before reusing any bundled material. A design prompt does not authorize unrelated changes to an existing site.

Unknown; inspect source requirements and supporting scripts.

Install from the source

Inspect the pinned source snapshot and its supporting files first. The command selects this skill through the open-source skills CLI. Node.js and agent-specific setup may be required. Installation can download code; this catalog never runs it.

npx skills add https://github.com/anthropics/skills/tree/ca45fc496a3436251f191354091d557da31c15b5/skills/frontend-design --skill frontend-design

Review pinned skill folder ↗ · CLI documentation ↗

After source review, use npx skills check and npx skills update to inspect and apply upstream updates. Re-check changed instructions before running them.

Safety & review signals

Static review only. This is not a security audit or a guarantee of safety.

SKILL.md text only; scripts, dependencies and runtime behavior not audited.

No configured text patterns matched. Unmatched or concealed behavior can still exist.

Allowed tools declaration: Unknown. Runtime permissions and network behavior: Unknown.

AI Craft Pad Skill Score

86/100 · Metadata coverage 100% · Model 1.0

Scores summarize observable discovery signals. Popularity and repository activity apply to the whole repository. Unknown runtime safety earns no certification.

Documentation
100/100
100
Maintenance
100/100
100
License Clarity
100/100
100
Repository Health
85/100
85
Compatibility Evidence
80/100
80
Popularity
95/100
95
Originality
80/100
80
Static Safety
60/100
60
Read the formula and limits →

Suggested workflow

Define the primary user task and content, select a small coherent visual system, implement representative states, then review the result at desktop, tablet and mobile widths. Pair with webapp-testing to check interactions and with a targeted accessibility review.

How to judge the result

Inspect long titles, empty states, keyboard focus, contrast, reading order and overflow using real content. Compare the finished interface with the actual brief and accepted visual references.

Similar skills to compare

Related by category; compare scope and dependencies before choosing an alternative.

Design & UX87/100

20 andruia niche intelligence

sickn33/agentic-awesome-skills

Explore 20 andruia niche intelligence as a design & ux workflow from sickn33/agentic-awesome-skills. Compare its source, maintenance and review signals before choosing it for your agent.

Community sourceMIT3 matching source records
48,724 repo stars0 text flagsReview ↗
Design & UX87/100

3d ui

sickn33/agentic-awesome-skills

Explore 3d ui as a design & ux workflow from sickn33/agentic-awesome-skills. Compare its source, maintenance and review signals before choosing it for your agent.

Community sourceMIT3 matching source records
48,724 repo stars0 text flagsReview ↗
Design & UX87/100

animated github profile

sickn33/agentic-awesome-skills

Explore animated github profile as a design & ux workflow from sickn33/agentic-awesome-skills. Compare its source, maintenance and review signals before choosing it for your agent.

Community sourceMIT3 matching source records
48,724 repo stars2 text flagsReview ↗

More from this source

Productivity & planning86/100

academy guide

anthropics/skills

Explore academy guide as a productivity & planning workflow from anthropics/skills. Compare its source, maintenance and review signals before choosing it for your agent.

First-party sourceComplete terms in LICENSE.txt
184,716 repo stars1 text flagsReview ↗
Development86/100

algorithmic art

anthropics/skills

Explore algorithmic art as a development workflow from anthropics/skills. Compare its source, maintenance and review signals before choosing it for your agent.

First-party sourceComplete terms in LICENSE.txt
184,716 repo stars1 text flagsReview ↗
Design & UX86/100

brand guidelines

anthropics/skills

Explore brand guidelines as a design & ux workflow from anthropics/skills. Compare its source, maintenance and review signals before choosing it for your agent.

First-party sourceComplete terms in LICENSE.txt2 matching source records
184,716 repo stars0 text flagsReview ↗

Works well in these suggested workflows

Editorial combinations of complementary roles; review each source independently.