pocopine-skills

Use when turning a Claude Design (or any mockup/design) into a well-structured pocopine app — choosing app architecture (a store plus layout/leaf components), translating inline styles into Pine Stylekit, wiring icons and resizable regions, and verifying the result.

Use when working with the pocopine Pine icons feature — the `icon!` proc macro for compile-time Rust SVG embedding, or the `<pine-icon>` template primitive with `register_icons!` for tree-shaking-friendly template rendering.

Use when building styles with Pine Stylekit, the Pocopine-native utility-CSS compiler, or working with @theme tokens and CSS generation in Rust/WASM projects

Use when building enter/leave transitions, layout animations, stagger effects, or spring-physics motion in pocopine components

Use when implementing authentication in pocopine apps — JWT verification, credentials, OAuth providers, session management, or guards

Use when defining background jobs, enqueueing work, configuring workers, or troubleshooting job execution in pocopine apps

Use when setting up or working with Pocopine's managed .client.ts modules for importing npm SDKs (Firebase, analytics, etc.) with typed Rust facades

Use when deploying a pocopine full-stack or static app to Fly.io, Railway, Render, or other hosts using the RFC 080 deploy contract

Use when implementing keyboard navigation, floating positioning, element observation, focus management, scroll locking, or accessibility wiring in pocopine components

Use when setting up tracing, logging, analytics, or observability events in a pocopine application—both frontend and backend.

Use when building SVG-first, unstyled, accessible charts in pocopine with line, area, bar, scatter, pie, or custom layered visualizations

Use when building Rust/WASM rich-text editors with the Pine document model, schema setup, markdown round-trips, or table extensions

Use when installing app or server plugins—wiring observability, auth, live queries, or other optional integrations into a pocopine app.

Use when authoring pocopine template directives (pp-*), understanding directive syntax, modifiers, args, host constraints, or migrating from removed directives (pp-init/pp-cloak/pp-data)

Use when writing or debugging {{expr}} interpolation and pine-expr expressions in .poco templates (paths, operators, ternary, calls, assignment, magic variables like $index/$event/$store/$route).

Use when writing or debugging pocopine .poco template syntax, single-root rules, component tags, SVG namespace support, or template compilation in the pocopine framework.

Use when working with the pocopine-cli: build, dev watch, run, deploy, doctor, env, js, stylekit, lsp commands

Use when defining, structuring, or debugging pocopine Components — the #[component] and #[handlers] macros, #[prop]/#[model] fields, templates, lifecycle hooks, and component composition patterns.

Use when building state management and reactivity in pocopine — understand the reactive model, App stores, and provide/inject context

Use when building SPA routes, implementing route guards/loaders, configuring pp-route links, or handling route navigation in pocopine.

Use when authoring component stylesheets with automatic CSS scoping to a single component.

Use when defining typed async server functions with `#[server]` macro, implementing access policies via guards, and calling them from the wasm client with `dispatch!` for async state updates.

Use when building or integrating components with default/named slots, scoped slots with pp-let, pp-as polymorphic rendering, or multi-component composition patterns in pocopine

Use when integrating object storage (S3/GCS/Azure) with resumable uploads, presigned/multipart/sequential transfer strategies, or browser-based file uploads

Use when building offline-first data sync features or live invalidation in Pocopine apps — implementing sync streams, mutations, subscriptions, or multi-tenant filtered queries with local persistence.