npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2026 – Pkg Stats / Ryan Hefner

ultimate-design-skill

v0.6.0

Published

Self-contained OKF design workflow for AI agents: DESIGN.md contracts, rendered UI checks, project-wide motion audits, critique/repair, and governed delivery.

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

aa2246740aa2246740

Keywords

codex-skillclaude-code-skillpi-agent-skillagent-skillsdesignokfdesign-systemdesign-to-codefrontendpresentationmotion-designanimation-auditvisual-verification

Readme

Ultimate Design

A design workflow skill for AI agents.

It turns a design request into a usable result: clarify the brief, create a DESIGN.md when needed, load relevant design knowledge, make the artifact, critique and repair it, then verify what users will see.

Works with Codex, Claude Code, Pi Agent, and other compatible Agent Skill hosts.

OKF BundleDex

Install

npx ultimate-design-skill@latest --target codex
npx ultimate-design-skill@latest --target claude-code
npx ultimate-design-skill@latest --target pi-agent

See integrations/README.md for project-scoped, shared, and manual installation.

Use

Use $ultimate-design to turn this report into a clear visual web page. Create DESIGN.md if needed, make the page, critique it, repair it, and verify the rendered result.

Use --pro when you want to agree on the important design choices before implementation.

Portable Specialist mode (optional)

Default is single-agent. For multi-domain or high-risk work with independent decision clusters, the skill can use Portable Specialist mode: an Integrator routes concern-cluster work orders, specialists return packets only, and the Integrator remains the sole final writer of the artifact and DESIGN.md.

Use $ultimate-design in Portable Specialist mode for this public multi-domain landing page.
Keep Active OKF count-free. Route Narrative, Visual, and Interaction work orders on a file blackboard.
If the host cannot spawn workers, run the same protocol as serial role-passes.
Integrate, resolve conflicts, run co-constraint checks, then verify with validate_okf_usage.

Details: skill/ultimate-design/references/multi-agent-mode.md and templates under skill/ultimate-design/templates/.

What It Covers

  • Websites and marketing pages
  • Product UI, dashboards, and flows
  • HTML decks and presentation strategy
  • Posters, social graphics, and print direction
  • Brand systems, design audits, and content design
  • Project-wide motion audits and evidence-backed repair

How It Works

  1. Keep the user's request anchored.
  2. Build a content and design contract.
  3. Load only the relevant OKF knowledge.
  4. Choose a direction and make the artifact.
  5. Critique, repair, and verify it.
  6. Leave enough context for the next Agent to continue.

Verification

Visual work should be rendered and reviewed before delivery. Use the host Agent's available browser, renderer, screenshot, and accessibility tools; record what was checked and any limits. The bundled HTML validators are optional deterministic tools for environments that provide their compatible runtime.

For development checks:

npm run flow-check
npm run okf-graph-check
npm run agent-handoff-check
npm run check-integrations

License

MIT