pi-frontend-create

A Pi skill that creates distinctive, production-grade frontend interfaces — designed to avoid the repetitive patterns common in AI-generated web design.

Why this skill exists

When AI agents design frontends, they tend to converge on the same patterns: Playfair Display + DM Sans, dark themes with grain overlays, centered hero sections, teal/cyan accent colors, fade-up scroll reveals. This skill explicitly identifies and avoids those patterns, producing designs that feel genuinely crafted.

What it does

• Provides a detailed banned pattern list of 25+ specific AI design clichés
• Offers constructive alternatives for typography, color, layout, interaction, and structure
• Includes a 13-point anti-pattern checklist to verify output before delivery
• Guides a design process grounded in contextual anchoring, not random generation

Installation

pi install npm:pi-frontend-create

Or install from the Codeberg repository:

pi install git:codeberg.org/parkerHurst/pi-frontend-create

Or install from a local path:

pi install /path/to/frontend-create

Usage

The skill activates automatically when you ask Pi to build web UI components, pages, or applications. You can also invoke it directly:

/skill:frontend-create

Key principles

1. Choose lesser-known typefaces — no Playfair Display, Syne, Unbounded, Fraunces, or Space Grotesk as primary fonts
2. Use abstract CSS variable names — --ink, --paper, --signal, not --espresso, --moss, --caramel
3. Break the hero-centered layout formula — try split grids, left-aligned heroes, or asymmetric compositions
4. Use animations sparingly — one well-timed animation beats five simultaneous fade-ups
5. Let backgrounds be colored — cream, pale yellow, warm grey, dusty rose — not just black or white
6. Design for the specific brief — a coffee shop should feel different from a music streaming service

File structure

skills/
  frontend-create/
    SKILL.md        # Skill instructions
    LICENSE.txt     # Apache 2.0 license
    banner.html     # Source for the catalog banner image
    banner.png      # 16:9 banner for the Pi Packages Catalog

Links

• Repository: https://codeberg.org/parkerHurst/pi-frontend-create
• Pi Packages Catalog: https://pi.dev/packages

License

Apache-2.0