- Anti-pattern detector script (source/skills/critique/scripts/detect-antipatterns.mjs):
CLI tool that scans files/dirs for UI anti-patterns via regex. Detects side-tab
accent borders and border-accent-on-rounded patterns across Tailwind, CSS, JSX.
Context-aware: skips safe elements (blockquotes, nav, inputs, code), neutral
colors, and adjusts thresholds based on border-radius co-occurrence.
- Browser visualizer (public/js/detect-antipatterns-browser.js):
Drop-in script that highlights anti-patterns directly in the browser with
labeled overlays. Two modes: "static" (regex, matches CLI) and "computed"
(getComputedStyle, catches CSS cascade). Scans both inline styles and
<style> blocks.
- Gallery of Shame (public/gallery.html):
Standalone page showcasing 11 AI anti-pattern examples with thumbnails
and links. Anti-pattern example pages updated from 1080x1080 Twitter
format to responsive layouts, labels removed, screenshots retaken at 16:10.
- Critique skill updated to run detector before manual review.
- Build system: skills now support scripts/ directories alongside reference/.
All 8 provider transformers refactored to use shared.js (DRY).
- 58 new tests covering detection logic, fixtures, CLI integration.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
The typeset skill universally recommended fluid sizing via clamp(),
but no major app design system (Material, Polaris, Primer, Carbon)
uses fluid type in product UI. Now recommends fixed rem scales for
app UIs and reserves fluid type for marketing/content page headings.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Starts the response with a distinctive speed-line banner
to set the tone for the skill.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Two new mandatory sections in the skill:
1. Propose Before Building — must present 2-3 directions with
trade-offs and get user confirmation before writing code. This
skill has the highest misfire potential.
2. Iterate with Browser Automation — must use browser tools to
visually verify effects and iterate. Complex effects never work
on the first try.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Skill changes:
- Remove real-time collaboration section (product decision, not UI)
- Remove service workers / offline-first (product decision)
- Remove SharedArrayBuffer (too niche)
- Replace "application architecture" section with "performance-critical
UI" — focused on making existing features feel fast
- Add explicit note: this skill enhances how UI FEELS, not what a
product DOES
Beta label:
- Add betaCommands list to data.js
- Show BETA badge on /overdrive in command palette
- Show β symbol on periodic table element
- Show BETA badge on cheatsheet page
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
The original was an effects-only skill biased toward creative
portfolios and visual spectacle. The rewrite addresses:
1. Scope: now covers ALL forms of technical ambition — performance
(virtual scrolling, WASM, Web Workers), interaction patterns
(View Transitions on dialogs, spring physics), real-time collab
(WebSockets, SharedArrayBuffer), and data visualization — not
just shaders and particles.
2. Browser support: removed Houdini Paint API (Chromium-only),
removed navigator.vibrate() (Safari never shipped, Firefox
dropped), added support notes for each technology tier.
3. Bias corrections: removed creative-portfolio-only framing,
removed "pick ONE hero moment" dogma, added examples for
functional UI (tables, forms, dialogs) and app architecture.
4. Structure: organized toolkit by what you're trying to achieve
(make transitions cinematic, push performance boundaries) not
by technology name.
5. Demo: replaced purple gradient AI slop with a structural
before/after showing view-transition-name on project cards.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
New skill that pushes interfaces past conventional limits with
bleeding-edge browser APIs: WebGPU shaders, scroll-driven animations,
View Transitions, generative art, spring physics, and more.
Key design decisions:
- Strong "when to use / when not to" guardrails
- Progressive enhancement is non-negotiable
- "Pick ONE hero moment" philosophy — restraint in choosing where
- The extraordinary/gimmicky line defined explicitly
- prefers-reduced-motion respect required
Also updates all counts to 20 commands across website, docs, and
plugin metadata.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Replace prescriptive 4pt px grid with flexible guidance (framework
scales, rem tokens, custom systems — consistency matters, not values)
- Add Flex vs Grid guidance — don't default to Grid when Flex is simpler
- Soften hierarchy advice: fewest dimensions needed, not "combine all"
- Remove margin-left optical trick (confusing, too niche)
- Remove touch target advice (belongs in /adapt and /audit)
- Add qualifier to icon centering (only adjust if confident)
- Fix position hierarchy to be about reading flow awareness, not rules
- Change hero metric from NEVER to nuanced DON'T (legitimate for real
data, problematic as default template)
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Two new skills that expose frontend-design's typography and spatial
design references as actionable, diagnostic workflows:
- /typeset: assess and improve font choices, hierarchy, sizing, weight
consistency, and readability (closes#26)
- /arrange: assess and improve layout, spacing, visual rhythm, and
grid structure
Both follow the established skill pattern (assess → plan → execute →
verify) with MANDATORY PREPARATION and context gathering.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
The AI was inferring context from the codebase instead of running
teach-impeccable on cold start. Two changes:
1. Protocol in frontend-design now explicitly says "you cannot infer
context by reading the codebase" and marks teach-impeccable as
REQUIRED, not just suggested
2. Every skill's MANDATORY PREPARATION now reinforces: "if no design
context exists yet, you MUST run teach-impeccable first"
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Normalize already has its own "Discover the design system" step in
its Plan section that handles this. No need to duplicate it in the
preparation block.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
"What's essential vs nice-to-have" is product prioritization, not
design context. The protocol already covers audience and use cases.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Moves the protocol from a separate reference file directly into
frontend-design's main SKILL.md to avoid two-level indirection
(skill → frontend-design → reference file) that could cause the
AI to miss it. Also fixes leftover "shipping timeline" in the
built polish output.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Centralizes the duplicated ~15-line MANDATORY PREPARATION blocks from
10 skills into a single shared reference file in frontend-design. Since
all skills already depend on frontend-design, the protocol is
automatically available without build system changes.
Key changes:
- New reference: frontend-design/reference/context-gathering.md with
3-tier gathering: check instructions → check .impeccable.md → auto-
invoke teach-impeccable
- teach-impeccable now writes to .impeccable.md (provider-agnostic),
optionally also to the provider config file
- 8 existing MANDATORY PREPARATION blocks replaced with 1-line pointers
- 4 skills that lacked context gathering now have it (adapt, clarify,
polish, normalize)
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
critique:
- Add MANDATORY PREPARATION block with context gathering and
{{ask_instruction}} — it was the only skill with a MANDATORY
PREPARATION section in other skills that lacked one
- Enforce frontend-design skill loading with "Do NOT proceed until..."
onboard:
- Add MANDATORY PREPARATION block — same gap as critique, onboard
jumped straight to assessment without gathering context first
- Add frontend-design skill loading
delight:
- Replace cliched loading messages ("Herding pixels", "Teaching robots
to dance", "Consulting the magic 8-ball") with product-specific
examples — these are exactly the kind of AI-generated copy the
suite's own anti-slop philosophy warns against
- Add explicit WARNING against these cliched patterns
- Change "Checkboxes that bounce" to "scale pulse" — bounce easing
contradicts the suite's consistent stance against bounce/elastic
curves (documented in motion-design reference and every skill
that mentions easing)
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Filter teach-impeccable from {{available_commands}} (setup skill, not a fix)
- Soften wording: "prefer" our commands but also allow other installed skills
the LLM is sure exist, preventing false negatives while still preventing
hallucinated commands
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Adds a dynamic {{available_commands}} placeholder that the build system
replaces with the actual list of user-invokable skill names. Audit and
critique now explicitly instruct the LLM to only suggest from this list,
preventing hallucinated commands like /redesign.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
All commands are now skills with user-invokable: true. Source lives in
source/skills/{name}/SKILL.md. Added VS Code Copilot (.agents/skills/)
and Google Antigravity (.agent/skills/) transformers. All 6 providers
output to skills directories only — no more commands/prompts dirs.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Claude Code now ships a built-in /simplify command for code
simplification, which conflicts with our design simplification
command. Renamed to /distill across all source files, demos,
metadata, and documentation.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Remove the MANDATORY: Context Gathering section since it never
works when the skill is invoked from commands. Context gathering
is now handled by the commands themselves (bolder, quieter,
colorize, animate, delight, simplify).
The skill is now leaner and focused on design principles and
anti-patterns, matching the original Anthropic skill structure.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Commands now require context gathering before proceeding:
- bolder: target audience, use-cases, brand personality
- quieter: purpose, audience, what's working
- colorize: brand colors, audience, domain appropriateness
- animate: personality, performance budget, audience
- delight: brand personality, emotional context, appropriateness
- simplify: what's essential vs nice-to-have
Each command now:
1. Gathers context from thread/codebase first
2. MUST ask user if inference confidence is medium or lower
3. MUST use frontend-design skill before proceeding
4. Has visual separator (---) as hard gate before design work
This prevents AI slop by ensuring commands have proper context
before making design decisions.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add "MANDATORY: Context Gathering (Do This First)" section with 3 procedural steps
- Require scanning codebase for README, brand guidelines, design tokens before design
- Must answer: target audience, brand personality, existing tokens/colors/fonts
- Hard gate: STOP and ask user if ANY question is unclear
- Visual separator (---) prevents proceeding without completing steps
- Preserves full Tone options and Design Direction content
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Monospace is fine when used intentionally - the issue is lazy "dev tool"
defaults, not the typeface itself.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Added explicit AI SLOP TRAP warning before planning
- Removed "monospace as accent" suggestion (contradicts skill)
- Replaced glassmorphism with grain, halftone, duotone alternatives
- Added anti-slop caveats to shadows and borders suggestions
- Added "NOT AI slop" as first verification check
- Added "the test" to verify section
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Restored DO/DON'T format in individual sections (required for website)
- Added new "Visual Details" section for glassmorphism, sparklines, etc.
- Added new AI slop patterns: gradient text, dark mode with glowing accents,
hero metric layout, identical card grids, thick colored border on one side
- Added "The AI Slop Test" section for commands to reference
- Commands now reference "DON'T guidelines" (one source of truth)
- Build now shows 16 pattern categories (was 0)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Removed scattered DON'Ts from individual Frontend Aesthetics sections
- Created ONE "Anti-Patterns (CRITICAL)" section with two sub-sections:
- AI Slop Tells: cyan-on-dark, gradient text, glassmorphism, hero metrics, etc.
- Design Anti-Patterns: gray on color, nested cards, bounce easing, etc.
- Added new pattern: "Rounded element with thick colored border on one side"
- Commands now reference the skill's Anti-Patterns section instead of duplicating
- Easier to maintain: one place to update
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Critical addition: Both commands now check for AI-generated aesthetic tells:
- Cyan-on-dark, purple-to-blue gradients, neon accents
- Gradient text, glassmorphism, hero metric layouts
- Monospace typography, sparklines as decoration
- Identical card grids, generic fonts, rounded rectangles
Reports now start with "AI Slop Verdict" - pass/fail on distinctiveness.
This is the most important quality signal for shipping work that doesn't
look like every other AI-generated interface.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Commands now say "Use the frontend-design skill" instead of passive note
- Skill's Design Thinking section now has explicit MUST-know checklist
- Added ask instruction to bolder command for context gathering
- AskUserQuestionTool instruction is now more prominent and imperative
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
The /review command conflicts with a built-in Claude Code command.
Renamed to /critique which better reflects design terminology.
- Rename source/commands/review.md → critique.md
- Update command content and descriptions
- Rename demo file and update references
- Update data.js command mappings
- Update case study example in index.html
- Rebuild dist files for all providers
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Rewrite README to be user-focused (move dev info to DEVELOP.md)
- Credit Anthropic's original frontend-design skill
- Change license from MIT to Apache 2.0 for consistency
- Add NOTICE.md with proper attribution
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- 80ms threshold for "instant" perception
- Active vs passive time (preemptive start, early completion)
- Optimistic UI patterns with appropriate use cases
- Easing affects perceived duration (peak-end effect)
- Caution: too-fast can decrease perceived value
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Reduced to most impactful items only:
- Typography: modular scale, distinctive fonts, avoid overused fonts
- Color: off-whites/near-blacks, modern CSS, no gray on color, always tint
- Layout: visual rhythm, asymmetry, grid-breaking, no card obsession, modals are lazy
- Motion: no layout animation, no bounce/elastic
- Interaction: no redundant copy
- Responsive: don't hide mobile functionality
9 categories, ~15 items total - lean and focused.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Removed items that are:
- Accessibility 101 (WCAG, color blindness, reduced motion, focus indicators)
- Basic design principles (hierarchy, readability, semantic tokens)
- Well-known rules (2-3 fonts max, mobile-first, decorative body fonts)
Kept items that fight specific AI biases:
- Off-whites/near-blacks, dominant color with accents
- Spacing scales, asymmetry, staggered reveals
- Bounce/elastic easing ban, cards-on-cards
- Gray text on color, placeholder-as-labels, generic errors
Reduced from 60 items to 34 - more focused and actionable.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Updated claude-code transformer to generate markdown from YAML patterns/antipatterns
- Removed redundant prose body from patterns.md
- SKILL.md now contains detailed lists (5 items per category) instead of condensed prose
- patterns.md YAML frontmatter is now the single source of truth for both:
- Website API (/api/patterns)
- Generated skill files
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Major changes:
- Consolidate 8 design skills into single frontend-design skill with 7 reference files
- Add source/patterns.md as single source of truth for patterns/antipatterns
- Patterns are merged into skill during build, served via API for website
- Website now dynamically renders both "What TO Do" and "What NOT to Do" sections
- Update build system to handle directory-based skills with references
- Add /api/patterns endpoint to server
- Refactor website with new Antidote section layout
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
