Commit Graph
24 Commits
Author SHA1 Message Date
Paul Bakaus d85efab51f Refine homepage layout: install, Stay updated, Changelog/FAQ, Visual Mode
- Restructure install section into a split primary card with the
  recommended path on the left and other install methods on the right
- Drop the prefix toggle UI; bundle name is now baked into data-bundle
- Balance the Stay updated step as paired Substack iframe + X follow card
  with matching height, border, and treatment
- Pair Changelog and FAQ side-by-side on desktop with a centered divider
  and shared border-top; section nav highlights both when in view
- Tone down the Visual Mode demo by removing side-tab borders, stacked
  card icons, and tiny body text so the overlay reads cleanly
- Refine the Chrome extension callout: drop the pill badge, use an
  editorial eyebrow above the title, enlarge the thumbnail
- Exclude private evals/ directory from version control
2026-04-07 18:37:08 -07:00
Paul BakausandClaude Opus 4.6 0566a60dfa Fix anti-patterns flagged by Impeccable on the homepage
- Hero demo card no longer uses <h3> for its title, fixing the
  h1 → h3 skip in the document outline. The "after" card now uses
  <p class="impeccable-title"> matching the structure of the
  corresponding "before" slop-card (which already used a <div>).
- Constrains .changelog-items and .faq-answer to max-width: 70ch so
  long bullet points and FAQ paragraphs don't exceed comfortable
  reading length (was hitting ~135 chars/line).
- Bumps the destructive-action warning text in the /clarify command
  demo from #a16207 to #854d0e on #fef3c7, lifting the contrast from
  4.4:1 (just below WCAG AA) to ~6.4:1.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-07 00:59:31 -07:00
Paul BakausandClaude Opus 4.6 83330a66cb Update commands grid layout and impeccable command demo
Adds the three /impeccable usage modes (freeform, teach, craft) to the
command demo, with a clearer multi-pane layout. Also tightens the
commands grid spacing on the site and refreshes the framework viz and
glass terminal styles for consistency.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-06 21:34:56 -07:00
Paul BakausandClaude Opus 4.6 9ccdb9148a Reorganize periodic table, remove validate skill
New categories that distinguish create-new vs improve-existing:
- Create: shape, impeccable craft, impeccable, onboard, overdrive
- Evaluate: critique, audit
- Refine: typeset, arrange, colorize, animate, delight, bolder, quieter
- Simplify: distill, clarify, adapt
- Harden: normalize, polish, optimize, harden
- System: impeccable teach, extract

Also: remove Dt (detect CLI) from table, remove validate skill,
split /impeccable into its sub-commands (craft, teach).

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-05 18:05:47 -07:00
Paul BakausandClaude Opus 4.6 4b356a6b5b Improve mobile experience across all sections
Hero: reorder visual above text on mobile, shorter tagline, tighter spacing.
Antidote: horizontal scroll tabs, proper touch targets on gallery nav.
Commands: cleaner pill styles matching pattern tabs, flat demo area.
Get Started: constrain cards to viewport width (min-width: 0 fix),
wrap terminal commands, stack "best together" callout vertically.
FAQ/Changelog: mobile breakpoints with touch-friendly sizing.
Footer: tighter gaps and centered links on mobile.
General: bump minimum font sizes, fix section nav at 400px.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-02 11:26:43 -07:00
Paul BakausandClaude Opus 4.6 b5cd306e70 Redesign Get Started section: three-column layout with skills, CLI, and stay updated
- Replace sequential steps with three-column grid (skills/CLI/stay updated)
- Skills column (step 1) gets visual prominence with wider column and Recommended badge
- CLI column (step 2) shows install, subcommands, npm link, Beta badge
- Stay updated column (step 3) leads with Substack embed + X follow, quick refs below
- Add "Best together" callout matching detection-callout pattern
- Unify font sizes and spacing across all columns
- Left-align section content to match rest of page
- Remove demo-caption background, section divider on wide viewports
- Fisheye starts on /clarify for balanced top/bottom
- Magazine container gets white background containment on wide viewports
- Spread-flow stays on one line (nowrap)
- Remove demo-caption background from skill-demos.css

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-01 10:20:38 -07:00
Paul BakausandClaude Opus 4.6 107aa8b7e1 Refine Commands section: fisheye alignment, category ordering, install step
- Shrink fisheye list to 400px and vertically center it so items align
  with magazine spread content area
- Sharpen fisheye mask gradient for cleaner edge fade
- Prevent spread-flow ("leads to" etc.) from wrapping to multiple lines
- Sort fisheye/spread commands by category order instead of arbitrary
- Add beta badges to fisheye items
- Remove border-right on spread-identity and border-top on demo caption
- Add "Teach it your design" as step 2 in Get Started section
- Make spread-command-name nowrap, remove word-break/hyphens

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-31 11:01:49 -07:00
Paul BakausandClaude Opus 4.6 39930a4186 Fix fisheye: absolute positioning with scroll-compensated centering
Rewrote fisheye layout to use position:absolute items with accumulated
scaled heights. Active item always stays at vertical center by adding
scrollTop to the offset calculation. Spacing compresses naturally for
scaled-down items. Gentler opacity fade (0.3 floor) so size is the
primary visual cue. Tighter CSS mask edges.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-31 09:55:02 -07:00
Paul BakausandClaude Opus 4.6 487ac0cf3a Redesign Commands section: magazine spread + fisheye nav
Replace the old scrollspy + glass terminal layout with:
- Editorial magazine spread: one command at a time with big display
  type name, category label, description, relationships, and
  before/after demo
- Fisheye command list: vertical scrollable list with transform-based
  scale effect (0.4x to 1.0x), smooth center detection, synced to
  the active spread. Index-based math avoids layout oscillation.
- Removed deprecated commands (teach-impeccable, frontend-design)
  from the browsable list
- Removed transition lock that blocked rapid scrolling updates
- Mobile layout preserved (existing carousel)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-31 08:20:48 -07:00
Paul BakausandClaude Opus 4.6 685728b992 Redesign install section as two-step flow with Substack newsletter
Restructure the Install section into a "Get Started" two-step flow:
1. Install the skills (npx as primary, alternatives collapsible)
2. Stay up to date (embedded Substack subscribe form)

- Elevate npx command as the sole primary install method
- Collapse Claude Code marketplace and manual ZIP into expandable alternatives
- Replace hidden prefix toggle with prominent radio card selector
- Download button dynamically updates label based on prefix choice
- Add Substack newsletter embed (impeccablestyle.substack.com)
- Add newsletter link to footer alongside blog link
- Normalize button styles for consistency (square corners for actions)
- Add newsletter icon assets (SVG + PNG) for Substack branding

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-27 13:03:30 -07:00
Paul BakausandClaude Opus 4.6 8d1937d3c9 Homepage UX improvements from design critique
- Add floating bottom section nav (appears after hero, hides at footer)
- Fix hero split comparison to default 50/50 instead of 70/30
- Remove duplicate "Works with" badges from Install section
- Periodic table: restore compact elements, add inline hover tooltips
- Truncate command descriptions in Commands section for scannability
- Collapse older changelog entries behind "View older releases"
- Add GitHub star count (13.3k) next to repo link
- Fix meta theme-color to match light mode
- Reduce hero top padding, update section 03 subtitle
- Clean up footer: remove redundant tagline and anchor links
- Fix divider line accumulation in changelog and FAQ sections
- Center glass terminal vertically in viewport

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-24 19:22:12 -07:00
Paul BakausandClaude Opus 4.6 9bdb836903 Mark overdrive as beta, remove product-level suggestions
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>
2026-03-16 11:42:59 -07:00
Paul BakausandClaude Opus 4.6 74c5cb3b41 Add changelog section and bump version to 1.1.0
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-04 09:23:36 -08:00
Paul BakausandClaude Opus 4.5 517fcfe47e Increase sticky panel top offset for breathing room
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-16 10:56:20 -08:00
Paul BakausandClaude Opus 4.5 d7c8a5c67c Tone down copy and fix UI inconsistencies
- Remove overpromising "transform into impeccable design" claim
- Tone down marketing language throughout (design intelligence, level up, etc.)
- Change "our" to "the" for neutral voice
- Combine Support and Consulting into single "Work with me" section
- Fix double-border on command demo panel (match border-radius)
- Remove border-top from demo captions

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-16 10:53:27 -08:00
Paul BakausandClaude Opus 4.5 9810e304e0 Reduce whitespace, normalize typography, and streamline layout
- Reduce spacing scale tokens (spacing-lg: 32px, spacing-xl: 48px, spacing-2xl: 80px)
- Normalize body text to consistent 1rem size and color across sections
- Section numbers now appear above headings for proper text alignment
- Left-align all content sections for consistent rhythm
- Combine Support and Consulting sections into single "Work with me" section
- Simplify contribute CTA to inline text link
- Remove unused support section CSS
- Fix FAQ list alignment with section header
- Update copy to use "Impeccable" instead of "we"

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-16 10:32:23 -08:00
Paul BakausandClaude Opus 4.5 6b77213f91 Redesign hero, add theme toggle, fix dark mode
- Remove GPU-intensive shader from hero section
- Combine hero with problem section for immediate impact
- Add before/after demo directly in first viewport
- Move "works with" logos inline with CTA
- Remove redundant "Common AI defaults" tags

- Add three-way theme toggle (light/system/dark)
- Persist theme preference to localStorage
- Position toggle in bottom-right corner

- Fix dark mode throughout:
  - Update glass terminal and source window backgrounds
  - Add CSS custom properties for framework category colors
  - Muted dark backgrounds with brighter text for cards

- Replace smooth scroll with instant jump for anchor links
- Remove Lenis smooth scroll library dependency

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-11 14:37:46 -08:00
Paul BakausandClaude Opus 4.5 bd76b63b8e Add FAQ section with accordion-style questions
Covers:
- Where to put downloaded files (project vs global)
- Troubleshooting missing commands/skills
- Getting started resources for beginners

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-08 09:08:40 -08:00
Paul BakausandClaude Opus 4.5 af21bf2d34 Add tabbed case studies, CLAUDE.md, and various improvements
- Convert "See It In Action" section to tabbed interface for space efficiency
- Add CLAUDE.md with project instructions for CSS build process
- Update README with additional documentation
- Enhance glass terminal component
- Add new API handlers and server routes

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-07 18:08:04 -08:00
Paul Bakaus 6987e6e160 more fixes 2025-12-15 16:55:21 -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 99f1091f20 more progress 2025-12-14 13:55:29 -08:00
Paul Bakaus 1bdb3ea17a Redesign website with interactive demos and improved layout
- Add interactive before/after demos for all skills (UX Writing, Spatial Design, Motion Design, Typography, Interaction Design, Color & Contrast, Responsive Design)
- Implement tabbed demo navigation for skills with multiple examples
- Refactor app.js into modular JS files (skills.js, commands.js, data.js, skill-demos.js, command-demos.js, demo-toggles.js)
- Add new CSS modules (skill-demos.css, workflow.css, problem-section.css, solution-section.css)
- Redesign commands section with sidebar nav matching skills layout
- Replace large download buttons with compact icon buttons
- Fix gray-on-pink color clashing throughout UI
- Remove frontend-design skill (Anthropic's work, not ours)
- Format skill names properly (e.g., 'UX Writing' not 'ux-writing')
- Remove redundant 'Combines Well With' from skills
- Add 'The Problem' and 'The Solution' sections to homepage
- Various CSS fixes for buttons, backgrounds, and spacing
2025-12-06 12:33:00 -08:00