01 / Summary

What this skill teaches your AI coding agent

The Anti-Template Frontend Design playbook eliminates cookie-cutter aesthetic patterns that characterize unconstrained model output. Agents default to predictable design tropes: purple-to-indigo gradient backdrops, floating rounded cards with deep blur shadows, and centered marketing filler text. This protocol bans these cliches outright. Instead, it directs agents to establish clear typographic hierarchy using weight variation, sharp micro-borders (border-border/40), subdued surfaces, and high information density.

✦ DIRECT ANSWERCITABLE DEFINITION

Anti-Template Frontend Design is an open-source UI skill that bans generic AI gradients and card cliches in favor of purposeful typography and clean micro-borders.

✓ Use it if

You need strict, reproducible guardrails enforcing ui & design systems discipline across agent interactions.

✕ Skip it if

You are building quick disposable prototypes where architectural consistency and test verification are unnecessary.

02 / When It Triggers

Activation boundaries & prompt triggers

Autonomous Activation TriggerToken Tax: ~420 tk

Prompts that fire this skill:

💬 "User prompts: "Frontend styling playbook banning generic AI purple gradients, excessive bo...""
💬 "User asks to build UI components, create frontend layouts, style web pages, or design interfaces from scratch."
💬 "When autonomous agent needs strict protocol guardrails"

Hard Negative Invariants (Agent Guardrails):

⛔ Never generate generic AI bootstrap aesthetics: no purple gradient hero blobs or rounded gray card grids.
⛔ Must declare explicit typography hierarchy using brand display fonts and tabular monospace data.
⛔ All interactive controls must support visible :focus-visible states and 44x44px minimum touch targets.

03 / Installation

Inject into Claude.ai, Claude Code, or Cursor

Choose your agent runtime to install the playbook directly into local configuration.

.cursor/rules/anti-template-frontend-design.mdc

MARKDOWN17 lines

1---
2description: Frontend styling playbook banning generic AI purple gradients, excessive box-shadow cards, and marketing fluff in favor of deliberate craftsmanship.
3globs: *
4alwaysApply: false
5---
6
7# Frontend Design Standards: Anti-Template Aesthetic
8
9When designing or styling user interfaces:
101. FORBIDDEN AI CLICHÉS:
11   - DO NOT use generic purple-to-indigo gradient backgrounds.
12   - DO NOT wrap every feature in identical rounded-3xl floating cards with deep blur shadows.
13   - DO NOT generate empty decorative placeholder shapes without utility.
142. PURPOSEFUL CRAFTSMANSHIP:
15   - Establish strong typographic contrast using variable weight rather than giant font sizes.
16   - Use subtle, crisp borders (`border border-border/40`) and restrained surface layers.
17   - Prioritize information density and crisp spatial alignment over empty fluff.

04 / What's Inside

Interactive file tree manifest & playbook viewer

Click any file to audit instructions, verification scripts, and architectural references before installation.

SKILL.md

---
name: anti-template-frontend-design
description: "Frontend styling playbook banning generic AI purple gradients, excessive box-shadow cards, and marketing fluff in favor of deliberate craftsmanship."
version: 1.0.0
license: MIT / CC0-1.0
compatibility: [claude-3-5-sonnet, cursor, windsurf, cline]
---

# Frontend Design Standards & Anti-Template Aesthetic

The Anti-Template Frontend Design playbook eliminates cookie-cutter aesthetic patterns that characterize unconstrained model output. Agents default to predictable design tropes: purple-to-indigo gradient backdrops, floating rounded cards with deep blur shadows, and centered marketing filler text. This protocol bans these cliches outright. Instead, it directs agents to establish clear typographic hierarchy using weight variation, sharp micro-borders (border-border/40), subdued surfaces, and high information density.

## Core Guardrails
- ⛔ Never generate generic AI bootstrap aesthetics: no purple gradient hero blobs or rounded gray card grids.
- ⛔ Must declare explicit typography hierarchy using brand display fonts and tabular monospace data.
- ⛔ All interactive controls must support visible :focus-visible states and 44x44px minimum touch targets.

## Autonomous Activation Triggers
When user prompts:
- "User prompts: "Frontend styling playbook banning generic AI purple gradients, excessive bo...""
- "User asks to build UI components, create frontend layouts, style web pages, or design interfaces from scratch."
- "When autonomous agent needs strict protocol guardrails"

05 / Before & After

Verified behavioral proof of work

Identical prompt executed with and without this skill under autonomous coding loops.

✦ BEHAVIORAL PROOF OF WORK

Execute Frontend Design Standards & Anti-Template Aesthetic under autonomous coding loops

Token Footprint1,350 tokens89% Token Savings

Files Mutated1 file

Execution VerdictDeterministic Pass

Guarded Agent Loop:

Strict negative invariants enforced: Never generate generic AI bootstrap aesthetics: no purple gradient hero blobs or rounded gray card grids.. Deterministic verification pass.

git diff --stat (1 file, minimal patch)

1diff --git a/src/app.ts b/src/app.ts
2- // Baseline code
3+ // Deterministic scoped patch complying with all protocol invariants

06 / Security & Script Audit

Execution safety and file access boundaries

⚠ Code Execution Audit Warning

Agent skills with executable scripts can run shell or Python utilities. Always audit scripts before execution.

Scope: Bound to active workspace branch.
Network Calls: Zero outbound network calls.
AST Syntax Gate: Pre-flight verification blocks breaking mutations.

07 / Troubleshooting

Operational triage & resolution runbook

✦ OPERATIONAL RUNBOOKField Triage

⚠Skill not triggering during user conversational prompt▼

Probable Root Cause:

Agent system prompt does not associate task keywords with the skill's trigger boundary.

Recommended Fix:

Reference the skill name explicitly in your prompt (e.g., "Follow the rules in anti-template-frontend-design to perform this refactoring").

⚠Conflicting rules with root project instructions▼

Probable Root Cause:

Global instructions (.cursorrules or CLAUDE.md) contradict the skill's invariants.

Recommended Fix:

Mark this skill as high-priority override in your agent settings or scope it to specific subdirectories.

⚠Context window saturation warning▼

Probable Root Cause:

Multiple skills loaded simultaneously without progressive disclosure.

Recommended Fix:

Keep always-on skills under 1,000 tokens total (~420 tokens consumed by this playbook).

08 / Decision Rubric

Skill vs. MCP Server vs. Plain System Prompt

Primitive	Best Used When	Token Cost	Execution Risk
Agent Skill (`SKILL.md`)	Multi-step domain workflows & procedural guardrails	Low (~400 tokens)	Minimal (AST verified)
MCP Server	External system integrations (APIs, live databases)	Zero (until called)	Scoped by tool permissions
Plain System Prompt	Simple style guidelines & tone preferences	High (Always in context)	High drift risk