David/WFDASH-WEBAPP
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
WFDASH-WEBAPP/.od-skills/impeccable-design-polish-804cc0a79c/SKILL.md
SJCoetz 7f924ccc45 refactor: switch hardcoded UI colors to semantic theme tokens 
Overhaul the app's color system by replacing all hardcoded Tailwind color classes with semantic theme variables to ensure consistent theming across all components, pages, and tests.

Additional changes:
- Add assigned date support for order item status updates: add `assignedDate` field to the order item status PATCH API, implement server-side normalization/validation, and add corresponding tests
- Refactor purchase order PDF workflows to use the consolidated `purchase_orders.documents` field instead of the legacy separate `purchase_order_pdfs` collection
- Fix quote number parsing and formatting to support both dashed (Q-YYYY-MM-NNN) and dashless (QYYYYMMNNN) formats
- Rename `driver_pool` item status to `collection_pool` across the codebase
- Add null handling for order item quantities and pricing to display "—" for missing values
- Improve filter tab styling: make mobile tabs scrollable, prevent text wrapping, hide scrollbar
- Add new utility scripts, API routes, migrations, and polish small UI/UX fixes including tsconfig updates and theme hook improvements
2026-07-07 17:22:03 +02:00

2.9 KiB
Raw Permalink Blame History

name description triggers od
impeccable-design-polish Follow-up design polish skill inspired by Impeccable. Use after a web or HTML artifact exists to audit, critique, polish, animate, harden, and prepare the page for a live/share pass.
impeccable
design polish
polish page
anti ai polish
critique design
animate page
harden ui
live review
反 AI 味
mode surface platform category upstream preview design_system craft example_prompt
prototype web desktop creative-direction https://github.com/pbakaus/impeccable
type
html
requires
true
requires
typography
color
anti-ai-slop
animation-discipline
accessibility-baseline
Use impeccable-design-polish on the current HTML artifact: audit visual hierarchy, remove AI tells, tighten copy, add restrained motion, and harden responsive/accessibility issues.

Impeccable Design Polish

Use this skill as the post-generation pass for an existing design. It should not restart the project from scratch; it should make the current artifact sharper, more usable, and closer to something a designer would ship.

Follow-Up Modes

  • Audit: identify the highest-impact issues in hierarchy, spacing, color, type, interaction states, responsiveness, and accessibility.
  • Critique: explain what feels generic, overdesigned, underdesigned, or inconsistent.
  • Polish: directly edit the artifact to improve the top issues while preserving the user's intent.
  • Animate: add restrained, useful motion only where it improves feedback or storytelling.
  • Harden: repair mobile overflow, text clipping, contrast problems, missing states, broken links, and fragile layout assumptions.
  • Live: prepare the artifact for presentation or sharing, including final visual QA and clear next actions.

Operating Rules

  1. Inspect the current HTML/page before editing. Do not guess from the prompt alone.
  2. Keep the existing content, brand, and scenario unless the user explicitly asks to change them.
  3. Prefer a few decisive fixes over broad cosmetic churn.
  4. Remove common AI tells:
    • purple-blue glow gradients with no product reason
    • generic 3-card feature rows
    • oversized rounded cards everywhere
    • empty marketing adjectives
    • inconsistent spacing and type scale
    • decorative effects that do not support comprehension
  5. Preserve accessibility: focus states, contrast, semantic controls, readable text, and reduced-motion fallbacks.
  6. Finish with the artifact in a better runnable state, not just a critique list.

Best Pairings

  • Pair with design-taste-frontend or gpt-taste for stronger anti-slop redesign work.
  • Pair with emilkowalski-motion or GSAP skills for motion-specific polish.
  • Pair with image/video skills when the artifact needs real visual assets rather than CSS-only decoration.