Anthropic Frontend Design

Create distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Combines the design intelligence of UI/UX Pro Max with Anthropic's anti-slop philosophy. Use for building UI components, pages, applications, or interfaces with exceptional attention to detail and bold creative choices.

Security Scan

The skill's stated purpose and included data files align with a frontend design assistant, but there are inconsistencies (notably the SKILL.md instructs running Python scripts while the manifest declares no required binaries) and bundled code should be inspected before execution.

Purpose & Capability

The skill claims to produce opinionated frontend design output and includes many CSV design-data assets and Python scripts (search.py, design_system.py, core.py) which fit that purpose. However, the SKILL.md explicitly instructs running python scripts, yet the declared 'required binaries' list is empty — that's an incoherence between what the skill expects at runtime and what the metadata declares. Either Python should be declared as required or the instructions should not assume a python runtime.

Instruction Scope

The SKILL.md instructions focus on design tasks (gather palettes, fonts, UX guidelines) and call local scripts (python scripts/search.py). The instructions do not request unrelated system files, credentials, or external endpoints in prose. That scope is consistent with the stated purpose. Note: the runtime behavior depends on what the included Python scripts do — the instructions cause code execution.

Install Mechanism

There is no install spec (low install risk). However, the package contains executable Python scripts and many data files, so running the skill will execute bundled code. Because no install step is provided, the environment is expected to already have Python and any needed libs; this expectation is not declared in metadata, which is a mismatch and can confuse users or cause unexpected failures.

Credentials

The manifest declares no required environment variables or credentials and the SKILL.md doesn't ask for secrets. That is appropriate for a design tool. But the presence of non-trivial scripts means they might still access the network, read environment variables, or call system commands — those actions are not visible in the manifest. You should review the Python sources for uses of os.environ, subprocess, socket/requests/urllib, or other I/O before granting runtime access.

Persistence & Privilege

The skill is not force-included (always: false) and is user-invocable (normal). There is no indication it requests persistent system-wide privileges or modifies other skills' configurations. Autonomous invocation is allowed (platform default); that increases the blast radius only if the code performs unexpected remote or credential access.

What to consider before installing

This package mostly looks like an opinionated frontend design assistant that uses local Python scripts and CSV data. Before running it, do the following: (1) Confirm the environment has Python and any required libraries, or ask the author to declare required binaries/dependencies. (2) Inspect the Python files (scripts/search.py, core.py, design_system.py) for any network calls, subprocess usage, or reads of environment variables or sensitive paths (look for requests/urllib/socket/subprocess/os.environ/open). (3) If you can't review the code, run it in an isolated/sandboxed environment or container, not on a laptop with credentials. (4) Ask the publisher for a homepage or source repo and for a clear dependency list (python version, pip packages). The primary incoherence is that SKILL.md assumes 'python' is available but the metadata doesn't declare any required binaries — that should be resolved before trusting execution.

This skill guides the creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. It integrates structured design intelligence (accessibility, UX rules, stack guidelines) with a bold, intentional aesthetic philosophy.

Core Philosophy: Anti-AI Slop

Claude (and all AI agents) are capable of extraordinary creative work, yet often default to safe, generic patterns. This skill MANDATES breaking those patterns.

• AVOID: Inter, Roboto, Arial, system fonts, purple-on-white gradients, cookie-cutter SaaS layouts, emojis as icons.
• MANDATE: Unique typography, context-specific color schemes, intentional motion, unexpected spatial composition, and production-grade functional code.

---

Design Thinking Process

Before coding, understand the context and commit to a BOLD aesthetic direction:

1. Purpose: What problem does this solve? Who is it for?
2. Tone: Pick an extreme direction—brutally minimal, maximalist chaos, retro-futuristic, organic, luxury, playful, editorial, etc.
3. Intelligence (Reference): Use the internal design tool to gather data (see below).
4. Differentiation: What makes this UNFORGETTABLE?

---

Design Intelligence Tool

Use the internal search tool to gather palettes, font pairings, and UX guidelines. CRITICAL: You MUST filter the results through the Anti-AI Slop lens. If the tool suggests "Inter" or "Roboto", you are REQUIRED to ignore it and pick a distinctive alternative.

# Generate a complete design system
python scripts/search.py "<product_type> <industry> <keywords>" --design-system

# Search specific domains (style, typography, color, ux, chart, landing)
python scripts/search.py "<keyword>" --domain <domain>

# Get stack-specific guidelines (html-tailwind, react, nextjs, shadcn, etc.)
python scripts/search.py "<keyword>" --stack <stack_name>

---

Implementation Standards

1. Professional UI Rules

Rule	Do	Don't
Icons	Use SVG (Heroicons, Lucide, Simple Icons)	Use emojis like 🎨 🚀 ⚙️ as UI icons
Typography	Beautiful, unique Google/Custom fonts	Inter, Roboto, Arial, System fonts
Hover	Stable transitions (color/opacity/shadow)	Scale transforms that shift layout
Cursor	Add cursor-pointer to all interactive items	Leave default cursor on buttons/cards
Contrast	Minimum 4.5:1 for accessibility	Low-contrast "vibes" that are unreadable

2. Motion & Animation

• Prioritize CSS-only solutions where possible.
• Focus on high-impact moments (staggered reveals on page load).
• Use duration 150-300ms for micro-interactions.

3. Spatial Composition

• Use asymmetry, overlap, or diagonal flow to break standard grids.
• Balance generous negative space OR intentional density.

---

Pre-Delivery Checklist

Before delivering code, verify every item:

Visual Quality

• No emojis used as icons (SVG only).
• Typography is characterful and NOT "AI standard".
• Color scheme is unique to the context (no generic gradients).
• Hover states provide clear, stable visual feedback.

UX & Accessibility

• All interactive elements have cursor-pointer.
• Form inputs have labels; images have alt text.
• Text contrast meets 4.5:1 minimum (test Light/Dark modes).
• Responsive at all breakpoints (375px, 768px, 1024px, 1440px).
• No horizontal scroll on mobile.

---

Aesthetic Directions (Reference)

• Brutally Minimal: Monochrome, extreme white space, sparse typography.
• Maximalist Chaos: Overlapping elements, dense information, pattern mixing.
• Retro-Futuristic: Chrome effects, neon accents, 80s-inspired.
• Luxury/Refined: Gold/Dark accents, serif fonts, generous spacing.
• Playful/Toy-like: Rounded corners, bright pastels, bouncy animations.
• Editorial/Magazine: Grid-based, bold headlines, clean hierarchy.
• Brutalist/Raw: Monospace fonts, harsh contrasts, industrial.
• Art Deco: Sharp angles, metallic accents, ornate borders.

Commit to ONE direction and execute it fully—no half measures.