omp packages

@sentiolabs/pi-frontend-design0.1.1

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

GitHub Actions Published 5 months ago Apache-2.0 ~235 downloads/mo

Untested on omp

This is a pi package. No one has reported whether it works on omp yet. If you try it, add your result below.

Did it work for you?

Result

One report per person. A new report replaces your old one.

Reports 0

No reports yet.

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: