Commit Graph
31 Commits
Author SHA1 Message Date
Paul BakausandClaude Opus 4.6 cb596b538e Exclude teach-impeccable from suggestions, allow other installed skills
- 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>
2026-03-05 10:20:38 -08:00
Paul BakausandClaude Opus 4.6 870d65b1e3 Constrain audit/critique to only suggest real commands via {{available_commands}}
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>
2026-03-05 10:18:52 -08:00
Paul BakausandClaude Opus 4.6 87106b5271 Migrate to unified skills architecture, add Copilot & Antigravity (v2.0.0)
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>
2026-03-04 10:10:41 -08:00
Paul BakausandClaude Opus 4.6 fd99c1f391 Add antipattern examples and clean up simplify→distill rename
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-04 09:25:28 -08:00
Paul BakausandClaude Opus 4.6 4ef56ed959 Rename /simplify command to /distill to avoid Claude Code clash
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>
2026-03-04 09:11:57 -08:00
Paul BakausandClaude Opus 4.5 25f4df03f7 Strip context gathering from frontend-design skill
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>
2026-01-08 15:14:49 -08:00
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