Borrowing it
Nothing to install: this file belongs to PackmindHub/packmind. Take a copy, put it at the same path in your own repository, and replace the rules that are about this project with yours.
curl -O https://raw.githubusercontent.com/PackmindHub/packmind/main/.claude/skills/working-with-playground-app/SKILL.mdgit clone --depth 1 https://github.com/PackmindHub/packmindWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/packmindhub/packmind/working-with-playground-app)<a href="https://agentmods.dev/skills/packmindhub/packmind/working-with-playground-app"><img src="https://agentmods.dev/badge/skills/packmindhub/packmind/working-with-playground-app.svg" alt="Measured on agentmods" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00072 | $0.01819 |
| Opus 5 | $0.00036 | $0.00910 |
| Sonnet 5 | $0.00014 | $0.00364 |
| Haiku 4.5 | $0.00007 | $0.00182 |
Grade A, and why
working-with-playground-app scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 6d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 182 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Working With the Playground App
Overview
The playground app (apps/playground/) is a standalone Vite + React environment for iterating on UI/UX of Packmind features — both new and existing. Prototypes built here are meant to be easily convertible into production-ready code.
UX Design Thinking
Before writing any code, think like a UX designer. The playground exists to explore how a feature feels to use — not just how it looks. Apply these principles to every prototype:
Design All States First
Never prototype only the happy path. Before building, identify and plan for every state the user might encounter:
- Empty state — What does the user see before any data exists? Guide them toward the first action.
- Loading state — What appears while data is being fetched? Use skeletons or spinners to set expectations.
- Populated state — The standard view with data. Test with both minimal and full datasets.
- Error state — What happens when something fails? Show a clear message and a recovery path.
- Edge cases — What about a single item? Hundreds? An extremely long name that might overflow?
Prototype each state explicitly — use local state toggles or tabs to let reviewers switch between them.
Use Realistic, Varied Data
Mock data should stress-test the design, not just fill space:
- Include long names that could wrap or overflow, short names that could look sparse, and special characters.
- Vary counts: 0 items, 1 item, a handful, and many (50+). Layouts that work for 5 items often break at 50.
- Include missing optional fields — not every record will be complete.
- Use recognizable but realistic content so reviewers can evaluate readability, not just layout.
Design for Interaction
Prototypes should be clickable and stateful, not static mockups:
- Wire up buttons, toggles, and form inputs with local state so reviewers experience the flow.
- Simulate async operations (e.g., a brief delay before showing a success toast) to prototype timing and feedback.
- Show what happens after an action — does a list update? Does a confirmation appear? Does the user navigate somewhere?
What ships with it
1 file beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 6d ago First seen · 182 lines · 72 tokens per session scan A 8c9d9f1ef732
working-with-playground-app is a skill published in the GitHub repository PackmindHub/packmind (309 stars, last pushed yesterday), licensed Apache-2.0. It adds 72 tokens to every session and 1,819 once invoked, about $0.0004 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.
Other skills, from other repositories
vercel-composition-patterns
React composition patterns that scale. Use when refactoring components with boolean prop proliferation, building flexible component libraries, or designing reusable APIs. Triggers on tasks involving compound components, render props, context providers, or component architecture. Includes React 19 API changes.
aksel-builder
Expert builder for Aksel, the Nav / @navikt design system — React components, design tokens, layout primitives, theming (light/dark), icons, CSS, the Tailwind preset, version migrations, Figma-to-code. Triggers — Aksel, "using/with aksel", Nav/Navikt, "designsystemet", "design system", @navikt/ds- (e.g.…
skill-extract
Reverse-engineer design systems, tokens, and components from live products or screenshots.
shadcn
Current shadcn/ui component guidance for projects generated with Radix UI or Base UI, including primitive-specific composition, Tailwind CSS v4 theming, accessibility, forms, tables, and state patterns. Inspect the checked-in component implementation before applying Radix asChild or Base UI render APIs.
refactoring-ui
Apply UI design principles from Refactoring UI by Adam Wathan & Steve Schoger. Covers visual hierarchy (size, weight, color, spacing), layout systems (spacing scales, grids), typography (type scales, line-height, alignment), color (HSL palettes, shade systems, accessible contrast), depth (shadow elevation, overlap)…
web-artifacts-builder
Use when creating elaborate, multi-component claude.ai HTML artifacts with React, Tailwind CSS, shadcn/ui, state management, routing, or complex frontend structure; not for simple single-file HTML/JSX artifacts.