@blackbelt-technology/pi-dashboard-frontend-patterns

Frontend implementation-pattern skills for pi sessions — accessibility-a11y (WCAG, keyboard nav, focus, ARIA), component-architecture (reusable card/section/form/layout patterns), responsive-mobile-first (sticky headers, drawers, floating CTAs, touch), ta

Packages

Package details

skill

Install @blackbelt-technology/pi-dashboard-frontend-patterns from npm and Pi will load the resources declared by the package manifest.

npm repo home report

$ pi install npm:@blackbelt-technology/pi-dashboard-frontend-patterns

Package: @blackbelt-technology/pi-dashboard-frontend-patterns
Version: 0.7.0
Published: Jul 24, 2026
Downloads: 589/mo · 171/wk
Author: mbotond
License: MIT
Types: skill
Size: 45.8 KB
Dependencies: 0 dependencies · 0 peers

Pi manifest JSON

{
  "skills": [
    ".pi/skills/accessibility-a11y",
    ".pi/skills/component-architecture",
    ".pi/skills/responsive-mobile-first",
    ".pi/skills/tailwind-shadcn",
    ".pi/skills/typescript-strict",
    ".pi/skills/zod-react-hook-form"
  ]
}

Security note

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

README

@blackbelt-technology/pi-dashboard-frontend-patterns

A pi package — skills only, no tools — with frontend implementation patterns for React / Tailwind / shadcn projects.

Generic: works in any React/Tailwind/shadcn project.

Install

pi install npm:@blackbelt-technology/pi-dashboard-frontend-patterns
# or try without installing:
pi -e npm:@blackbelt-technology/pi-dashboard-frontend-patterns

Skills

Skill	What it does
`accessibility-a11y`	Semantic HTML, keyboard navigation, focus states, ARIA labels, skip links, WCAG contrast.
`component-architecture`	Reusable component patterns for cards, sections, forms, and layouts with consistent prop interfaces.
`responsive-mobile-first`	Mobile-first responsive patterns: sticky headers, floating CTAs, accessible navigation, touch interactions.
`tailwind-shadcn`	Tailwind CSS utility patterns with shadcn/ui components, theming via CSS variables, responsive design.
`typescript-strict`	TypeScript strict-mode patterns: interfaces, type guards, generics, utility types, nullable handling.
`zod-react-hook-form`	Form validation combining Zod schemas with React Hook Form, localized errors, Server Action integration.

Skills load by natural-language trigger, or explicitly via /skill:<name>.

How loading works

Pure-skill package: package.json pi.skills points pi at each skill directory. No extension.ts, no build step.

License

MIT