Commit Graph
25 Commits
Author SHA1 Message Date
Paul BakausandClaude Opus 4.5 020ac82748 Add mandatory preparation to design-transformative commands
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>
2026-01-08 15:11:05 -08:00
Paul BakausandClaude Opus 4.5 825d936f20 Add mandatory context gathering to frontend-design skill
- 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>
2026-01-08 14:48:40 -08:00
Paul BakausandClaude Opus 4.5 41a557a675 Remove context: fork from commands (blocks AskUserQuestionTool)
Removed from: critique, audit, extract

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-08 14:22:15 -08:00
Paul BakausandClaude Opus 4.5 7d43765600 Allow monospace as intentional accent in bolder command
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>
2026-01-08 14:11:49 -08:00
Paul BakausandClaude Opus 4.5 c4c5661392 Harden bolder command against AI slop
- 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>
2026-01-08 14:11:05 -08:00
Paul BakausandClaude Opus 4.5 e4f2ef361e Fix pattern parsing: restore DO/DON'T format, add Visual Details section
- 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>
2026-01-08 14:04:19 -08:00
Paul BakausandClaude Opus 4.5 46fa43ced6 Consolidate all anti-patterns into single skill section
- 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>
2026-01-08 13:59:13 -08:00
Paul BakausandClaude Opus 4.5 6bad6f1555 Add AI Slop Detection to critique and audit commands
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>
2026-01-08 13:50:22 -08:00
Paul BakausandClaude Opus 4.5 ee4d2e1098 Fix skill invocation and make ask instruction more prominent
- 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>
2026-01-08 13:38:00 -08:00
Paul BakausandClaude Opus 4.5 d7937b1844 Rename /review command to /critique to avoid Claude conflict
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>
2026-01-07 18:57:55 -08:00
Paul BakausandClaude Opus 4.5 0b9c1846a6 Add teach-impeccable and review commands, dynamic placeholders
New commands:
- /teach-impeccable: One-time setup that gathers UX-focused design
  context (explores codebase first, then asks targeted questions)
- /review: UX design review evaluating hierarchy, clarity, emotional
  resonance (complements technical /audit)

Build system improvements:
- Dynamic {{model}}, {{ask_instruction}}, {{config_file}} placeholders
  per provider (Claude/Gemini/GPT/the model)
- context: fork support for Claude Code sub-agents (audit, extract)
- Skill reference auto-added to design commands

Skill refinements:
- Merged Design Thinking and Context Awareness sections
- Removed redundant patterns and technical questions
- More direct feedback guidance (radical candor)

Website updates:
- 17 commands (was 16)
- Review demo showing UX issues (HIERARCHY, NO PRIMARY, DEAD END)
- teach-impeccable in System group of periodic table

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-07 16:56:08 -08:00
Paul BakausandClaude Opus 4.5 8186f2a226 Update README and license to Apache 2.0
- 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>
2026-01-07 09:50:53 -08:00
Paul Bakaus 8d5260a26d new patterns 2025-12-16 18:00:03 -08:00
Paul BakausandClaude Opus 4.5 2356ae7f2f Add perceived performance section to motion-design reference
- 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>
2025-12-16 17:39:44 -08:00
Paul BakausandClaude Opus 4.5 fccfde2a0b Trim skill and reference files for conciseness (~56% reduction)
- Remove redundant intro scaffolding from all reference files
- Cut basic code examples LLMs already know (CSS vars, simple patterns)
- Keep non-obvious techniques (OKLCH, fallback fonts, container queries, etc.)
- Simplify SKILL.md reference section to single-line links
- Total: 1,908 → 838 lines across skill + 7 reference files

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2025-12-16 17:34:03 -08:00
Paul BakausandClaude Opus 4.5 fe5741d01b Further trim patterns to essential AI-bias-fighting guidance
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>
2025-12-16 16:46:40 -08:00
Paul BakausandClaude Opus 4.5 8e4f48566f Trim patterns to non-obvious, AI-bias-fighting guidance only
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>
2025-12-16 15:42:28 -08:00
Paul BakausandClaude Opus 4.5 df981860c2 Generate patterns section from YAML data (single source of truth)
- 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>
2025-12-16 15:35:38 -08:00
Paul BakausandClaude Opus 4.5 7c3e76663b Enhance all commands with consistent design principles
Commands updated with specific improvements:
- audit: Added Design Anti-Patterns section (pure gray, gray-on-color, nested cards, bounce/elastic, redundant copy)
- polish: Updated easing guidance, added tinted neutrals and gray-on-color checks
- animate: Added Timing & Easing section with quart/quint/expo curves, bounce/elastic warning
- bolder: Fixed color section (avoid purple-blue gradients), proper easing
- quieter: Added tinted grays guidance, gray-on-color fix
- simplify: Added nested cards warning, redundant copy removal
- colorize: Added OKLCH recommendation, gray-on-color fix
- clarify: Added redundant copy and placeholder-as-label warnings
- delight: Fixed spring animation to use ease-out-quart

Also fixed gray-on-color wording across all files:
- Use "shade of the background color" not "tinted text"

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2025-12-16 10:56:51 -08:00
Paul BakausandClaude Opus 4.5 3d9f4ae5df Fill in all sub-skill reference files with non-obvious design guidance
- typography.md: vertical rhythm math, modular scale, distinctive fonts, font loading
- color-and-contrast.md: OKLCH, tinted grays, gray-on-color warning, pure gray/black
- motion-design.md: quart/quint/expo curves, bounce/elastic warning, stagger formula
- spatial-design.md: 4pt base, gap over margin, card restraint, no nested cards
- responsive-design.md: content-driven breakpoints, clamp formula, pointer queries
- interaction-design.md: focus-visible, optimistic updates, inert/popover APIs
- ux-writing.md: button labels, error formula, empty states, redundant copy

Updated patterns.md with:
- Pure gray warning (not just black/white)
- Bounce/elastic easing anti-pattern
- Redundant copy anti-pattern

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2025-12-16 10:34:42 -08:00
Paul Bakaus e9ebb5a4d9 better demos 2025-12-15 15:19:27 -08:00
Paul BakausandClaude Opus 4.5 2181137d04 Consolidate skills + add patterns source file
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>
2025-12-15 14:08:30 -08:00
Paul Bakaus 89d179143b stubs and website 2025-11-16 18:52:23 -08:00
Paul Bakaus 7ba3f3fffd improve normalize skill based on peer learnings of Anthropic's approach 2025-11-16 15:02:58 -08:00
Paul Bakaus 661293796c initial commit and build out 2025-11-16 14:54:35 -08:00