@sentiolabs/pi-frontend-design

Frontend design skill for distinctive, production-grade Pi UI work.

Package details

← Back
skillprompt

Install @sentiolabs/pi-frontend-design from npm and Pi will load the resources declared by the package manifest.

npmhome report
$ pi install npm:@sentiolabs/pi-frontend-design
Package
@sentiolabs/pi-frontend-design
Version
0.1.1
Published
May 6, 2026
Downloads
not available
Author
bfirestone45
License
Apache-2.0
Types
skill, prompt
Size
20.5 KB
Dependencies
0 dependencies · 0 peers
Pi manifest JSON
{
  "skills": [
    "./skills"
  ],
  "prompts": [
    "./prompts/*.md"
  ]
}

Security note

Pi packages can execute code and influence agent behavior. Review the source before installing third-party packages.

README

Pi Frontend Design Package

Monorepo location: this package lives at packages/pi-frontend-design in the pi-nexus workspace. From the monorepo root, test it with npm test --workspace @sentiolabs/pi-frontend-design and load it locally with pi -e ./packages/pi-frontend-design.

Frontend design skill for Pi that helps coding agents create distinctive, production-grade interfaces without generic AI aesthetics.

This package is a Pi-native adaptation of Anthropic's frontend-design Claude plugin from claude-plugins-official/plugins/frontend-design.

What is included

  • frontend-design skill for frontend UI/UX implementation:
    • Bold aesthetic direction before coding.
    • Distinctive typography and color choices.
    • High-impact animation and visual detail guidance.
    • Context-aware implementation that avoids generic AI-generated layouts.
  • /frontend-design prompt alias so the package name can stay Pi-prefixed while the user-facing workflow remains concise.

Install from npmjs.org

Install globally through Pi:

pi install npm:@sentiolabs/pi-frontend-design

Install into the current project's .pi/settings.json instead of global settings:

pi install -l npm:@sentiolabs/pi-frontend-design

Test without installing permanently:

pi -e npm:@sentiolabs/pi-frontend-design

Install locally

From the pi-nexus monorepo root:

pi -e ./packages/pi-frontend-design

Install the local package into the current project's Pi settings:

pi install -l ./packages/pi-frontend-design

Usage

Ask Pi for frontend implementation work, invoke the prompt alias, or invoke the skill directly:

/frontend-design Create a dashboard for a music streaming app
/frontend-design Build a landing page for an AI security startup
/frontend-design Design a settings panel with dark mode
/skill:frontend-design Create a distinctive product page

The prompt alias routes the request to the frontend-design skill, which guides the agent to choose a clear aesthetic direction and implement production code with careful attention to visual detail.

Local development

npm test --workspace @sentiolabs/pi-frontend-design
npm run pack:dry-run --workspace @sentiolabs/pi-frontend-design
pi -e ./packages/pi-frontend-design --help

Learn more

See the Frontend Aesthetics Cookbook for detailed guidance on prompting for high-quality frontend design.

Attribution

Adapted from Anthropic's frontend-design Claude plugin under the Apache License 2.0.

Original authors: