Merged
Conversation
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>
Deploying impeccable with
|
| Latest commit: |
eede321
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://98e3e801.impeccable-2rv.pages.dev |
| Branch Preview URL: | https://feat-typeset-arrange-skills.impeccable-2rv.pages.dev |
- Add to data.js (process steps, categories, relationships) - Add to framework-viz.js (periodic table symbols and numbers) - Create before/after demos for both commands - Update command count 17→19 across all locations: index.html, cheatsheet.html, README, NOTICE, AGENTS, plugin.json, marketplace.json - Add critique→typeset/arrange in relationship flow - Add "Adding New Skills" checklist to CLAUDE.md so future skill additions don't miss any locations 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>
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>
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>
The demo must be purely visual (hover slider reveals after state, no clicking). New demo shows standard rectangular card vs organic blob-shaped composition — the visual difference is instant and communicates "beyond normal CSS" without animation or interaction. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Demo: - Laser-etched "Paul Bakaus" signature drawn in real-time on dark surface, adapted from pbakaus/shaders laser-precision - Two-canvas architecture: persistent burn canvas + cleared-per-frame spark overlay to prevent pixel accumulation - Smooth quadraticCurveTo rendering for fluid signature strokes - Sparks with motion trails, multi-layer tip glow Infrastructure: - Add init() support for command demos — JS can now execute after demo HTML is inserted into the DOM - Fix split-compare retriggerAnimations to not destroy canvas elements (clone-and-replace for CSS-only demos, individual retrigger when canvas is present) - Add deep linking to commands (#cmd-overdrive etc.) with hash tracking and initial load support - Remove auto-#hero hash — hero is the default state Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Typeset: make the before worse (all text same size/color = no hierarchy) and the after more dramatic (bigger heading, more size contrast). The transformation should be instantly visible on hover. Arrange: fix heading split (eyebrow+heading was a typeset change, not arrange) — keep it as a single heading to stay on-brand. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
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>
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>
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>
New in v1.5.0: - 3 new skills: /typeset, /arrange, /overdrive (beta) - Shared Context Gathering Protocol with .impeccable.md - teach-impeccable writes provider-agnostic context - Deep linking to commands (#cmd-overdrive etc.) - JS-powered demo infrastructure with live laser signature Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
/typeset: Assess and improve font choices, hierarchy, sizing, weight consistency, and readability. Closes Pattern suggestion: /typography #26./arrange: Assess and improve layout, spacing, visual rhythm, and grid structure.Both fill gaps in the skill coverage — frontend-design already has rich reference files for typography and spatial design, but there were no action-oriented skills to expose them. These follow the established pattern (assess → plan → execute → verify) with MANDATORY PREPARATION and context gathering.
Coverage map after this PR
/typeset(new)/colorize/animate/arrange(new)/adapt/onboard,/delight,/harden/clarifyTest plan
bun run buildsucceeds (20 skills, 19 commands)bun testpasses (210 tests)/typeseton a project with generic fonts — should diagnose and fix/arrangeon a project with monotonous spacing — should diagnose and fix🤖 Generated with Claude Code