**Considering typography and skills**

Typeset is crucial for typography, especially with the constraints outlining typographic rules like using tabular numbers and limiting weights to 3-4. The constraints also guide aspects of frontend design, mentioning skills like combining dimensions and focusing on emotion. I’ll need to choose skills effectively since the user requested exactly three lines. So I plan to include “teach-impeccable,” “frontend-design,” and “polish.” However, I’m unsure about including "caveman," as it's not in the directory.

**Ordering skills and justifications**

I’ll include “caveman” based on the guidelines, even though the user might expect skills strictly from the directory. For the order: it should be "caveman -> teach-impeccable -> frontend-design -> onboard -> delight -> polish." I need to run “teach-impeccable” first since there's no .impeccable.md file. The justifications will be concise: “teach-impeccable” gathers design context; “frontend-design” enforces aesthetics; “onboard” creates the flow; “delight” adds personality while respecting usability; and “polish” ensures final quality. Let's keep it brief!

**Crafting the response format**

The user requested three specific lines: listing skills, their order, and a brief justification. I'll ensure each line is clear and concise without any internal newlines. The required skills will come from the constraints mentioned earlier, such as combining dimensions and ensuring no layout shifts. Although my task is only to select the skills, I’ll include “frontend-design” since it’s important for design principles. I’ll format the response correctly to meet their requirement.

**Determining project skills and brevity**

The 'Project AGENTS.md stewardship' indicates that every project needs an AGENTS.md file to be current, although this might not be necessary for this particular job. I need to keep my output brief. According to the project instructions, I'll pick skills that match the task description. The minimal skills I should choose to comply with frontend-design and onboarding are "teach-impeccable," "frontend-design," and "onboard," along with "caveman." This gives me four items altogether.

Skills: teach-impeccable, frontend-design, onboard, delight, polish, caveman
Order: caveman -> teach-impeccable -> frontend-design -> onboard -> delight -> polish
Why: teach-impeccable captures project design context; frontend-design enforces distinctive aesthetics; onboard builds the first-run flow; delight adds tasteful personality; polish ensures final quality; caveman per project policy.

**Finalizing the response**

I need to keep the response extremely concise while ensuring I follow the user's instructions. I'll load the "caveman" skill first, as specified. Now, I’ll format the response as three lines, making sure to use plain ASCII arrows as the user hasn’t specified a preference. Here’s the output:

Skills: teach-impeccable, frontend-design, onboard, delight, polish, caveman
Order: caveman -> teach-impeccable -> frontend-design -> onboard -> delight -> polish
Why: teach-impeccable captures design context, frontend-design enforces aesthetic rules, onboard crafts the flow, delight adds personality, polish ensures quality; caveman per project policy.

Skills: teach-impeccable, frontend-design, onboard, delight, polish, caveman
Order: caveman -> teach-impeccable -> frontend-design -> onboard -> delight -> polish
Why: teach-impeccable captures project design context (required), frontend-design sets the anti–AI-slop aesthetic/constraints, onboard builds the first-run flow, delight adds tasteful personality, polish ensures final quality; caveman per project policy (brief).


must-5ff2785c-0

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: ...

AGENTS.md

AGENTS.md

SKILL.md

SKILL.md

must-749f09bc-0

Invoke /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 /teach-impeccable first. Additionally gather: the "aha moment" you want users to reach, and users' experience level.

must-749f09bc-1

**CRITICAL**: Onboarding should get users to value as quickly as possible, not teach everything possible.

must-749f09bc-2

- Don't block access to product

must-749f09bc-3

- Don't patronize or over-explain

must-749f09bc-4

- Interactive when possible (do, don't just read)

must-749f09bc-5

- Celebrate completion (but don't overdo it)

must-749f09bc-6

- Dismissable (with "Don't show again" option)

must-749f09bc-7

- Unlock complexity gradually (don't show all options immediately)

- **Error state**: Failed to load (explain what happened, retry option)

Tippy.js

Tippy.js

Popper.js

Popper.js

Intro.js

Intro.js

Shepherd.js

Shepherd.js

must-749f09bc-8

**IMPORTANT**: Don't show same onboarding twice (annoying). Track completion and respect dismissals.

must-749f09bc-9

- Forget about returning users (don't show initial onboarding again)

NOTICE.md

NOTICE.md

must-d69237e5-0

This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.

must-d69237e5-1

Design skills produce generic output without project context. You MUST have confirmed design context before doing any design work.

must-d69237e5-2

- **Brand personality/tone**: How should the interface feel?

must-d69237e5-3

**CRITICAL**: You cannot infer this context by reading the codebase. Code tells you what was built, not who it's for or what it should feel like. Only the creator can provide this context.

.impeccable.md

.impeccable.md

.impeccable.md

.impeccable.md

must-d69237e5-4

3. **Run teach-impeccable (REQUIRED)**: If neither source has context, you MUST run /teach-impeccable NOW before doing anything else. Do NOT skip this step. Do NOT attempt to infer context from the codebase instead.

reference/typography.md

reference/typography.md

must-d69237e5-5

**DON'T**: Use overused fonts—Inter, Roboto, Arial, Open Sans, system defaults

must-d69237e5-6

**DON'T**: Use monospace typography as lazy shorthand for "technical/developer" vibes

must-d69237e5-7

**DON'T**: Put large icons with rounded corners above every heading—they rarely add value and make sites look templated

reference/color-and-contrast.md

reference/color-and-contrast.md

must-d69237e5-8

**DON'T**: Use gray text on colored backgrounds—it looks washed out; use a shade of the background color instead

must-d69237e5-9

**DON'T**: Use pure black (#000) or pure white (#fff)—always tint; pure black/white never appears in nature

must-d69237e5-10

**DON'T**: Use the AI color palette: cyan-on-dark, purple-to-blue gradients, neon accents on dark backgrounds

must-d69237e5-11

**DON'T**: Use gradient text for "impact"—especially on metrics or headings; it's decorative rather than meaningful

must-d69237e5-12

**DON'T**: Default to dark mode with glowing accents—it looks "cool" without requiring actual design decisions

reference/spatial-design.md

reference/spatial-design.md

must-d69237e5-13

**DON'T**: Wrap everything in cards—not everything needs a container

must-d69237e5-14

**DON'T**: Nest cards inside cards—visual noise, flatten the hierarchy

must-d69237e5-15

**DON'T**: Use identical card grids—same-sized cards with icon + heading + text, repeated endlessly

must-d69237e5-16

**DON'T**: Use the hero metric layout template—big number, small label, supporting stats, gradient accent

must-d69237e5-17

**DON'T**: Center everything—left-aligned text with asymmetric layouts feels more designed

must-d69237e5-18

**DON'T**: Use the same spacing everywhere—without rhythm, layouts feel monotonous

must-d69237e5-19

**DON'T**: Use glassmorphism everywhere—blur effects, glass cards, glow borders used decoratively rather than purposefully

must-d69237e5-20

**DON'T**: Use rounded elements with thick colored border on one side—a lazy accent that almost never looks intentional

must-d69237e5-21

**DON'T**: Use sparklines as decoration—tiny charts that look sophisticated but convey nothing meaningful

must-d69237e5-22

**DON'T**: Use rounded rectangles with generic drop shadows—safe, forgettable, could be any AI output

must-d69237e5-23

**DON'T**: Use modals unless there's truly no better alternative—modals are lazy

reference/motion-design.md

reference/motion-design.md

must-d69237e5-24

**DON'T**: Animate layout properties (width, height, padding, margin)—use transform and opacity only

must-d69237e5-25

**DON'T**: Use bounce or elastic easing—they feel dated and tacky; real objects decelerate smoothly

reference/interaction-design.md

reference/interaction-design.md

must-d69237e5-26

**DON'T**: Repeat the same information—redundant headers, intros that restate the heading

must-d69237e5-27

**DON'T**: Make every button primary—use ghost buttons, text links, secondary styles; hierarchy matters

reference/responsive-design.md

reference/responsive-design.md

must-d69237e5-28

**DO**: Adapt the interface for different contexts—don't just shrink it

must-d69237e5-29

**DON'T**: Hide critical functionality on mobile—adapt the interface, don't amputate it

reference/ux-writing.md

reference/ux-writing.md

must-d69237e5-30

**DON'T**: Repeat information users can already see

must-d69237e5-31

A distinctive interface should make someone ask "how was this made?" not "which AI made this?"

must-d69237e5-32

Review the DON'T guidelines above—they are the fingerprints of AI-generated work from 2024-2025.

must-d69237e5-33

Interpret creatively and make unexpected choices that feel genuinely designed for the context. No design should be the same. Vary between light and dark themes, different fonts, different aesthetics. NEVER converge on common choices across generations.

must-d69237e5-34

Remember: the model is capable of extraordinary creative work. Don't hold back—show what can truly be created when thinking outside the box and committing fully to a distinctive vision.

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

must-443f09b5-0

Invoke /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 /teach-impeccable first. Additionally gather: what's appropriate for the domain (playful vs professional vs quirky vs elegant).

must-443f09b5-1

**CRITICAL**: Delight should enhance usability, never obscure it. If users notice the delight more than accomplishing their goal, you've gone too far.

must-443f09b5-2

- Delight moments should be quick (< 1 second)

must-443f09b5-3

- Don't announce every delight moment

must-443f09b5-4

- Respect the user's state (don't be playful during critical errors)

must-443f09b5-5

- Delight should remain fresh with repeated use

**Playful error messages**:

"Error 404"

"Connection failed"

- Error state illustrations (friendly monsters, quirky characters)

- Error sounds (empathetic, not harsh)

must-443f09b5-6

- Don't play on every interaction (sound fatigue is real)

must-443f09b5-7

**WARNING**: Avoid cliched loading messages like "Herding pixels", "Teaching robots to dance", "Consulting the magic 8-ball", "Counting backwards from infinity". These are AI-slop copy — instantly recognizable as machine-generated. Write messages that are specific to what your product actually does.

Howler.js

Howler.js

must-443f09b5-8

- Make every interaction delightful (special moments should be special)

must-443f09b5-9

Remember: Delight is the difference between a tool and an experience. Add personality, surprise users positively, and create moments worth sharing. But always respect usability - delight should enhance, never obstruct.

must-f5d6ae86-0

Invoke /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 /teach-impeccable first. Additionally gather: quality bar (MVP vs flagship).

- Edge cases and error states

must-f5d6ae86-1

**CRITICAL**: Polish is the last step, not the first. Don't polish work that's not functionally complete.

- **Error**: Validation or error state

**Missing states create confusion and broken experiences**.

must-f5d6ae86-2

- **Loading states**: Images don't cause layout shift, proper aspect ratios

- **Error messages**: Helpful and consistent

must-f5d6ae86-3

- **Auto-focus**: Appropriate (don't overuse)

- **Error states**: Clear error messages with recovery paths

- **No content**: Handles missing data gracefully

must-f5d6ae86-4

- **No layout shift**: Elements don't jump after load (CLS)

- [ ] Error states are helpful

must-f5d6ae86-5

- **Check all states**: Don't just test happy path

Package.js

Package.js

must-142ec5e9-0

- What emotions should the interface evoke? (confidence, delight, calm, urgency, etc.)

must-142ec5e9-1

- What should this explicitly NOT look like? Any anti-references?

must-142ec5e9-2

- Any colors that must be used or avoided?

must-142ec5e9-3

[3-5 principles derived from the conversation that should guide all design decisions]

.impeccable.md

.impeccable.md

AGENTS.md

AGENTS.md

must-3c577455-0

reference/typography.md

reference/typography.md

must-3c577455-1

- **Combine dimensions**: Size + weight + color + space for strong hierarchy — don't rely on size alone

must-3c577455-2

- Use `tabular-nums` for data tables and numbers that should align

must-3c577455-3

- Don't use more than 3-4 weights (Regular, Medium, Semibold, Bold is plenty)