pi-skills/frontend/SKILL.md

name, description

name	description
frontend	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.

Hard rule

If you choose a skill that depends on frontend-design, your order must include frontend-design before that skill. Skipping it or placing it later is wrong routing.

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
• Motion + personality: frontend-design → animate, add delight for charm and quieter for restraint

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.