mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-12 22:26:38 +03:00
Merge main and resolve frontmatter conflicts
Combine PR's enhanced descriptions (scoring, personas, cognitive load) with main's argument-hint format. Rebuild all providers. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Paul Bakaus
Claude Opus 4.6
@@ -1,13 +1,7 @@
|
||||
---
|
||||
name: adapt
|
||||
description: Adapt designs to work across different screen sizes, devices, contexts, or platforms. Ensures consistent experience across varied environments.
|
||||
args:
|
||||
- name: target
|
||||
description: The feature or component to adapt (optional)
|
||||
required: false
|
||||
- name: context
|
||||
description: What to adapt for (mobile, tablet, desktop, print, email, etc.)
|
||||
required: false
|
||||
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."
|
||||
argument-hint: "[target] [context (mobile, tablet, print...)]"
|
||||
user-invocable: true
|
||||
---
|
||||
|
||||
@@ -15,7 +9,7 @@ Adapt existing designs to work effectively across different contexts - different
|
||||
|
||||
## MANDATORY PREPARATION
|
||||
|
||||
Use the frontend-design skill — 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 teach-impeccable first. Additionally gather: target platforms/devices and usage contexts.
|
||||
Invoke {{command_prefix}}frontend-design — 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 {{command_prefix}}teach-impeccable first. Additionally gather: target platforms/devices and usage contexts.
|
||||
|
||||
---
|
||||
|
||||
|
||||
@@ -1,10 +1,7 @@
|
||||
---
|
||||
name: animate
|
||||
description: Review a feature and enhance it with purposeful animations, micro-interactions, and motion effects that improve usability and delight.
|
||||
args:
|
||||
- name: target
|
||||
description: The feature or component to animate (optional)
|
||||
required: false
|
||||
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."
|
||||
argument-hint: "[target]"
|
||||
user-invocable: true
|
||||
---
|
||||
|
||||
@@ -12,7 +9,7 @@ Analyze a feature and strategically add animations and micro-interactions that e
|
||||
|
||||
## MANDATORY PREPARATION
|
||||
|
||||
Use the frontend-design skill — 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 teach-impeccable first. Additionally gather: performance constraints.
|
||||
Invoke {{command_prefix}}frontend-design — 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 {{command_prefix}}teach-impeccable first. Additionally gather: performance constraints.
|
||||
|
||||
---
|
||||
|
||||
|
||||
@@ -1,10 +1,7 @@
|
||||
---
|
||||
name: arrange
|
||||
description: Improve layout, spacing, and visual rhythm. Fixes monotonous grids, inconsistent spacing, and weak visual hierarchy to create intentional compositions.
|
||||
args:
|
||||
- name: target
|
||||
description: The feature or component to improve layout for (optional)
|
||||
required: false
|
||||
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."
|
||||
argument-hint: "[target]"
|
||||
user-invocable: true
|
||||
---
|
||||
|
||||
@@ -12,7 +9,7 @@ Assess and improve layout and spacing that feels monotonous, crowded, or structu
|
||||
|
||||
## MANDATORY PREPARATION
|
||||
|
||||
Use the frontend-design skill — 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 teach-impeccable first.
|
||||
Invoke {{command_prefix}}frontend-design — 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 {{command_prefix}}teach-impeccable first.
|
||||
|
||||
---
|
||||
|
||||
|
||||
@@ -1,16 +1,13 @@
|
||||
---
|
||||
name: audit
|
||||
description: Perform comprehensive audit of interface quality across accessibility, performance, theming, and responsive design. Generates scored report with severity ratings and actionable plan.
|
||||
args:
|
||||
- name: area
|
||||
description: The feature or area to audit (optional)
|
||||
required: false
|
||||
description: "Perform a comprehensive audit of interface quality across accessibility, performance, theming, and responsive design. Generates a scored report with severity ratings and actionable plan. Use when the user wants a design review, accessibility check, quality audit, or a full list of UI issues to fix."
|
||||
argument-hint: "[area (feature, page, component...)]"
|
||||
user-invocable: true
|
||||
---
|
||||
|
||||
Run systematic quality checks and generate a comprehensive audit report with quantitative scoring, prioritized issues, and an actionable plan. Don't fix issues — document them for other commands to address.
|
||||
|
||||
**First**: Use the frontend-design skill for design principles and anti-patterns.
|
||||
**First**: Invoke {{command_prefix}}frontend-design for design principles and anti-patterns.
|
||||
|
||||
## Diagnostic Scan
|
||||
|
||||
|
||||
@@ -1,10 +1,7 @@
|
||||
---
|
||||
name: bolder
|
||||
description: Amplify safe or boring designs to make them more visually interesting and stimulating. Increases impact while maintaining usability.
|
||||
args:
|
||||
- name: target
|
||||
description: The feature or component to make bolder (optional)
|
||||
required: false
|
||||
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."
|
||||
argument-hint: "[target]"
|
||||
user-invocable: true
|
||||
---
|
||||
|
||||
@@ -12,7 +9,7 @@ Increase visual impact and personality in designs that are too safe, generic, or
|
||||
|
||||
## MANDATORY PREPARATION
|
||||
|
||||
Use the frontend-design skill — 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 teach-impeccable first.
|
||||
Invoke {{command_prefix}}frontend-design — 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 {{command_prefix}}teach-impeccable first.
|
||||
|
||||
---
|
||||
|
||||
|
||||
@@ -1,10 +1,7 @@
|
||||
---
|
||||
name: clarify
|
||||
description: Improve unclear UX copy, error messages, microcopy, labels, and instructions. Makes interfaces easier to understand and use.
|
||||
args:
|
||||
- name: target
|
||||
description: The feature or component with unclear copy (optional)
|
||||
required: false
|
||||
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."
|
||||
argument-hint: "[target]"
|
||||
user-invocable: true
|
||||
---
|
||||
|
||||
@@ -12,7 +9,7 @@ Identify and improve unclear, confusing, or poorly written interface text to mak
|
||||
|
||||
## MANDATORY PREPARATION
|
||||
|
||||
Use the frontend-design skill — 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 teach-impeccable first. Additionally gather: audience technical level and users' mental state in context.
|
||||
Invoke {{command_prefix}}frontend-design — 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 {{command_prefix}}teach-impeccable first. Additionally gather: audience technical level and users' mental state in context.
|
||||
|
||||
---
|
||||
|
||||
|
||||
@@ -1,10 +1,7 @@
|
||||
---
|
||||
name: colorize
|
||||
description: Add strategic color to features that are too monochromatic or lack visual interest. Makes interfaces more engaging and expressive.
|
||||
args:
|
||||
- name: target
|
||||
description: The feature or component to colorize (optional)
|
||||
required: false
|
||||
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."
|
||||
argument-hint: "[target]"
|
||||
user-invocable: true
|
||||
---
|
||||
|
||||
@@ -12,7 +9,7 @@ Strategically introduce color to designs that are too monochromatic, gray, or la
|
||||
|
||||
## MANDATORY PREPARATION
|
||||
|
||||
Use the frontend-design skill — 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 teach-impeccable first. Additionally gather: existing brand colors.
|
||||
Invoke {{command_prefix}}frontend-design — 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 {{command_prefix}}teach-impeccable first. Additionally gather: existing brand colors.
|
||||
|
||||
---
|
||||
|
||||
|
||||
@@ -1,16 +1,13 @@
|
||||
---
|
||||
name: critique
|
||||
description: Evaluate design effectiveness from a UX perspective. Assesses visual hierarchy, information architecture, emotional resonance, cognitive load, and overall design quality with quantitative scoring, persona-based testing, and actionable feedback.
|
||||
args:
|
||||
- name: area
|
||||
description: The feature or area to critique (optional)
|
||||
required: false
|
||||
description: "Evaluate design effectiveness from a UX perspective. Assesses visual hierarchy, information architecture, emotional resonance, cognitive load, and overall design quality with quantitative scoring, persona-based testing, and actionable feedback. Use when the user asks to review, critique, evaluate, or give feedback on a design, UI, or component."
|
||||
argument-hint: "[area (feature, page, component...)]"
|
||||
user-invocable: true
|
||||
---
|
||||
|
||||
## MANDATORY PREPARATION
|
||||
|
||||
Use the frontend-design skill — 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 teach-impeccable first. Additionally gather: what the interface is trying to accomplish.
|
||||
Invoke {{command_prefix}}frontend-design — 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 {{command_prefix}}teach-impeccable first. Additionally gather: what the interface is trying to accomplish.
|
||||
|
||||
---
|
||||
|
||||
|
||||
@@ -1,10 +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.
|
||||
args:
|
||||
- name: target
|
||||
description: The feature or area to add delight to (optional)
|
||||
required: false
|
||||
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."
|
||||
argument-hint: "[target]"
|
||||
user-invocable: true
|
||||
---
|
||||
|
||||
@@ -12,7 +9,7 @@ Identify opportunities to add moments of joy, personality, and unexpected polish
|
||||
|
||||
## MANDATORY PREPARATION
|
||||
|
||||
Use the frontend-design skill — 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 teach-impeccable first. Additionally gather: what's appropriate for the domain (playful vs professional vs quirky vs elegant).
|
||||
Invoke {{command_prefix}}frontend-design — 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 {{command_prefix}}teach-impeccable first. Additionally gather: what's appropriate for the domain (playful vs professional vs quirky vs elegant).
|
||||
|
||||
---
|
||||
|
||||
|
||||
@@ -1,10 +1,7 @@
|
||||
---
|
||||
name: distill
|
||||
description: Strip designs to their essence by removing unnecessary complexity. Great design is simple, powerful, and clean.
|
||||
args:
|
||||
- name: target
|
||||
description: The feature or component to distill (optional)
|
||||
required: false
|
||||
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."
|
||||
argument-hint: "[target]"
|
||||
user-invocable: true
|
||||
---
|
||||
|
||||
@@ -12,7 +9,7 @@ Remove unnecessary complexity from designs, revealing the essential elements and
|
||||
|
||||
## MANDATORY PREPARATION
|
||||
|
||||
Use the frontend-design skill — 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 teach-impeccable first.
|
||||
Invoke {{command_prefix}}frontend-design — 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 {{command_prefix}}teach-impeccable first.
|
||||
|
||||
---
|
||||
|
||||
|
||||
@@ -1,10 +1,7 @@
|
||||
---
|
||||
name: extract
|
||||
description: Extract and consolidate reusable components, design tokens, and patterns into your design system. Identifies opportunities for systematic reuse and enriches your component library.
|
||||
args:
|
||||
- name: target
|
||||
description: The feature, component, or area to extract from (optional)
|
||||
required: false
|
||||
description: "Extract and consolidate reusable components, design tokens, and patterns into your design system. Identifies opportunities for systematic reuse and enriches your component library. Use when the user asks to create components, refactor repeated UI patterns, build a design system, or extract tokens."
|
||||
argument-hint: "[target]"
|
||||
user-invocable: true
|
||||
---
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
name: frontend-design
|
||||
description: Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications. Generates creative, polished code that avoids generic AI aesthetics.
|
||||
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."
|
||||
license: Apache 2.0. Based on Anthropic's frontend-design skill. See NOTICE.md for attribution.
|
||||
---
|
||||
|
||||
@@ -22,7 +22,7 @@ Individual skills may require additional context — check the skill's preparati
|
||||
**Gathering order:**
|
||||
1. **Check current instructions (instant)**: If your loaded instructions already contain a **Design Context** section, proceed immediately.
|
||||
2. **Check .impeccable.md (fast)**: If not in instructions, read `.impeccable.md` from the project root. If it exists and contains the required context, proceed.
|
||||
3. **Run teach-impeccable (REQUIRED)**: If neither source has context, you MUST run the teach-impeccable skill NOW before doing anything else. Do NOT skip this step. Do NOT attempt to infer context from the codebase instead.
|
||||
3. **Run teach-impeccable (REQUIRED)**: If neither source has context, you MUST run {{command_prefix}}teach-impeccable NOW before doing anything else. Do NOT skip this step. Do NOT attempt to infer context from the codebase instead.
|
||||
|
||||
---
|
||||
|
||||
|
||||
@@ -84,6 +84,78 @@ For tooltips, dropdowns, and non-modal overlays, use native popovers:
|
||||
|
||||
**Benefits**: Light-dismiss (click outside closes), proper stacking, no z-index wars, accessible by default.
|
||||
|
||||
## Dropdown & Overlay Positioning
|
||||
|
||||
Dropdowns rendered with `position: absolute` inside a container that has `overflow: hidden` or `overflow: auto` will be clipped. This is the single most common dropdown bug in generated code.
|
||||
|
||||
### CSS Anchor Positioning
|
||||
|
||||
The modern solution uses the CSS Anchor Positioning API to tether an overlay to its trigger without JavaScript:
|
||||
|
||||
```css
|
||||
.trigger {
|
||||
anchor-name: --menu-trigger;
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
position: fixed;
|
||||
position-anchor: --menu-trigger;
|
||||
position-area: block-end span-inline-end;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
/* Flip above if no room below */
|
||||
@position-try --flip-above {
|
||||
position-area: block-start span-inline-end;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
```
|
||||
|
||||
Because the dropdown uses `position: fixed`, it escapes any `overflow` clipping on ancestor elements. The `@position-try` block handles viewport edges automatically. **Browser support**: Chrome 125+, Edge 125+. Not yet in Firefox or Safari - use a fallback for those browsers.
|
||||
|
||||
### Popover + Anchor Combo
|
||||
|
||||
Combining the Popover API with anchor positioning gives you stacking, light-dismiss, accessibility, and correct positioning in one pattern:
|
||||
|
||||
```html
|
||||
<button popovertarget="menu" class="trigger">Open</button>
|
||||
<div id="menu" popover class="dropdown">
|
||||
<button>Option 1</button>
|
||||
<button>Option 2</button>
|
||||
</div>
|
||||
```
|
||||
|
||||
The `popover` attribute places the element in the **top layer**, which sits above all other content regardless of z-index or overflow. No portal needed.
|
||||
|
||||
### Portal / Teleport Pattern
|
||||
|
||||
In component frameworks, render the dropdown at the document root and position it with JavaScript:
|
||||
|
||||
- **React**: `createPortal(dropdown, document.body)`
|
||||
- **Vue**: `<Teleport to="body">`
|
||||
- **Svelte**: Use a portal library or mount to `document.body`
|
||||
|
||||
Calculate position from the trigger's `getBoundingClientRect()`, then apply `position: fixed` with `top` and `left` values. Recalculate on scroll and resize.
|
||||
|
||||
### Fixed Positioning Fallback
|
||||
|
||||
For browsers without anchor positioning support, `position: fixed` with manual coordinates avoids overflow clipping:
|
||||
|
||||
```css
|
||||
.dropdown {
|
||||
position: fixed;
|
||||
/* top/left set via JS from trigger's getBoundingClientRect() */
|
||||
}
|
||||
```
|
||||
|
||||
Check viewport boundaries before rendering. If the dropdown would overflow the bottom edge, flip it above the trigger. If it would overflow the right edge, align it to the trigger's right side instead.
|
||||
|
||||
### Anti-Patterns
|
||||
|
||||
- **`position: absolute` inside `overflow: hidden`** - The dropdown will be clipped. Use `position: fixed` or the top layer instead.
|
||||
- **Arbitrary z-index values** like `z-index: 9999` - Use a semantic z-index scale: `dropdown (100) -> sticky (200) -> modal-backdrop (300) -> modal (400) -> toast (500) -> tooltip (600)`.
|
||||
- **Rendering dropdown markup inline** without an escape hatch from the parent's stacking context. Either use `popover` (top layer), a portal, or `position: fixed`.
|
||||
|
||||
## Destructive Actions: Undo > Confirm
|
||||
|
||||
**Undo is better than confirmation dialogs**—users click through confirmations mindlessly. Remove from UI immediately, show undo toast, actually delete after toast expires. Use confirmation only for truly irreversible actions (account deletion), high-cost actions, or batch operations.
|
||||
|
||||
@@ -1,10 +1,7 @@
|
||||
---
|
||||
name: harden
|
||||
description: Improve interface resilience through better error handling, i18n support, text overflow handling, and edge case management. Makes interfaces robust and production-ready.
|
||||
args:
|
||||
- name: target
|
||||
description: The feature or area to harden (optional)
|
||||
required: false
|
||||
description: "Improve interface resilience through better error handling, i18n support, text overflow handling, and edge case management. Makes interfaces robust and production-ready. Use when the user asks to harden, make production-ready, handle edge cases, add error states, or fix overflow and i18n issues."
|
||||
argument-hint: "[target]"
|
||||
user-invocable: true
|
||||
---
|
||||
|
||||
|
||||
@@ -1,10 +1,7 @@
|
||||
---
|
||||
name: normalize
|
||||
description: Normalize design to match your design system and ensure consistency
|
||||
args:
|
||||
- name: feature
|
||||
description: The page, route, or feature to normalize (optional)
|
||||
required: false
|
||||
description: "Audits and realigns UI to match design system standards, spacing, tokens, and patterns. Use when the user mentions consistency, design drift, mismatched styles, tokens, or wants to bring a feature back in line with the system."
|
||||
argument-hint: "[feature (page, route, component...)]"
|
||||
user-invocable: true
|
||||
---
|
||||
|
||||
@@ -12,7 +9,7 @@ Analyze and redesign the feature to perfectly match our design system standards,
|
||||
|
||||
## MANDATORY PREPARATION
|
||||
|
||||
Use the frontend-design skill — 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 teach-impeccable first.
|
||||
Invoke {{command_prefix}}frontend-design — 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 {{command_prefix}}teach-impeccable first.
|
||||
|
||||
---
|
||||
|
||||
|
||||
@@ -1,16 +1,13 @@
|
||||
---
|
||||
name: onboard
|
||||
description: Design or improve onboarding flows, empty states, and first-time user experiences. Helps users get started successfully and understand value quickly.
|
||||
args:
|
||||
- name: target
|
||||
description: The feature or area needing onboarding (optional)
|
||||
required: false
|
||||
description: "Designs and improves onboarding flows, empty states, and first-run experiences to help users reach value quickly. Use when the user mentions onboarding, first-time users, empty states, activation, getting started, or new user flows."
|
||||
argument-hint: "[target]"
|
||||
user-invocable: true
|
||||
---
|
||||
|
||||
## MANDATORY PREPARATION
|
||||
|
||||
Use the frontend-design skill — 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 teach-impeccable first. Additionally gather: the "aha moment" you want users to reach, and users' experience level.
|
||||
Invoke {{command_prefix}}frontend-design — 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 {{command_prefix}}teach-impeccable first. Additionally gather: the "aha moment" you want users to reach, and users' experience level.
|
||||
|
||||
---
|
||||
|
||||
|
||||
@@ -1,10 +1,7 @@
|
||||
---
|
||||
name: optimize
|
||||
description: Improve interface performance across loading speed, rendering, animations, images, and bundle size. Makes experiences faster and smoother.
|
||||
args:
|
||||
- name: target
|
||||
description: The feature or area to optimize (optional)
|
||||
required: false
|
||||
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."
|
||||
argument-hint: "[target]"
|
||||
user-invocable: true
|
||||
---
|
||||
|
||||
|
||||
@@ -1,10 +1,7 @@
|
||||
---
|
||||
name: overdrive
|
||||
description: Push interfaces past conventional limits with technically ambitious implementations. Whether that's a shader, a 60fps virtual table, spring physics on a dialog, or scroll-driven reveals — make users ask "how did they do that?"
|
||||
args:
|
||||
- name: target
|
||||
description: The feature or area to push into overdrive (optional)
|
||||
required: false
|
||||
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."
|
||||
argument-hint: "[target]"
|
||||
user-invocable: true
|
||||
---
|
||||
|
||||
@@ -19,7 +16,7 @@ Push an interface past conventional limits. This isn't just about visual effects
|
||||
|
||||
## MANDATORY PREPARATION
|
||||
|
||||
Use the frontend-design skill — 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 teach-impeccable first.
|
||||
Invoke {{command_prefix}}frontend-design — 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 {{command_prefix}}teach-impeccable 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.
|
||||
|
||||
|
||||
@@ -1,16 +1,13 @@
|
||||
---
|
||||
name: polish
|
||||
description: Final quality pass before shipping. Fixes alignment, spacing, consistency, and detail issues that separate good from great.
|
||||
args:
|
||||
- name: target
|
||||
description: The feature or area to polish (optional)
|
||||
required: false
|
||||
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."
|
||||
argument-hint: "[target]"
|
||||
user-invocable: true
|
||||
---
|
||||
|
||||
## MANDATORY PREPARATION
|
||||
|
||||
Use the frontend-design skill — 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 teach-impeccable first. Additionally gather: quality bar (MVP vs flagship).
|
||||
Invoke {{command_prefix}}frontend-design — 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 {{command_prefix}}teach-impeccable first. Additionally gather: quality bar (MVP vs flagship).
|
||||
|
||||
---
|
||||
|
||||
|
||||
@@ -1,10 +1,7 @@
|
||||
---
|
||||
name: quieter
|
||||
description: Tone down overly bold or visually aggressive designs. Reduces intensity while maintaining design quality and impact.
|
||||
args:
|
||||
- name: target
|
||||
description: The feature or component to make quieter (optional)
|
||||
required: false
|
||||
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."
|
||||
argument-hint: "[target]"
|
||||
user-invocable: true
|
||||
---
|
||||
|
||||
@@ -12,7 +9,7 @@ Reduce visual intensity in designs that are too bold, aggressive, or overstimula
|
||||
|
||||
## MANDATORY PREPARATION
|
||||
|
||||
Use the frontend-design skill — 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 teach-impeccable first.
|
||||
Invoke {{command_prefix}}frontend-design — 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 {{command_prefix}}teach-impeccable first.
|
||||
|
||||
---
|
||||
|
||||
|
||||
@@ -1,10 +1,7 @@
|
||||
---
|
||||
name: typeset
|
||||
description: Improve typography by fixing font choices, hierarchy, sizing, weight consistency, and readability. Makes text feel intentional and polished.
|
||||
args:
|
||||
- name: target
|
||||
description: The feature or component to improve typography for (optional)
|
||||
required: false
|
||||
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."
|
||||
argument-hint: "[target]"
|
||||
user-invocable: true
|
||||
---
|
||||
|
||||
@@ -12,7 +9,7 @@ Assess and improve typography that feels generic, inconsistent, or poorly struct
|
||||
|
||||
## MANDATORY PREPARATION
|
||||
|
||||
Use the frontend-design skill — 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 teach-impeccable first.
|
||||
Invoke {{command_prefix}}frontend-design — 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 {{command_prefix}}teach-impeccable first.
|
||||
|
||||
---
|
||||
|
||||
|
||||
Reference in New Issue
Block a user