a66996ac10
Knowledge vault (Orion/PARA) migrated from the pre-Orion 484vault on 2026-10-01. Deliberately orphaned: prior history contained a plaintext password and stays local-only on branch archive/pre-boilerplate-history. Secrets and live Hermes state are gitignored.
86 lines
No EOL
3.3 KiB
Markdown
86 lines
No EOL
3.3 KiB
Markdown
```
|
||
I want you to install and use Impeccable to improve the frontend/UI of this project.
|
||
|
||
Official documentation:
|
||
https://impeccable.style/docs/
|
||
|
||
Follow this process carefully:
|
||
|
||
1. Inspect the current project and identify:
|
||
- Framework and version
|
||
- Package manager
|
||
- Available scripts
|
||
- Styling solution
|
||
- Component library
|
||
- Existing design tokens or theme files
|
||
- Main entry points and important UI screens
|
||
|
||
2. Verify whether Impeccable is already installed for Hermes.
|
||
Check for:
|
||
- .hermes/skills/impeccable/
|
||
- Any existing Impeccable SKILL.md file
|
||
- PRODUCT.md
|
||
- DESIGN.md
|
||
- Existing Impeccable configuration or hooks
|
||
|
||
3. If Impeccable is not installed, install it for this project using the official method:
|
||
npx impeccable install
|
||
|
||
Select Hermes Agent when prompted and choose a project-local installation.
|
||
|
||
If the official installer does not work, inspect the Impeccable documentation and use the Hermes-compatible fallback installation method. Do not invent a custom implementation unless necessary.
|
||
|
||
4. After installation:
|
||
- Confirm that the Impeccable skill is available to Hermes.
|
||
- Reload or restart the relevant Hermes session if required.
|
||
- Verify the skill using Hermes’s skill discovery mechanism.
|
||
- Do not continue until you have confirmed that Impeccable is installed or clearly explain the exact blocker.
|
||
|
||
5. Initialize Impeccable for this project:
|
||
/impeccable init
|
||
|
||
Use the project files and existing UI to determine the product context. Create or update PRODUCT.md with:
|
||
- What the product does
|
||
- Its target users
|
||
- The primary user goals
|
||
- The important workflows
|
||
- Brand, technical, and accessibility constraints
|
||
- Anything that must not be changed
|
||
|
||
6. Document the existing visual system separately:
|
||
/impeccable document
|
||
|
||
Preserve good existing design decisions. Do not replace the entire UI with a generic template.
|
||
|
||
7. Analyze the current interface before making changes. Run the most appropriate Impeccable reviews, including:
|
||
- /impeccable critique
|
||
- /impeccable audit
|
||
- /impeccable polish
|
||
|
||
Focus on hierarchy, usability, accessibility, responsive behavior, spacing, typography, visual consistency, loading states, empty states, error states, and interaction feedback.
|
||
|
||
8. Propose a prioritized improvement plan before editing code. Separate the plan into:
|
||
- Critical usability or accessibility problems
|
||
- High-impact visual improvements
|
||
- Medium-priority consistency improvements
|
||
- Optional polish
|
||
|
||
9. Implement the improvements incrementally. Reuse the project’s existing components and styling conventions where appropriate. Avoid:
|
||
- Unnecessary rewrites
|
||
- Random gradients
|
||
- Excessive rounded cards
|
||
- Generic AI-dashboard styling
|
||
- Poor color contrast
|
||
- Unnecessary dependencies
|
||
- Breaking existing behavior
|
||
|
||
10. After implementation:
|
||
- Run the project’s type checks, linting, tests, and build commands.
|
||
- Run the Impeccable audit again.
|
||
- Check responsive layouts and important states.
|
||
- Fix any regressions you introduce.
|
||
- Summarize every changed file and the reason for each change.
|
||
|
||
Start by checking the installation status and repository structure. Do not modify application code until the installation and initial inspection are complete.
|
||
|
||
``` |