IMPORTANT: This is a real scenario. Choose which existing frontend skill or skills to load from this directory. Use any relevant skills in this directory that match the task. User request: "Build a distinctive onboarding experience for first-time users. It should feel polished and not like generic AI UI." Return exactly three lines: Skills: ...\nOrder: ...\nWhy: ...


total 8
drwxr-xr-x 1 alex alex  368 Apr 11 22:00 .
drwxr-xr-x 1 alex alex  122 Apr 11 17:42 ..
drwxr-xr-x 1 alex alex   16 Apr  9 11:27 adapt
-rw-r--r-- 1 alex alex 1090 Apr 11 22:00 AGENTS.md
drwxr-xr-x 1 alex alex   16 Apr  9 11:27 animate
drwxr-xr-x 1 alex alex   16 Apr  9 11:27 arrange
drwxr-xr-x 1 alex alex   16 Apr  9 11:27 audit
drwxr-xr-x 1 alex alex   16 Apr  9 11:27 bolder
drwxr-xr-x 1 alex alex   16 Apr  9 11:27 clarify
drwxr-xr-x 1 alex alex   16 Apr  9 11:27 colorize
drwxr-xr-x 1 alex alex   34 Apr  9 11:27 critique
drwxr-xr-x 1 alex alex   16 Apr  9 11:27 delight
drwxr-xr-x 1 alex alex   16 Apr  9 11:27 distill
drwxr-xr-x 1 alex alex   16 Apr  9 11:27 extract
drwxr-xr-x 1 alex alex   34 Apr  9 11:27 frontend-design
drwxr-xr-x 1 alex alex   16 Apr  9 11:27 harden
drwxr-xr-x 1 alex alex   16 Apr  9 11:27 normalize
drwxr-xr-x 1 alex alex   16 Apr  9 11:27 onboard
drwxr-xr-x 1 alex alex   16 Apr  9 11:27 optimize
drwxr-xr-x 1 alex alex   16 Apr  9 11:27 overdrive
drwxr-xr-x 1 alex alex   56 Apr 11 21:56 .pi
drwxr-xr-x 1 alex alex   16 Apr  9 11:27 polish
drwxr-xr-x 1 alex alex   16 Apr  9 11:27 quieter
-rw-r--r-- 1 alex alex 3664 Apr 11 22:04 SKILL.md
drwxr-xr-x 1 alex alex   16 Apr  9 11:27 teach-impeccable
drwxr-xr-x 1 alex alex   16 Apr  9 11:27 typeset


must-773feae7-0

AGENTS.md

AGENTS.md

SKILL.md

SKILL.md


---
name: frontend
description: Use when a task touches frontend UI/UX/design quality and the agent needs to choose which specialized frontend skill or combination of skills to load from this frontend skill pack.
---

# Frontend Skill Router

Pick the smallest set that matches the job.

## First checks

1. **Net-new UI or major visual direction work** → use `frontend-design`.
2. **No design context yet** and chosen skill says to invoke `frontend-design` → run `teach-impeccable` first if instructions and `.impeccable.md` do not already contain design context.
3. **If a chosen skill requires `frontend-design`, load it first. Do not skip it. Do not place it later in the sequence.**
4. **If a skill's own doc has mandatory prep, follow it.**

Skills that must route through `frontend-design`: `adapt`, `animate`, `arrange`, `audit`, `bolder`, `clarify`, `colorize`, `critique`, `delight`, `distill`, `normalize`, `onboard`, `overdrive`, `polish`, `quieter`, `typeset`.

## Choose by primary need

| Need | Skill |
|---|---|
| Build or redesign distinctive UI | `frontend-design` |
| Gather persistent design context once | `teach-impeccable` |
| Review UX/design quality | `critique` |
| Review technical UI quality: a11y, perf, theming, responsive | `audit` |
| Fix layout, spacing, hierarchy, composition | `arrange` |
| Improve typography and readability | `typeset` |
| Simplify, declutter, remove noise | `distill` |
| Tone down intensity without removing quality | `quieter` |
| Add color, warmth, palette energy | `colorize` |
| Make safe/bland UI more striking | `bolder` |
| Add joy, charm, personality | `delight` |
| Add purposeful motion and micro-interactions | `animate` |
| Push into technically ambitious wow-factor | `overdrive` |
| Improve onboarding, empty states, first-run flow | `onboard` |
| Fix labels, errors, helper text, instructions | `clarify` |
| Adapt for mobile, breakpoints, devices, contexts | `adapt` |
| Fix speed, jank, rendering, bundle/image cost | `optimize` |
| Fix resilience: errors, overflow, i18n, bad data | `harden` |
| Bring drifted UI back to system standards | `normalize` |
| Extract reusable components/tokens/patterns | `extract` |
| Final fit-and-finish before ship | `polish` |

## Common confusions

- `critique` vs `audit` → design judgment vs measurable implementation quality.
- `arrange` vs `polish` → structural layout pass vs final detail pass.
- `distill` vs `quieter` → remove complexity vs reduce visual intensity.
- `delight` vs `animate` → personality/joy vs motion mechanics.
- `normalize` vs `extract` → align to existing system vs create shared system assets.
- `bolder` vs `colorize` → stronger overall impact vs specifically more chroma.
- `optimize` vs `harden` → speed/smoothness vs resilience/edge cases.

## Common combos

- New feature: `frontend-design` → specialist skill(s) → `polish`
- UX + technical review: `frontend-design` → `critique` + `audit`
- Busy screen cleanup: `frontend-design` → `distill` + `arrange`, add `quieter` if still loud
- Repeated patterns + token drift: `extract` + `normalize`
- First-run experience: `frontend-design` → `onboard`, add `clarify`, `delight`, or `polish` only if explicitly needed

## Routing discipline

- Choose **1 primary skill** from the user's explicit ask.
- Add specialists only for clearly stated extra concerns or mandatory prep.
- Do **not** add speculative helpers just because they might help.
- `audit` is for review/check requests, not default build or refactor work.
- `polish` is for explicit final-pass or finishing-touch requests.
- `typeset` is for explicit typography/readability issues.


must-773feae7-0

AGENTS.md

AGENTS.md

SKILL.md

SKILL.md

must-d905351a-0

2. **No design context yet** and chosen skill says to invoke `frontend-design` → run `teach-impeccable` first if instructions and `.impeccable.md` do not already contain design context.

.impeccable.md

.impeccable.md

must-d905351a-1

3. **If a chosen skill requires `frontend-design`, load it first. Do not skip it. Do not place it later in the sequence.**

must-d905351a-2

Skills that must route through `frontend-design`: `adapt`, `animate`, `arrange`, `audit`, `bolder`, `clarify`, `colorize`, `critique`, `delight`, `distill`, `normalize`, `onboard`, `overdrive`, `polish`, `quieter`, `typeset`.


ENOENT: no such file or directory, access '/home/alex/.pi/agent/skills/frontend/.impeccable.md'


must-773feae7-0

AGENTS.md

AGENTS.md

SKILL.md

SKILL.md

must-d905351a-0

.impeccable.md

.impeccable.md

must-d905351a-1

must-d905351a-2


**Planning Skill Execution**

I need to remember to always load "caveman" in the Skills list. The user clarified they want to use the question tool for decisions, but their specific request doesn’t need further clarification. I also need to check SKILL.md: if 'frontend-design' is necessary, I should first run 'teach-impeccable' since it's missing design context. Afterward, I'll load 'frontend-design,' followed by 'onboard,' and ensure to include 'delight' and 'polish' as the user explicitly requested those features.

**Determining Skill Load Order**

I’m adding both skills since the user specifically requested characteristics matched by them. The plan is to set the order with 'teach-impeccable' first, followed by 'frontend-design.' The 'MUST DO' guidelines say that I should always load the 'caveman' skill, but it's not necessarily first. However, 'frontend-design' must come before other skills if it’s required. So, I'll ensure 'teach-impeccable' loads first, followed by 'frontend-design,' and then include 'caveman' at an appropriate time.

**Deciding Skill Loading Order**

While it's not mandatory to put 'caveman' first, it's wiser to load 'teach-impeccable' first because the .impeccable.md is missing. After that, the loading order should go 'frontend-design,' followed by 'onboard,' 'delight,' and 'polish.' Since 'caveman' is a meta-skill, I might include it at the start or the end, as the guidelines say to always load it but don’t specify its position. So, the order should be: teach-impeccable, frontend-design, onboard, delight, and polish.

**Organizing Skill Load Sequence**

I need to make sure all the appropriate skills are loaded. Since 'caveman' is a general skill, I might include it at the front. However, the 'frontend SKILL Router' suggests the sequence should start with 'teach-impeccable,' followed by 'frontend-design,' and so on. Including 'caveman' first doesn’t seem to conflict with the guidelines. For clarity, I could outline the order as: teach-impeccable, frontend-design, onboard, delight, polish, and then caveman overall.

**Crafting Skills Output**

Skills: teach-impeccable, frontend-design, onboard, delight, polish, caveman
Order: caveman → teach-impeccable → frontend-design → onboard → delight → polish
Why: teach-impeccable (seed design context), frontend-design (visual system), onboard (first-run flows), delight (personality), polish (finish), caveman (brief-mode)

**Constructing Final Response**

Skills: caveman, teach-impeccable, frontend-design, onboard, delight, polish
Order: caveman → teach-impeccable → frontend-design → onboard → delight → polish
Why: teach-impeccable (seeds design context), frontend-design (sets visual direction), onboard (builds first-run flow), delight (adds personality to avoid generic AI UI), polish (provides final fit-and-finish), caveman (ensures concise mode).

Skills: caveman, teach-impeccable, frontend-design, onboard, delight, polish
Order: caveman → teach-impeccable → frontend-design → onboard → delight → polish
Why: teach-impeccable seeds missing design context; frontend-design defines distinctive visual direction; onboard builds the first-run flow; delight injects non-generic personality; polish finishes details; caveman = brief mode.