mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-11 21:57:14 +03:00
Consolidate 18 skills into 1 /impeccable skill with 20 commands
Biggest change in a while. Users previously had 18 standalone skill
entries cluttering their /menu; now they have one entry (/impeccable)
that routes to 20 specialized commands via argument dispatch. The pin
mechanism (/impeccable pin audit) restores standalone shortcuts on
demand for commands users hit all the time.
## Architecture
- Single /impeccable skill with command router section in SKILL.md
- 20 commands served via reference files under source/skills/impeccable/reference/
- /impeccable pin <command> creates a lightweight redirect shim so users
who prefer /audit, /polish, etc. can still have them
- Context gathering (teach) auto-runs on first use
- command-metadata.json is the single source of truth for command
descriptions, argument hints, and relationships
## Site rewrite
- Docs URL: /skills renamed to /docs (with /skills permanent redirects)
- Homepage hero frames Impeccable as "one skill with 20 commands"
- "Get Started" split into 50/50 install + how-to-use with editorial
numbered steps, /impeccable shown as the home command with three modes
- New /docs overview: home command hero card + dense category rows
matching the old cheatsheet density, with leads-to/pairs-with/
combines-with relationship metadata served from a shared source
- Cheatsheet merged into /docs, /cheatsheet redirects
- Magazine spread and mobile cards show /impeccable as a stacked
namespace label above the command name at full display size
- Periodic table updated with craft/teach/extract as first-class cells
- Skill detail pages generate from reference files, with an editorial
wrapper per command for tagline + body
- Tutorials and anti-patterns pages updated to use /impeccable <cmd>
## Build system
- Dead code removed (scripts/lib/transformers/shared.js)
- Build log wording fixed ("1 skill" not "1 skills (1 user-invocable)")
- generateApiData fallback branch removed (throws loudly if metadata
missing instead of silently degrading)
- Commands API includes editorial tagline alongside the long description;
UI surfaces prefer tagline for human display, description for auto-
trigger keyword matching
## Gitignore
- Added .claude/scheduled_tasks.lock, .claude/settings.local.json to
ignore list (local Claude Code state that should not be tracked).
- Harness skill directories (.claude/skills/, .agents/skills/, etc.)
remain tracked by design: npx skills reads them from this repo at
install time and they enable clean submodule use.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Paul Bakaus
co-authored by
Claude Opus 4.6
Claude Opus 4.6
parent
f957fcad20
commit
b0f44f83c6
@@ -1,16 +1,20 @@
|
||||
---
|
||||
name: impeccable
|
||||
description: Create distinctive, production-grade frontend interfaces with high design quality. Generates creative, polished code that avoids generic AI aesthetics. Use when the user asks to build web components, pages, artifacts, posters, or applications, or when any design skill requires project context. Call with 'craft' for shape-then-build, 'teach' for design context setup, or 'extract' to pull reusable components and tokens into the design system.
|
||||
description: "Design fluency for frontend interfaces. Build distinctive, production-grade web components, pages, artifacts, posters, and applications with high design quality. Also handles: critique/review/evaluate designs, audit accessibility/performance/responsive, polish finishing touches, improve typography/fonts/readability, fix layout/spacing/hierarchy, add animation/transitions/motion, adapt for mobile/tablet/responsive, simplify/declutter/distill, amplify bland/generic/safe designs, tone down loud/overwhelming designs, add color to gray/monochromatic interfaces, improve UX copy/labels/error messages, harden for production with edge cases/i18n/errors/empty states, optimize slow/laggy performance, plan UX before coding, extract design tokens, or push boundaries with shaders/physics/scroll effects. Commands: craft, teach, extract, pin, audit, critique, polish, shape, adapt, animate, bolder, quieter, colorize, clarify, delight, distill, harden, layout, optimize, overdrive, typeset."
|
||||
version: 2.1.1
|
||||
user-invocable: true
|
||||
argument-hint: "[craft|teach|extract]"
|
||||
argument-hint: "[command] [target]"
|
||||
license: Apache 2.0. Based on Anthropic's frontend-design skill. See NOTICE.md for attribution.
|
||||
allowed-tools:
|
||||
- Bash(npx impeccable *)
|
||||
---
|
||||
|
||||
This skill guides creation and editing/iteration of distinctive, production-grade frontend interfaces. Implement real working code with exceptional attention to aesthetic details and creative choices.
|
||||
|
||||
<post-update-cleanup>
|
||||
BEFORE doing any design work, run this one-time maintenance step. Tell the user:
|
||||
|
||||
> **Impeccable was updated.** A few skills were renamed or merged in this version (e.g. `/arrange` is now `/layout`, `/normalize` was folded into `/polish`). I'll clean up the old skill files so they don't clutter your project. This only runs once after an update.
|
||||
> **Impeccable 3.0 consolidation.** All standalone commands (/audit, /polish, /critique, etc.) are now accessed through /impeccable (e.g., `/impeccable audit`). I'll clean up the old standalone skill files. Use `/impeccable pin <command>` to restore shortcuts for commands you use often.
|
||||
|
||||
Then run:
|
||||
|
||||
@@ -23,8 +27,6 @@ If the script removed files, briefly confirm what was cleaned up. If it found no
|
||||
After running the script, delete this entire section (from `<post-update-cleanup>` through `</post-update-cleanup>` inclusive) from THIS file so it does not run again until the next update. Save the file.
|
||||
</post-update-cleanup>
|
||||
|
||||
This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.
|
||||
|
||||
## Context Gathering Protocol
|
||||
|
||||
Design skills produce generic output without project context. You MUST have confirmed design context before doing any design work.
|
||||
@@ -34,7 +36,7 @@ Design skills produce generic output without project context. You MUST have conf
|
||||
- **Use cases**: What jobs are they trying to get done?
|
||||
- **Brand personality/tone**: How should the interface feel?
|
||||
|
||||
Individual skills may require additional context. Check the skill's preparation section for specifics.
|
||||
Individual sub-commands may require additional context. Check the commands' preparation section for specifics.
|
||||
|
||||
**CRITICAL**: You cannot infer this context by reading the codebase. Code tells you what was built, not who it's for or what it should feel like. Only the creator can provide this context.
|
||||
|
||||
@@ -270,7 +272,7 @@ Make interactions feel fast. Use optimistic UI: update immediately, sync later.
|
||||
|
||||
A distinctive interface should make someone ask "how was this made?" not "which AI made this?"
|
||||
|
||||
Review the DON'T guidelines above. They are the fingerprints of AI-generated work from 2024-2025.
|
||||
Review the DON'T guidelines above. They are the fingerprints of AI-generated work.
|
||||
|
||||
---
|
||||
|
||||
@@ -284,82 +286,96 @@ Remember: Claude is capable of extraordinary creative work. Don't hold back. Sho
|
||||
|
||||
---
|
||||
|
||||
## Craft Mode
|
||||
## Command Router
|
||||
|
||||
If this skill is invoked with the argument "craft" (e.g., `/impeccable craft [feature description]`), follow the [craft flow](reference/craft.md). Pass any additional arguments as the feature description.
|
||||
This skill supports sub-commands. Parse the first word of the argument string to determine routing.
|
||||
|
||||
### Routing rules
|
||||
|
||||
1. **No argument at all** (user typed just `/impeccable`): Display the command menu below, then ask the user what they'd like to do.
|
||||
2. **First word matches a sub-command**: Route to that command's reference file. Everything after the sub-command name is the target.
|
||||
3. **First word does NOT match any sub-command**: This is a general design invocation. Follow the Design Direction and Implementation Principles above, using the full argument string as context.
|
||||
|
||||
### Command menu (display when invoked with no argument)
|
||||
|
||||
> **Available commands:**
|
||||
>
|
||||
> **Build & Plan**
|
||||
> `/impeccable craft [feature]` - Shape, then build a feature end-to-end
|
||||
> `/impeccable shape [feature]` - Plan UX/UI before writing code
|
||||
> `/impeccable teach` - Set up design context for this project (one-time)
|
||||
> `/impeccable extract [target]` - Pull reusable tokens and components into design system
|
||||
>
|
||||
> **Evaluate**
|
||||
> `/impeccable critique [target]` - UX design review with heuristic scoring
|
||||
> `/impeccable audit [target]` - Technical quality checks (a11y, perf, responsive)
|
||||
>
|
||||
> **Refine**
|
||||
> `/impeccable polish [target]` - Final quality pass before shipping
|
||||
> `/impeccable bolder [target]` - Amplify safe/bland designs
|
||||
> `/impeccable quieter [target]` - Tone down aggressive/overstimulating designs
|
||||
> `/impeccable distill [target]` - Strip to essence, remove complexity
|
||||
> `/impeccable harden [target]` - Production-ready: errors, i18n, edge cases
|
||||
>
|
||||
> **Enhance**
|
||||
> `/impeccable animate [target]` - Add purposeful animations and motion
|
||||
> `/impeccable colorize [target]` - Add strategic color to monochromatic UIs
|
||||
> `/impeccable typeset [target]` - Improve typography hierarchy and fonts
|
||||
> `/impeccable layout [target]` - Fix spacing, rhythm, and visual hierarchy
|
||||
> `/impeccable delight [target]` - Add personality and memorable touches
|
||||
> `/impeccable overdrive [target]` - Push past conventional limits
|
||||
>
|
||||
> **Fix**
|
||||
> `/impeccable clarify [target]` - Improve UX copy, labels, and error messages
|
||||
> `/impeccable adapt [target]` - Adapt for different devices and screen sizes
|
||||
> `/impeccable optimize [target]` - Diagnose and fix UI performance
|
||||
>
|
||||
> **Manage**
|
||||
> `/impeccable pin <command>` - Create a standalone shortcut (e.g., pin audit creates /audit)
|
||||
> `/impeccable unpin <command>` - Remove a pinned shortcut
|
||||
>
|
||||
> Or use `/impeccable [description]` directly to apply design principles to any task.
|
||||
|
||||
### Sub-command reference table
|
||||
|
||||
When a sub-command is matched, load the linked reference and follow its instructions. The design principles, guidelines, and Context Gathering Protocol from this skill are already loaded. Do NOT re-invoke /impeccable.
|
||||
|
||||
| Command | Reference | Summary |
|
||||
|---------|-----------|---------|
|
||||
| `craft` | [craft](reference/craft.md) | Full shape-then-build flow with visual iteration |
|
||||
| `teach` | [teach](reference/teach.md) | One-time setup: gather design context for the project |
|
||||
| `extract` | [extract](reference/extract.md) | Pull reusable tokens and components into design system |
|
||||
| `shape` | [shape](reference/shape.md) | Plan UX and UI before writing code (produces a design brief) |
|
||||
| `critique` | [critique](reference/critique.md) | UX design review with heuristic scoring and persona testing |
|
||||
| `audit` | [audit](reference/audit.md) | Technical quality checks across a11y, perf, theming, responsive, anti-patterns |
|
||||
| `polish` | [polish](reference/polish.md) | Final quality pass: alignment, spacing, consistency, micro-details |
|
||||
| `bolder` | [bolder](reference/bolder.md) | Amplify safe or boring designs for more visual impact |
|
||||
| `quieter` | [quieter](reference/quieter.md) | Tone down visually aggressive or overstimulating designs |
|
||||
| `distill` | [distill](reference/distill.md) | Strip designs to their essence, remove unnecessary complexity |
|
||||
| `harden` | [harden](reference/harden.md) | Production-ready: error handling, i18n, edge cases, onboarding |
|
||||
| `animate` | [animate](reference/animate.md) | Add purposeful animations and micro-interactions |
|
||||
| `colorize` | [colorize](reference/colorize.md) | Add strategic color to monochromatic interfaces |
|
||||
| `typeset` | [typeset](reference/typeset.md) | Improve typography: fonts, hierarchy, sizing, readability |
|
||||
| `layout` | [layout](reference/layout.md) | Improve layout, spacing, and visual rhythm |
|
||||
| `delight` | [delight](reference/delight.md) | Add personality, joy, and memorable touches |
|
||||
| `overdrive` | [overdrive](reference/overdrive.md) | Push interfaces past conventional limits |
|
||||
| `clarify` | [clarify](reference/clarify.md) | Improve UX copy, labels, error messages, and microcopy |
|
||||
| `adapt` | [adapt](reference/adapt.md) | Adapt designs across screen sizes, devices, and platforms |
|
||||
| `optimize` | [optimize](reference/optimize.md) | Diagnose and fix UI performance issues |
|
||||
|
||||
---
|
||||
|
||||
## Teach Mode
|
||||
## Pin / Unpin
|
||||
|
||||
If this skill is invoked with the argument "teach" (e.g., `/impeccable teach`), skip all design work above and instead run the teach flow below. This is a one-time setup that gathers design context for the project.
|
||||
If this skill is invoked with `pin <command>` or `unpin <command>`:
|
||||
|
||||
### Step 1: Explore the Codebase
|
||||
**pin** creates a lightweight standalone skill so you can invoke the command directly (e.g., `/audit` instead of `/impeccable audit`).
|
||||
|
||||
Before asking questions, thoroughly scan the project to discover what you can:
|
||||
**unpin** removes a previously pinned shortcut.
|
||||
|
||||
- **README and docs**: Project purpose, target audience, any stated goals
|
||||
- **Package.json / config files**: Tech stack, dependencies, existing design libraries
|
||||
- **Existing components**: Current design patterns, spacing, typography in use
|
||||
- **Brand assets**: Logos, favicons, color values already defined
|
||||
- **Design tokens / CSS variables**: Existing color palettes, font stacks, spacing scales
|
||||
- **Any style guides or brand documentation**
|
||||
|
||||
Note what you've learned and what remains unclear.
|
||||
|
||||
### Step 2: Ask UX-Focused Questions
|
||||
|
||||
STOP and call the `question` tool to clarify. Focus only on what you couldn't infer from the codebase:
|
||||
|
||||
#### Users & Purpose
|
||||
- Who uses this? What's their context when using it?
|
||||
- What job are they trying to get done?
|
||||
- What emotions should the interface evoke? (confidence, delight, calm, urgency, etc.)
|
||||
|
||||
#### Brand & Personality
|
||||
- How would you describe the brand personality in 3 words?
|
||||
- Any reference sites or apps that capture the right feel? What specifically about them?
|
||||
- What should this explicitly NOT look like? Any anti-references?
|
||||
|
||||
#### Aesthetic Preferences
|
||||
- Any strong preferences for visual direction? (minimal, bold, elegant, playful, technical, organic, etc.)
|
||||
- Light mode, dark mode, or both?
|
||||
- Any colors that must be used or avoided?
|
||||
|
||||
#### Accessibility & Inclusion
|
||||
- Specific accessibility requirements? (WCAG level, known user needs)
|
||||
- Considerations for reduced motion, color blindness, or other accommodations?
|
||||
|
||||
Skip questions where the answer is already clear from the codebase exploration.
|
||||
|
||||
### Step 3: Write Design Context
|
||||
|
||||
Synthesize your findings and the user's answers into a `## Design Context` section:
|
||||
|
||||
```markdown
|
||||
## Design Context
|
||||
|
||||
### Users
|
||||
[Who they are, their context, the job to be done]
|
||||
|
||||
### Brand Personality
|
||||
[Voice, tone, 3-word personality, emotional goals]
|
||||
|
||||
### Aesthetic Direction
|
||||
[Visual tone, references, anti-references, theme]
|
||||
|
||||
### Design Principles
|
||||
[3-5 principles derived from the conversation that should guide all design decisions]
|
||||
Run:
|
||||
```bash
|
||||
node .opencode/skills/impeccable/scripts/pin.mjs <pin|unpin> <command>
|
||||
```
|
||||
|
||||
Write this section to `.impeccable.md` in the project root. If the file already exists, update the Design Context section in place.
|
||||
|
||||
Then STOP and call the `question` tool to clarify. whether they'd also like the Design Context appended to AGENTS.md. If yes, append or update the section there as well.
|
||||
|
||||
Confirm completion and summarize the key design principles that will now guide all future work.
|
||||
|
||||
---
|
||||
|
||||
## Extract Mode
|
||||
|
||||
If this skill is invoked with the argument "extract" (e.g., `/impeccable extract [target]`), follow the [extract flow](reference/extract.md). Pass any additional arguments as the extraction target.
|
||||
Report what the script did. If it succeeded, confirm the new shortcut is available (for pin) or removed (for unpin).
|
||||
@@ -1,16 +1,7 @@
|
||||
---
|
||||
name: adapt
|
||||
description: Adapt designs to work across different screen sizes, devices, contexts, or platforms. Implements breakpoints, fluid layouts, and touch targets. Use when the user mentions responsive design, mobile layouts, breakpoints, viewport adaptation, or cross-device compatibility.
|
||||
version: 2.1.1
|
||||
user-invocable: true
|
||||
argument-hint: "[target] [context (mobile, tablet, print...)]"
|
||||
---
|
||||
> **Additional context needed**: target platforms/devices and usage contexts.
|
||||
|
||||
Adapt existing designs to work effectively across different contexts - different screen sizes, devices, platforms, or use cases.
|
||||
|
||||
## MANDATORY PREPARATION
|
||||
|
||||
Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. Additionally gather: target platforms/devices and usage contexts.
|
||||
|
||||
---
|
||||
|
||||
@@ -196,4 +187,4 @@ Test thoroughly across contexts:
|
||||
- **Edge cases**: Very small screens (320px), very large screens (4K)
|
||||
- **Slow connections**: Test on throttled network
|
||||
|
||||
Remember: You're a cross-platform design expert. Make experiences that feel native to each context while maintaining brand and functionality consistency. Adapt intentionally, test thoroughly.
|
||||
Remember: You're a cross-platform design expert. Make experiences that feel native to each context while maintaining brand and functionality consistency. Adapt intentionally, test thoroughly.
|
||||
+2
-11
@@ -1,16 +1,7 @@
|
||||
---
|
||||
name: animate
|
||||
description: Review a feature and enhance it with purposeful animations, micro-interactions, and motion effects that improve usability and delight. Use when the user mentions adding animation, transitions, micro-interactions, motion design, hover effects, or making the UI feel more alive.
|
||||
version: 2.1.1
|
||||
user-invocable: true
|
||||
argument-hint: "[target]"
|
||||
---
|
||||
> **Additional context needed**: performance constraints.
|
||||
|
||||
Analyze a feature and strategically add animations and micro-interactions that enhance understanding, provide feedback, and create delight.
|
||||
|
||||
## MANDATORY PREPARATION
|
||||
|
||||
Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. Additionally gather: performance constraints.
|
||||
|
||||
---
|
||||
|
||||
@@ -172,4 +163,4 @@ Test animations thoroughly:
|
||||
- **Doesn't block**: Users can interact during/after animations
|
||||
- **Adds value**: Makes interface clearer or more delightful
|
||||
|
||||
Remember: Motion should enhance understanding and provide feedback, not just add decoration. Animate with purpose, respect performance constraints, and always consider accessibility. Great animation is invisible - it just makes everything feel right.
|
||||
Remember: Motion should enhance understanding and provide feedback, not just add decoration. Animate with purpose, respect performance constraints, and always consider accessibility. Great animation is invisible - it just makes everything feel right.
|
||||
@@ -1,17 +1,3 @@
|
||||
---
|
||||
name: audit
|
||||
description: Run technical quality checks across accessibility, performance, theming, responsive design, and anti-patterns. Generates a scored report with P0-P3 severity ratings and actionable plan. Use when the user wants an accessibility check, performance audit, or technical quality review.
|
||||
version: 2.1.1
|
||||
user-invocable: true
|
||||
argument-hint: "[area (feature, page, component...)]"
|
||||
---
|
||||
|
||||
## MANDATORY PREPARATION
|
||||
|
||||
Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first.
|
||||
|
||||
---
|
||||
|
||||
Run systematic **technical** quality checks and generate a comprehensive report. Don't fix issues — document them for other commands to address.
|
||||
|
||||
This is a code-level audit, not a design critique. Check what's measurable and verifiable in the implementation.
|
||||
@@ -66,7 +52,7 @@ Run comprehensive checks across 5 dimensions. Score each dimension 0-4 using the
|
||||
|
||||
### 5. Anti-Patterns (CRITICAL)
|
||||
|
||||
Check against ALL the **DON'T** guidelines in the impeccable skill. Look for AI slop tells (AI color palette, gradient text, glassmorphism, hero metrics, card grids, generic fonts) and general design anti-patterns (gray on color, nested cards, bounce easing, redundant copy).
|
||||
Check against ALL the **DON'T** guidelines from the parent impeccable skill (already loaded in this context). Look for AI slop tells (AI color palette, gradient text, glassmorphism, hero metrics, card grids, generic fonts) and general design anti-patterns (gray on color, nested cards, bounce easing, redundant copy).
|
||||
|
||||
**Score 0-4**: 0=AI slop gallery (5+ tells), 1=Heavy AI aesthetic (3-4 tells), 2=Some tells (1-2 noticeable), 3=Mostly clean (subtle issues only), 4=No AI tells (distinctive, intentional design)
|
||||
|
||||
@@ -109,7 +95,7 @@ For each issue, document:
|
||||
- **Impact**: How it affects users
|
||||
- **WCAG/Standard**: Which standard it violates (if applicable)
|
||||
- **Recommendation**: How to fix it
|
||||
- **Suggested command**: Which command to use (prefer: /animate, /quieter, /shape, /optimize, /adapt, /clarify, /layout, /distill, /delight, /audit, /harden, /polish, /bolder, /typeset, /critique, /colorize, /overdrive)
|
||||
- **Suggested command**: Which command to use (prefer: /impeccable adapt, /impeccable animate, /impeccable audit, /impeccable bolder, /impeccable clarify, /impeccable colorize, /impeccable critique, /impeccable delight, /impeccable distill, /impeccable harden, /impeccable layout, /impeccable optimize, /impeccable overdrive, /impeccable polish, /impeccable quieter, /impeccable shape, /impeccable typeset)
|
||||
|
||||
### Patterns & Systemic Issues
|
||||
|
||||
@@ -128,13 +114,13 @@ List recommended commands in priority order (P0 first, then P1, then P2):
|
||||
1. **[P?] `/command-name`** — Brief description (specific context from audit findings)
|
||||
2. **[P?] `/command-name`** — Brief description (specific context)
|
||||
|
||||
**Rules**: Only recommend commands from: /animate, /quieter, /shape, /optimize, /adapt, /clarify, /layout, /distill, /delight, /audit, /harden, /polish, /bolder, /typeset, /critique, /colorize, /overdrive. Map findings to the most appropriate command. End with `/polish` as the final step if any fixes were recommended.
|
||||
**Rules**: Only recommend commands from: /impeccable adapt, /impeccable animate, /impeccable audit, /impeccable bolder, /impeccable clarify, /impeccable colorize, /impeccable critique, /impeccable delight, /impeccable distill, /impeccable harden, /impeccable layout, /impeccable optimize, /impeccable overdrive, /impeccable polish, /impeccable quieter, /impeccable shape, /impeccable typeset. Map findings to the most appropriate command. End with `/impeccable polish` as the final step if any fixes were recommended.
|
||||
|
||||
After presenting the summary, tell the user:
|
||||
|
||||
> You can ask me to run these one at a time, all at once, or in any order you prefer.
|
||||
>
|
||||
> Re-run `/audit` after fixes to see your score improve.
|
||||
> Re-run `/impeccable audit` after fixes to see your score improve.
|
||||
|
||||
**IMPORTANT**: Be thorough but actionable. Too many P3 issues creates noise. Focus on what actually matters.
|
||||
|
||||
@@ -145,4 +131,4 @@ After presenting the summary, tell the user:
|
||||
- Forget to prioritize (everything can't be P0)
|
||||
- Report false positives without verification
|
||||
|
||||
Remember: You're a technical quality auditor. Document systematically, prioritize ruthlessly, cite specific code locations, and provide clear paths to improvement.
|
||||
Remember: You're a technical quality auditor. Document systematically, prioritize ruthlessly, cite specific code locations, and provide clear paths to improvement.
|
||||
@@ -1,16 +1,5 @@
|
||||
---
|
||||
name: bolder
|
||||
description: Amplify safe or boring designs to make them more visually interesting and stimulating. Increases impact while maintaining usability. Use when the user says the design looks bland, generic, too safe, lacks personality, or wants more visual impact and character.
|
||||
version: 2.1.1
|
||||
user-invocable: true
|
||||
argument-hint: "[target]"
|
||||
---
|
||||
|
||||
Increase visual impact and personality in designs that are too safe, generic, or visually underwhelming, creating more engaging and memorable experiences.
|
||||
|
||||
## MANDATORY PREPARATION
|
||||
|
||||
Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first.
|
||||
|
||||
---
|
||||
|
||||
@@ -36,7 +25,7 @@ If any of these are unclear from the codebase, STOP and call the `question` tool
|
||||
|
||||
**CRITICAL**: "Bolder" doesn't mean chaotic or garish. It means distinctive, memorable, and confident. Think intentional drama, not random chaos.
|
||||
|
||||
**WARNING - AI SLOP TRAP**: When making things "bolder," AI defaults to the same tired tricks: cyan/purple gradients, glassmorphism, neon accents on dark backgrounds, gradient text on metrics. These are the OPPOSITE of bold—they're generic. Review ALL the DON'T guidelines in the impeccable skill before proceeding. Bold means distinctive, not "more effects."
|
||||
**WARNING - AI SLOP TRAP**: When making things "bolder," AI defaults to the same tired tricks: cyan/purple gradients, glassmorphism, neon accents on dark backgrounds, gradient text on metrics. These are the OPPOSITE of bold. They're generic. Review ALL the DON'T guidelines from the parent impeccable skill (already loaded in this context) before proceeding. Bold means distinctive, not "more effects."
|
||||
|
||||
## Plan Amplification
|
||||
|
||||
@@ -54,7 +43,7 @@ Create a strategy to increase impact while maintaining coherence:
|
||||
Systematically increase impact across these dimensions:
|
||||
|
||||
### Typography Amplification
|
||||
- **Replace generic fonts**: Swap system fonts for distinctive choices (see impeccable skill for inspiration)
|
||||
- **Replace generic fonts**: Swap system fonts for distinctive choices (see the parent skill's typography guidelines and [typography.md](typography.md) for inspiration)
|
||||
- **Extreme scale**: Create dramatic size jumps (3x-5x differences, not 1.5x)
|
||||
- **Weight contrast**: Pair 900 weights with 200 weights, not 600 with 400
|
||||
- **Unexpected choices**: Variable fonts, display fonts for headlines, condensed/extended widths, monospace as intentional accent (not as lazy "dev tool" default)
|
||||
@@ -114,4 +103,4 @@ Ensure amplification maintains usability and coherence:
|
||||
|
||||
**The test**: If you showed this to someone and said "AI made this bolder," would they believe you immediately? If yes, you've failed. Bold means distinctive, not "more AI effects."
|
||||
|
||||
Remember: Bold design is confident design. It takes risks, makes statements, and creates memorable experiences. But bold without strategy is just loud. Be intentional, be dramatic, be unforgettable.
|
||||
Remember: Bold design is confident design. It takes risks, makes statements, and creates memorable experiences. But bold without strategy is just loud. Be intentional, be dramatic, be unforgettable.
|
||||
+2
-11
@@ -1,16 +1,7 @@
|
||||
---
|
||||
name: clarify
|
||||
description: Improve unclear UX copy, error messages, microcopy, labels, and instructions to make interfaces easier to understand. Use when the user mentions confusing text, unclear labels, bad error messages, hard-to-follow instructions, or wanting better UX writing.
|
||||
version: 2.1.1
|
||||
user-invocable: true
|
||||
argument-hint: "[target]"
|
||||
---
|
||||
> **Additional context needed**: audience technical level and users' mental state in context.
|
||||
|
||||
Identify and improve unclear, confusing, or poorly written interface text to make the product easier to understand and use.
|
||||
|
||||
## MANDATORY PREPARATION
|
||||
|
||||
Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. Additionally gather: audience technical level and users' mental state in context.
|
||||
|
||||
---
|
||||
|
||||
@@ -180,4 +171,4 @@ Test that copy improvements work:
|
||||
- **Consistency**: Does it match terminology elsewhere?
|
||||
- **Tone**: Is it appropriate for the situation?
|
||||
|
||||
Remember: You're a clarity expert with excellent communication skills. Write like you're explaining to a smart friend who's unfamiliar with the product. Be clear, be helpful, be human.
|
||||
Remember: You're a clarity expert with excellent communication skills. Write like you're explaining to a smart friend who's unfamiliar with the product. Be clear, be helpful, be human.
|
||||
+2
-11
@@ -1,16 +1,7 @@
|
||||
---
|
||||
name: colorize
|
||||
description: Add strategic color to features that are too monochromatic or lack visual interest, making interfaces more engaging and expressive. Use when the user mentions the design looking gray, dull, lacking warmth, needing more color, or wanting a more vibrant or expressive palette.
|
||||
version: 2.1.1
|
||||
user-invocable: true
|
||||
argument-hint: "[target]"
|
||||
---
|
||||
> **Additional context needed**: existing brand colors.
|
||||
|
||||
Strategically introduce color to designs that are too monochromatic, gray, or lacking in visual warmth and personality.
|
||||
|
||||
## MANDATORY PREPARATION
|
||||
|
||||
Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. Additionally gather: existing brand colors.
|
||||
|
||||
---
|
||||
|
||||
@@ -140,4 +131,4 @@ Test that colorization improves the experience:
|
||||
- **Still accessible**: Do all color combinations meet WCAG standards?
|
||||
- **Not overwhelming**: Is color balanced and purposeful?
|
||||
|
||||
Remember: Color is emotional and powerful. Use it to create warmth, guide attention, communicate meaning, and express personality. But restraint and strategy matter more than saturation and variety. Be colorful, but be intentional.
|
||||
Remember: Color is emotional and powerful. Use it to create warmth, guide attention, communicate meaning, and express personality. But restraint and strategy matter more than saturation and variety. Be colorful, but be intentional.
|
||||
@@ -4,11 +4,11 @@ Build a feature with impeccable UX and UI quality through a structured process:
|
||||
|
||||
## Step 1: Shape the Design
|
||||
|
||||
Run /shape, passing along whatever feature description the user provided.
|
||||
Run /impeccable shape, passing along whatever feature description the user provided.
|
||||
|
||||
Wait for the design brief to be fully confirmed before proceeding. The brief is your blueprint, and every implementation decision should trace back to it.
|
||||
|
||||
If the user has already run /shape and has a confirmed design brief, skip this step and use the existing brief.
|
||||
If the user has already run /impeccable shape and has a confirmed design brief, skip this step and use the existing brief.
|
||||
|
||||
## Step 2: Load References
|
||||
|
||||
|
||||
+15
-29
@@ -1,20 +1,6 @@
|
||||
---
|
||||
name: critique
|
||||
description: Evaluate design from a UX perspective, assessing visual hierarchy, information architecture, emotional resonance, cognitive load, and overall quality with quantitative scoring, persona-based testing, automated anti-pattern detection, and actionable feedback. Use when the user asks to review, critique, evaluate, or give feedback on a design or component.
|
||||
version: 2.1.1
|
||||
user-invocable: true
|
||||
argument-hint: "[area (feature, page, component...)]"
|
||||
allowed-tools:
|
||||
- Bash(npx impeccable *)
|
||||
---
|
||||
> **Additional context needed**: what the interface is trying to accomplish.
|
||||
|
||||
## STEPS
|
||||
|
||||
### Step 1: Preparation
|
||||
|
||||
Invoke /impeccable, which contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding. If no design context exists yet, you MUST run /impeccable teach first. Additionally gather: what the interface is trying to accomplish.
|
||||
|
||||
### Step 2: Gather Assessments
|
||||
### Gather Assessments
|
||||
|
||||
Launch two independent assessments. **Neither must see the other's output** to avoid bias.
|
||||
|
||||
@@ -32,11 +18,11 @@ document.title = '[LLM] ' + document.title;
|
||||
```
|
||||
Think like a design director. Evaluate:
|
||||
|
||||
**AI Slop Detection (CRITICAL)**: Does this look like every other AI-generated interface? Review against ALL **DON'T** guidelines in the impeccable skill. Check for AI color palette, gradient text, dark glows, glassmorphism, hero metric layouts, identical card grids, generic fonts, and all other tells. **The test**: If someone said "AI made this," would you believe them immediately?
|
||||
**AI Slop Detection (CRITICAL)**: Does this look like every other AI-generated interface? Review against ALL **DON'T** guidelines from the parent impeccable skill (already loaded in this context). Check for AI color palette, gradient text, dark glows, glassmorphism, hero metric layouts, identical card grids, generic fonts, and all other tells. **The test**: If someone said "AI made this," would you believe them immediately?
|
||||
|
||||
**Holistic Design Review**: visual hierarchy (eye flow, primary action clarity), information architecture (structure, grouping, cognitive load), emotional resonance (does it match brand and audience?), discoverability (are interactive elements obvious?), composition (balance, whitespace, rhythm), typography (hierarchy, readability, font choices), color (purposeful use, cohesion, accessibility), states & edge cases (empty, loading, error, success), microcopy (clarity, tone, helpfulness).
|
||||
|
||||
**Cognitive Load** (consult [cognitive-load](reference/cognitive-load.md)):
|
||||
**Cognitive Load** (consult [cognitive-load](cognitive-load.md)):
|
||||
- Run the 8-item cognitive load checklist. Report failure count: 0-1 = low (good), 2-3 = moderate, 4+ = critical.
|
||||
- Count visible options at each decision point. If >4, flag it.
|
||||
- Check for progressive disclosure: is complexity revealed only when needed?
|
||||
@@ -46,7 +32,7 @@ Think like a design director. Evaluate:
|
||||
- **Peak-end rule**: Is the most intense moment positive? Does the experience end well?
|
||||
- **Emotional valleys**: Check for anxiety spikes at high-stakes moments (payment, delete, commit). Are there design interventions (progress indicators, reassurance copy, undo options)?
|
||||
|
||||
**Nielsen's Heuristics** (consult [heuristics-scoring](reference/heuristics-scoring.md)):
|
||||
**Nielsen's Heuristics** (consult [heuristics-scoring](heuristics-scoring.md)):
|
||||
Score each of the 10 heuristics 0-4. This scoring will be presented in the report.
|
||||
|
||||
Return structured findings covering: AI slop verdict, heuristic scores, cognitive load assessment, what's working (2-3 items), priority issues (3-5 with what/why/fix), minor observations, and provocative questions.
|
||||
@@ -96,14 +82,14 @@ For multi-view targets, inject on 3-5 representative pages. If injection fails,
|
||||
|
||||
Return: CLI findings (JSON), browser console findings (if applicable), and any false positives noted.
|
||||
|
||||
### Step 3: Generate Combined Critique Report
|
||||
### Generate Combined Critique Report
|
||||
|
||||
Synthesize both assessments into a single report. Do NOT simply concatenate. Weave the findings together, noting where the LLM review and detector agree, where the detector caught issues the LLM missed, and where detector findings are false positives.
|
||||
|
||||
Structure your feedback as a design director would:
|
||||
|
||||
#### Design Health Score
|
||||
> *Consult [heuristics-scoring](reference/heuristics-scoring.md)*
|
||||
> *Consult [heuristics-scoring](heuristics-scoring.md)*
|
||||
|
||||
Present the Nielsen's 10 heuristics scores as a table:
|
||||
|
||||
@@ -142,14 +128,14 @@ Highlight 2-3 things done well. Be specific about why they work.
|
||||
#### Priority Issues
|
||||
The 3-5 most impactful design problems, ordered by importance.
|
||||
|
||||
For each issue, tag with **P0-P3 severity** (consult [heuristics-scoring](reference/heuristics-scoring.md) for severity definitions):
|
||||
For each issue, tag with **P0-P3 severity** (consult [heuristics-scoring](heuristics-scoring.md) for severity definitions):
|
||||
- **[P?] What**: Name the problem clearly
|
||||
- **Why it matters**: How this hurts users or undermines goals
|
||||
- **Fix**: What to do about it (be concrete)
|
||||
- **Suggested command**: Which command could address this (from: /animate, /quieter, /shape, /optimize, /adapt, /clarify, /layout, /distill, /delight, /audit, /harden, /polish, /bolder, /typeset, /critique, /colorize, /overdrive)
|
||||
- **Suggested command**: Which command could address this (from: /impeccable adapt, /impeccable animate, /impeccable audit, /impeccable bolder, /impeccable clarify, /impeccable colorize, /impeccable critique, /impeccable delight, /impeccable distill, /impeccable harden, /impeccable layout, /impeccable optimize, /impeccable overdrive, /impeccable polish, /impeccable quieter, /impeccable shape, /impeccable typeset)
|
||||
|
||||
#### Persona Red Flags
|
||||
> *Consult [personas](reference/personas.md)*
|
||||
> *Consult [personas](personas.md)*
|
||||
|
||||
Auto-select 2-3 personas most relevant to this interface type (use the selection table in the reference). If `AGENTS.md` contains a `## Design Context` section from `impeccable teach`, also generate 1-2 project-specific personas from the audience/brand info.
|
||||
|
||||
@@ -178,7 +164,7 @@ Provocative questions that might unlock better solutions:
|
||||
- Prioritize ruthlessly. If everything is important, nothing is.
|
||||
- Don't soften criticism. Developers need honest feedback to ship great design.
|
||||
|
||||
### Step 4: Ask the User
|
||||
### Ask the User
|
||||
|
||||
**After presenting findings**, use targeted questions based on what was actually found. STOP and call the `question` tool to clarify. These answers will shape the action plan.
|
||||
|
||||
@@ -198,7 +184,7 @@ Ask questions along these lines (adapt to the specific findings; do NOT ask gene
|
||||
- Offer concrete options, not open-ended prompts.
|
||||
- If findings are straightforward (e.g., only 1-2 clear issues), skip questions and go directly to Step 5.
|
||||
|
||||
### Step 5: Recommended Actions
|
||||
### Recommended Actions
|
||||
|
||||
**After receiving the user's answers**, present a prioritized action summary reflecting the user's priorities and scope from Step 4.
|
||||
|
||||
@@ -211,17 +197,17 @@ List recommended commands in priority order, based on the user's answers:
|
||||
...
|
||||
|
||||
**Rules for recommendations**:
|
||||
- Only recommend commands from: /animate, /quieter, /shape, /optimize, /adapt, /clarify, /layout, /distill, /delight, /audit, /harden, /polish, /bolder, /typeset, /critique, /colorize, /overdrive
|
||||
- Only recommend commands from: /impeccable adapt, /impeccable animate, /impeccable audit, /impeccable bolder, /impeccable clarify, /impeccable colorize, /impeccable critique, /impeccable delight, /impeccable distill, /impeccable harden, /impeccable layout, /impeccable optimize, /impeccable overdrive, /impeccable polish, /impeccable quieter, /impeccable shape, /impeccable typeset
|
||||
- Order by the user's stated priorities first, then by impact
|
||||
- Each item's description should carry enough context that the command knows what to focus on
|
||||
- Map each Priority Issue to the appropriate command
|
||||
- Skip commands that would address zero issues
|
||||
- If the user chose a limited scope, only include items within that scope
|
||||
- If the user marked areas as off-limits, exclude commands that would touch those areas
|
||||
- End with `/polish` as the final step if any fixes were recommended
|
||||
- End with `/impeccable polish` as the final step if any fixes were recommended
|
||||
|
||||
After presenting the summary, tell the user:
|
||||
|
||||
> You can ask me to run these one at a time, all at once, or in any order you prefer.
|
||||
>
|
||||
> Re-run `/critique` after fixes to see your score improve.
|
||||
> Re-run `/impeccable critique` after fixes to see your score improve.
|
||||
+2
-11
@@ -1,16 +1,7 @@
|
||||
---
|
||||
name: delight
|
||||
description: Add moments of joy, personality, and unexpected touches that make interfaces memorable and enjoyable to use. Elevates functional to delightful. Use when the user asks to add polish, personality, animations, micro-interactions, delight, or make an interface feel fun or memorable.
|
||||
version: 2.1.1
|
||||
user-invocable: true
|
||||
argument-hint: "[target]"
|
||||
---
|
||||
> **Additional context needed**: what's appropriate for the domain (playful vs professional vs quirky vs elegant).
|
||||
|
||||
Identify opportunities to add moments of joy, personality, and unexpected polish that transform functional interfaces into delightful experiences.
|
||||
|
||||
## MANDATORY PREPARATION
|
||||
|
||||
Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. Additionally gather: what's appropriate for the domain (playful vs professional vs quirky vs elegant).
|
||||
|
||||
---
|
||||
|
||||
@@ -301,4 +292,4 @@ Test that delight actually delights:
|
||||
- **Appropriate**: Matches brand and context
|
||||
- **Accessible**: Works with reduced motion, screen readers
|
||||
|
||||
Remember: Delight is the difference between a tool and an experience. Add personality, surprise users positively, and create moments worth sharing. But always respect usability - delight should enhance, never obstruct.
|
||||
Remember: Delight is the difference between a tool and an experience. Add personality, surprise users positively, and create moments worth sharing. But always respect usability - delight should enhance, never obstruct.
|
||||
+1
-12
@@ -1,16 +1,5 @@
|
||||
---
|
||||
name: distill
|
||||
description: Strip designs to their essence by removing unnecessary complexity. Great design is simple, powerful, and clean. Use when the user asks to simplify, declutter, reduce noise, remove elements, or make a UI cleaner and more focused.
|
||||
version: 2.1.1
|
||||
user-invocable: true
|
||||
argument-hint: "[target]"
|
||||
---
|
||||
|
||||
Remove unnecessary complexity from designs, revealing the essential elements and creating clarity through ruthless simplification.
|
||||
|
||||
## MANDATORY PREPARATION
|
||||
|
||||
Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first.
|
||||
|
||||
---
|
||||
|
||||
@@ -119,4 +108,4 @@ If you removed features or options:
|
||||
- Consider if they need alternative access points
|
||||
- Note any user feedback to monitor
|
||||
|
||||
Remember: You have great taste and judgment. Simplification is an act of confidence - knowing what to keep and courage to remove the rest. As Antoine de Saint-Exupéry said: "Perfection is achieved not when there is nothing more to add, but when there is nothing left to take away."
|
||||
Remember: You have great taste and judgment. Simplification is an act of confidence - knowing what to keep and courage to remove the rest. As Antoine de Saint-Exupéry said: "Perfection is achieved not when there is nothing more to add, but when there is nothing left to take away."
|
||||
@@ -1,11 +1,3 @@
|
||||
---
|
||||
name: harden
|
||||
description: Make interfaces production-ready: error handling, empty states, onboarding flows, i18n, text overflow, and edge case management. Use when the user asks to harden, make production-ready, handle edge cases, add error states, design empty states, improve onboarding, or fix overflow and i18n issues.
|
||||
version: 2.1.1
|
||||
user-invocable: true
|
||||
argument-hint: "[target]"
|
||||
---
|
||||
|
||||
Strengthen interfaces against edge cases, errors, internationalization issues, and real-world usage scenarios that break idealized designs.
|
||||
|
||||
## Assess Hardening Needs
|
||||
@@ -386,4 +378,4 @@ Test thoroughly with edge cases:
|
||||
- **Errors**: Force API errors, test all error states
|
||||
- **Empty**: Remove all data, test empty states
|
||||
|
||||
Remember: You're hardening for production reality, not demo perfection. Expect users to input weird data, lose connection mid-flow, and use your product in unexpected ways. Build resilience into every component.
|
||||
Remember: You're hardening for production reality, not demo perfection. Expect users to input weird data, lose connection mid-flow, and use your product in unexpected ways. Build resilience into every component.
|
||||
@@ -1,16 +1,5 @@
|
||||
---
|
||||
name: layout
|
||||
description: Improve layout, spacing, and visual rhythm. Fixes monotonous grids, inconsistent spacing, and weak visual hierarchy. Use when the user mentions layout feeling off, spacing issues, visual hierarchy, crowded UI, alignment problems, or wanting better composition.
|
||||
version: 2.1.1
|
||||
user-invocable: true
|
||||
argument-hint: "[target]"
|
||||
---
|
||||
|
||||
Assess and improve layout and spacing that feels monotonous, crowded, or structurally weak — turning generic arrangements into intentional, rhythmic compositions.
|
||||
|
||||
## MANDATORY PREPARATION
|
||||
|
||||
Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first.
|
||||
|
||||
---
|
||||
|
||||
@@ -47,7 +36,7 @@ Analyze what's weak about the current spatial design:
|
||||
|
||||
## Plan Layout Improvements
|
||||
|
||||
Consult the [spatial design reference](reference/spatial-design.md) from the impeccable skill for detailed guidance on grids, rhythm, and container queries.
|
||||
Consult the [spatial design reference](spatial-design.md) for detailed guidance on grids, rhythm, and container queries.
|
||||
|
||||
Create a systematic plan:
|
||||
|
||||
@@ -122,4 +111,4 @@ Create a systematic plan:
|
||||
- **Consistency**: Is the spacing system applied uniformly?
|
||||
- **Responsiveness**: Does the layout adapt gracefully across screen sizes?
|
||||
|
||||
Remember: Space is the most underused design tool. A layout with the right rhythm and hierarchy can make even simple content feel polished and intentional.
|
||||
Remember: Space is the most underused design tool. A layout with the right rhythm and hierarchy can make even simple content feel polished and intentional.
|
||||
+1
-9
@@ -1,11 +1,3 @@
|
||||
---
|
||||
name: optimize
|
||||
description: Diagnoses and fixes UI performance across loading speed, rendering, animations, images, and bundle size. Use when the user mentions slow, laggy, janky, performance, bundle size, load time, or wants a faster, smoother experience.
|
||||
version: 2.1.1
|
||||
user-invocable: true
|
||||
argument-hint: "[target]"
|
||||
---
|
||||
|
||||
Identify and fix performance issues to create faster, smoother user experiences.
|
||||
|
||||
## Assess Performance Issues
|
||||
@@ -263,4 +255,4 @@ Test that optimizations worked:
|
||||
- **No regressions**: Ensure functionality still works
|
||||
- **User perception**: Does it *feel* faster?
|
||||
|
||||
Remember: Performance is a feature. Fast experiences feel more responsive, more polished, more professional. Optimize systematically, measure ruthlessly, and prioritize user-perceived performance.
|
||||
Remember: Performance is a feature. Fast experiences feel more responsive, more polished, more professional. Optimize systematically, measure ruthlessly, and prioritize user-perceived performance.
|
||||
+8
-20
@@ -1,11 +1,3 @@
|
||||
---
|
||||
name: overdrive
|
||||
description: Pushes interfaces past conventional limits with technically ambitious implementations — shaders, spring physics, scroll-driven reveals, 60fps animations. Use when the user wants to wow, impress, go all-out, or make something that feels extraordinary.
|
||||
version: 2.1.1
|
||||
user-invocable: true
|
||||
argument-hint: "[target]"
|
||||
---
|
||||
|
||||
Start your response with:
|
||||
|
||||
```
|
||||
@@ -13,19 +5,15 @@ Start your response with:
|
||||
》》》 Entering overdrive mode...
|
||||
```
|
||||
|
||||
Push an interface past conventional limits. This isn't just about visual effects — it's about using the full power of the browser to make any part of an interface feel extraordinary: a table that handles a million rows, a dialog that morphs from its trigger, a form that validates in real-time with streaming feedback, a page transition that feels cinematic.
|
||||
Push an interface past conventional limits. This isn't just about visual effects. It's about using the full power of the browser to make any part of an interface feel extraordinary: a table that handles a million rows, a dialog that morphs from its trigger, a form that validates in real-time with streaming feedback, a page transition that feels cinematic.
|
||||
|
||||
## MANDATORY PREPARATION
|
||||
|
||||
Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first.
|
||||
|
||||
**EXTRA IMPORTANT FOR THIS SKILL**: Context determines what "extraordinary" means. A particle system on a creative portfolio is impressive. The same particle system on a settings page is embarrassing. But a settings page with instant optimistic saves and animated state transitions? That's extraordinary too. Understand the project's personality and goals before deciding what's appropriate.
|
||||
**EXTRA IMPORTANT FOR THIS COMMAND**: Context determines what "extraordinary" means. A particle system on a creative portfolio is impressive. The same particle system on a settings page is embarrassing. But a settings page with instant optimistic saves and animated state transitions? That's extraordinary too. Understand the project's personality and goals before deciding what's appropriate.
|
||||
|
||||
### Propose Before Building
|
||||
|
||||
This skill has the highest potential to misfire. Do NOT jump straight into implementation. You MUST:
|
||||
This command has the highest potential to misfire. Do NOT jump straight into implementation. You MUST:
|
||||
|
||||
1. **Think through 2-3 different directions** — consider different techniques, levels of ambition, and aesthetic approaches. For each direction, briefly describe what the result would look and feel like.
|
||||
1. **Think through 2-3 different directions**: consider different techniques, levels of ambition, and aesthetic approaches. For each direction, briefly describe what the result would look and feel like.
|
||||
2. **STOP and call the `question` tool to clarify.** to present these directions and get the user's pick before writing any code. Explain trade-offs (browser support, performance cost, complexity).
|
||||
3. Only proceed with the direction the user confirms.
|
||||
|
||||
@@ -33,7 +21,7 @@ Skipping this step risks building something embarrassing that needs to be thrown
|
||||
|
||||
### Iterate with Browser Automation
|
||||
|
||||
Technically ambitious effects almost never work on the first try. You MUST actively use browser automation tools to preview your work, visually verify the result, and iterate. Do not assume the effect looks right — check it. Expect multiple rounds of refinement. The gap between "technically works" and "looks extraordinary" is closed through visual iteration, not code alone.
|
||||
Technically ambitious effects almost never work on the first try. You MUST actively use browser automation tools to preview your work, visually verify the result, and iterate. Do not assume the effect looks right, check it. Expect multiple rounds of refinement. The gap between "technically works" and "looks extraordinary" is closed through visual iteration, not code alone.
|
||||
|
||||
---
|
||||
|
||||
@@ -91,7 +79,7 @@ Organized by what you're trying to achieve, not by technology name.
|
||||
- **Web Audio API** — spatial audio, audio-reactive visualizations, sonic feedback. Requires user gesture to start.
|
||||
- **Device APIs** — orientation, ambient light, geolocation. Use sparingly and always with user permission.
|
||||
|
||||
**NOTE**: This skill is about enhancing how an interface FEELS, not changing what a product DOES. Adding real-time collaboration, offline support, or new backend capabilities are product decisions, not UI enhancements. Focus on making existing features feel extraordinary.
|
||||
**NOTE**: This command is about enhancing how an interface FEELS, not changing what a product DOES. Adding real-time collaboration, offline support, or new backend capabilities are product decisions, not UI enhancements. Focus on making existing features feel extraordinary.
|
||||
|
||||
## Implement with Discipline
|
||||
|
||||
@@ -128,7 +116,7 @@ The gap between "cool" and "extraordinary" is in the last 20% of refinement: the
|
||||
- Ship effects that cause jank on mid-range devices
|
||||
- Use bleeding-edge APIs without a functional fallback
|
||||
- Add sound without explicit user opt-in
|
||||
- Use technical ambition to mask weak design fundamentals — fix those first with other skills
|
||||
- Use technical ambition to mask weak design fundamentals; fix those first with other commands
|
||||
- Layer multiple competing extraordinary moments — focus creates impact, excess creates noise
|
||||
|
||||
## Verify the Result
|
||||
@@ -139,4 +127,4 @@ The gap between "cool" and "extraordinary" is in the last 20% of refinement: the
|
||||
- **The accessibility test**: Enable reduced motion. Still beautiful?
|
||||
- **The context test**: Does this make sense for THIS brand and audience?
|
||||
|
||||
Remember: "Technically extraordinary" isn't about using the newest API. It's about making an interface do something users didn't think a website could do.
|
||||
Remember: "Technically extraordinary" isn't about using the newest API. It's about making an interface do something users didn't think a website could do.
|
||||
@@ -1,16 +1,4 @@
|
||||
---
|
||||
name: polish
|
||||
description: Performs a final quality pass fixing alignment, spacing, consistency, and micro-detail issues before shipping. Use when the user mentions polish, finishing touches, pre-launch review, something looks off, or wants to go from good to great.
|
||||
version: 2.1.1
|
||||
user-invocable: true
|
||||
argument-hint: "[target]"
|
||||
---
|
||||
|
||||
## MANDATORY PREPARATION
|
||||
|
||||
Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. Additionally gather: quality bar (MVP vs flagship).
|
||||
|
||||
---
|
||||
> **Additional context needed**: quality bar (MVP vs flagship).
|
||||
|
||||
Perform a meticulous final pass to catch all the small details that separate good work from great work. The difference between shipped and polished.
|
||||
|
||||
@@ -221,4 +209,4 @@ After polishing, ensure code quality:
|
||||
- **Consolidate tokens**: If you introduced new values, check whether they should be tokens.
|
||||
- **Verify DRYness**: Look for duplication introduced during polishing and consolidate.
|
||||
|
||||
Remember: You have impeccable attention to detail and exquisite taste. Polish until it feels effortless, looks intentional, and works flawlessly. Sweat the details - they matter.
|
||||
Remember: You have impeccable attention to detail and exquisite taste. Polish until it feels effortless, looks intentional, and works flawlessly. Sweat the details - they matter.
|
||||
+1
-12
@@ -1,16 +1,5 @@
|
||||
---
|
||||
name: quieter
|
||||
description: Tones down visually aggressive or overstimulating designs, reducing intensity while preserving quality. Use when the user mentions too bold, too loud, overwhelming, aggressive, garish, or wants a calmer, more refined aesthetic.
|
||||
version: 2.1.1
|
||||
user-invocable: true
|
||||
argument-hint: "[target]"
|
||||
---
|
||||
|
||||
Reduce visual intensity in designs that are too bold, aggressive, or overstimulating, creating a more refined and approachable aesthetic without losing effectiveness.
|
||||
|
||||
## MANDATORY PREPARATION
|
||||
|
||||
Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first.
|
||||
|
||||
---
|
||||
|
||||
@@ -100,4 +89,4 @@ Ensure refinement maintains quality:
|
||||
- **Better reading**: Is text easier to read for extended periods?
|
||||
- **Sophistication**: Does it feel more refined and premium?
|
||||
|
||||
Remember: Quiet design is confident design. It doesn't need to shout. Less is more, but less is also harder. Refine with precision and maintain intentionality.
|
||||
Remember: Quiet design is confident design. It doesn't need to shout. Less is more, but less is also harder. Refine with precision and maintain intentionality.
|
||||
@@ -1,26 +1,12 @@
|
||||
---
|
||||
name: shape
|
||||
description: Plan the UX and UI for a feature before writing code. Runs a structured discovery interview, then produces a design brief that guides implementation. Use during the planning phase to establish design direction, constraints, and strategy before any code is written.
|
||||
version: 2.1.1
|
||||
user-invocable: true
|
||||
argument-hint: "[feature to shape]"
|
||||
---
|
||||
Shape the UX and UI for a feature before any code is written. This command produces a **design brief**: a structured artifact that guides implementation through discovery, not guesswork.
|
||||
|
||||
## MANDATORY PREPARATION
|
||||
**Scope**: Design planning only. This command does NOT write code. It produces the thinking that makes code good.
|
||||
|
||||
Invoke /impeccable, which contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding. If no design context exists yet, you MUST run /impeccable teach first.
|
||||
|
||||
---
|
||||
|
||||
Shape the UX and UI for a feature before any code is written. This skill produces a **design brief**: a structured artifact that guides implementation through discovery, not guesswork.
|
||||
|
||||
**Scope**: Design planning only. This skill does NOT write code. It produces the thinking that makes code good.
|
||||
|
||||
**Output**: A design brief that can be handed off to /impeccable craft, /impeccable, or any other implementation skill.
|
||||
**Output**: A design brief that can be handed off to /impeccable craft, or directly to /impeccable for freeform implementation.
|
||||
|
||||
## Philosophy
|
||||
|
||||
Most AI-generated UIs fail not because of bad code, but because of skipped thinking. They jump to "here's a card grid" without asking "what is the user trying to accomplish?" This skill inverts that: understand deeply first, so implementation is precise.
|
||||
Most AI-generated UIs fail not because of bad code, but because of skipped thinking. They jump to "here's a card grid" without asking "what is the user trying to accomplish?" This command inverts that: understand deeply first, so implementation is precise.
|
||||
|
||||
## Phase 1: Discovery Interview
|
||||
|
||||
@@ -58,7 +44,7 @@ Ask these questions in conversation, adapting based on answers. Don't dump them
|
||||
|
||||
## Phase 2: Design Brief
|
||||
|
||||
After the interview, synthesize everything into a structured design brief. Present it to the user for confirmation before considering this skill complete.
|
||||
After the interview, synthesize everything into a structured design brief. Present it to the user for confirmation before considering this command complete.
|
||||
|
||||
### Brief Structure
|
||||
|
||||
@@ -93,4 +79,4 @@ Anything unresolved that the implementer should resolve during build.
|
||||
|
||||
STOP and call the `question` tool to clarify. Get explicit confirmation of the brief before finishing. If the user disagrees with any part, revisit the relevant discovery questions.
|
||||
|
||||
Once confirmed, the brief is complete. The user can now hand it to /impeccable, or use it to guide any other implementation approach. (If the user wants the full discovery-then-build flow in one step, they should use /impeccable craft instead, which runs this skill internally.)
|
||||
Once confirmed, the brief is complete. The user can now hand it to /impeccable, or use it to guide any other implementation approach. (If the user wants the full discovery-then-build flow in one step, they should use /impeccable craft instead, which runs this command internally.)
|
||||
@@ -0,0 +1,67 @@
|
||||
# Teach Flow
|
||||
|
||||
One-time setup that gathers design context for a project. Design without context produces generic output, so every other command reads this file before doing any work.
|
||||
|
||||
## Step 1: Explore the Codebase
|
||||
|
||||
Before asking questions, thoroughly scan the project to discover what you can:
|
||||
|
||||
- **README and docs**: Project purpose, target audience, any stated goals
|
||||
- **Package.json / config files**: Tech stack, dependencies, existing design libraries
|
||||
- **Existing components**: Current design patterns, spacing, typography in use
|
||||
- **Brand assets**: Logos, favicons, color values already defined
|
||||
- **Design tokens / CSS variables**: Existing color palettes, font stacks, spacing scales
|
||||
- **Any style guides or brand documentation**
|
||||
|
||||
Note what you've learned and what remains unclear.
|
||||
|
||||
## Step 2: Ask UX-Focused Questions
|
||||
|
||||
STOP and call the `question` tool to clarify. Focus only on what you couldn't infer from the codebase:
|
||||
|
||||
### Users & Purpose
|
||||
- Who uses this? What's their context when using it?
|
||||
- What job are they trying to get done?
|
||||
- What emotions should the interface evoke? (confidence, delight, calm, urgency, etc.)
|
||||
|
||||
### Brand & Personality
|
||||
- How would you describe the brand personality in 3 words?
|
||||
- Any reference sites or apps that capture the right feel? What specifically about them?
|
||||
- What should this explicitly NOT look like? Any anti-references?
|
||||
|
||||
### Aesthetic Preferences
|
||||
- Any strong preferences for visual direction? (minimal, bold, elegant, playful, technical, organic, etc.)
|
||||
- Light mode, dark mode, or both?
|
||||
- Any colors that must be used or avoided?
|
||||
|
||||
### Accessibility & Inclusion
|
||||
- Specific accessibility requirements? (WCAG level, known user needs)
|
||||
- Considerations for reduced motion, color blindness, or other accommodations?
|
||||
|
||||
Skip questions where the answer is already clear from the codebase exploration.
|
||||
|
||||
## Step 3: Write Design Context
|
||||
|
||||
Synthesize your findings and the user's answers into a `## Design Context` section:
|
||||
|
||||
```markdown
|
||||
## Design Context
|
||||
|
||||
### Users
|
||||
[Who they are, their context, the job to be done]
|
||||
|
||||
### Brand Personality
|
||||
[Voice, tone, 3-word personality, emotional goals]
|
||||
|
||||
### Aesthetic Direction
|
||||
[Visual tone, references, anti-references, theme]
|
||||
|
||||
### Design Principles
|
||||
[3-5 principles derived from the conversation that should guide all design decisions]
|
||||
```
|
||||
|
||||
Write this section to `.impeccable.md` in the project root. If the file already exists, update the Design Context section in place.
|
||||
|
||||
Then STOP and call the `question` tool to clarify. whether they'd also like the Design Context appended to AGENTS.md. If yes, append or update the section there as well.
|
||||
|
||||
Confirm completion and summarize the key design principles that will now guide all future work.
|
||||
+2
-13
@@ -1,16 +1,5 @@
|
||||
---
|
||||
name: typeset
|
||||
description: Improves typography by fixing font choices, hierarchy, sizing, weight, and readability so text feels intentional. Use when the user mentions fonts, type, readability, text hierarchy, sizing looks off, or wants more polished, intentional typography.
|
||||
version: 2.1.1
|
||||
user-invocable: true
|
||||
argument-hint: "[target]"
|
||||
---
|
||||
|
||||
Assess and improve typography that feels generic, inconsistent, or poorly structured — turning default-looking text into intentional, well-crafted type.
|
||||
|
||||
## MANDATORY PREPARATION
|
||||
|
||||
Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first.
|
||||
|
||||
---
|
||||
|
||||
@@ -47,7 +36,7 @@ Analyze what's weak or generic about the current type:
|
||||
|
||||
## Plan Typography Improvements
|
||||
|
||||
Consult the [typography reference](reference/typography.md) from the impeccable skill for detailed guidance on scales, pairing, and loading strategies.
|
||||
Consult the [typography reference](typography.md) for detailed guidance on scales, pairing, and loading strategies.
|
||||
|
||||
Create a systematic plan:
|
||||
|
||||
@@ -113,4 +102,4 @@ Build a clear type scale:
|
||||
- **Performance**: Are web fonts loading efficiently without layout shift?
|
||||
- **Accessibility**: Does text meet WCAG contrast ratios? Is it zoomable to 200%?
|
||||
|
||||
Remember: Typography is the foundation of interface design — it carries the majority of information. Getting it right is the highest-leverage improvement you can make.
|
||||
Remember: Typography is the foundation of interface design — it carries the majority of information. Getting it right is the highest-leverage improvement you can make.
|
||||
@@ -21,14 +21,34 @@
|
||||
import { existsSync, readFileSync, writeFileSync, rmSync, readdirSync, statSync, lstatSync, unlinkSync } from 'node:fs';
|
||||
import { join, resolve } from 'node:path';
|
||||
|
||||
// Skills that were renamed, merged, or folded in v2.0 and v2.1.
|
||||
// Skills that were renamed, merged, or folded in v2.0, v2.1, and v3.0.
|
||||
const DEPRECATED_NAMES = [
|
||||
'frontend-design', // renamed to impeccable (v2.0)
|
||||
'teach-impeccable', // folded into /impeccable teach (v2.0)
|
||||
'arrange', // renamed to layout (v2.1)
|
||||
'normalize', // merged into polish (v2.1)
|
||||
'onboard', // merged into harden (v2.1)
|
||||
'extract', // merged into /impeccable extract (v2.1)
|
||||
// v2.0 renames
|
||||
'frontend-design', // renamed to impeccable
|
||||
'teach-impeccable', // folded into /impeccable teach
|
||||
// v2.1 merges
|
||||
'arrange', // renamed to layout
|
||||
'normalize', // merged into polish
|
||||
'onboard', // merged into harden
|
||||
'extract', // merged into /impeccable extract
|
||||
// v3.0 consolidation: all standalone skills -> /impeccable sub-commands
|
||||
'adapt',
|
||||
'animate',
|
||||
'audit',
|
||||
'bolder',
|
||||
'clarify',
|
||||
'colorize',
|
||||
'critique',
|
||||
'delight',
|
||||
'distill',
|
||||
'harden',
|
||||
'layout',
|
||||
'optimize',
|
||||
'overdrive',
|
||||
'polish',
|
||||
'quieter',
|
||||
'shape',
|
||||
'typeset',
|
||||
];
|
||||
|
||||
// All known harness directories that may contain a skills/ subfolder.
|
||||
|
||||
@@ -0,0 +1,82 @@
|
||||
{
|
||||
"craft": {
|
||||
"description": "Full shape-then-build flow with visual iteration. Plans the UX with /impeccable shape, loads the right reference files, then builds and iterates visually until the result is delightful. Use when building a new feature end-to-end.",
|
||||
"argumentHint": "[feature description]"
|
||||
},
|
||||
"teach": {
|
||||
"description": "One-time setup that gathers design context for a project. Runs a short discovery interview and writes the answers to .impeccable.md. Every other command reads this file before doing work. Use once per project.",
|
||||
"argumentHint": ""
|
||||
},
|
||||
"extract": {
|
||||
"description": "Pull reusable patterns, components, and design tokens into the design system. Identifies repeated patterns and consolidates them. Use when you have drift across the codebase and want to bring things back to a consistent system.",
|
||||
"argumentHint": "[target]"
|
||||
},
|
||||
"adapt": {
|
||||
"description": "Adapt designs to work across different screen sizes, devices, contexts, or platforms. Implements breakpoints, fluid layouts, and touch targets. Use when the user mentions responsive design, mobile layouts, breakpoints, viewport adaptation, or cross-device compatibility.",
|
||||
"argumentHint": "[target] [context (mobile, tablet, print...)]"
|
||||
},
|
||||
"animate": {
|
||||
"description": "Review a feature and enhance it with purposeful animations, micro-interactions, and motion effects that improve usability and delight. Use when the user mentions adding animation, transitions, micro-interactions, motion design, hover effects, or making the UI feel more alive.",
|
||||
"argumentHint": "[target]"
|
||||
},
|
||||
"audit": {
|
||||
"description": "Run technical quality checks across accessibility, performance, theming, responsive design, and anti-patterns. Generates a scored report with P0-P3 severity ratings and actionable plan. Use when the user wants an accessibility check, performance audit, or technical quality review.",
|
||||
"argumentHint": "[area (feature, page, component...)]"
|
||||
},
|
||||
"bolder": {
|
||||
"description": "Amplify safe or boring designs to make them more visually interesting and stimulating. Increases impact while maintaining usability. Use when the user says the design looks bland, generic, too safe, lacks personality, or wants more visual impact and character.",
|
||||
"argumentHint": "[target]"
|
||||
},
|
||||
"clarify": {
|
||||
"description": "Improve unclear UX copy, error messages, microcopy, labels, and instructions to make interfaces easier to understand. Use when the user mentions confusing text, unclear labels, bad error messages, hard-to-follow instructions, or wanting better UX writing.",
|
||||
"argumentHint": "[target]"
|
||||
},
|
||||
"colorize": {
|
||||
"description": "Add strategic color to features that are too monochromatic or lack visual interest, making interfaces more engaging and expressive. Use when the user mentions the design looking gray, dull, lacking warmth, needing more color, or wanting a more vibrant or expressive palette.",
|
||||
"argumentHint": "[target]"
|
||||
},
|
||||
"critique": {
|
||||
"description": "Evaluate design from a UX perspective, assessing visual hierarchy, information architecture, emotional resonance, cognitive load, and overall quality with quantitative scoring, persona-based testing, automated anti-pattern detection, and actionable feedback. Use when the user asks to review, critique, evaluate, or give feedback on a design or component.",
|
||||
"argumentHint": "[area (feature, page, component...)]"
|
||||
},
|
||||
"delight": {
|
||||
"description": "Add moments of joy, personality, and unexpected touches that make interfaces memorable and enjoyable to use. Elevates functional to delightful. Use when the user asks to add polish, personality, animations, micro-interactions, delight, or make an interface feel fun or memorable.",
|
||||
"argumentHint": "[target]"
|
||||
},
|
||||
"distill": {
|
||||
"description": "Strip designs to their essence by removing unnecessary complexity. Great design is simple, powerful, and clean. Use when the user asks to simplify, declutter, reduce noise, remove elements, or make a UI cleaner and more focused.",
|
||||
"argumentHint": "[target]"
|
||||
},
|
||||
"harden": {
|
||||
"description": "Make interfaces production-ready: error handling, empty states, onboarding flows, i18n, text overflow, and edge case management. Use when the user asks to harden, make production-ready, handle edge cases, add error states, design empty states, improve onboarding, or fix overflow and i18n issues.",
|
||||
"argumentHint": "[target]"
|
||||
},
|
||||
"layout": {
|
||||
"description": "Improve layout, spacing, and visual rhythm. Fixes monotonous grids, inconsistent spacing, and weak visual hierarchy. Use when the user mentions layout feeling off, spacing issues, visual hierarchy, crowded UI, alignment problems, or wanting better composition.",
|
||||
"argumentHint": "[target]"
|
||||
},
|
||||
"optimize": {
|
||||
"description": "Diagnoses and fixes UI performance across loading speed, rendering, animations, images, and bundle size. Use when the user mentions slow, laggy, janky, performance, bundle size, load time, or wants a faster, smoother experience.",
|
||||
"argumentHint": "[target]"
|
||||
},
|
||||
"overdrive": {
|
||||
"description": "Pushes interfaces past conventional limits with technically ambitious implementations — shaders, spring physics, scroll-driven reveals, 60fps animations. Use when the user wants to wow, impress, go all-out, or make something that feels extraordinary.",
|
||||
"argumentHint": "[target]"
|
||||
},
|
||||
"polish": {
|
||||
"description": "Performs a final quality pass fixing alignment, spacing, consistency, and micro-detail issues before shipping. Use when the user mentions polish, finishing touches, pre-launch review, something looks off, or wants to go from good to great.",
|
||||
"argumentHint": "[target]"
|
||||
},
|
||||
"quieter": {
|
||||
"description": "Tones down visually aggressive or overstimulating designs, reducing intensity while preserving quality. Use when the user mentions too bold, too loud, overwhelming, aggressive, garish, or wants a calmer, more refined aesthetic.",
|
||||
"argumentHint": "[target]"
|
||||
},
|
||||
"shape": {
|
||||
"description": "Plan the UX and UI for a feature before writing code. Runs a structured discovery interview, then produces a design brief that guides implementation. Use during the planning phase to establish design direction, constraints, and strategy before any code is written.",
|
||||
"argumentHint": "[feature to shape]"
|
||||
},
|
||||
"typeset": {
|
||||
"description": "Improves typography by fixing font choices, hierarchy, sizing, weight, and readability so text feels intentional. Use when the user mentions fonts, type, readability, text hierarchy, sizing looks off, or wants more polished, intentional typography.",
|
||||
"argumentHint": "[target]"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,214 @@
|
||||
#!/usr/bin/env node
|
||||
/**
|
||||
* Pin/unpin sub-commands as standalone skill shortcuts.
|
||||
*
|
||||
* Usage:
|
||||
* node <scripts_path>/pin.mjs pin <command>
|
||||
* node <scripts_path>/pin.mjs unpin <command>
|
||||
*
|
||||
* `pin audit` creates a lightweight /audit skill that redirects to /impeccable audit.
|
||||
* `unpin audit` removes that shortcut.
|
||||
*
|
||||
* The script discovers harness directories (.claude/skills, .cursor/skills, etc.)
|
||||
* in the project root and creates/removes the pin in all of them.
|
||||
*/
|
||||
|
||||
import { existsSync, readFileSync, writeFileSync, mkdirSync, rmSync, readdirSync } from 'node:fs';
|
||||
import { join, resolve, dirname } from 'node:path';
|
||||
import { fileURLToPath } from 'node:url';
|
||||
|
||||
const __dirname = dirname(fileURLToPath(import.meta.url));
|
||||
|
||||
// All known harness directories
|
||||
const HARNESS_DIRS = [
|
||||
'.claude', '.cursor', '.gemini', '.codex', '.agents',
|
||||
'.trae', '.trae-cn', '.pi', '.opencode', '.kiro', '.rovodev',
|
||||
];
|
||||
|
||||
// Valid sub-command names
|
||||
const VALID_COMMANDS = [
|
||||
'craft', 'teach', 'extract', 'shape',
|
||||
'critique', 'audit',
|
||||
'polish', 'bolder', 'quieter', 'distill', 'harden',
|
||||
'animate', 'colorize', 'typeset', 'layout', 'delight', 'overdrive',
|
||||
'clarify', 'adapt', 'optimize',
|
||||
];
|
||||
|
||||
// Marker to identify pinned skills (so unpin doesn't delete user skills)
|
||||
const PIN_MARKER = '<!-- impeccable-pinned-skill -->';
|
||||
|
||||
/**
|
||||
* Walk up from startDir to find a project root.
|
||||
*/
|
||||
function findProjectRoot(startDir = process.cwd()) {
|
||||
let dir = resolve(startDir);
|
||||
while (dir !== '/') {
|
||||
if (
|
||||
existsSync(join(dir, 'package.json')) ||
|
||||
existsSync(join(dir, '.git')) ||
|
||||
existsSync(join(dir, 'skills-lock.json'))
|
||||
) {
|
||||
return dir;
|
||||
}
|
||||
const parent = resolve(dir, '..');
|
||||
if (parent === dir) break;
|
||||
dir = parent;
|
||||
}
|
||||
return resolve(startDir);
|
||||
}
|
||||
|
||||
/**
|
||||
* Find harness skill directories that have an impeccable skill installed.
|
||||
*/
|
||||
function findHarnessDirs(projectRoot) {
|
||||
const dirs = [];
|
||||
for (const harness of HARNESS_DIRS) {
|
||||
const skillsDir = join(projectRoot, harness, 'skills');
|
||||
// Only pin in harness dirs that already have impeccable installed
|
||||
const impeccableDir = join(skillsDir, 'impeccable');
|
||||
if (existsSync(impeccableDir) || existsSync(join(skillsDir, 'i-impeccable'))) {
|
||||
dirs.push(skillsDir);
|
||||
}
|
||||
}
|
||||
return dirs;
|
||||
}
|
||||
|
||||
/**
|
||||
* Load command metadata (descriptions for pinned skills).
|
||||
*/
|
||||
function loadCommandMetadata() {
|
||||
const metadataPath = join(__dirname, 'command-metadata.json');
|
||||
if (existsSync(metadataPath)) {
|
||||
return JSON.parse(readFileSync(metadataPath, 'utf-8'));
|
||||
}
|
||||
return {};
|
||||
}
|
||||
|
||||
/**
|
||||
* Generate a pinned skill's SKILL.md content.
|
||||
*/
|
||||
function generatePinnedSkill(command, metadata) {
|
||||
const desc = metadata[command]?.description || `Shortcut for /impeccable ${command}.`;
|
||||
const hint = metadata[command]?.argumentHint || '[target]';
|
||||
|
||||
return `---
|
||||
name: ${command}
|
||||
description: "${desc}"
|
||||
argument-hint: "${hint}"
|
||||
user-invocable: true
|
||||
---
|
||||
|
||||
${PIN_MARKER}
|
||||
|
||||
This is a pinned shortcut for \`{{command_prefix}}impeccable ${command}\`.
|
||||
|
||||
Invoke {{command_prefix}}impeccable ${command}, passing along any arguments provided here, and follow its instructions.
|
||||
`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Pin a command: create shortcut skill in all harness dirs.
|
||||
*/
|
||||
function pin(command, projectRoot) {
|
||||
const metadata = loadCommandMetadata();
|
||||
const harnessDirs = findHarnessDirs(projectRoot);
|
||||
|
||||
if (harnessDirs.length === 0) {
|
||||
console.log('No harness directories with impeccable installed found.');
|
||||
return false;
|
||||
}
|
||||
|
||||
const content = generatePinnedSkill(command, metadata);
|
||||
let created = 0;
|
||||
|
||||
for (const skillsDir of harnessDirs) {
|
||||
// Check if skill already exists (and isn't a pin)
|
||||
const skillDir = join(skillsDir, command);
|
||||
if (existsSync(skillDir)) {
|
||||
const existingMd = join(skillDir, 'SKILL.md');
|
||||
if (existsSync(existingMd)) {
|
||||
const existing = readFileSync(existingMd, 'utf-8');
|
||||
if (!existing.includes(PIN_MARKER)) {
|
||||
console.log(` SKIP: ${skillDir} (non-pinned skill already exists)`);
|
||||
continue;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
mkdirSync(skillDir, { recursive: true });
|
||||
writeFileSync(join(skillDir, 'SKILL.md'), content, 'utf-8');
|
||||
console.log(` + ${skillDir}`);
|
||||
created++;
|
||||
}
|
||||
|
||||
if (created > 0) {
|
||||
console.log(`\nPinned '${command}' as a standalone shortcut in ${created} location(s).`);
|
||||
console.log(`You can now use /${command} directly.`);
|
||||
}
|
||||
|
||||
return created > 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Unpin a command: remove shortcut skill from all harness dirs.
|
||||
*/
|
||||
function unpin(command, projectRoot) {
|
||||
const harnessDirs = findHarnessDirs(projectRoot);
|
||||
let removed = 0;
|
||||
|
||||
for (const skillsDir of harnessDirs) {
|
||||
const skillDir = join(skillsDir, command);
|
||||
if (!existsSync(skillDir)) continue;
|
||||
|
||||
const skillMd = join(skillDir, 'SKILL.md');
|
||||
if (!existsSync(skillMd)) continue;
|
||||
|
||||
// Safety: only remove if it's a pinned skill
|
||||
const content = readFileSync(skillMd, 'utf-8');
|
||||
if (!content.includes(PIN_MARKER)) {
|
||||
console.log(` SKIP: ${skillDir} (not a pinned skill)`);
|
||||
continue;
|
||||
}
|
||||
|
||||
rmSync(skillDir, { recursive: true, force: true });
|
||||
console.log(` - ${skillDir}`);
|
||||
removed++;
|
||||
}
|
||||
|
||||
if (removed > 0) {
|
||||
console.log(`\nUnpinned '${command}' from ${removed} location(s).`);
|
||||
console.log(`Use /impeccable ${command} to access it.`);
|
||||
} else {
|
||||
console.log(`No pinned '${command}' shortcut found.`);
|
||||
}
|
||||
|
||||
return removed > 0;
|
||||
}
|
||||
|
||||
// --- CLI ---
|
||||
const [,, action, command] = process.argv;
|
||||
|
||||
if (!action || !command) {
|
||||
console.log('Usage: node pin.mjs <pin|unpin> <command>');
|
||||
console.log(`\nAvailable commands: ${VALID_COMMANDS.join(', ')}`);
|
||||
process.exit(1);
|
||||
}
|
||||
|
||||
if (action !== 'pin' && action !== 'unpin') {
|
||||
console.error(`Unknown action: ${action}. Use 'pin' or 'unpin'.`);
|
||||
process.exit(1);
|
||||
}
|
||||
|
||||
if (!VALID_COMMANDS.includes(command)) {
|
||||
console.error(`Unknown command: ${command}`);
|
||||
console.error(`Available commands: ${VALID_COMMANDS.join(', ')}`);
|
||||
process.exit(1);
|
||||
}
|
||||
|
||||
const root = findProjectRoot();
|
||||
|
||||
if (action === 'pin') {
|
||||
pin(command, root);
|
||||
} else {
|
||||
unpin(command, root);
|
||||
}
|
||||
Reference in New Issue
Block a user